css的存在方式
- 元素内联
- 页面嵌入
- 外部引入
元素内联
直接在html的标签中定义样式，类似于：
<div style="属性1;属性2;属性3"><div>
页面嵌入
在html的头部<head>中定义样式，在body中引用，将样式信息集中在了头部,定义方式如下：
<style>
样式一{
属性1;
属性2;
......
}
样式二{
属性1;
属性2;
......
}
.......
</style>
外部引用
将css作为一个单独的文件存在，然后在html的头部导入css文件，然后在body中引用，css文件的导入方式如下：
<link rel="stylesheet" href="路径/css文件" type="text/css">
推荐使用第三种方式
css选择器
- 标签选择器 p { color:green; }
凡是在body中使用这种标签的都会应用该样式
- id选择器 #info { background:#ff0; } 是益“#”开始的
在body元素中指定了该di的元素会引用该样式，在开发中不同的元素的指定的id都不应该相同，所以该样式最好只能被一个元素引用
- class属性选择器 .info { background:#ff0; }
在body元素中通过class="样式名"来引用，这是最常见的引用方式
- *通用元素选择器 匹配所有的标签
上面4种是基础的选择器，都是选择单一的标签，如果要选择多元素的话就要使用组合选择器下面来看一下常用的组合选择器
- 多元素选择器，同时匹配多个元素，元素之间用逗号分隔
- 后代元素选择器，比如 E F 匹配所有属于E元素后代的F元素，E和F之间用空格分隔
- 子元素选择器，比如 E>F 匹配所有E元素的子元素F
- 毗邻元素选择器，E+F 匹配所有紧随E元素之后的同级元素F
此外还有属性选择器，下面来看一下有哪些属性选择器
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[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，
比如“en”、“en-us”、“en-gb”等等 p[lang|=en] { 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;}
p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}
p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}