CSS
指层叠样式表，用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，css文件扩展名为.css。样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
语法
Css规则由选择器及一条或多条声明两个部分构成：
选择器通常是需要改变的HTML元素。
每条声明由一个属性和一个值构成，声明总以;结束，用{}括起来，属性是设置的样式属性，每个属性都有一个值，属性和值被冒号分隔开。
注释：以/*开始，*/结束，用于解释代码，可随意编辑，浏览器会自动忽略
id选择器
可以为有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。（id属性不要以数字开头）
class选择器
用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
代码中用到多个可用空格分开。（类名第一个字符不能使用数字）
样式表
插入样式表的方法：外部样式表，内部样式表，内联样式表
外部样式表：当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部，外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
属性： rel="stylesheet":外部样式表 type="text/css":引用文档的类型
内部样式表：当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。
属性：type="text/css":引用文档的类型
内联样式表：由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式(style)属性。Style属性可以包含任何 CSS 属性。
多重样式：如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。 优先级：内联样式>内部样式>外部样式> 浏览器默认样式
注：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式
属性
背景
background简写属性，作用是将背景属性设置在一个声明中。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
background-color设置元素的背景颜色。
background-image把图像设置为背景。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。
背景颜色：background-color，页面的背景颜色使用在body的选择器中，css中，颜色值通常以十六进制，RGB，颜色名称定义
背景图像：background-image，默认情况下，背景图像会在页面的水平或者垂直方向平铺进行平铺重复显示，以覆盖整个元素实体。不想让图像平铺，可以使用 background-repeat 属性。可以利用 background-position 属性改变图像在背景中的位置
可将所有属性全部简化为background，例如body {background:#ffffff url('img_tree.png') no-repeat right top;}，简写属性顺序：background-color，background-image，background-repeat，background-attachment，background-position
文本
color设置文本颜色
direction设置文本方向。
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本
text-decoration向文本添加修饰
text-indent缩进元素中文本的首行
text-shadow设置文本阴影
text-transform控制元素中的字母
unicode-bidi设置或返回文本是否被重写
vertical-align设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing设置字间距
文本颜色：css中，颜色值通常以十六进制，RGB，颜色名称定义
文本对齐方式：文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐。当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐。
文本修饰：text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线
文本转换：用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。例如p.uppercase {text-transform:uppercase;}全为大写
p.lowercase {text-transform:lowercase;}全为小写p.capitalize {text-transform:capitalize;}首字母大写
文本缩进：指定文本第一行的缩进，p {text-indent:50px;}
字体
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size指定文本的字体大小
font-style指定文本的字体样式
font-variant以小型大写字体或者正常字体显示文本。
font-weight指定字体的粗细。
字体字型：分为两种，通用字体系列——拥有相似外观的字体系统组合，特定字体系列——一个特定的字体系列。
字体系列：font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。多个字体系列是用一个逗号分隔指明的。
字体样式：主要是用于指定斜体文字的字体样式属性。这个属性有三个值：正常——正常显示文本p.normal {font-style:normal;}，斜体——以斜体字显示的文字p.italic {font-style:italic;}，倾斜的文字——文字向一边倾斜（和斜体非常类似，但不太支持）p.oblique {font-style:oblique;}
字体大小：font-size 属性设置文本的大小，字体大小的值可以是绝对或相对的大小
绝对大小：设置一个指定大小的文本，不允许用户在所有浏览器中改变文本大小，确定了输出的物理尺寸时绝对大小很有用
相对大小：相对于周围的元素来设置大小，允许用户在浏览器中改变文字大小
如果不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）
可以用像素例如h1 {font-size:40px;}或em例如h1 {font-size:2.5em;}设置大小，还可以使用百分比和em组合，例如body {font-size:100%;} h1 {font-size:2.5em;}
链接
链接样式：链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于状态，这四个链接状态分别是
a:link——正常，未访问过的链接，a:visited——用户已访问过的链接，a:hover——当用户鼠标放在链接上时，a:active——链接被点击的那一刻
a:hover 必须在 a:link 和 a:visited 之后，a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果。
列表
list-style简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image将图像设置为列表项标志。
list-style-position设置列表中列表项标志的位置。
list-style-type设置列表项标志的类型。
作用：设置不同的列表项标记为有序列表，设置不同的列表项标记为无序列表，设置列表项标记为图像
在 HTML中，有两种类型的列表：无序列表 ul——列表项标记用特殊图形（如小黑点、小方框等），有序列表 ol——列表项的标记有数字或字母，使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。
list-style-type属性指定列表项标记的类型
简写属性顺序：list-style-type，list-style-position (有关说明，请参见下面的CSS属性表)，list-style-image如果上述值丢失一个，其余仍在指定的顺序，就没关系。
list-style-type:none 属性可以用于移除小标记。例如默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除。
表格
指定css边框，使用border属性
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
Width和height属性定义表格的宽度和高度，text-align属性设置水平对齐方式，向左，右，或中心
如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性
盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
Margin(外边距)——清除边框外的区域，是完全透明的，margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性，在CSS中，它可以指定不同的侧面不同的边距，有1-4个值 
Border(边框)——围绕在内边距和内容外的边框。
Padding(内边距)——length定义一个固定的填充(像素, pt, em,等)，%使用百分比值定义一个填充。清除内容周围的区域，是透明的，单独使用 padding 属性可以改变上下左右的填充，与margin一样，有四个值
Content(内容)——盒子的内容，显示文本和图像。
指定元素宽度和高度时，完整大小的元素不仅要有内容区域的宽高，还要添加内边距、边框、外边距
元素的总宽度：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
边框
border简写属性，用于把针对四个边的属性设置在一个声明。
border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color简写属性，设置元素的所有边框中可见部分的颜色，为 4 个边分别设置颜色。
border-bottom简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color设置元素的下边框的颜色。
border-bottom-style设置元素的下边框的样式。
border-bottom-width设置元素的下边框的宽度。
border-left简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color设置元素的左边框的颜色。
border-left-style设置元素的左边框的样式。
border-left-width设置元素的左边框的宽度。
border-right简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color设置元素的右边框的颜色。
border-right-style设置元素的右边框的样式。
border-right-width设置元素的右边框的宽度。
border-top简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color设置元素的上边框的颜色。
border-top-style设置元素的上边框的样式。
border-top-width设置元素的上边框的宽度。
border-radius设置圆角的边框。
CSS边框属性允许你指定一个元素边框的样式和颜色
样式由border-style属性用来定义
border-style值:
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
hidden：隐藏边框
mix：混合边框，例如p.mix {border-style: dotted dashed solid double;}
宽度由border-width 属性指定，有两种方式可以指定长度值，比如2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin（CSS 没有定义 3 个关键字的具体宽度，所以用户可以随意设置）
颜色由border-color属性设置，name——指定颜色的名称，如 "red"，RGB——指定 RGB 值, 如 "rgb(255,0,0)"，Hex——指定16进制值, 如 "#ff0000"（border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式，例如
）
单独设置各边，border-style属性可以有1-4个值：
border-style:dotted solid double dashed; 上边框是 dotted，右边框是 solid，底边框是 double，左边框是 dashed
border-style:dotted solid double; 上边框是 dotted，左、右边框是 solid，底边框是 double
border-style:dotted solid; 上、底边框是 dotted，右、左边框是 solid
border-style:dotted;四面边框是 dotted
轮廓
outline在一个声明中设置所有的轮廓属性
outline-color设置轮廓的颜色
outline-style设置轮廓的样式
outline-width设置轮廓的宽度
绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，outline 属性规定元素轮廓的样式、颜色和宽度
分组和嵌套选择器
分组选择器：为了减少代码，每个选择器用逗号分隔，例如
可变成
嵌套选择器：适用于选择器内部的选择器的样式，例如p{ }: 为所有 p 元素指定一个样式。.marked{ }: 为所有 class="marked" 的元素指定一个样式。.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
尺寸
height设置元素的高度。
line-height设置行高。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。
显示与可见性
隐藏元素可以把display属性设置为"none"，或把visibility属性设置为"hidden"。但这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。
内联元素：{display:inline;}，块元素：{display:block;}
定位
bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。
clip剪辑一个绝对定位的元素
cursor显示光标移动到指定的类型
left定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow设置当元素的内容溢出其区域时发生的事情。
overflow-y指定如何处理顶部/底部边缘的内容溢出元素的内容区域
overflow-x指定如何处理右边/左边边缘的内容溢出元素的内容区域
position指定元素的定位类型
right定义了定位元素右外边距边界与其包含块右边界之间的偏移。
top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
z-index设置元素的堆叠顺序
static 定位：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
fixed 定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠
relative 定位：相对定位元素的定位是相对其正常位置。原本所占的空间不会改变
absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html> 。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
sticky 定位：position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
重叠的元素：元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素，z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序
布局
overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条，只工作于指定高度的块元素上
浮动
clear指定不允许元素周围有浮动元素。
float指定一个盒子（元素）是否可以浮动。
会使元素向左或向右移动，其周围的元素也会重新排列。往往用于图像，但它在布局时一样非常有用
清除浮动——使用 clear，元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。
组合选择符
后代选择器(以空格分隔)，用于选取某元素的后代元素
子元素选择器(以>号分隔），子元素选择器只能选择作为某元素直接/一级子元素的元素。
相邻兄弟选择器（以+分隔），可选择紧接在另一元素后的元素，且二者有相同父元素。
普通（后继）兄弟选择器（以波~分隔）选取所有指定元素之后的相邻兄弟元素
伪类
伪类的语法：selector:pseudo-class {property:value;}，CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}
伪元素
伪元素的语法：selector:pseudo-element {property:value;}CSS类也可以使用伪元素：selector.class:pseudo-element {property:value;}
计数器
content使用 ::before 和 ::after 伪元素来插入自动生成的内容
counter-increment递增一个或多个值
counter-reset创建或重置一个或多个计数器
使用到以下几个属性：counter-reset——创建或者重置计数器，counter-increment——递增变量，content——插入生成的内容，counter() 或 counters() 函数——将计数器的值添加到元素，要使用 CSS 计数器，得先用 counter-reset 创建
!important规则
用于增加样式的权重。!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。
