CSS 指层叠样式表 (Cascading Style Sheets)，定义如何显示 HTML 元素。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明,每条声明由一个属性和一个值组成。:
p {color:red;text-align:center;}id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
#para1 { text-align:center; color:red; }class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;}你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
p.center {text-align:center;}插入样式表的方法有三种:
外部样式表(External style sheet)内部样式表(Internal style sheet)内联样式(Inline style)使用 <link> 标签链接外部样式表：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>当单个文档需要特殊的样式时，就应该使用内部样式表。 使用 <style> 标签定义内部样式表：
<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>使用 style 关键字定义样式表：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>当对同一元素定义了多个样式表，得到的将是所有样式的并集，优先级顺序如下： (浏览器默认样式) < （外部样式）External style sheet < （内部样式）Internal style sheet < （内联样式）Inline style
CSS 属性定义背景效果:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position /* 颜色 */ body {background-color:#b0c4de;} /* 图片 */ body {background-image:url('paper.gif');} /* 默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。 如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些*/ /* 图片平铺方式 */ background-repeat:repeat-x; /* 简写 */ body {background:#ffffff url('img_tree.png') no-repeat right top;}所有文本属性：
color 设置文本颜色direction 设置文本方向。letter-spacing 设置字符间距line-height 设置行高text-align 对齐元素中的文本text-decoration 向文本添加修饰text-indent 缩进元素中文本的首行text-shadow 设置文本阴影text-transform 控制元素中的字母unicode-bidi 设置或返回文本是否被重写vertical-align 设置元素的垂直对齐white-space 设置元素中空白的处理方式word-spacing 设置字间距Serif Serif字体中字符在行的末端拥有额外的装饰 Sans-serif "Sans"是指无 - 这些字体在末端没有额外的装饰 Monospace 所有的等宽字符具有相同的宽度
font-family 属性设置文本的字体系列。
/*字体设置*/ p{font-family:"Times New Roman", Times, serif;} /*字体样式*/ p.normal {font-style:normal;} /*正常*/ p.italic {font-style:italic;} /*斜体*/ p.oblique {font-style:oblique;} /*倾斜*/ /*字体大小*/ h1 {font-size:40px;} body {font-size:100%;} h1 {font-size:2.5em;} /* 40px/16=2.5em */为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。
四个链接状态是：
a:link - 正常，未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻 a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ /*text-decoration 属性主要用于设置链接中的下划线*/ a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} /*指定链接背景色*/ a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}参考链接：https://www.runoob.com/css/css-list.html
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。
div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }让我们自己算算： 300px (宽)
50px (左 + 右填充)50px (左 + 右边框)50px (左 + 右边距) = 450px最终元素的总宽度计算公式是这样的： 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的： 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
border-style属性用来定义边框的样式。
CSS margin(外边距)属性定义元素周围的空间。 批注：magin应该是对所在容器的相对位置。 margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; margin:25px 50px 75px 100px; /*上边距为25px,右边距为50px,下边距为75px,左边距为100px*/ margin:25px 50px 75px; /*上边距为25px,左右边距为50px,下边距为75px*/ margin:25px 50px; /*上下边距为25px,左右边距为50px*/分组选择器：
h1,h2,p { color:green; }嵌套选择器
p{ }: 为所有 p 元素指定一个样式。.marked{ }: 为所有 class="marked" 的元素指定一个样式。.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。 p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; } p.marked{ text-decoration:underline; }CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
height 设置元素的高度。line-height 设置行高。max-height 设置元素的最大高度。max-width 设置元素的最大宽度。min-height 设置元素的最小高度。min-width 设置元素的最小宽度。width 设置元素的宽度。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
h1.hidden {visibility:hidden;} h1.hidden {display:none;}position 属性指定了元素的定位类型。
position 属性的五个值：
staticrelativefixedabsolutestickyHTML 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。
div.static { position: static; border: 3px solid #73AD21; }元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
p.pos_fixed { position:fixed; top:30px; right:5px; }相对定位会按照元素的原始位置对该元素进行移动。
h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }绝对定位的元素的位置相对于最近的已定位父元素，用绝对定位,一个元素可以放在页面上的任何位置。:
h2 { position:absolute; left:100px; top:150px; }sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。 position: sticky; 基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 批注：浮动。
div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
img { position:absolute; left:0px; top:0px; z-index:-1; }CSS overflow 属性用于控制内容溢出元素框时显示的方式。
visible 默认值。内容不会被修剪，会呈现在元素框之外。hidden 内容会被修剪，并且其余内容是不可见的。scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit 规定应该从父元素继承 overflow 属性的值。默认情况下，overflow 的值为 visible， 意思是内容溢出元素框：
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列,而不能上下移动。。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
清除浮动： 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
.text_line { clear:both; }CSS伪类是用来添加一些选择器的特殊效果。 伪类的语法：
selector:pseudo-class {property:value;}CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。
/*匹配第一个 p标签 元素*/ p:first-child { color:blue; } /*匹配所有p标签 元素中的第一个i标签元素*/ p > i:first-child { color:blue; } /*匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素*/ p:first-child i { color:blue; }:lang 伪类使你有能力为不同的语言定义特殊的规则。 为 no 的q元素定义引号的类型：
q:lang(no) {quotes: "~" "~";}例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> q:lang(no) { quotes: "~" "~"; } </style> </head> <body> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> <p>在这个例子中,:lang定义了q元素的值为lang =“no”</p> <p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p> </body> </html>伪元素的语法：
selector:pseudo-element {property:value;}CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;} :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择正在活动链接 :hover a:hover 把鼠标放在链接上的状态 :focus input:focus 选择元素输入后具有焦点 :first-letter p:first-letter 选择每个<p> 元素的第一个字母 :first-line p:first-line 选择每个<p> 元素的第一行 :first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <p> 元素 :before p:before 在每个<p>元素之前插入内容 :after p:after 在每个<p>元素之后插入内容 :lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值span和div区别在于，baidiv是一个块级元素，它包含的du元素会自动换行。而span是行内元素，在它的前后不会换行。
