网站推广 - 伴随着Web标准发展(8)

伴随着Web标准发展(8)

2007-10-12 17:07:34

At-Rules
关于CSS导入和media类型的说明。

CSS的语法

一条CSS的规则是由一个选择器和一个或多个声明组成。选择器决定了CSS规则可作用于文档中的哪个或哪些元素。一个属性和一个值组成了一个声明，声明要用大括号（{}）括起来，并且每个声明要用分号（；）结束。

一个简单的CSS规则如下:

p {
color:#0f0;
font-weight:bold;
}

这个例子中, p就是选择器,表示这条规则将作用于文档中的所有被<p>包围的内容。这个规则中，有两条声明，它们共同作用，使 <p>中的内容所有字体为绿色并且加粗。

想了解更详细的CSS规则，可以参阅 CSS Beginner’s Guide, CSS from the Ground Up或者一个CSS手册。

CSS Crib Sheet
一个实用CSS技巧列表
Writing Efficient CSS
John Gallant和Holly Bergevin告诉您如何书写紧凑的CSS。
Selectutorial - CSS selectors
一篇很好的介绍不同的CSS选择器及其是如何起作用的文章。

多余的元素和类

当我们刚开始学CSS时，很容犯一些错误：使用不必要的XHTML元素、多余的类和额外的 <div>。并不是说这些代码是不规范的，而是它与一些原则（如结构与表现相分离，使用简单的整洁的标记）相矛盾。

下面是一个使用不必要XHTML元素的例子:

<h3><em>Headline</em></h3>

如果你想使标题行变成斜体，可以使用CSS来重新定义 <h3>元素:

h3 {
font-style:italic;
}

下面是一个使用多余的类的例子:

<div id="main">
<div class="maincontent">
<p class="maincontenttext">
CSS的用法的奥秘很多
</p>
</div>
</div>

下面这么写可能更好:

<div id="main">
<div>
<p>
CSS的用法的奥秘很多
</p>
</div>
</div>

为了控制div#main中的元素，你可以在CSS代码中使用相关的的选择器，例如:

div#main p {
/* rules */
}

多数情况下，CSS允许你把想要的样式来定义XHTML，而不用增加额外的的标记。但是有的时候，增加一些额外的代码也是必要的。

CSS小窍门

很明显，一旦你去很认真的学习使用CSS，你一定会发现某些问题，这些问题可能是由误解造成的，可能是由对规则的不了解或者浏览器的漏洞造成的。CSS Crib Sheet就是一个好建议的荟萃，有Dave Shea整理，下面还将有一些重要的而且是Dave没有提及的小窍门。

先校验:在调试的时候，先由校验开始吧，HTML和CSS都要进行校验。许多问题都是由不规范代码引起的。
先在最先进的浏览器中调试，然后才轮到其他的浏览器: 如果你刚开始就用对CSS支持不好的浏览器调试，那么你所编的CSS将会逐渐适应这种错误的处理。当你继续在更先进的浏览器中测试，一些你所不希望的内容就会出现了。最好还是首先在一个有很好标准兼容性的浏览器中运行，然后再把代码拿到老一点的浏览器中去测试。
理解CSS的盒模型:为了获得一个元素的实际的宽度和高度，你需要用padding和border来增加它的 width或者height。在Internet Explorer 5.*/Win中, padding和border是被包括在已知的width和height。

假设你有如下的CSS代码:
```
div.box {
    width:300px;
    padding:20px;
    border:10px solid;
    }
```
所以这个div的总宽度是360px.
```
10px + 20px + 300px + 20px + 10px = 360px
```
在Internet Explorer 5.*/Win中，实际上总宽度为300px, 内容的宽度为240px.
```
300px - 10px - 20px - 20px - 10px =
    240px
```
为了绕过这个问题, 你同样可以使用CSS hack来给不同的浏览器提供不同的值，或者你尽量避免在同一个元素中同时定义width 和 padding或者width和border。

想了解关于CSS盒模型的更详细内容，请参阅 Box model。
为非零的数值加上单位:CSS要求一些属性值（如width、 height、font-size）必须要有单位。当属性值为0时是可以例外的。在那种情况下，没有单位也是必须的，因为0就是0，什么单位也都无所谓了。
理解漂浮物:尽管漂浮物这个概念很难理解，但是它很重要，因为CSS中会频繁的使用它来布局。有一些关于漂浮物的好文章，如Containing Floats、Floatutorial和Float: The Theory。
“LoVe/HAte?” 按照如下顺序为链接定义伪类：Link, Visited, Hover, Active.
“TRouBLed?”当使用简写来定义margin、padding和border时, 他们的顺序是从上开始的顺时针方向: 上、右、下、左。
以其功能给CLASS和ID命名，而不是它的表现: 如果你有一个CLASS名为.smallblue, 过后你决定用它来定位文本，使其为大号、红色，那么CLASS的名字就会被弄混淆的。最好能用名字来描述功能和结构，如.copyright和.im portant。
CSS是个敏感的东西:当HTML属性中的 class和id与CSS一起使用时，那可就要小心了。 (参见CSS2 syntax and basic data types).
检查你的ID:文档中一个元素只能使用一个id，且id必须唯一，而class可以被多个元素所共享。
使用合法的字符为class和 id命名: Class和id的名字只能由数字、字母和连字符组成，数字和连字符是不可以开头的。(参见 CSS2 syntax and basic data types).
正确的注释:CSS的注释是以/*开头，以*/结尾的:
```
/* This is a comment
    */
```

责任编辑:

相关文章

上海网站建设