1. 前言
CSS（Cascading Style Sheets，层叠样式表），用来为HTML文档添加样式的计算机语言。HTML中加载样式的方法有三种：
- 通过<link>标签加载外部样式表（External Style Sheet），即将外部样式表的URL作为<link>的href属性节点的值
- 通过<style>标签加载内部样式表（Internal Style Sheet），即将样式表文本作为<style>的文本节点
- 通过元素的style属性加载内联样式（Inline Style），即将样式作为style属性节点的值
优先级一般情况是：内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式
注：内部样式表和外部样式表的优先级 与 <link>和<style>先后顺序有关，排在后面的更优先。
2. 基础知识
注：css3部分会标红
|------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 分类 | 细化 | 示例 |
| 背景 | background: background-color background-image background-repeat background-attachment background-position | body { background-color: #000; background-image: url('smile.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } |
| 背景 | background-color: 背景颜色 1. #ffffff | rgb(255,255,255) | black 2. transparent，默认透明 3. inherit | body { background-color: #000; background-image: url('smile.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } |
| 背景 | background-image：背景图像 1. none，默认取值 2. url('URL') 3. linear-gradient(direction ,color-stop1 ,color-stop2,...) direction：角度值或方向关键词（45 deg | to right | to top | to bottom right） color-stop: #ffffff | rgb(255,255,255) | black 30% 4. radial-gradient(shape size at position , start*-color* , ..., last-color) shape: 径向形状 ellipse | circle，默认ellipse size: 径向大小 farthest-corner | closest-side | closest-corner | farthest-side position: 渐变的位置 top bottom center right left两两组合 或 x% y% start-color: #ffffff | rgb(255,255,255) | black 30% 5. repeating-linear-gradient() 重复线性渐变，参数同lInear-gradient() 6. repeating-radial-gradient() 重复径向渐变，参数同radial-gradien() 7. inherit 多重背景各背景引入 background-image: url('smile.gif'), url('cry.gif'); | body { background-color: #000; background-image: url('smile.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } |
| 背景 | background-repeat: 背景平铺 1. repeat-x 仅水平位置会重复背景图像 2. repeat-y 仅垂直位置 会重复背景图像 3. no-repeat 不会重复图像 多重背景各自平铺属性值 background-repeat: no-repeat, no-repeat; | body { background-color: #000; background-image: url('smile.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } |
| 背景 | background-attachment: 背景图像是否固定 1. scroll 背景图片随页面滚动，默认 2. fixed 背景图片不会随页面滚动 3. local 背景图像随元素内容滚动 4. intial 默认值 5. inherit 从父元素继承 | body { background-color: #000; background-image: url('smile.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } |
| 背景 | background-position: 背景图像起始位置 1. top bottom center right left两两组合 2. x% y%，默认0% 0% 3. xpos ypos 4. iniherit 多重背景各个背景位置 background-postion: rigth bottom, left top; | body { background-color: #000; background-image: url('smile.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } |
| 背景 | background-size: 指定图像的大小 1. length 背景图片的高度和宽度，第一个值设置宽度，第二个值设置高度，只给第一个值，第二个是设置为auto 2. % 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度，各个值之间以空格 隔开指定高和宽，以逗号 , 隔开指定多重背景 3. cover 时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小 4. contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小 | |
| 背景 | background-origin: 指定背景图像的位置区域 1. border-box 2. padding-box 3. content-box | |
| 背景 | background-clip: | |
| 文本 | color: 文本颜色，颜色名称 | #fff | rgb(255,255,255,1) | hsl | hsla | h1 { color: #fff; } |
| 文本 | text-align: 文本对齐 1. left 左对齐，默认值 2. right 右对齐 3. center 居中对齐 4. justify 两端对齐 5. inherit 从父元素继承 | h1 { text-align: justify; } |
| 文本 | text-align-last: 对齐最后一行或紧挨着强制换行符之前的行。 1. auto 默认值，最后一行被调整，并向左对齐 2. left 最后一行向左对齐 3. right 最后一行向右对齐 4. center 最后一行居中对齐 5. justify 最后一行被调整为两端对齐 6. start 最后一行在行开头对齐 7. end 最后一行在行末尾对齐 8. inital 设置该属性为它的默认值 9. inherit 从父元素继承 | h1 { text-align-last: right; } |
| 文本 | text-justify: text-algin设置为justify时所使用的对齐方法 1. auto 浏览器决定对齐方式 2. none 禁用齐行 3. inter-word 增加或减少单词间的间隔 4. inter-ideograph 用表单文本来排齐内容 5. inter-cluster 只对不包含内部单词间隔的内容进行排齐 6. distribute 类似报纸版面，除了在东亚语系中最后一行是不齐行的 7. kashida 通过拉伸字符来排齐内容 | h1 { text-align: justify text-justify: inter-word; } |
| 文本 | text-decoration: 文本装饰 text-decoration-line 1. none 默认 2. underline 文本下的一条线 3. overline 文本上的一条线 4. line-through 穿过文本的一条线 5. blink 闪烁文本 6. inherit 从父元素继承 text-decoration-style text-decoration-color | h1 { text-decoration: none; } |
| 文本 | line-height: 行高 1. normal 默认 2. number 数字 3. length 固定行间距 4. % 基于font-size百分比行间距 5. inherit 从父元素继承 | h1 { font-size: 14px; line-height: 15%; } |
| 文本 | text-shadow: h-shadow v-shadow blur color; h-shadow 水平阴影位置 v-shadow 垂直阴影位置 blur 模糊距离，可选 color 阴影颜色，可选 | h1 { text-shadow: 2px 2px 5px red; } |
| 文本 | text-indent: 文本首先缩进 1. length 固定缩进 2. % 基于父元素宽度百分比缩进 3. inherit 从父元素继承 | h1 { text-indent: 5%; } |
| 文本 | text-tranform: 文本转换 1. none 2. capitalize 文本中每个单词首字母大写 3. uppercase 文本中全部转为大写 4. lowercase 文本中全部转为小写 5. inherit 从父元素继承 | h1 { text-transform: lowercase; } |
| 文本 | letter-spacing: 字符间距 1. normal 默认 2. length 固定字符间距 3. inherit 从父元素继承l | h1 { letter-spacing: 2px; } |
| 文本 | word-spacing: 字间距 1. normal 默认 2. length 固定字间距 3. inherit 从父元素继承 | h1 { word-spacing: 2px; } |
| 文本 | white-space: 元素中空白的处理方式 1. normal 默认，空白会被浏览器忽略 2. pre 空白会被浏览器保留 3. nowrap 文本不换行，文本会在同一行上继续 4. pre-wrap 保留空白符序列，但正常换行 5. pre-line 合并空白符序列，但保留换行符 6. inherit 从父元素继承 | h1 { white-space: nowrap; } |
| 文本 | direction: 文本方向，ltr | rtl | inherit unicode-bidi: 设置或返回文本是否被重写 1. normal 默认，不使用嵌入层面 2. embed 创建一个附加的嵌入层面 3. bidi-override 创建一个附加的嵌入层面，重新排序于direction 4. inital 设置属性为它的默认值 5. inherit 从父元素继承属性 | h1 { direction: rtl; unicode-bidi: bidi-override; } |
| 文本 | text-emphasis: text-emphasis -style text-emphasis-color; 向元素的文本应用重点标记以及重点标记的前景色 text-emphasis -style 向元素的文本应用重点标记。 text-emphasis-color 定义重点标记的前景色 | h1 { text-emphasis: filled red; } |
| 文本 | word-break: 规定非中日韩文本的换行规则 1. normal 浏览器默认换行规则 2. break-all 允许单词内换行 3. keep-all 只能在半角空格或连字符处换行 | h1 { word-break: break-all; } |
| 文本 | word-wrap 允许对长的不可分割单词进行分割并换行到下一行 1. normal 只在允许的断字点换行，浏览器保持默认处理 2. break-word 在长单词或URL地址内部进行换行 | h1 { word-break: break-word; } |
| 字体 | font是font-style font-variant font-weight font-size/line-height font-family的简写形式 | h1 { font:italic bold 12px/30px Georgia, serif; } |
| 字体 | font-style: 文本的字体样式 1. normal 默认 2. italic 显示一个斜体的字体样式（需浏览器支持字符斜体） 3. oblique 显示一个倾斜的字符样式 4. inherit 从父元素继承 | h1 { font-style: italic; } |
| 字体 | font-variant： 以小型大写字体或正常字体显示文本 1. normal 默认 2. small-caps 浏览器会显示小型大写字母的字体 3. inherit 从元素继承 | h1 { font-variant: small-caps; } |
| 字体 | font-weight: 字体的粗细 1. normal 默认 2. bold 粗体字符 3. bolder 更粗的字符 4. lighter 更细的字符 5. {100, 200, 300, ..., 900} 由细到粗的字符 6. inherit 从元素继承 | h1 { font-weight: bolder; } |
| 字体 | font-size/line-height: 文本的字体大小 1. xx-small | x-small | small | medium | large | x-large | xx-large，默认medium 2. smaller 设置比父元素小 3. larger 设置比父元素大 4. length 固定值 5. % 基于父元素的%值 6. inherit 从父元素继承 | h1 { font-size: 14px; } |
| 字体 | font-family: 文本的字体系列 1. family-name 指定的系列名称 generic-family 通常字体系列名称 2. inherit 从父元素继承 | h1 { font-family: "Times New Roman", Times, serif; } |
| 字体 | @font-face { font-family: 字体名称 src: 字体文件URL font-stretch: 如何拉伸字体 font-style: normal | italic | oblique font-weight: 定义字体粗细 unicode-range: } 定义字体，从外引入字体文件 | @font-face { font-family: myFirstFont; src: url(xxx.woff) } div { font-family: myFirstFont; } |
| 链接 | a: link 正常，未访问过的链接 a: visited 已访问的链接 a: hover 鼠标悬浮于链接上 a: active 链接被点击时 | a:link { } a:visited { } a:hover { } a:active { } |
| 列表 | ul: 无序列表 ol: 有序列表 list-style: 是list-style-type list-style-position list-style-image的简写 | <略> |
| 列表 | list-style-type 1. none 无标记 2. disc 默认，实心圆 3. circle 空心圆 4. square 实心方块 5. decimal 数字 6. decimal-leading-zero 01, 02, 03 等 7. lower-roman 小写罗马数字i ii iii iv v 等 8. upper-roman 大写罗马数字 I II III IV V等 9. lower-alpha 小写英文字母 a b c d e 等 10. upper-alpha 大小英文字母 A B C D E 等 11. lower-greek 小写希腊字母 alpha, beta, gamma等 12. lower-latin 小写拉丁字母 a b c d e等 13. upper-latin 大写拉丁字母 A B C D E等 14. hebrew 传统希伯来编号方式 15. armenian 传统亚美尼亚编号方式 16. georgian 传统乔治亚编号方式 17. cjk-ideographic 简单的表意数字 18. hiagana 19. katakana 20. hiagrana-iroha 21. katakana-iroha | ul { list-style-type: decimal; } |
| 列表 | list-style-position 1. inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐 2. outside 默认，保持标记位于文本的左侧 3. inherit 从父元素继承 | ul { list-style-position: inside; } |
| 列表 | list-style-image 1. url('URL') 加载图形进来 2. none 默认，无图形显示 3. inherit 从父元素继承 | ul { list-style-image: url('test.png'); } |
| 盒子模型 | 边框：围绕在内边距和内容外的边框 ||
| 盒子模型 | border: border-width border-style border-color; border-top: border-top-width border-top-style border-top-color; border-right: border-right-width border-right-style border-right-color; border-bottom: border-bottom-width border-bottom-style border-bottom-color; border-left: border-left-width border-left-style border-left-color; | |
| 盒子模型 | border-style: 边框样式 border-top-style border-right-style border-bottom-style border-left-style 1. none 定义无边框 2. hidden 与none相同，对于table，解决边框突出 3. dotted 点状边框 4. dashed 虚线边框 5. solid 实线边框 6. double 双线边框，效果取决于border-width的值 7. groove 3D凹槽边框，取决于border-color 8. ridge 3D凸槽边框，取决于border-color 9. inset 3D 凹边边框，取决于border-color 10. outset 3D凸边边框，取决于border-color 11. inherit 从父元素继承 | div { width: 35px height: 35px; border-width: 1px; border-style: dotted; border-color: blue; } |
| 盒子模型 | border-width: 边框宽度 border-top-width border-right-width border-bottom-width bortder-left-width 1. thin: 定义细的边框 2. medium: 默认，定义中等边框 3. thick: 定义粗的边框 4. length: 自定义边框宽度 5. inherit: 从父元素继承 | |
| 盒子模型 | border-color: 边框颜色 border-top-color border-right-color border-bottom-color border-left-color 1. color: #fff | rgb | rgba | hsl | hsla 2. transparent: 透明颜色 3. inherit: 从父元素继承 | |
| 盒子模型 | border-radius: 边框圆角 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius 1. length: 使用固定值定义角的形状 2. % 使用%定义角的形状 | div { width: 35px height: 35px; border: 1px dotted blue; border-radius: 10px/5px; } |
| 盒子模型 | border-image: 设置所有边框的图像 1. source slice width outset repeat border-image-source 绘制边框的图像路径 border-image-slice 图像边界向内偏移 border-image-width 图像边界的宽度 border-image-outset 指定在边框外部绘制border-image-area的量 border-image-repeat 设置图像边界是否应重复repeat/拉伸stretch/铺满round 2. initial 3. inherit | |
| 盒子模型 | box-shadow: h-shadow v-shadow blur spread color inset; 附加一个或多个下拉框阴影 h-shadow 水平阴影位置 v-shadow 垂直阴影位置 blur 模糊距离，可选 spread 阴影大小，可选 color 阴影颜色，可选 inset 从外层阴影改变阴影内侧阴影 | |
| 盒子模型 | 外边距：清除边框外的区域，外边距是透明的 ||
| 盒子模型 | margin: margin-top margin-right margin-bottom margin-left; 的简写 margin-top: 上外边距 margin-right: 右外边距 margin-bottom: 下外边距 margin-left: 左外边距 1. auto 设置浏览器边距 2. length 固定值边距 3. % 百分比边距 | div { width: 35px; height: 35px; border: 1px dotted blue; margin: 10px 5px 10px 5px; } |
| 盒子模型 | 填充：清除内容周围的区域，内边距是透明的 ||
| 盒子模型 | padding: padding-top padding-right padding-bottom padding-left; 的简写 padding-top: 顶部填充 padding-right: 右部填充 padding-bottom: 底部填充 padding-left: 左部填充 1. length 固定值填充 2. % 百分比填充 | div { width: 35px; height: 35px; border: 1px dotted blue; padding: 10px 5px 10px 5px; } |
| 盒子模型 | 轮廓：绘制在元素周围的一条线，位于边缘边框的外围，起突出元素作用。 ||
| 盒子模型 | outline: outline-color outline-style outline-width;的简写 | p { outline-color: outline-style: dotted; outline-width: 5px; } |
| 盒子模型 | outline-color: 轮廓颜色 1. color 2. invert 默认，颜色反转 3. inherit 从父元素继承 | p { outline-color: outline-style: dotted; outline-width: 5px; } |
| 盒子模型 | outline-style: 轮廓样式 1. none 默认 2. dotted 点状的轮廓 3. dashed 虚线的轮廓 4. solid 实绩的轮廓 5. double 双线轮廓，双线宽度取决于outline-width的值 7. groove 3D凹槽轮廓，取决于outline-color 8. ridge 3D凸槽状轮廓，取决于outline-color 9. inset 3D 凹边轮廓，取决于outline-color 10. outset 3D凸边轮廓，取决于outline-color 11. inherit 从父元素继承 | p { outline-color: outline-style: dotted; outline-width: 5px; } |
| 盒子模型 | outline-width: 轮廓宽度 1. thin 细的轮廓 2. medium 默认，中等轮廓 3. thick 粗的轮廓 4. length 固定轮廓粗细的值 5. inherit 从父元素继承 | p { outline-color: outline-style: dotted; outline-width: 5px; } |
| 盒子模型 | outline-offset: 设置轮廓框架在border边缘向外的偏移 1. length 轮廓与border边框边缘的距离 2. inherit 从父元素继承 | div { width: 70px; height: 35px; padding: 10px; border: 1px solid red; outline: 1px solid black; outline-offset: 8px; } |
| 盒子模型 | box-sizing: 设置如何计算元素的总宽度和总高度 1. content-box: width和height仅设置元素的内容区域（默认值） 2. border-box: width和height包含内容、填充、边框占用空间 3. inherit 从父元素继承 | div { box-sizing: border-box; } |
| 尺寸 | width: 元素宽度 1. auto 默认 2. length 固定值宽度 3. % 基于包含它的块级元素的百分比宽度 4. inherit 从父元素继承 | div { width: 100px; height: 100px; } |
| 尺寸 | height: 元素高度 1. auto 默认 2. length 固定值高度 3. % 基于包含它的块级元素的百分比高度 4. inherit 从父元素继承 | div { width: 100px; height: 100px; } |
| 尺寸 | min-width: 元素最小宽度 1. length 固定值最小宽度 2. % 基于包含它的块级对象的百分比最小宽度 3. inherit 从父元素继承 | div { width: 100px; height: 100px; } |
| 尺寸 | min-height: 元素最小高度 1. length 固定值最小高度 2. % 基于包含它的块级对象的百分比最小高度 3. inherit 从父元素继承 | div { width: 100px; height: 100px; } |
| 尺寸 | max-width: 元素最大宽度 1. none 默认，元素被允许的最大宽度没有限制 2. legth 元素的高大宽度 3. % 基于包含它的块级元素的百分比最大宽度 4. inherit 从父元素继承 | div { width: 100px; height: 100px; } |
| 尺寸 | max-height: 元素最大高度 1. none 默认，元素被允许的最大高度没有限制 2. legth 元素的高大高度 3. % 基于包含它的块级元素的百分比最大高度 4. inherit 从父元素继承 | div { width: 100px; height: 100px; } |
| 尺寸 | line-height: 行高 1. normal 默认 2. number 与当前font-size相乘和设置行间距 3. length 固定行间距 4. % 基于当前font-size的百分比行间距 5. inherit 从父元素继承 | div { width: 100px; height: 100px; } |
| 尺寸 | resize：指定一个元素由用户去调整大小 1. none 用户无法调整元素的尺寸 2. both 用户可以调整元素的宽度和高度 3. horizontal 用户可以调整元素的宽度 4. vertical 用户可以调整元素的高度 | div { resize: both; overflow: atuo; } |
| 显示 | visibility: 可见性 | |
| 显示 | display: 显示方式 | |
| 定位 | postion: 定位 1. absolute 绝对定位，相对于satic以外最近的第一个父元素定位 2. fixed 固定定位，相对于窗口定位 3. relative相对定位，相对于元素本身正常位置定位 4. static 默认值，没有定位 5. sticky 粘性定位，基于用户滚动的位置。 6. inherit 从父元素继承 7. initial 设置该属性为默认值 | |
| 浮动 | float: 水平方向浮动 1. 向左或向右浮动，直到外边缘碰到包含框或另一个浮动框的边框为止 2. 浮动元素之后的元素围绕它，浮动之前的元素不受影响 1. left 向左浮动 2. right 向右浮动 3. none 不浮动 4. inherit 从父元素继承 | div { float: left; } |
| 浮动 | clear: 清除浮动 1. left 清除左浮动 2. right 清除右浮动 3. both 清除左浮动和右浮动 4. none 5. inherit | div:after { clear: both; } |
| 溢出 | overflow: 控制内容溢出元素框时显示方式 1. visible 默认，内容不会被修剪，呈现在元素框外 2. hidden 内容被修剪，且溢出内容不可见 3. scroll 内容会被修剪，但块元素右边和下边会显示滚动条，通过滚动显示其余内容 4. auto 如果内容被修剪，块元素会显示滚动条，通过滚动查看其余内容 5. inherit 从父元素继承 | div { overflow: scroll; } |
本篇主要参考了菜鸟教程-CSS教程做的梳理和总结。CSS 教程 | 菜鸟教程 (runoob.com)
https://www.runoob.com/css/css-tutorial.html注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~