一、什么是CSS
- CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式
二、CSS的语法
- CSS规则由两个主要部分构成：选择器以及一条或多条声明。每条声明由一个属性和一个值组成。属性(property)是设置的样式属性，每个属性有一个值，属性和值被冒号分开
selector {
property：value;
}
li {
color: red;
}
三、如何创建CSS
- 内部样式表
<head>
<style type="text/CSS">
选择器 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
div {
width:200px;
height:200px;
border:1px solid red;
}
</style>
</head>
- 行内式(内联样式)
<div style="width:100px;height:30px;border:1px solid black;"></div>
- 外部样式表(外链式)
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
四、CSS是如何工作的
graph TD
加载HTML --> 解析HTML --> 创建DOM树 --> 展示页面
加载CSS -->解析CSS --> 创建DOM树
五、CSS的选择器(Selector)
CSS的选择器分为两大类：基本选择题和扩展选择器。
基础选择器：
-
标签选择器：针对一类标签
-
ID选择器：针对某一个特定的标签使用
-
类选择器：针对你想要的所有标签使用
-
通用选择器（通配符）：针对所有的标签都适用（不建议使用）
拓展选择器：
-
后代选择器：用空格隔开
-
交集选择器：用
.隔开 -
并集选择器（分组选择器）：用逗号隔开
-
伪类选择器
六、CSS选择器的优先级
- 行内样式（1000）>ID选择器（100）>类选择器（10）>标签选择器（1）>通用选择器（0）
七、CSS 三大特性
层叠、继承、优先级
- CSS层叠性：是指多种CSS样式的叠加
- CSS继承性：是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。简单理解就是： 子承父业
- CSS优先级：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题
八、CSS的定位机制
CSS有三种基本定位机制：普通文档流、浮动、定位。
定位的含义是允许定义某个元素脱离其原来在普通文档流应该出现的正常位置，而是设置其相对于父元素、某个特定元素或浏览器窗口本身的位置。利用定位属性，可以建立列式布局，将布局的一部分与另一部分重叠，这种方法可以完成原来需要使用多个表格才能完成的任务，这种使用CSS定位的好处是可以根据浏览器窗口的大小进行内容显示的自适应
普通文档流中元素的位置由元素在HTML中的位置决定.
-
静态定位是元素默认的定位方式，是各个元素在HTML文档流中的默认位置:在静态定位方式中，无法通过位置偏移属性( top、 bottom、left或right )来改变元素的位置
-
相对定位是普通文档流的一部分，相对于本元素在文档流原来出现位置的左上角进行定位，可以通过位置偏移属性改变元素的位置。虽然其移动到其他位置，但该元素仍占据原来未移动时的位置，该元素移动后会导致其覆盖其他的框元素
-
绝对定位是脱离文档流的，不占据其原来未移动时的位置，是相对于父级元素或更高的祖先元素中有relative (相对)定位并且离本元素层级关系上最近元素的左上角进行定位。如果在祖先元素中没有设置relative定位时，就默认相对于body进行定位
-
固定定位是绝对定位的一种特殊形式， 是以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位
