目录
1.CSS语法
1.1基础语法
1.2派生选择器
通过依据元素在其位置的上下文关系来定义样式
h2 strong { color: blue; }
| div p | 后代选择器，选择所有的后代 |
| div>p | 子元素选择器，选自直接后代 |
| div+p | 相邻兄弟选择器，选择第一个兄弟 |
| div~p | 后续兄弟选择器，选择所有兄弟 |
1.3 id选择器
| #red {color:red;} | #sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } |
1.4类选择器
| .center {text-align: center} | .fancy td { color: #f60; background: #666; } | td.fancy { color: #f60; background: #666; } |
1.5属性选择器
| [title=W3School] { border:5px solid blue; } | [title~=hello] { color:red; } | input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } |
1.6创建
| 外部样式 | <link rel="stylesheet" type="text/css" href="mystyle.css" />
|
| 内部样式 | <head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head> |
| 内联样式 | <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> |
| 多重样式 | 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。 1.浏览器缺省设置 2.外部样式表 3.内部样式表（位于 <head> 标签内部） 4.内联样式（在 HTML 元素内部） |
2.样式
| 背景属性 | background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 | |
| background-color | 设置元素的背景颜色。 | |
| background-image | 把图像设置为背景。 | |
| background-position | 设置背景图像的起始位置。 right、top | |
| background-repeat | 设置背景图像是否及如何重复。 repeat-x、no-repeat | |
| 文本 | color | 设置文本颜色 |
| direction | 设置文本方向 | |
| vertical-align | 设置元素的垂直对齐 | |
| text-align | 对齐元素中的文本 ustify，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸） | |
| text-decoration | 向文本添加修饰，下划线等 | |
| text-shadow | 设置文本阴影 | |
| text-transform | 控制元素中的字母，大小写等 | |
| unicode-bidi | 设置或返回文本是否被重写 | |
| text-indent | 缩进元素中文本的首行 | |
| white-space | 设置元素中空白的处理方式 | |
| line-height | 设置行高 | |
| letter-spacing | 设置字符间距 | |
| word-spacing | 设置字间距 | |
| 字体 | font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 | |
| font-size | 指定文本的字体大小 | |
| font-style | 指定文本的字体样式 | |
| font-variant | 以小型大写字体或者正常字体显示文本。 | |
| font-weight | 指定字体的粗细 | |
| 链接 | a:link | 正常，未访问过的链接 |
| a:visited | 用户已访问过的链接 | |
| a:hover | 当用户鼠标放在链接上时 | |
| a:active | 链接被点击的那一刻 | |
| 列表 | list-style | 简写属性,用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图像设置为列表项标志。 | |
| list-style-position | 设置列表中列表项标志的位置。 | |
| list-style-type | 设置列表项标志的类型。 | |
| 表格 | border | 边框设置 |
| border-collapse | 设置是否把表格边框合并为单一的边框。 | |
| width | 宽 | |
| height | 高 | |
| text-align | 文字对齐 | |
| vertical-align | 垂直对齐 | |
| padding | 颜色 | |
| background-color | 背景色 | |
| 轮廓 | outline | 在一个申明中设置所有属性 |
| outline-color | 轮廓颜色 | |
| outline-style | 轮廓样式 | |
| outline-width | 轮廓宽度 | |
| 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用 | ||
3.框模型
1.背景应用于由内容和内边距、边框组成的区域。
2.在 CSS 中，width 和 height 指的是内容区域的宽度和高度。
3.外边距合并
| 边框 | border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 | |
| border-width | 用于为元素的所有边框设置宽度， | |
| border-color | 设置元素的所有边框中可见部分的颜色， | |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 | |
| border-bottom-color | 设置元素的下边框的颜色。 | |
| border-bottom-style | 设置元素的下边框的样式。 | |
| border-bottom-width | 设置元素的下边框的宽度。 bottom可以换成top、right、left | |
| 外边距 | margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 | |
| margin-left | 设置元素的左外边距。 | |
| margin-right | 设置元素的右外边距。 | |
| margin-top | 设置元素的上外边距。 | |
| 填充 | padding | 使用简写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 | |
| padding-left | 设置元素的左部填充 | |
| padding-right | 设置元素的右部填充 | |
| padding-top | 设置元素的顶部填充 |
4.定位
1.一切皆为框。
块元素是一个元素，占用了全部宽度，在前后都是换行符。也称块框。
块元素的例子：<h1>、<p>、<div>
内联元素只需要必要的宽度，不强制换行。也称行内框。
内联元素的例子：<span>、<a>
- 普通流、浮动和绝对定位。
| 定位 | position | 指定元素的定位类型 static\fixed\relative\absolute\sticky static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。是所有元素的默认属性，也就是可以理解为正常的文档流。 relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。相对定位，是相对于自己文档的位置来定位的，不会脱离文档流。 absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。绝对定位，absolute是相对于父标签来进行定位的，如果没有父标签或者父标签是static，那么absolute会相对于文档定位（不同于fixed相对于浏览器定位）。 fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。固定定位，相对于浏览器窗口来定位的。 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 | |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 | |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 | |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移 | |
| clip | 剪辑一个绝对定位的元素 clip:rect(top right bottom left); | |
| cursor | 显示光标移动到指定的类型 | |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 visible\hidden\scroll\auto\inherit | |
| overflow-y | 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 | |
| overflow-x | 指定如何处理右边/左边边缘的内容溢出元素的内容区域 | |
| z-index | 设置元素堆叠顺序 | |
| 浮动 | clear | 指定不允许元素周围有浮动元素 |
| float | 指定一个盒子（元素）可以浮动 |
5.选择器
5.1元素选择器
又称为类型选择器
| h1 {color:blue;} h2 {color:silver;} | h1, h2, h3, h4, h5, h6 {color:blue;}
|
5.2类选择器
| 普通 | 结合元素选择器 | 多类选择器 |
| *.important {color:red;} .important {color:red;} | p.important {color:red;} h1.important {color:blue;} | .important {font-weight:bold;} .warning {font-style:italic;} .important.warning {background:silver;} |
5.3 ID选择器
*#intro {font-weight:bold;}
#intro {font-weight:bold;}
5.4属性选择器
1.简单属性选择
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
a[href] {color:red;}
a[href][title] {color:red;}
2.根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
3.根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
p[class~="important"] {color: red;}
4.子串匹配属性选择器
a[href*="w3school.com.cn"] {color: red;}
5.特定属性选择类型
*[lang|="en"] {color: red;}
5.5组合选择器
| div p | 后代选择器，选择所有的后代 |
| div>p | 子元素选择器，选自直接后代 |
| div+p | 相邻兄弟选择器，选择第一个兄弟 |
| div~p | 后续兄弟选择器，选择所有兄弟 |
5.6 伪类
| selector : pseudo-class {property: value} | |
| selector.class : pseudo-class {property: value} | |
| :active | 向被激活的元素添加样式。 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 |
| :link | 向未被访问的链接添加样式。 |
| :visited | 向已被访问的链接添加样式。 |
| :first-child | 向元素的第一个子元素添加样式。 |
| :lang | 向带有指定 lang 属性的元素添加样式。 |
5.7 伪元素
| selector:pseudo-element {property:value;} | ||
| selector.class:pseudo-element {property:value;} | ||
| :first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
| :first-line | 向文本的首行添加特殊样式。 | 1 |
| :before | 在元素之前添加内容。 | 2 |
| :after | 在元素之后添加内容。 | 2 |
5.8分组和嵌套
| p{ }: | 为所有 p 元素指定一个样式 |
| .marked{ }: | 为所有 class="marked" 的元素指定一个样式 |
| marked p{ } | 为所有 class="marked" 元素内的 p 元素指定一个样式 |
| p.marked{ }: | 为所有 class="marked" 的 p 元素指定一个样式 |
6.高级
6.1对齐块元素
| margin:auto | 水平对齐，如div |
| text-align:center | 文本居中对齐 |
| position：absolute | 左和右对齐，使用定位方式 |
| float: | 左和右对齐 |
| padding | 垂直居中对齐 |
| line-height | 垂直居中对齐 |
| margin:auto | 水平对齐，如div |
| transform | 垂直居中对齐 |
6.2尺寸
| height | 设置元素的高度。 |
| max-height | 设置元素的最大高度。 |
| min-height | 设置元素的最小高度。 |
| line-height | 设置行高。 |
| width | 设置元素的宽度。 |
| max-width | 设置元素的最大宽度。 |
| min-width | 设置元素的最小宽度。 |
6.3分类属性
CSS 分类属性允许你规定如何以及在何处显示元素。
| display | 设置是否及如何显示元素，隐藏的元素不会占用任何空间 none\block\inline |
| hidden | 隐藏的元素仍需占用与未隐藏之前一样的空间 |
| clear | 设置一个元素的侧面是否允许其他的浮动元素。 |
| cursor | 规定当指向某元素之上时显示的指针类型。 |
| float | 定义元素在哪个方向浮动。 |
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
| visibility | 设置元素是否可见或不可见。 |
6.4 媒介类型
| all | 用于所有的媒介设备。 |
| aural | 用于语音和音频合成器。 |
| braille | 用于盲人用点字法触觉回馈设备。 |
| embossed | 用于分页的盲人用点字法打印机。 |
| handheld | 用于小的手持的设备。 |
| | 用于打印机。 |
| projection | 用于方案展示，比如幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。 |
| tv | 用于电视机类型的设备。 |
7.一些问题
7.1文档流
https://blog.csdn.net/wayne1998/article/details/80230608
内联元素不会独占一行，而每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。浮动元素不占任何正常文档流空间，而浮动元素的定位照样基于正常的文档流，当一个元素脱离正常文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
7.2优先级问题
https://www.cnblogs.com/ombre/p/7418667.html
CSS 样式优先级 | 菜鸟教程 https://www.runoob.com/w3cnote/css-style-priority.html
7.3BFC
BFC是什么 - 一抒山河 - 博客园 https://www.cnblogs.com/mlw1814011067/p/10397999.html
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
