Css Css基础

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1 css选择符
1.1 基本选择符
标签
body {background-color:blue;}
id选择符
#content {
text-align:center
}
class选择符
.title {
font-family:arial;
}
1.2 群组选择符
h1,h2,h3,p,span {
  font-size:12px;
}w
1.3 包含选择符
h1 span {
font-weight:bold;
}
对h1下面的span进行样式指派
1.4 标签指定式选择符
h1#content{}
针对所有id=content的h1标签
h1.p1{}
针对所有class为p1的h1标签
(注意：中间没有空格)
1.5 组合选择符
h1 .p1{}
针对h1标签下的所有class为p1的标签
#content h1{}
针对id=content标签下的所有h1标签
h1 .p1,#content h1{}上面的组合
h1#content h2{}
针对id=content的h1标签下的h2标签
1.6 伪类
a:hover{
background-color:#3333333;
}
1.7 通配选择符
*{
  color:blue;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2 CSS数值单位
px:
em:
ex:
pt:
pc:
in:
mm:
cm:
rgb:
#RRGGBB:
Color Name:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3 CSS之DIV
head+left+right

<style>
 body {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
 }
#head {
	background-color:#cccccc;
	border: 2px solid red;
	width:100%;
}
#left {
 background-color:#cccccc;
 border:2px solid #333333;
 width:20%;
 height:100%;
 float:left;
}
#right {
 padding-left:0px;
 background-color:#cccccc;
 border:2px solid #333333;
 /* width:80%; */
 height:100%;
 /* float:left; */
}
</style>
<div id = "head"></div>
<div id = "left" ></div>
<div id = "right" ></div>
 

几个比较常用的css属性设置：
margin：上 下 左 右；
padding: 上 下 左 右
position: absolute； /* 绝对位置
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4 层叠与覆盖
上下层叠和覆盖z-index
4.1 z-index属性就用来控制层叠和覆盖的。
按照定义，z-index的数值越大，则元素容器越在上层。
z-index的属性值可以是正整数，0和负整数.
h1 {
color:red;
color:blue;
}
blue会把red覆盖。

4.2 层叠采用以下重要度次序：
1 标为！important的用户样式
2 标为! important的作者样式
3 作者样式
4 用户样式
然后，根据选择器的特殊性决定规则的次序。具有更特殊选择器的选择器的规则
优先于具有比较一般选择器的规则，如果两个规则的特殊性相同，那么后定义的
规则优先。
特殊性：
选择器的特殊性分为四个成分等级:a,b,c,d
1 如果样式是行内样式，那么a = 1
2 b = ID选择器的总数。
3 c = 类，伪类和事项选择器的数量
4 d = 类型选择器和伪元素选择器的数量
例如：
style = "";  特殊性  abcd = 1000;
#wrapper #content{} 特殊性  abcd = 0200;
div#content{} 特殊性  abcd = 0101;
特殊值谁大谁优先！
4.3 超链接样式

a:link,a:visited {
color:#666;
text-decoration :none;
}

a:hover,a:active {
text-decoration:underline; /* line-through,underline */
background-color:#ffe;
}