CSS笔记（一） 选择器/字体/文本
CSS层叠样式表
语法：选择器{属性：值; 属性：值;} h1{ color:red; font-size：14px}
1、引入方式：
（1）行内式（内联样式）
<div ></div>
（2）内联样式
<head>
<style> h1{ color:red; font-size：14px} </style>
</head>
（3）外联样式
<head>
<link rel="stylesheet" href="outer.css" />
</head>
2、选择器
（1）通配符选择器：*{ color:red; }，全局有效
（2）标签选择器（元素选择器）：把某一类的全部选出来
h1、p、div...
（3）类选择器：选取页面中所有标签的class属性名相同的一类标签，必须用"."来声明，html中引用 class="aa"来获取样式
eg： .head{ color:red;}
<div class="head">整个div的字体会变成红色</div>
多类名选择器：
.head{ color:red;}
.font{ font-size:20px;}
<div class="head font">整个div的字体会变成红色,字体20</div>
（4）id选择器：选取页面中唯一的id名为xx的进行样式改变，用#进行标识
#title{color：red};
<div id="title" >我是红色的</div>
（5）后代选择器：外层标签写在前面，内层标签写在后面，中间有空格，所有的后代。
div p{color:#ffffff;}
（6）子代选择器：只选择儿子级别的元素。
div>p{color:#ffffff;}
（6）交集选择器：由第一个为标记选择器第二个为class或者id选择器构成，两个选择器间无空格
div.p{color:#ffffff;}，div下又叫“p”的；
（7）并集选择器：把几个标签的改为相同样式，逗号隔开
div,p,span{color:#ffffff;}；
（8）相邻选择器：h1+p{margin-topp:25px;}表示增加在紧接着h1后面出现的段落的上边距。
（9）属性选择器：
简单属性选择器：div[class]{ }; //选择具有class属性的div
属性值选择器：div[class=“box”]{ }; //选择class=box的div
属性名全包含：div[class~=“box”]{ }; //选择class属性包含box的div
属性模糊选择：div[class^=“box”]{ }; //选择class属性以box开头的div
div[class$=“box”]{ }; //选择class属性以box结尾的div
属性模糊匹配包含：div[class*=“box”] //选择class属性包含box的div
（10）伪类选择器：
用于向某些选择器添加特殊效果，如给链接添加特殊效果；
伪类以：两点开头
链接伪类选择器： ：link /*未访问的链接*/
：visited /*已访问的链接*/
：hover/*鼠标移到链接上，悬停时候（IE6只能用在a链接，IE7+兼容所有元素）*/
：active/*选定的链接，按下或者点击的链接*/
：focus/*键盘输入焦点的元素*/
（样式顺序必须是lvha）
a:link{
color:#3c3c3c;
font-size:25px;
text-decoration:none;
font-weight:700;
}
a:visited{
color:orange;
}
a:hover{
color:#red;
}
a:active{
color:green;
}
（11）伪元素选择器：用于向某些选择器设置特殊效果
：first-line-->向文本首行设置特殊样式，只能用于块级元素，
可用的属性：font、color、background、word-spacing、letter-spacing、
text-decoration、vertical-align、text-transform、line-heigth、clear
p:first-line{ color:#000000;font-size:25px;}
：first-letter-->向文本首字母设置特殊样式，只用于块级元素
可用的属性：font、color、background、margin、padding、border、text-decoration、
vertical-align、text-transform、line-height、float、clear
p:first-letter{ color:#000000;font-size:25px;}
：before-->在元素的内容前面插入新的内容，一般配合content使用
p:before{ content：“@@@”}
：after-->在元素的内容之后插入新的内容
p:after{ content：“@@@”}
3、字体样式：
font-size：字号大小；单位：em相对于当前对象内文本的字体尺寸；px像素，推荐；
font-family：字体类型；微软雅黑、宋体...网页中普遍使用14px+；
（可用 unicode编码方式写）
font-weight：字体加粗，无单位，bold=700，normal=400；
font-style：字体风格，normal、italic斜体；
综合设置字体样式：h1{font：400 25px "宋体" ; }
4、文本样式：
文本颜色：color：red/#ffffff/rgb(255,0,0)；
行间距：line-height：行高，24px；
水平对齐方式：text-align：left/right/center，让盒子里面的文本对齐；
首行缩进：text-indent：2em，2个字；
文本修饰：text-decoration：none、underline下划线、overline上划线、line-through贯穿线；
