CSS总结

java-he

浏览: 175014 次
性别:
来自: 北京

最近访客更多访客>>

rubskin

lx_emperor

sky54521

MichealT

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

[网站分类]4.其他技术区

CSS 浏览器 IE ASP HTML

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

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

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

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

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

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

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

2.盒模型

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

浏览器兼容：

一旦为页面设置了恰当的 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 >

分享到：

说说javascript write函数 | 数据结构中常用树之概念

2008-11-24 21:18
浏览 636
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS总结

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS总结

评论

发表评论

相关推荐

图象缓冲

检验邮箱

批处理命令总结

学习UML笔记

blog加上一个同页面浏览者聊天室代码

常见网页技巧

javascript 数组排序

javascript 在客户端绘制图表系列三——xy坐标曲线图

搭建php的运行环境

从网页导出excel

简单日期下拉框

php学习笔记1

php学习笔记2

分享一个表格排序程序

AJAX愉快之旅——prototype.js篇

Javascript 事件转移

网页打印脚本

记录访问者IP

JAVASCRIPT COOKIE初级指南

PHP读取4种配置文件(php,ini,yaml,xml)

最近访客更多访客>>