一.对css的认识

css是一种用来为结构化文档添加样式的语言（我把css理解为一个画笔，为html骨架赋予生命）

二.css语法

css中有选择器（选择要修饰的对象），属性名（选择修饰对象的某一个样式属性），属性值（样式的取值）

1.基础选择器

标签选择器

也称为元素选择器，使用HTML标签作为选择器的名称以标签名作为样式应用的依据

类选择器

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器 以标签的class属性作为样式应用的依据

注意

同时调用多个类选择器，以空格分隔
类选择器名称不能以数字开头

id选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配 以标签的id属性作为样式应用的依据，一对一的关系

2.复杂选择器

复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用

嵌套选择器

在某个选择器内部再设置选择器，通过空格隔开只有满足层次关系最里层的选择器所对应的标签才会应用样式

伪类选择器

根据不同的状态显示不同的样式，一般多用于 标签

四种状态：

• :link 未访问的链接
• :visited 已访问的链接
• :hover 鼠标悬浮到连接上，即移动在连接上
• :active 选定的链接，被激活

伪元素选择器

• :first-letter 为第一个字符的样式
• :first-line 为第一行添加样式
• :before 在元素内容的最前面添加的内容，需要配合content属性使用
• :after 在元素内容的最后面添加的内容，需要配合content属性使用

3.css常用属性

字体属性

font-size 字体大小尺寸 font-weight 字体粗细 font-family 字体种类

文本属性

color 颜色 line-height 行高 text-align 水平对齐方式 vertical-align 垂直对齐方式

背景属性

background-color 背景颜色
background-image 背景图片
background-repeat 背景图片的重复方式
background-position 背景图片的显示位置
background-attachment 背景图片是否跟随滚动

列表属性

list-style-type 设置列表前的标记
list-style-image 将图像作为列表前的标记
list-style-position 设置标记的位置

4.盒子模型

网页布局的基础，将页面中所有的元素看作一个盒子

• width 宽度
• height 高度
• border 边框
• padding 内边距
• margin 外边距

5.定位方式

通过position属性实现对元素的定位，有四种定位方式，设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right

相对定位

先设置元素的position属性为relative,然后再设置偏移量

绝对定位

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量
一般通过子绝父相进行布局

固定定位

先设置元素的position属性为fixed，然后再设置偏移量
设置元素为固定定位后，元素会浮动在面面上方

参考内容：MDN

个人理解:

css是赋予网页生命的标记语言，美化html，让html更漂亮，让页面布局更简单 在运用css时，要考虑选择器是否选择正确的元素，判断好选择器的优先级以及属性的继承，合理运用css，让布局更加完美。