一、选择器
CSS规则由选择器以及声明组成。
/*选择器分组*/h1, h2, h3 {}/*后代选择器*/p em {}/*子元素选择器*/p > em {}/*兄弟选择器（选择位于其后具有相同父元素的元素）*/h3 + p {}/*id选择器*/#id {}/*类选择器*/.class {}/*属性选择器*/[attr] {}属性选择器使用。
| [attr] | 选取带有val的元素 |
| [attr=val] | 选取属性为val的元素 |
| [attr~=val] | 选取属性中包含val的元素 |
| [attr|=val] | 选取属性以val-开头的元素 |
| [attr^=val] | 匹配属性以val开头的元素 |
| [attr$=val] | 匹配属性以val结尾的元素 |
| [attr*=val] | 匹配属性包含val的元素 |
二、样式
/*背景*/body { ???background-color: lightblue; ???background-image: url("wallpaper.jpg"); ???background-repeat: no-repeat; ???background-position: center; ???background-attachment: fixed; /*防止背景随文档滚动而滚动*/}/*文本*/p { ???text-indent: 5%; /*缩进*/ ???text-align: justify-all; /*水平对齐*/ ???word-spacing: normal; /*单词间隔*/ ???letter-spacing: normal; /*字母间隔*/ ???text-transform: capitalize; /*字符转换（单词首字母大写）*/ ???text-decoration: underline; /*文本装饰*/}/*字体*/body { ???font-family: "MS Reference Sans Serif", monospace; ???font-style: italic; ???font-variant: small-caps; /*小型大写字母*/ ???font-weight: bold; /*字体加粗*/}/*未被访问的链接*/a:link { ???color: #FF0000;}/*已被访问的链接*/a:visited { ???color: #00FF00;}/*悬停链接*/a:hover { ???color: #FF00FF;}/*点击链接*/a:active { ???color: #0000FF;}/*列表*/ul { ???list-style-image: url("icon.png"); /*列表项图像*/ ???list-style-type: circle; /*列表项标志*/ ???list-style-position: inside;}/*表格*/table, th, td { ???border-width: 1px; ???border-style: solid; ???border-color: lightblue; ???border-collapse: collapse; /*折叠边框*/ ???text-align: left; /*表格文本对齐*/ ???padding-left: auto; /*表格内左边距*/ ???background-color: lightgreen;}/*轮廓*/table { ???outline-color: lightpink; ???outline-style: dotted; ???outline-width: thick;}三、框模型
框模型规定了元素框处理元素内边距、外边距、边框和内容的方式。
table { ???padding: 10%; /*内边距*/ ???margin: 10%; /*外边距*/}四、定位
定位运训定义元素框相对于其正常位置应该出现的位置，或者相对于父元素甚至浏览器窗口的位置。CSS由三种基本定位机制：普通流、浮动和绝对定位。除非指定，否则所有框都在普通流中定位，而普通流中的元素位置由HTML文档中的出现顺序决定。
- 相对定位：元素框会偏移某个距离。元素仍然保持其未定位前的形状。
- 绝对定位：元素框从文档流中完全删除，相对于包含其的块定位。
- 浮动：浮动框不在普通流中，可以向左或向右移动，直至触碰包含框或其他浮动框为止。
/*相对定位*/#information { ???position: relative; ???left: 10%; ???right: 10%;}/*绝对定位*/#information { ???position: absolute; ???left: 10%; ???right: 10%;}/*浮动*/#information { ???float: right;}CSS笔记：基础教程
原文地址：https://www.cnblogs.com/arseneyao/p/8716687.html