CSS入门：CSS样式初步

• 初步
• 入门
• 样式
• 属性
• 元素
• 边框
• 显示
• 网页
• 位置
• dis

    现在你已经具备了CSS样式表的基础知识，知道样式表如何根据样式规则来描述网页信息的外观。接下来的几章将介绍一些最重要的样式属性，并教你开始在自己的样式表中使用CSS。

    CSS包括各种样式属性，用于控制字体、颜色、对齐方式和边距，这些只是网页样式的一些方面。CSS中的样式属性分为两大类：
    Ø布局属性；
    Ø格式化属性。

    布局属性包括影响网页中元素位置的属性。例如，布局属性可以控制内容的宽度、高度、边距、填充和对齐方式，甚至可以控制内容在网页中的准确位置。最后一点仅使用HTML代码是无法实现的。

    12.3.1  布局属性

    CSS布局属性用于决定内容在网页上如何排列。最重要的布局属性之一是display，它描述元素相对于其他元素如何显示。display属性有4个可能的取值。
    Øblock：元素显示在下一行，作为一个新段落。
    Ølist-item：元素显示在下一行，前面有列表元素标记（项目符号）。
    Øinline：元素显示在当前段落内。
    Ønone：元素隐藏不显示。

    将元素在网页上的显示想象成占据一块矩形区域，就更容易理解display属性：display属性控制该矩形区域如何显示。例如，block值使元素显示在下一行中，而inline使元素显示在之前的内容后。display是几个能够在大多数样式规则中使用的几个样式属性之一。下面的例子演示了如何设置display属性：
    display:block;

    注意：display属性依赖于相对位置的概念，相对位置指元素相对于网页中其他元素进行定位。CSS也支持绝对位置，将元素放在网页中特定的位置，而不考虑其他元素。你将在第14章学到这两种定位。 

    width和height属性控制元素矩形区域的大小。同许多与大小相关的CSS属性一样，width和height属性的值可使用几种不同的度量单位：
    Øin（英寸）；
    Øcm（厘米）；
    Øpx（像素）；
    Øcm（厘米）；
    Øpt（点）；
    Ømm（毫米）。

    在同一个样式表中，可以使用不同的度量单位，但类似的样式属性最好使用一致的单位。例如，字体大小属性的度量单位统一用点，尺寸统一用像素。下面是一个以像素为单位设置元素宽度的例子：
    width:200px;

    12.3.2  格式化属性

    CSS格式化属性用于控制网页内容的外观，而不是物理位置。最常用的格式化属性之一是border，它用于在元素四周建立一个可见的方框或部分边框。下列border属性提供了描述元素边框的方法：
    Øborder-width：边框的宽度；
    Øborder-color：边框的颜色；
    Øborder-style：边框的样式；
    Øborder-left：边框的的左边；
    Øborder-right：边框的右边；
    Øborder-top：边框的顶部；
    Øborder-bottom：边框的底部；
    Øborder：边框的所有边。

    border-width属性用于指定边框的宽度，通常以像素为单位，如下列代码所示：
    border-width:5px;

    属性border-color和border-style用于设置边框的颜色和样式。下面是一个如何设置这两个属性的例子：
    border-color:blue;
    border-style:dotted;
    border-style属性可设置为下列值之一。
    Øsolid：单实线。
    Ødouble：双实线。