css语法规范：
css规则由两个主要部分构成：选择器以及一条或多条声明。

CSS基础选择器

选择器（选择符）就是根据不同属性吧不同的标签选出来。

选择器分为基础选择器和复合选择器

  • 基础选择器是由单个选择器组成的
  • 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器

1.标签选择器（元素选择器）：

用HTML标签作为选择器，按标签名分类，为页面中某一类标签指定统一的css样式

  1. 语法
  3. 标签名 {
  4.             属性1：属性值1；
  5.             属性2：属性值2；
  6.             属性3：属性值3；
  7.          .....
  8. }

2.类选择器

如果差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
类选择器在HTML中以class属性表示，在css中，类选择器以一个点 “.”号显示

  1. 语法
  3. .类名 {
  4.         属性1：属性值1；
  5.         ....
  6. }
  8. 结构需要用class属性来调用

注意
①类选择器用“.”进行标识，后面紧跟类名
②长名称或组成可以使用中横线为选择器命名。
③不要使用纯数字、中文等命名，尽量使用英文字母来表示

多类名

给一个标签指定多个类名，从而达到更多的选择目的。

  1.  <div class="类名1 类名2 ">xxx</div>

（1）在标签class属性中写多个类名
（2）多个类名中间必须用空格分开

3.id选择器

id选择器可以为标有id的HTML元素特定的样式。
HTML元素以id元素来设置id选择器，css中id选择器以“#”来定义

  1. 语法
  2. #id名 {
  3.     属性1：属性值1；
  4.     ....
  5. }

id选择器：样式#定义，结构id定义，只能调用一次，其他不能使用

4.id选择器与类选择器的区别

①类选择器可以被多次使用，id选择器是唯一的，不得重复
②类选择器在修改样式中用的最多，id选择器一般用于页面唯一的元素上，经常和JavaScript搭配使用。

5.通配符选择器

在css中，通配符选择器使用“*”定义，表示选取页面中所有的元素（标签）

  1. * {
  3.   属性1：属性值1；
  4.   ....
  5. }
  • 通配符选择器不需要调用，自动就给所有的元素使用样式
  • 特殊情况下才使用，例如清除所有元素标签的内外边距。

6.总结

基础选择器 作用 特点 使用情况 用法
标签选择器 可以选择出所有相同的标签 不能差异化选择 较多 p { color : red;}
类选择器 可以选出1个或者多个标签 可以根据需求选择 非常多 .nav { color : red; }
id选择器 一次只能选择1个标签 id属性只能在每个HTML文档中出现一次 一般和js搭配 #nav { color ： red;}
通配符选择器 选择所有的标签 选择的太多，有部分不需要 特殊情况使用 * { color : red; }

CSS字体属性

css fonts（字体）属性用于定义系列、大小、粗细、和文本字体样式

  1. p { font-family: "微软雅黑";}
  2. div { font-family: Arial, "Microsoft Yahei","微软雅黑"; }
  • 各种字体之间必须用英文逗号隔开
  • 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
  • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确使显示。
  • 最常见的几个字体：body { font-family:’Microsoft YaHei’,tahama,arial,’Hirafino Sans GB’;}

1.字体大小

CSS使用font-size属性定义字体大小

  1. p {
  2.   font-size: 20px;
  3. }
  • ps（像素）大小是我们网页中最常用的单位
  • 谷歌浏览器默认大小为16px

2.字体粗细

css使用font-weight属性设置文本字体粗细

语法
font-family : normal | bold | bolder | light | number

normal：正常字体=相当于number为400
bold：粗体。相当于number700
bolder：特粗
lighter：细体
number：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

  • 实际开发中我们更提倡使用数字，表示加粗或者变细

3.文字样式

css使用font-style属性设置文本风格

属性值 作用
normal 默认值，标准字体样式
italic 倾斜

注意：一般很少给文字加斜体，反而要给斜体标签（em,i）给为不斜体。

4.字体复合属性

字体属性可以把以上文字样式综合来写，这样更节约代码

  1. div {
  3. /* font: font-style font-weight font-size/line-heigt font-family; */
  4.   注意顺序不能颠倒
  5. 例：
  6.   font：italic  700  16px/20px  'Micrsoft yahei'
  7. }
  • 使用font属性时，不能更换顺序，并且各个属性间以空格隔开
  • 不需要设置的属性可以省略，但是必须保留font-size和font-family属性，否则font属性将不起作用。

5.字体属性总结

属性 表示 注意点
font-size 字号 通常的单位为px,一定要跟上单位
font-family 字体 实际工作中按照团队约定来写字体
font-weight 字体粗细 加粗是700或bold， 不加粗是normal或者400
font-style 字体样式 倾斜是italic，不倾斜是normal
font 字体连写 1.字体连写一定要按顺序2.字号和字体必须同时出现

CSS文本属性

Css Text（文本）属性可定义文本的外观，比如文本颜色，对齐方式、文本缩进等。

1.文本颜色

color属性用于定义文本颜色

  1. 语法
  2. div {
  3.   color: red;
  4. }
表示方式 属性值
预定义的颜色值 red,green,blue等
十六进制 #FF0000 #FF6600等
RGB代码 regb(255,0,0)或rgb(100%,0%,0%)

2.对齐文本

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

  1. div {
  2.   text-align:center;
  3. }
属性值 解释
left 左对齐
right 右对齐
center 居中对齐

3.装饰文本

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

属性值 描述
none 默认没有装饰线（最常用）
underline 下划线。链接a自带下划线（常用）
overline 上划线（几乎不用）
line-through 删除线（不常用）

4.文本缩进

text-indent属性是用来指定文本的第一行的缩进，通常是将段落的首行缩进，

  1. div {
  2.   text-indent: 10px;
  3. }

通过设置该属性，所有元素的第一行可以缩进一个给定的长度，甚至改长度可以是负值。

  1. p {
  2.   text-indent: 2em;
  3. }

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

5.行间距

line-height属性用于设置行间的距离（行距），可以控制文字行与行之间的距离。

  1. p {
  2.   line-height:26px;
  3. }

6.文本属性总结

属性 表示 注意点
color 文本颜色 通常用十六进制
text-align 文本对齐 可以设定文字水平的对齐方式
text-indent 文本缩进 通常用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration 文本修饰 添加下划线 underline 取消下划线 none
line-height 行高 控制行与行之间的距离

CSS的引入方式

CSS三种样式表

按照css样式的书写位置，css可以分为三大类：
1.行内样式表（行内式）
2.内部样式表（嵌入式）
3.外部样式表（链接式）

1.内部样式表

内部样式表（内嵌式）是写到html页面内部。是将所以的css代码抽取出来，单独放到一个