CSS基础

hqjma — Sun, 29 Jul 2012 13:57:00 GMT

1.样式表的层叠与选择器的�Ҏ��性�?/span>

在样式表中，同一元素可能有两个或者更多的规则。CSS通过一个成�?#8220;层叠”的过�E�处理这�U�冲�H�。层叠采用如下重要度�ơ序�Q?/span>

标有!important的用��h��式�?/span>
标有!important的作者样�?/span>
作者样�?/span>
用户样式
��览�?用户代理应用的样�?/span>

然后�Ҏ��选择器的�Ҏ��性决定规则的�ơ序�Q�具有更�Ҏ��的选择器的规则优于��h��一般选择器的规则。如果两个规则的�Ҏ��性相同，那么后定义的规则优先�?/span>

选择器的�Ҏ��性分为四个等�U�：a b c d

如果样式是行内样式，那么a=1
b�{�于ID选择器的��L��
c�{�于�c�，伪类和属性选择器的数量
d�{�于�c�d��选择器和伪元素选择器的数量

�Ҏ��性示例：

选择�?nbsp; �Ҏ��?nbsp; �?0为基数的�Ҏ��?/span>

style="" 1,0,0,0 1000

#wrapper #content{} 0,2,0,0 200
#content .dateposted{} 0,1,1,0 110

                           div#content{} 0,1,0,1 101
                           #content{} 0,1,0,0 100
                           p.comment .dateposted 0,0,2,1 21
                           p.comment 0,0,1,1 11
                           div p{} 0,0,0,2 2
p{} 0,0,0,1 1

代码�C�Z��Q?/span>

CSS文�g�Q?/span>

#content #subcontent1 h2{      
    color:red; 
}  

#content #subcontent1>h2{      
    color:green; 
} 
 
body #content div[id="subcontent1"] h2{
      color:orange; 
}  

#subcontent1 div.subcontent2 h2{
      color:yellow; 
}   

subcontent1 div.subcontent2 h2.first{
     color:blue; 
}

html文�g�Q?/div>


 	
 		Test

 		
 		Hello!

�l�果�Q?/span>

chrome中：

Test

Hello!

IE中：

Test

Hello!

在chrome中，若将css中前2个样式调换位�|�，�?/span>

#content #subcontent1>h2{
      color:green; 
}

#content #subcontent1 h2{
      color:red; 
}

则结果�ؓ�Q?/span>

Test

Hello!

而对�Ҏ��选择�?#8220;*”�?#8220;+”��试�Q�IE和Chrome的表现又不同。此不赘�q��?/span>

那当样式表中同一元素既有!important声明又有选择器的�Ҏ��性时�Q�谁的优先��高呢�Q?/span> !important一旦��用，它就覆盖了其他规�?/span>�Q�而不需要管选择器的�Ҏ��性�?/span>

2.盒子模型�?/span>

在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会媄响内容区域的��寸�Q�只会增大元素框的��d��寸。当外边据�ؓ负值时�Q�可应用于多�U�技术中�Q�如“投媄”�?#8220;三栏布局”�{��?/span>

关于外边距的合�ƈ�Q?/span>

HTML文�g

css文�g�Q?br />

#content1{
 	height:100px; 	width:100px; 	margin:20px; 	background:red; 
} 

#content2{
 	margin:20px; 	height:20px; 	width:20px; 	background:green; 
} 

#content3{
 	margin:20px; 	height:20px; 	width:20px; 	background:blue; 
}

�l�果�Q?br />

每个content都添�?#8220;padding:1px”后：

若添�?#8220;border:1px”后：

chrome效果:

IE效果�Q?/span>

所以大多我们可以通过��d��一点内边距或与元素背景颜色相同的小�Ҏ��来修复外边距的叠加�?/span>

注：只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、��Q动框和绝对定位框之间的外边距不会叠加�?/span>

3.��动与清除�?/span>

float:��元素从常规文档��中�U�d��Q�直臌��元素��到其他元素的边框�ؓ止。如果��Q动元素后面还有文档流的文本，那么文本��会围绕着��动元素存在�?/span>

clear:对元素进行清理实际上是�ؓ前面的��Q动元素留��Z��垂直�I�间。具体表��Cؓ��该元素的margin-top重设�Q�CSS1、CSS2�Q�或者是增大清楚�I�间而margin-top不变�Q�CSS2.1�Q��?/span>

��动的特点：如果没有��_��的水�q�空��_��动元素��下�U�d��Q�如果��Q动元素高度不同，那么当它们向下移动时可能会被其他��动元素“卡住”�Q?/span>

如图�Q?/span>

关于��动与清除的一些方法：

HTML文�g�Q?/span>

CSS文�g�Q?/span>

#content1{
     margin:20px;     height:60px;     width:60px;     float:left;     background:red; 
}  

#content2{
     margin:20px;     width:50px;     height:50px;     float:left;     background:green; 
}  

#maincontent{
     border:1px gray solid;     width:200px; 
}

�l�果如下�Q?/span>

如何让maincontent包围住content1和content2呢？

有如下一些方法：

�Q�a�Q�让maincontent��动——float:left;

�Q�b�Q�添加空白块

html中添�?lt;br id="clear">�Q?/span>

�Q�c�Q�maincontent中添加overflow:hidden。（��gؓhidden或者auto的overflow属性会自动清理包含的�Q何��Q动元素。）

�Q�d�Q�after伪元素的应用�Q?/span>

CSS中添加如下样式：

#maincontent:after{
       content: ".";       display: block;       height: 0;       clear: both;       visibility: hidden;  
}  

.clear{
     zoom:1;            /*IE triggers hasLayout�Q�高版本IE不需要了*/ 
}

最�l�结果如�?

其他�Ҏ��略去�Q�推荐c、d的方法�?/span>

4.关于布局�Q?/span>

布局可分为固定宽度、流式、弹性布局。各布局主要是单位的不同。一般��用px和em�?作�ؓ单位�?/span>

ps�Q�弹性布局中，最�?span style="color: #993300; ">�?指定内部宽度�Q�被包含框）�Q�而以em指定容器宽度�Q�包含框�Q?/span>�Q�这样修改布局�Ӟ��不需要所有宽度都修改�?/span>

两栏布局很简单，在此不赘�q��?/span>

如下�Q?/span>

HTML文�g�Q?/span>

<div class="content">
     <div class="secondary">Secondarydiv>
     <div class="primary">Primarydiv>
div>

CSS文�g�Q?/span>

.content .primary{
     width:450px;     height:200px;     border:1px solid red;     float:right;     
        margin:30px 10px;     display:inline;     text-align:center; 
}  

.content .secondary{
     width:100px;     height:200px;     border:1px solid green;     float:left;     
        margin:30px 10px;     display:inline;     text-align:center; 
}  

.content{
     width:600px;     height:300px;     border:1px dashed gray;     float:left; 
}

三栏布局�Q�在primary中将之分�?部分。如下：

三栏布局�q�可以用负外边距解决最双��框（即pri_secondary框）的问题。此不赘�q��?/span>

5.其他惌��的几点：

a.更多的应用html5和css3�?/span>

b.圆角框（1.几张囑փ�的覆�?2.border-radius 3.border-image�Q�、投影（1.负外边距 2.相对定位--left:-5px;�{?3.box-shadow�Q�、不透明度（rgba�Q�及��化�q�接�Q�突出显�C�Z��同的�q�接�c�d��Q��?/span>

参考书�c�：CSS Mastery

hqjma 2012-07-29 21:57 发表评论

日本亚洲中午字幕乱码,色老板亚洲视频免在线观,亚洲免费网站在线观看

CSS基础

Test

Hello!

Test

Hello!

Test

Hello!

Test

Hello!