CSS 指层叠样式表 (Cascading Style Sheets) 。

我并没有单独的学习过,也没有买过书,只是在工作中用多了就会了。

首先推荐一个学习网址:http://www.w3school.com.cn/css/css_intro.asp

其次建议下载一份 CSS手册。

下面只总结初学者比较容易忽略的一些问题:

1.样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 d 拥有最高的优先权。

a 浏览器缺省设置
b 外部样式表
c 内部样式表(位于 <head> 标签内部)
d 内联样式(在 HTML 元素内部)


2.盒模型

ct_boxmodel.gif

元素框的最内部分是实际的内容,直接包围内容的是内边距。
内边距呈现了元素的背景。
内边距的边缘是边框。
边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

浏览器兼容:

一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。
然而 IE 5 和 6 的呈现却是不正确的。
根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,
而内容周围的 padding 和 border 值是另外计算的。不幸的是,
IE5.X 和 6 在怪异模式中使用自己的非标准模型。
这些浏览器的 width 属性不是内容的宽度,而是内容、填充和边框的宽度的总和。

虽然有方法解决这个问题。
但是目前最好的解决方案是回避这个问题。
也就是,不要给元素添加具有指定宽度的内边距,
而是尝试将内边距或外边距添加到元素的父元素和子元素。

术语翻译
element : 元素。
padding : 内边距,也有资料将其翻译为填充。
border : 边框。
margin : 外边距,也有资料将其翻译为空白或空白边。
把 padding 和 margin 统一地称为内边距和外边距。

3.一个非常关键的属性position

CSS中有不少属性是用来定位的,这也为我们采用DIV+CSS 布局,取代 古老的tabel布局提供了基础支持。

bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
clip: 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow: 设置当元素的内容溢出其区域时发生的事情。
position: 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
top: 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
vertical-align: 设置元素的垂直对齐方式。
z-index: 设置元素的堆叠顺序。

而这其中非常关键和初学者容易搞混的概念就是 position 属性。

static 默认。

位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。

relative

位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。
absolute

位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。
 
fixed

位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。

不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。

这些属性是DIV布局的奠基石。由于浏览器的不同,盒模式中也有差异,比如说对于宽度盒高度,在不同浏览器中定义是不同的,IE6是包含边框 、内边距,而FF的只是指内容的宽度。

细节上的差异,往往是我们在日常工作中能总结出来的。所以也不必太在意。当你的CSS写的不兼容时候,你自然就会想起这些内容。

关于布局部分就没有总结,其实最常见就是clear 和 float属性 ,当然滚动条部分也属于这里。

4.对于javascript 操作 CSS属性

一般在手册或者前面提供的那个网址中,对应的CSS属性有对应的js方法。但是有一点是很多程序员都会犯的错误。

就是操作(特别是获取外联CSS文件中的相应属性)

外联特指
{
 b 外部样式表
 c 内部样式表(位于 <head> 标签内部)
}
往往有取不到值的情况发生:

外部CSS文件内容:.aa{width:100px;height:100px;background:#ccc;}

 a.html:

 1 <html>
 2 <head>
 3  <link rel="stylesheet" type="text/css" href="css.css">
 4 </head>
 5 <body>
 6 <div class="aa" id="aa"></div>
 7 <input type="button" value="获取" onclick="ddd()">
 8 <script>
 9 function ddd()
10 {
11 
12     alert(document.getElementById('aa').style.width);
13 }
14 </script>
15 </body>
16 </html>

这样是取不到你想要的结果的。

这里就有两种方法避免问题:

1.CSS直接写在元素里:

<div class="aa" id="aa" style="width:100px;"></div>

2.js获取currentStyle

eg:样式表还是写在外部

2.html:

< html >
< head >
 
< link  rel ="stylesheet"  type ="text/css"  href ="css.css" >
</ head >
< body >
< div  class ="aa"  id ="aa" ></ div >
< input  type ="button"  value ="获取"  onclick ="ddd()" >
< script >

var  getRuntimeStyle  =   function (obj, k) 
{
    
var  v  =   null ;
    
if  (obj.currentStyle) v  =  obj.currentStyle[k];
    
else  v  =  window.getComputedStyle(obj,  null ).getPropertyValue(k);
    
return  v;
}
var  ddd  =   function ()
{
    obj 
=  document.getElementById('aa');
    alert(getRuntimeStyle(obj,'width'));
    alert(getRuntimeStyle(obj,'height'));
    alert(getRuntimeStyle(obj,'backgroundColor'));
// IE用 style 的 js 属性,和 FF有区别,FF应该写background-color,即CSS属性
    alert(getRuntimeStyle(obj,'background - color'))
    alert(getRuntimeStyle(obj,'zIndex'))
}
</ script >
</ body >
</ html >

 

posted on 2008-11-24 21:18 -274°C 阅读(2639) 评论(1)  编辑  收藏 所属分类: web前端


FeedBack:
# re: CSS总结
2009-09-15 22:45 | 路过
<style type="text/css">
.wrap{position:relative;}
.btns{zoom:1;}
.btns *{outline:0;zoom:1;background:#f2f2f2;}
.btns button::-moz-focus-inner{border-color:transparent!important;}
</style>
<div class="wrap">
<div class="btns">
<button type="button">确定</button><button type="button">取消</button>
<a href="#">确定</a><a href="#">取消</a>
</div>
</div>  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 

常用链接

留言簿(21)

随笔分类(265)

随笔档案(242)

相册

JAVA网站

关注的Blog

搜索

  •  

积分与排名

  • 积分 - 871703
  • 排名 - 37

最新评论