css2中相邻边框在合并时的标准

Posted by 谢锋 on 十一月 27th, 2009

每个单元格都可以设置各自的边框颜色、样式和宽度等属性，那么相领边框在合并时将以谁为准？在css2中规定其边框在合并时的标准如下

一：如果边框的border-sytle设置为hidden，那么它的优先级高于任何的其他相冲突的边框，何任边框只要有该设置，其它的设置都无效。

二：如果边框的属性中有none，那么它的优先级是最低的，只有在该边重合的所有元素的边框属性都是none时，该边框才会被省略。

三：如果重合的边框中没有被设置为hidden的，并且至少有一个不是none那么重合的边框中粗的优先级先于细的，如果几个边框的border-width相同那么样式的先级次序高到低依次为”double”、”solid”、”dashed”、”ridge”、”ouset”、”groove”、”inset”.

四：如果边框样式的其他设置均相同，只是颜色上有区别那么单元格的样式最优先，然后是行、行组、列、列组的样式，最后是表格的样式。（IE还没有执行上面这个规定）。

原创文章，转载请注明： 转载自谢锋的博客

本文链接地址: http://www.onlycss.cn/2009/11/border-unite-standard/

标签：, 文章归类于: xhtml+css 292 views 1 条评论

css选择器的优先级

Posted by 谢锋 on 十一月 24th, 2009

Css的全名叫”层叠样式表“,其实可以理解为“冲突”的解决方案。
举个例子：
<html>
<head>
<title>层叠特性</title>
<style type=”text/css”>
p{ color:green;}
.red{color:red;}
.purple{color:purple;}
#line3{color:blue;}
</style>
</head>
<body>
 <p >这是第1行文本</p>
 <p>这是第2行文本</p>
 <p id=”line3″>这是第3行文本</p>
 <p style=”color:orange;” id=”line3″>这是第4行文本</p>
 <p>这是第5行文本</p>
</body>
</html>
第1行比较简单，就显示绿色。第2行使用了类别样式，发生冲突，但是因为类别选择器的优先级要高于标记选择器，所以显示为类别选择器的红色。第3同时用了类别选择器跟ID选择器，因为ID选择器的优先级高于类别选择器，所以显示为ID选择器的蓝色。第四行同时用了行内样式跟ID选择器，因为行内样式的级别是最高的，所以显示为行内样式的橙色。第5行同时使用了两个类别样式，两个的优先级相同此时以前者为准，显示为紫色。
其上面各种选择器优先级的效果图如下：

css层叠特性

原创文章，转载请注明： 转载自谢锋的博客

本文链接地址:http://www.onlycss.cn/2009/11/order-of-selector/

标签：,, 文章归类于: xhtml+css 258 views 1 条评论

在html中引入css的方法及优先级

Posted by 谢锋 on 十一月 23rd, 2009

Html与css是两个作用不同的语言，它们同时对一个网页产生作用，我个人的理解：html就像一个人有骨架，css就像一个人的血肉。因此只有将html与css挂接在一起，才能正常工作。

在html中引入css有以下几种方法：

一：行内式

行内样式指的就是在style属性中设定css样式，使用如下语句：

<h1 style=”color:white;background-color:blue”>

              This is a line of Text.

       </h1>

这种方式本质上没有体现出css的优势，因为还是没有摆脱“网页肥胖”，因此这种方式不推荐使用。

二：嵌入式

嵌入式就是将对页面中各种元素的设置集中写在<head>和</head>之间，使用如下语句：

<style>

       h1{

              color:white;

              background-color:blue

              }

       </style>

对于单一页面，这种方式很方便，但是对于一个有很多页面的网站，还是没有将css的优势发挥出来，因此也不推荐。

三：链接式与导入式

导入式和链接式都是将css写在一个文件中，然后再将这个独立的css文件引入html文件，使用如下语句：

导入式：<style>

       @import”mystyle.css”;

</style>

链接式：<link href=”mystyle.css” rel=”stylesheet” />

导入式与链接式的区别：

虽然导入式与链接式都是先将css写入到一个独立文件中，然后再将其引入到html中，但采用这两种方式后的显示效果也有不同，使用链接式时，会在装载页面主体部分之前装载css文件，这样显示出来的风页从一开始就是带有样式的。而使用导入式时，会在整个页面装载完成后再装载css文件，对于有些浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式的页面，闪烁一下之后再出现设置样式后的效果。从浏览者的感受来说，这是使用导入式的一个缺陷。

对于大型网站而言，为了维修方便，会把所有要用到的css放到几个css文件中。当使用链接式引入时，就需要引用多次。如果使用导入式引入css文件时，可以引进一个总的css文件，在这个文件中再导入其它独立的css文件，而链接式则不具备这个特性。如果仅需要引一个css文件，则使用链接式。但是如果希望通过JS来动态调用哪个css文件，则必须使用链接方式才能实现！

这四种引入css方式的优先级为：

行内式>嵌入式>导入式与链接式

原创文章，转载请注明： 转载自谢锋的博客

本文链接地址:http://www.onlycss.cn/2009/11/method-of-import-css/

标签： 文章归类于: xhtml+css 299 views 1 条评论
Page 1 of 11