CSS基础
来源:互联网 发布:广州趣丸网络业绩 编辑:程序博客网 时间:2024/05/18 22:17
1.样式表的层叠与选择器的特殊性。
在样式表中,同一元素可能有两个或者更多的规则。CSS通过一个成为“层叠”的过程处理这种冲突。层叠采用如下重要度次序:
- 标有!important的用户样式。
- 标有!important的作者样式。
- 作者样式。
- 用户样式。
- 浏览器/用户代理应用的样式。
选择器的特殊性分为四个等级:a b c d
- 如果样式是行内样式,那么a=1
- b等于ID选择器的总数
- c等于类,伪类和属性选择器的数量
- d等于类型选择器和伪元素选择器的数量
选择器 特殊性 以10为基数的特殊性
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
#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文件:
<div id="content"><div id="subcontent1"><h2>Test</h2><div class="subcontent2"><h2>Hello!</h2></div></div></div>结果:
Test
Hello!
Test
Hello!
#content #subcontent1>h2{ color:green;}#content #subcontent1 h2{ color:red;}
则结果为:
Test
Hello!
<div id="content1"><div id="content2"></div> <div id="content3"></div> </div>
css文件:
#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;}结果:
每个content都添加“padding:1px”后:
3.浮动与清除。
float:将元素从常规文档流中移出,直至该元素碰到其他元素的边框为止。如果浮动元素后面还有文档流的文本,那么文本将会围绕着浮动元素存在。
clear:对元素进行清理实际上是为前面的浮动元素留出了垂直空间。具体表现为将该元素的margin-top重设(CSS1、CSS2)或者是增大清楚空间而margin-top不变(CSS2.1)。
浮动的特点:如果没有足够的水平空间,浮动元素将下移动,如果浮动元素高度不同,那么当它们向下移动时可能会被其他浮动元素“卡住”:
如图:
关于浮动与清除的一些方法:
HTML文件:
<div id="maincontent"> <div id="content1"></div> <div id="content2"></div> </div>CSS文件:
#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;}结果如下:
如何让maincontent包围住content1和content2呢?
有如下一些方法:
(a)让maincontent浮动——float:left;
(b)添加空白块
html中添加<br id="clear">:
<div id="content2"></div>
<br style="clear:both"/>
(c)maincontent中添加overflow:hidden。(值为hidden或者auto的overflow属性会自动清理包含的任何浮动元素。)
(d)after伪元素的应用:
CSS中添加如下样式:
#maincontent:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }.clear{ zoom:1;/*IE triggers hasLayout,高版本IE不需要了*/}最终结果如下:
其他方法略去,推荐c、d的方法。
4.关于布局:
布局可分为固定宽度、流式、弹性布局。各布局主要是单位的不同。一般使用px和em、%作为单位。
ps:弹性布局中,最好以%指定内部宽度(被包含框),而以em指定容器宽度(包含框),这样修改布局时,不需要所有宽度都修改。
两栏布局很简单,在此不赘述。
如下:
HTML文件:
<div class="content"> <div class="secondary">Secondary</div> <div class="primary">Primary</div> </div>
CSS文件:
.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;}
三栏布局:在primary中将之分为2部分。如下:
三栏布局还可以用负外边距解决最右边框(即pri_secondary框)的问题。此不赘述。
5.其他想说的几点:
a.更多的应用html5和css3。
b.圆角框(1.几张图像的覆盖 2.border-radius 3.border-image)、投影(1.负外边距 2.相对定位--left:-5px;等 3.box-shadow)、不透明度(rgba)及美化连接(突出显示不同的连接类型)。
参考书籍:CSS Mastery
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- css基础
- CSS基础
- css基础
- css基础
- CSS基础
- css基础
- css基础
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- 多线程入门
- K-O-M-B-U-CHA的故事
- java网站效率优化
- 北大ACM poj1636
- hdu4006
- CSS基础
- 让表格变得美观的标签
- VIMRC配置备份
- 道德经译文一
- Android的数据存储与IO - 手势
- hdoj1159
- 【USACO-Chapter1-1.3】【搜索】Calf Flac
- 基于mjpg-streamer-r63的源码分析之:基础知识详细解释[一]
- 基于mjpg-streamer-r63的源码分析之:基础知识详细解释[二]