(003)CSS基础

一、引言

　　CSS能够为页面添加样式，增强和改进内容的外观。提供结构的是XHTML：每个元素都标明了内容中的一个不同部分，而属性则传达了关于元素的更多信息。CSS是影响这些XHTML元素的呈现外观的另外一层要素。颜色、字体、大小、背景以及页面上的布局都属于内容的表现方面的因素，都能通过巧妙运用CSS来加以控制。

 

二、CSS规则剖析

　　如果说元素和属性是xhtml文档的原料的话，那么CSS文档的原料就是“规则”。“规则”是一个指令集，浏览器可以按照其指示基于所提供的描述性的值来改变xhtml元素的外观。一条css规则由几个部分组成，如下图所示：

　　选择符（selector）是规则中用于确定样式所应用到的目标元素的部分。它的作用范围大到可以影响某种元素的每一个实例，小到仅仅影响几个甚至一个元素。

　　样式声明又包含两个部分：属性和值。属性是元素的表现形式中将被修改的方面，如颜色、宽度或在页面上的位置。CSS语言中有大量属性可供使用。属性的值说明了应被应用到选定的元素上的特定样式。可接受的值取决于属性本身，有些属性的值可以有用空格分隔的多个值。

　　样式声明位于一对大括号“{}”之间。可以为一个选择符指定多个样式声明，以便用一条规则改变元素表现形式的多个方面。属性和其值之间用冒号（：）分隔，样式声明以一个分号结尾。分号可以将多个样式声明分隔开，但是如果规则中只有一个样式声明，那么分号是可选的。一系列的样式声明中的最后一个也是如此。为谨慎起见，养成在每个样式声明的后面都加上一个分号（即使只有一个样式声明）的习惯不是件坏事。

　　如果css代码没有遵守这些基本的结构和语法，例如，漏掉了闭合括号或分隔属性和值的冒号，那么整条规则甚至整个样式表都可能会失灵。就像xhtml一样，样式表应该是合适的正确构造的。w3c同样也提供了一个css校验器，它可以帮助你找出css样式表的错误。

 

三、CSS行高

　　行高是文本行的高度，是从一行文本的基线到其前面一行的基线的距离（基线（baseline）是文本所基于的一条不可见的线，g和p这些字母的下伸部分位于基线下方）。不要把行高和行距搞混了。行距是一个印刷术语，指两行之间额外的间隔，从一行的底端量到下一行的顶端。CSS中没有真正用于指定行距的方法，但可以通过增加文本的行高来获得同样的效果。

　　行高（line-height）在指定时应该使用相对单位（em），比如1.5em。这样的目的是不管字体大小将来究竟是多少，行高都是它的一倍半。

 

四、背景图像

　　使用CSS的background-image属性，可以向页面中加入装饰性的图像，而且不会把表现性的因素和内容混在一起。那些属于富有意义的内容的图像应该和其他内容放在一起。xhtml中几乎所有元素都能设置背景图像，元素的内容就覆盖在背景之上。默认情况下背景图像将在纵、横两个方向进行平铺：从元素左上角开始，在纵向和横向反复绘制，直到填满元素拥有的区域，这就像厨房地板铺的瓷砖。

　　可以使用background-repeat属性改变默认的平铺方式，说明图像应该只在横向平铺、只在纵向平铺或者根本不进行平铺。使用的属性值是repeat-x、repeat-y、none、repeat等。background-repeat的默认值是repeat。也可以使用no-repeat值完全禁止平铺。

 

五、向后可访问性

　　如果你想知道如何让较老的浏览器也能访问到你的文档，需要注意一个很重要的问题。你可能知道浏览器会忽略其无法识别的标记。例如，如果web页面中包含一个blooper标记，浏览器会完全忽略这个标记，因为浏览器无法识别这个标记。

　　对于样式表也同样如此。如果一个浏览器无法识别<style>和</style>，就会将其统统忽略。不过，这些标记中的声明不一定会被忽略，因为对浏览器而言，它们看上去就像是正常的文本。所以，样式声明会出现在页面的最上面！

　　为了解决这个问题，建议将声明包含在一个注释标记中。在此给出的实例中，注释标记的开始标记（<!--）紧接着出现在style开始标记之后，注释结束标记（-->）出现在style结束标记之前。

<style type="text/css">
    <!--
    　　@import url(sheet.css);
    　　h1    {color: red};
    -->
</style>

　　这样一来，较老的浏览器不仅会将style标记完全忽略，还会忽略声明，因为html注释不会显示出来。与此同时，能理解css的浏览器仍能正常的读取样式表。

　　

六、CSS注释

　　css注释跟html或者xhtml注释不一样。css注释是由/*和*/包围的。如下代码：

/* This is a css1 comment. */

　　当然css注释也可以跨越多行，如下代码：

/* This is a css1 comment, and
it can be several lines long without
any problem whatsoever */

　　此外css注释不允许嵌套。

　　由此可以跟上一段落进行比较，<!-- -->是html注释，因此当旧式浏览器无法认出style标记的时候，就要使用<!-- --> html的注释来将css规则注释，因为这里不是css注释/*和*/，因此浏览器仍然可以解析用<!-- -->包围的css规则（内部样式表内）。