CSS指的是层叠样式表（Cascading Style Sheets），是一种标记语言，控制网页布局，描述了如何在屏幕、纸张或其他媒体上显示HTML元素，并且节省了大量工作。它可以同时控制多张网页布局。CSS的引入方式有三种：内嵌式、外联式、行内式。内嵌式中css写在style标签中，style标签通常放在head中，作用范围是当前页面，使用场景为小案例中；外联式写在单独的CSS文件中，通过link标签引入，作用范围是多个页面，使用场景通常为项目中；行内式中css写在标签的style属性中，作用范围是当前标签，通常配合js使用。
1.CSS选择器
1.1 ID选择器
结构：#id属性值{ css属性名: 属性值; }；可以通过id属性值，找到页面中带有这个id属性值的标签，设置样式。所有标签上都有id属性，id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的。
1.2 类选择器
结构：class { css属性名: 属性值; }，通过类名，找到页面中所有带有这个类名的标签，设置样式。所有标签上都有class属性，class属性的属性值成为类名。
1.3 伪类选择器和伪元素选择器
伪类是将特殊的效果添加到特定的选择器上，而不会产生新元素；伪元素：在内容元素的前后插入额外的元素或样式，这些元素不在html文档中生成，只在外部可见。
两者的区别有：1.伪元素只能在选择器中出现一次，而且只在末尾出现。2.伪类只设置样式，不会创建新元素。而伪元素会创建新元素。3.伪类的效果可以通过添加实际的类来实现；伪元素也可以通过添加元素来实现。
2.字体和文本样式
字体样式有font-size(字体大小)、font-weight(字体粗细)、font-style(是否倾斜)等。文本样式有text-indent(文本缩进)、text-align(对齐方式)、text-decoration(文本修饰)等。
3.背景相关属性
3.1背景颜色:background-color
背景颜色默认值是透明的：rgba(0,0,0,0)或transparent;背景颜色不会影响盒子大小，一般在布局中使用，方便看清盒子大小和位置。
3.2背景图片
属性名：background-image；属性值：background-image: url(‘图片的路径’)。
背景图片默认是在水平和垂直方向平铺的；背景图片仅仅是指给盒子起到装饰效果，类似于背景不能撑开盒子。
4.元素的显示模式
4.1、块级元素
属性：display: block
特点：1.独占一行（一行只能显示一个）；2.宽度默认是父元素的宽度，高度默认由内容撑开；3.可以设置宽高。
代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer等。
4.2、行内元素
属性：display: inline
特点：1.一行可以显示多个;2.宽度和高度默认由内容撑开;3.不可以设置宽高。
代表标签：a、span、b、u、i、s、strong、ins、em、del等。
4.3、行内块元素
属性：display: inline-block
特点：1.一行可以显示多个；2.可以设置宽高
代表标签：input、textarea、button、select等
5.盒子模型
在页面中的每一个标签都可以看做是一个盒子；通过盒子的视角，可以更方便的进行布局，浏览器在渲染网页时会将网页中的元素看做是一个个的矩形区域，我们也叫盒子。
盒子模型由内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成。
