【第三章】CSS（一）------基础选择器、CSS的属性
前面两章，我们为大家介绍了HTML的相关属性，那么我们所说，网页是由HTML+CSS+JavaScript三者的所组成的，那么这一章，我们就从CSS的相关属性来讲。
CSS属性主要针对文本的外观属性和文本的样式属性，那么我们就先从这两个方面入手。而在前面，我们为了让CSS有更好的展示，先从写入文本的选择器开始介绍
基础选择器介绍
基础选择器有很多，有行内样式表，外部样式表、也有对于标签的简单选择器：类选择器，通配符选择器，id选择器等，我们下面来一一介绍。
行内样式表
行内样式表是写在标签当中的，可以附在标签的内容后面，但是行内样式表只对单个标签起作用，而对于多个标签则需要重复书写。案例如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内式引入css样式表</title>
</head>
<body>
<!--使用CSS行内样式表修饰二级标题的字号、颜色和对齐方式-->
<!--两个h2标签的样式一模一样，但使用行内样式表，必须在两个标签里重复书写-->
<h2 style="font-size:40px;color:red;text-align:center;">第一章门前有棵树</h2>
<h2 style="font-size:40px;color:red;text-align:center;">第二章一个人的战场</h2>
</body>
</html>如果需要对于两行都起作用，需要我们重复写，这就会大大增加我们的工作量。那么我们就可以使用一些选择器来简化我们的工作。
标签选择器
标签选择器是对于标签来说的，写上后会把范围内的标签都算上。在这一个html文件当中都具有效果的。并且对于标签内的内容，我们都可以用CSS属性给它指定属性。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<style type="text/css">
div
{
width:700px;
background-color:rgb(240,157,230);
margin: auto;
text-align: center;
}
h1{text-align:center,}
p{color: #0F0;font-family:"黑体";font-size:24px;}
strong{color:#00F;}
h1,h2,p{text-align:center;}
</style>
</head>
<body>
<div>
<h1>唐诗宋词一人生自有诗意</h1>
<h2>绝句·古木阴中系短篷</h2>
<strong><em>[宋]</em> 志南</strong>
<p>古木阴中系短篷，杖藜扶我过桥东。</p>
<p>沾衣欲湿香花雨，吹面不寒杨柳风。</p>
</div>
</body>
</html>这里注意是所有的标签都会匹配，但是有的标签我们是不想让它进行匹配，那么我们就可以使用类选择器和Id选择器来找出我们想要选择的特定的匹配项目。
类选择器
类选择器也是一类基础的选择器，类选择器在使用的时候我们使用class=""来指定我们在标签中想要使用的属性。在CSS部分我们使用.类名的方式来指定属性。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"></meta charset>
<title>类选择器</title>
<style type="text/css">
.green{color:green;text-decoration:underline;}
.red{color:red;}
.font22{font-size:22px;}
p{
text-decoration:underline;
font-family:"微软雅黑";
}
</style>
</head>
<body>
<h2 class="red">绝句·古木阴中系短篷</h2>
<p class="red">志南</p>
<p class="green font22">古木阴中系短篷，杖藜扶我过桥东。</p>
<p class="red font22">沾衣欲湿香花雨，吹面不寒杨柳风。</p>
</body>
</html>id选择器
Id选择器的使用方式和作用机制与类选择器基本一致，不同的地方在于id选择器通过id=""与#id名在CSS部分进行指定
html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
#bold{font-weight: bold;}
#font30{font-size: 30px;}
#font24{font-size: 24px;}
#red{color: red;}
</style>
</head>
<body>
<p id="bold">段落1：id="bold",设置粗体文字</p>
<p id="font30">段落2：id="font30",设置字体大小为30px</p>
<p id="font24 red">段落3：id="bold font24",同时设置字体颜色为红色和字号为24px。
效果为什么没有实现呢？去掉一个id属性试试。</p>
</body>
</html>这里段落效果没有实现的根本原因是：一个 HTML 元素只能有一个 id ，且 id 值必须是单个标识符（不能有空格）。想要同时应用多个样式，应该用 class 属性 。
通配符选择器
通配符选择器本意就是对于所有在当前html文档当中的元素都进行匹配，不管是什么标签的，一律进行匹配。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"></meta>
<title>通配符选择器</title>
<style type="text/css">
*{
color: #F00;
text-align:center;
background-color:Lgrey}
h1{color:green;}
/*类选择器*/
.bold{font-weight:900;}
#font{font-family:"隶书";
font-size:30px;
}
</style>
</head>
<body>
<h1>春晓</h1>
<p class="bold">唐孟郊</p>
<p id="font">春眠不觉晓，外处外闻蹄鸟。</p>
<p>夜来风雨声，花落知多少。</p>
</body>
</html>这就是我们所讲的所有内部样式使用CSS属性，同样的，也有外部的样式，外部样式就是使用外部的链接表，外部的样式就是外部的链接样式表
链接样式表
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式表2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style3-3.css">
</head>
<body>
<h1>《赏牡丹》</h1>
<p>唐·刘禹锡</p>
<p>庭前芍药妖无格，池上芙藥净少情。</p>
<p>唯有牡丹真国色，花开时节动京城。</p>
</body>
</html>外部样式表的内容如下图所示
css
@charset "UTF-8";
/* CSS Document */
h1{
font-family: "幼圆";
color: #72f50a;
text-align: center;
}
p{
font-family: "华文行楷";
font-size: 20px;
text-align: center;
color: #f716de;
}上面所写的就是我们经常使用的CSS链接的属性，那么下面我们就来说CSS的属性。
CSS属性
CSS当中的属性分为文本外观属性和背景样式属性两个模块来说。
文本外观属性
文本的外观属性就是对于文本的属性，文本内容所具有的属性。文本内容所具有的属性分为颜色，大小，行高，装饰等一系列的属性。接下来就把常用的属性配上例子来写：
color属性
color属性就是颜色属性，我们使用的是十六进制的RGB，就是red-green-blue三个属性。使用#加上三个十六进制的数字。或者是直接指定RGB即可。
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本颜色color</title>
<style>
.color1 {
color: #ff0000;
}
.color2 {
color: #f00;
}
.color3 {
color: rgb(0, 255, 102);
}
.color4 {
color: blue;
}
</style>
</head>
<body>
<p class="color1">用#六位十六进制数表示颜色</p>
<p class="color2">用#三位十六进制数表示颜色</p>
<p class="color3">用rgb（三个十进制数表示颜色）</p>
<p class="color4">用颜色名称表示颜色</p>
</body>
</html>text-align属性
用来指定文本的元素对齐，设计的有左对齐、右对齐、居中对齐三种规则。
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本对齐text-align</title>
<style>
/* 块级元素设置text-align属性，可以让自己包裹的内容居中、左对齐或右对齐 */
.align1 {
text-align: left;
}
.align2 {
text-align: center;
}
.align3 {
text-align: right;
}
div {
width: 400px;
height: 400px;
text-align: center;
background-color: pink;
}
/* 行内元素，设置text-align属性是无用的，因为它并不会独占整行，所以对齐方式对行内元素没有意义 */
/* 行内元素如果想要相对于父元素居中、左、右对齐，需要设置父元素的text-align属性 */
a,
span,
img,
input {
background-color: rgb(158, 224, 248);
}
img {
width: 200px;
}
span {
width: 100px;
text-align: center;
}
p {
height: 30px;
background-color: blue;
font-size: 12px;
color: white;
line-height: 30px;
}
</style>
</head>
<body>
<p class="align1">文本左对齐：你笑起来真好看，像春天的花儿一样。</p>
<p class="align2">文本居中对齐：你笑起来真好看，像春天的花儿一样。</p>
<p class="align3">文本右对齐：你笑起来真好看，像春天的花儿一样。</p>
<div>
<span>这是一个span标记</span><br>
<a href="#">这是一个超链接</a><br>
<img src="../images/spring.jpg" alt=""><br>
<input type="text">
</div>
</body>
</html>line-height属性
英语名字翻译过来就是行高的意思。line-height属性可以用以下几种形式进行表示：
1.px（像素值设置）
2.%（百分比设置）
3.em（字体行高的倍数）
4.也可以使用行高的属性进行计算
它的写法也可以这样表示：
| 写法 | 计算方式 |
|---|---|
| px（像素） | 固定值 |
| em | 字号 × 倍数 |
| %（百分比） | 字号 × 百分比 |
| 无单位数字（推荐） | 字号 × 倍数 |
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行高line-height的使用</title>
<style >
/* 1.倍数行距是相对于字体的倍数
2.无单位行距和有单位行距在继承行距时有区别，有单位继承的是父元素的行距，无单位继承的仅是倍数*/
.one {
font-size: 40px;
line-height: 18px;
/*使用像素值作为行高*/
background-color: #0FF;
}
.two {
font-size: 40px;
line-height: 2em;
/*em作行高，字体大小的倍数*/
background-color: #ff00ff;
}
.two p {
font-size: 20px;
/* line-height: 2em; */
background-color: #40f;
}
.three {
font-size: 40px;
line-height: 150%;
/*使用当前字体的百分比作行高*/
background-color: #a03030;
}
.three p {
font-size: 40px;
/*line-height:150%;*/
background-color: #fea;
}
.four {
font-size: 40px;
line-height: 2;
/*推荐使用,根据当前元素的font-size大小计算*/
background-color: pink;
}
.four p {
font-size: 20px;
/*line-height: 2;*/
background-color: orange;
}
</style>
</head>
<body>
<div class="one">
<p>段落1：使用像素px设置line-height。该段落字体大小为40px，line-height属性值为18px。</p>
</div>
<div class="two">
<p>段落2：父元素使用相对值em设置line-height。该段落字体大小20px，
继承父元素的行距。父元素字号40px，父元素行距2em，所以父元素行距是80px</p>
</div>
<div class="three">
<p>段落3：使用百分比%设置line-height。该段落字体大小为40px，line-height属性值为150%。所以行高为60px</p>
</div>
<div class="four">
<p>段落4：父元素使用无单位系数设置line-height。子元素未设置line-height属性，子元素继承父元素的无单位倍数，子元素段落字体大小为20px，子元素行高为当前元素字号的2倍，所以子元素的行高是40px</p>
</div>
</body>
</html>text-indent属性
text-indent属性是文本的首行缩进属性，同样我们可以指定像素，字号，与字号的百分比属性。text-indent 只缩进段落 第一行 ，后面各行保持原样。 2em 是最实用的写法，因为无论字号改成多大，始终缩进两个字符的距离。
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首行缩进text-indent</title>
<style>
p {
font-size: 14px;
}
.one {
font-size: 40px;
text-indent: 2em;
}
.two {
font-size: 20px;
text-indent: 50px;
}
.three {
font-size: 20px;
text-indent: 10%;
}
div {
width: 500px;
}
</style>
</head>
<body>
<p class="one">
这是段落1中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落1使用text-indent:2em;。这是段落1中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落1使用text-indent:2em;。
</p>
<p class="two">
这是段落2中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落2使用text-indent:50px;这是段落2中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落2使用text-indent:50px;
</p>
<div>
<p class="three">
这是段落3中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落3使用text-indent:200%;这是段落3中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落3使用text-indent:200%;
</p>
</div>
</body>
</html>text-decoration属性
文本的装饰属性，可以用来装饰文本。
| 属性 | 作用 |
|---|---|
| overline | 上划线 |
| underline | 下划线 |
| line-through | 删除线 |
| dotted | 小圆点 |
| dashed | 短横线 |
这就是我们常用的一些属性
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本装饰text-decoration</title>
<style>
body {
font-size: 50px;
}
.one {
text-decoration: underline;
}
.two {
text-decoration: overline dotted;
}
.three {
text-decoration: line-through;
}
.four {
text-decoration: underline line-through;
}
</style>
</head>
<body>
<p class="one">设置下划线（underline）</p>
<p class="two">设置上划线（overline）</p>
<p class="three">设置删除线（line-through）</p>
<p class="four">同时设置下划线和删除线（underline line-through）</p>
</body>
</html>text-transform属性
这个属性用于控制英文文本的大小写转换 ，有三个常用值：
| 属性值 | 作用 |
|---|---|
| uppercase | 全部转为大写 |
| lowercase | 全部转为小写 |
| capitalize | 每个单词首字母大写 |
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-transform属性</title>
<style>
body {
font-size: 50px;
}
h1 {
text-transform: uppercase
}
p.uppercase {
text-transform: uppercase
}
p.lowercase {
text-transform: lowercase
}
p.capitalize {
text-transform: capitalize
}
</style>
</head>
<body>
<h1>This Is An H1 Element</h1>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>
</body>
</html>text-overflow属性
这是文本溢出时所显示的属性
| 属性值 | 介绍 |
|---|---|
| clip | 直接裁剪，超出部分不显示，没有省略号 |
| ellipsis | 超出部分用 省略号 ... 替代 |
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow属性</title>
<style>
P {
font-size: 25px;
width: 200px;
height: 100px;
border: 1px solid blue;
white-space: nowrap;
/*强制文本不能换行*/
/* 修剪溢出文本，不显示省略标记"..." */
/* text-overflow: clip; */
/*用省略标记"..."标示被修剪文本*/
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<p>把很长的一段文本中溢出的内容隐藏，出现省略号,把很长的一段文本中溢出的内容隐藏，出现省略号</p>
</body>
</html>word-spacing和letter-spacing属性
这是表示字符间距和字母间距的属性，对于letter-spacing来说，控制每个字符/字母之间的间距，对中文也有效果。但是word-spacing控制的是每个单词 之间的间距（以空格分隔）无效，因为中文词间无空格。
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>word-spacing和letter-spacing</title>
<style>
p {
font-size: 40px;
}
.letter {
letter-spacing: 40px;
}
.word {
word-spacing: 40px;
}
</style>
</head>
<body>
<p class="letter">letter spacing(字符间距)</p>
<p class="word">word spacing word spacing(单词间距)</p>
</body>
</html>white-space属性
| 名称 | 属性 |
|---|---|
| normal | 默认，会换行 |
| pre | 保留一个空格，不换行 |
| nowrap | 多个空格，不换行 |
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>white-space空白符处理</title>
<style>
.one {
white-space: normal;
}
.two {
white-space: pre;
}
.three {
white-space: nowrap;
}
</style>
</head>
<body>
<p class="one">这个 段落中
有很多空格。此段落应用white-space:normal;。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。
</p>
<p class="two">这个 段落中 有很多
空格。此段落应用white-space:pre;。</p>
<p class="three">此段落应用white-space:nowrap;。这是一个较长的段落。这是一个
较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。
这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。</p>
</body>
</html>好的，上面就是我们所介绍的CSS的基础选择器和简单的文本外观属性。由于文本长度的考虑，本文就先介绍到这里。下面一章会为大家介绍更加复杂的选择器和背景的属性值。喜欢的朋友记得给个三连，我们下一章不见不散~