CSS学习笔记

1、一个元素不允许使用2个ID选择器，可以使用2个类选择器。
2、并集选择器 用“，”隔开。
3、后代选择器用空格隔开。

交集选择器的例子：
<style>
p{
color:blue;
}
p.s{
color:red;
}
.s{
color:green;
}
</style>
<p>蓝色</p>
<p class="s">红色</p>
<h3 class="s">绿色</p>

行内样式>ID样式>类样式>标记样式

display属性（inline强制转换为行内元素   block强制转换为块级元素 none 隐藏元素）

a标签：
a:link： a:visited：a:active： a:hover：

Div居中：margin:0 auto; 

<div> 块级元素(block)
<span> 行内元素(in-line)
例子：
//行内元素距离叠加，例子中2个行内元素距离为70px
<div >
<span class="left">行内元素</span>
<span class="right">行内元素</span>
</div>
span.left{
background-color:#CC0000;
margin-right:30px;
}
span.right{
background-color:#0000FF;
margin-left:40px;
}

//2个块级元素的外边距取大的，例子中2个块级元素的距离是40px
<div style="margin-bottom:30px">块级元素1</div>
<div style="margin-top:40px">块级元素2</div>

//一个浮动的例子
<div class="father">
<div class="son1">
Box1  
</div>
<div class="son2">
Box2
</div>
<div class="son3">
Box3<br/>
Box3<br/>
Box3<br/>
Box3<br/>
Box3<br/>
Box3
</div>
<p>1、一个元素不允许使用2个ID选择器，可以使用2个类选择器。
2、并集选择器 用“，”隔开。
3、后代选择器用空格隔开。
行内样式>ID样式>类样式>标记样式

display属性（inline强制转换为行内元素   block强制转换为块级元素 none 隐藏元素）

a标签：
a:link： a:visited：a:active：a:hover：

Div居中：margin:0 auto; 
<div>块级元素(block)
<span> 行内元素(in-line)
例子：
//行内元素距离叠加，例子中2个行内元素距离为70px</p>
</div>

body{
margin:15px;
font-family:Arial;
font-size:12px;}

.father{
background-color:#FFFF33;
bordr:1px solid #FF3300;
padding:15px;}
.father div{
padding:10px;
margin:15px;
border:1px dashed #FF3300;
background-color:#0099FF;}
.father p{
border:1px dashed #FF3300;
background-color:#9900CC; 
clear:left;//清除左边浮动对P的影响}
.son1{
float:left;
}
.son2{
float:left;
}
.son3{
float:right;
}

//若全部div脱离了标准流，要使父容器可以自动适应高度，可以添加一个div，例子中，<div 

class="clera"></div>
<div class="father">
<div class="son1">
Box1  
</div>
<div class="son2">
Box2
</div>
<div class="son3">
Box3<br/>
Box3<br/>
Box3<br/>
Box3<br/>
Box3<br/>
Box3
</div>
<div class="clear"></div>
</div>

body{
margin:15px;
font-family:Arial;
font-size:12px;}

.father{
background-color:#FFFF33;
bordr:1px solid #FF3300;
padding:15px;}
.father div{
padding:10px;
margin:15px;
border:1px dashed #FF3300;
background-color:#0099FF;}
.son1{
float:left;
}
.son2{
float:left;
}
.son3{
float:right;
}

.clear{
padding::0px;
margin:0px;
clear:both;
border:0;}

//相对定位即相对于原来的位置，同样适用于float（它后面的盒子不变）
<div class="father">
<div class="block1">Box-1</div>
</div>
.father{
background-color:#FFFF33;
bordr:1px solid #FF3300;
padding:15px;}

.block1{
background-color:#0000FF;
border:1px dashed #000000;
padding:10px;
position:relative;
left:30px;
top:30px;
}

//绝对定位即是以其最近设置了position属性的父容器为基准，若都没有设置，则以浏览器作为

基准

<div class="father">
<div >Box-1</div>
<div class="block2">Box-2</div>
<div >Box-3</div>
</div>

.father{
background-color:#FFFF33;
bordr:1px solid #FF3300;
padding:15px;}
.father div{
background-color:#0000FF;
border:1px dashed #000000;
padding:10px;
}

.block2{
position:absolute;
right:0px;
top:0px;
}
//father设置了position属性
.father{
background-color:#FFFF33;
bordr:1px solid #FF3300;
padding:15px;
position:relative;}
.father div{
background-color:#0000FF;
border:1px dashed #000000;
padding:10px;
}

.block2{
position:absolute;
right:0px;
top:0px;
}

//固定定位Fixed以浏览器作为基准

//按钮式导航
<div class="daohang">
<a href="#" >首页</a>
<a href="#" >链接一</a>
<a href="#" >链接二</a>
<a href="#" >链接三</a>
<a href="#" >链接四</a>
<a href="#" >链接五</a>
</div>

.daohang a:link,a:visited{
text-decoration:none;
color:#FF3366;
background:#00CCFF;
border-top:1px solid #0066FF;
border-left:1px solid #0066FF;
border-bottom:1px solid #000099;
border-right:1px solid #000099;
padding:4px 10px 4px 10px;
}
.daohang a:hover{
color:#CC0033;
background:#0099FF;
border-bottom:1px solid #0066FF;
border-right:1px solid #0066FF;
border-top:1px solid #000099;
border-left:1px solid #000099;
padding:5px 8px 3px 12px;
}

//列表式导航
<div class="daohang1">
<ul>
<li><a href="#" >首页</a></li>
<li><a href="#" >链接一</a></li>
<li><a href="#" >链接二</a></li>
<li><a href="#" >链接三</a></li>
<li><a href="#" >链接四</a></li>
<li><a href="#" >链接五</a></li>
</ul>
</div>

.daohang1{
width:150px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-align:right;}
.daohang1 ul{
list-style-type:none;
margin:0px;
padding:0px;}
.daohang1 li{
border-bottom:1px solid #9F9FED;}
.daohang1 li a{
display:block;
height:1em;
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #151571;
border-right:1px solid #151571;
}
.daohang1 li a:link,.daohang1 li a:visited{
background:#1136c1;
color:#FFFFFF;
}
.daohang1 li a:hover{
background:#002099;
color:#ffff00;
border-left:12px solid yellow;
}

//浮动列表式导航
<div class="daohang1">
<ul>
<li><a href="#" >首页</a></li>
<li><a href="#" >链接一</a></li>
<li><a href="#" >链接二</a></li>
<li><a href="#" >链接三</a></li>
<li><a href="#" >链接四</a></li>
<li><a href="#" >链接五</a></li>
</ul>
</div>

.daohang1{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-align:right;}
.daohang1 ul{
list-style-type:none;
margin:0px;
padding:0px;}
.daohang1 li{
border-bottom:1px solid #9F9FED;
float:left;
}
.daohang1 li a{
display:block;
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #151571;
border-right:1px solid #151571;
}
.daohang1 li a:link,.daohang1 li a:visited{
background:#1136c1;
color:#FFFFFF;
}
.daohang1 li a:hover{
background:#002099;
color:#ffff00;
border-left:12px solid yellow;
}