6. CSS语法与文本样式

6.1 css语法规范

由两部分组成，选择器及一条或多条声明

注意点：

①选择器是用于指定css样式的HTML标签，花括号是对该对象设置的具体样式

②属性与属性值以“键值对”的形式出现

③属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等

④属性和属性值之间用英文“;”分开

6.2 css选择器

可以分为基础选择器和复合选择器：①基础选择器由单个选择器组成；②基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器

6.2.1 标签选择器

①优点：能快速为页面中同类型的标签统一设置样式

②缺点：不能设计差异化样式，只能选择全部的当前标签

6.2.2 类选择器

①类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用

②样例

③ 注意点 ：类选择器用"."进行标识，后面紧跟类名（自己命名的）；

可以理解为给这个标签起了个名字，来表示；

长名称或词组可以使用横线来为选择器命名；

不要使用纯数字、中文等命名，尽量使用英文字母来表示；

命名要有意义；

类选择器也可以指定特殊的元素p.center{}

p.center和.center都对

/* 类选择器指定特殊元素 */
p.center {
  text-align: center;
}

6.2.3 多类名使用

①使用方式：在标签class属性中写多个类名；多个类名中间必须用空格分开；这个标签就可以分别具有这些类名的样式

②多类名开发使用场景：可以把一些标签元素相同的样式（共同的部分）放到一个类里面；这些标签都可以调用这个公共的类，然后再调用自己独有的类；可以节省CSS代码，统一修改也非常方便；开发中要多使用

6.2.4 id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，css中id选择器以"#"来定义

①口诀：样式#定义，结构id调用，只能给一个标签调用，别人切勿使用

②区别：类选择器可以调用多次；id选择器不能重复调用；类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和js搭配使用

6.2.5 通配符选择器

定义用"*"，他表示选取页面中所有元素（标签）

* {

color="red"}

6.2.6 总结

6.3 css字体属性

Fonts字体用于定义字体系列、大小、粗细、和文字样式（如斜体）

6.3.1 字体系列

font-family: '宋体';

注意点： 各种字体之间必须使用英文状态下的逗号隔开；一般情况，如果有空格隔开的多个单词组成的字体，加引号；尽量使用系统默认自带的字体，保证任何用户浏览器中都能正确使用

6.3.2 字体大小

font-size: 20px

注意点 ：

①px（像素）大小是网页的最常用单位

②谷歌浏览器默认为16px

③不同浏览器默认显示的字号大小不一致，尽量给定明确值，不要默认

④可以给body指定整个页面的大小：会自动引用

body {
  font-size: 16px;
}

⑤标题标签比较特殊，需要单独指定大小

6.3.3 字体粗细

font-weight: bold;

font-weight: 100；

注意点： ①粗体文字变细：尽量别用normal，多用数字

font-weight= 400;

②属性值100-700，400等同于normal，而700等同于bold，后面不需要跟单位

6.3.4 文字样式

font-style: normal；

属性值 ：

①normal：默认值，浏览器会显示标准的字体样式 font-style：normal；

②italic：浏览器会显示斜体的字体样式

6.3.5 字体符合属性

以上都对√，第一个用的是类选择器，第二个用的是标签选择器

注意点 ：

①样式font-style 粗细font-weight 大小/行高font-size/line-height 字体font-family

②使用font属性时，必须按照语法格式书写，不能更换顺序，并且各个属性以空格隔开

③不需要设置大的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

6.4 css test文本属性

6.4.1 文本颜色

定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

/* 文本颜色：预定义颜色 / 十六进制 / RGB */
p {
  color: red;
  /* color: #ff0000; */
  /* color: rgb(255, 0, 0); */
}

6.4.2 对齐文本

text-align属于用于设置元素内文本内容的 水平对齐 方式

属性值：left：左对齐（默认值）；right：右对齐；center：居中对齐

6.4.3 装饰文本

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等

a {
  text-decoration: none;
}
p {
  text-decoration: underline;
}

6.4.4 文本缩进

实现文本的第一行首行缩进自己指定的距离

20px往右边走；-20px往左边走

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小，如果此时写了2em则是当前元素2个文字大小的距离

p {
  text-indent: 2em;
}

6.4.5 行间距

行间距可以理解为由上间距、下间距和文字高度组成，实际代码改变的是上下间距的大小实现行间距改变的

p {
  line-height: 1.6;
}