标签：
Css，Cascading Style Sheets，层叠样式表。用于控制HTML页面样式。他的基本格式由两部分组成：
选择器 声明块
css的注释用 /* 注释内容 */
<link rel=”stylesheet”type=”text/css”href=”myCss.css”media=”all”/>
rel:表示关系，这里的关系是“stylesheet”；如果将rel定义为“alternate stylesheet”，他就为候选样式表，利用title属性生成候选样式列表；
type:描述link加载的数据类型；
href:样式表的位子；
media:这个样式要运用的媒体，all表示所有。
<style type=”text/css”> /*样式表内容*/ </style> 。可以使用media属性。
<style type=”text/css”>
@import url(mycss.css) media;
/* 样式表内容 */
</style>
media作用和前面的link一样，可有可无。
直接使用元素的style属性,指定p标签内的颜色为红色
<p style = “color:red”>xxxx</p>
h1 , h2 , p { color : red; } 逗号表示分组，这句表示h1,h2,p标签的字体颜色为红色。如果不要逗号，意义完全不一样。
* { color : grey ; font-size: 80px ;} * 是通配选择器，表示所有的标签元素 字体为灰色，大小为80像素。
.warning { font-weight : bold ; } 表示class值为“warning”的标签，字体全部加粗。前面有英文的句号。类选择起可以连起用 如 p.warning.help ,他匹配的是class属性包含warning 和 help的p元素。中间没有空格。
#warning { font-weight : bold ; } 表示Id值为“warning”的标签，字体全部加粗。前面有井号。
p#warning 表示id为warning的p元素
类名可以重复用，而html中标签的id是唯一的。这意味着id选择器在一个html文档中，最多只会使用一次。
h1[class] { color: silver } 表示 带有class 标签的h1元素都被选择，设置字体颜色为灰色。
* [id] 表示选择所有的带有id属性的元素。其他属性选择同理。
a[ href =”http://www.baidu.com”] 表示选择所有超链接等于百度的a标签。
p[ calss=”warning”] 表示选择所有class等于warning的p标签。
p[ class~=”warning”]表示包含warning这个词的class属性，注意不是包含这个字符串，而是包含词，使用空格分开的词！他根据属性中，一个用空格分隔的词来完成选择。他等价与 p.class
p[ class ^=”warning”] 表示calss属性以字符串warning开头的p标签。
p[ class $=”warning”] 表示calss属性以字符串warning结尾的p标签。
p[ class *=”warning”] 表示calss属性包含字符串warning的p标签。
#d1 h1{ color : red }表示id为d1元素的所有后代h1字体颜色为red。
#d1 > h1{ color : red }表示id为d1元素的所有直接子元素h1字体颜色为red。
#d2 + div{ color : red }表示id为d2元素的紧接着的一个兄弟节点div的字体为红色。
a:link 表示未访问的超链接
a:visited 表示已访问的超链接
input : focus 表示当前有输入焦点的input元素。
p:hover 表示当前鼠标停留的元素。
button : active 表示被用户输入激活的元素。
注：在a标签上设置伪类样式时，推荐是“LOVE-HA” ；link ，visited ， hover ， active
h1:first-child 选择 作用第一个子元素的 h1 。eg：
<body>
<h2></h2>
<h1>d1外的h1</h1>
<div id="d1">
<h1>d1内的h1</h1>
<div id="d2">
<h1>d2内的h1</h1>
</div>
<h1>d1内的h1</h1>
</div>
</body>
这个就只有中间两个被选中，因为第二个h1是d1的第一个子元素，第三个h1是d2的第一个子元素。
* : lang(fr) 选择所有法语。这个是对语言进行选择
p:first-letter 选择块级元素的首字母 。常用的块级元素 p div h 。。。。
p:first-line 选择块级元素的第一行文本
注：first-letter 和 first-line 对属性的使用是有限制的，不是所有属性都有效！
h1:before ｛contetn: “myContetn”；｝ 在标签h1前添加一个myContent，后面可以设置样式。
h1:after｛contetn: “myContetn”；｝ 在标签h1后添加一个myContent，后面可以设置样式。
如果多个选择器都选中了同一个样式，那么首先根据他们的重要性判断，及 !important
#d1 h1{ color : red !important ; } 若一个属性后加入了!important ，所有选择的元素都以这个属性为主。
然后根据特殊性判断，选择器的特殊性值表示为4个部分：0，0，0，0
若存在Id选择器，就加上 0,1,0,0
若存在类选择器，或属性选择器，或伪类选择器，就加上 0,0,1,0
若存在元素，或伪元素，就加上 0,0,0,1
若是内嵌的样式,及标签里有style属性， 就加上 1,0,0,0.
eg：
div 特殊性为0,0,0,1; div#id 为 0,1,0,1; div p.class #name 为 0,1,1,2.
把逗号去掉是一个四位数，如果属性冲突，谁大就以谁为准。注意，这里可以把 !important 理解为无限大。
如果他们的重要性和特殊性一样，那么以后面的为主。
position的四个属性。
1、static：默认值。没有定位，元素出现在正常的流中。
2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。他是相当于原本位置的偏移位置，可能会覆盖其他元素。他原本的位置会保留。
3、absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。这种定位的元素不再正常流当中，完全被独立了的。可能会覆盖其他元素。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
他们的上下关系用z-index确定。
浮动，float：left | right | none
他会从正常流中删除，但是还是会影响布局。
标签：
原文地址：http://www.cnblogs.com/lzq1065763582/p/4831855.html
