CSS的引入方式
第一种：在head中 <style></style> 嵌入式
第二种：在head中 <link href="index.css" rel="stylesheet"> 链接式 （先加载css，再加载html）推荐
第三种：在head中 <style>@import "index.css";</style>> 导入式（先加载html，再加载css）
第四种：直接在html标签中<div style="width: 50%; height: 60px; background-color: orangered">不推荐这种方式</div> 行内式
CSS的选择器
1、基础选择器
* 通用元素选择器，匹配任何元素 * { margin:0; padding:0; }
E 标签选择器，匹配所有使用E标签的元素 p { color:green; }
.info和E.info class选择器，匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:red }
#info和E#info id选择器，匹配所有id属性等于footer的元素 #info { background:#333 } P#info { background:blue }
2、组合选择器(这里的E,F可以是基础选择器中的选择器)
E,F 多元素选择器，同时匹配所有E元素与F元素，E和F之间用逗号分隔 div,p { color:#f00 }
E F 后代选择器，匹配所有属于E元素后代（儿子、孙子....）的F元素，E和F之间用空格分隔 li a { font-weight:bold; }
E>F 子元素选择器，匹配所有E元素的子元素(仅儿子)F,E和F之间用>分隔 div > p { color:#ccc }
E+F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F,E和F之间用加号分隔 div + p { color:000 }
3、属性选择器
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
4、伪类
anchor伪类：专用于控制链接的显示效果
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
before after伪类
p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}
p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}
