浏览器会从档案 mystyle.css 中读到样式声明 ， 并根据它来格式文档 。外部样式表可以在任何文本编辑器中进行编辑 。档案不能包含任何的 html 标籤 。样式表应该以 .css 扩展名进行保存 。下面是一个样式表档案的例子：hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}不要在属性值与单位之间留有空格 。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ， 它仅在 IE 6 中有效 ， 但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作 。内部样式表当单个文档需要特殊的样式时 ， 就应该使用内部样式表 。你可以使用 内联样式由于要将表现和内容混杂在一起 ， 内联样式会损失掉样式表的许多优势 。请慎用这种方法 ， 例如当样式仅需要在一个元素上套用一次时 。要使用内联样式 ， 你需要在相关的标籤内使用样式（style）属性 。Style 属性可以包含任何 CSS 属性 。本例展示如何改变段落的颜色和左外边距：
This is a paragraph
多重样式如果某些属性在不同的样式表中被同样的选择器定义 ， 那幺属性值将从更具体的样式表中被继承过来 。例如 ， 外部样式表拥有针对 h3 选择器的三个属性：h3 { color: red; text-align: left; font-size: 8pt; }而内部样式表拥有针对 h3 选择器的两个属性： h3 { text-align: right; font-size: 20pt; }假如拥有内部样式表的这个页面同时与外部样式表连结 ， 那幺 h3 得到的样式是：color: red; text-align: right; font-size: 20pt;即颜色属性将被继承于外部样式表 ， 而文字排列（text-alignment）和字型尺寸（font-size）会被内部样式表中的规则取代 。CSS 允许套用纯色作为背景 ， 也允许使用背景图像创建相当複杂的效果 。CSS 在这方面的能力远远在 HTML 之上 。背景色可以使用 background-color 属性为元素设定背景色 。这个属性接受任何合法的颜色值 。这条规则把元素的背景设定为灰色：p {background-color: gray;}如果您希望背景色从元素中的文本向外少有延伸 ， 只需增加一些内边距：p {background-color: gray; padding: 20px;}可以为所有元素设定背景色 ， 这包括 body 一直到 em 和 a 等行内元素 。background-color 不能继承 ， 其默认值是 transparent 。transparent 有“透明”之意 。也就是说 ， 如果一个元素没有指定背景色 ， 那幺背景就是透明的 ， 这样其祖先元素的背景才能可见 。背景图像要把图像放入背景 ， 需要使用 background-image 属性 。background-image 属性的默认值是 none ， 表示背景上没有放置任何图像 。如果需要设定一个背景图像 ， 必须为这个属性设定一个 URL 值：body {background-image: url(/i/eg_bg_04.gif);}大多数背景都套用到 body 元素 ， 不过并不仅限于此 。下面例子为一个段落套用了一个背景 ， 而不会对文档的其他部分套用背景：p.flower {background-image: url(/i/eg_bg_03.gif);}您甚至可以为行内元素设定背景图像 ， 下面的例子为一个连结设定了背景图像：a.radio {background-image: url(/i/eg_bg_07.gif);}理论上讲 ， 甚至可以向 textareas 和 select 等替换元素的背景套用图像 ， 不过并不是所有用户代理都能很好地处理这种情况 。另外还要补充一点 ， background-image 也不能继承 。事实上 ， 所有背景属性都不能继承 。背景重複如果需要在页面上对背景图像进行平铺 ， 可以使用 background-repeat 属性 。属性值 repeat 导致图像在水平垂直方向上都平铺 ， 就像以往背景图像的通常做法一样 。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重複 ， no-repeat 则不允许图像在任何方向上平铺 。默认地 ， 背景图像将从一个元素的左上角开始 。请看下面的例子：body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; }背景定位 可以利用 background-position 属性改变图像在背景中的位置 。下面的例子在 body 元素中将一个背景图像居中放置：body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:center; }为 background-position 属性提供值有很多方法 。首先 ， 可以使用一些关键字：top、bottom、left、right和 center 。通常 ， 这些关键字会成对出现 ， 不过也不总是这样 。还可以使用长度值 ， 如 100px 或5cm ， 最后也可以使用百分数值 。不同类型的值对于背景图像的放置稍有差异 。关键字图像放置关键字最容易理解 ， 其作用如其名称所表明的 。例如 ， top right 使图像放置在元素内边距区的右上角 。根据规範 ， 位置关键字可以按任何顺序出现 ， 只要保证不超过两个关键字 - 一个对应水平方向 ， 另一个对象垂直方向 。如果只出现一个关键字 ， 则认为另一个关键字是 center 。所以 ， 如果希望每个段落的中部上方出现一个图像 ， 只需声明如下：p { background-image:url('bgimg.gif'); background-repeat:no-repeat; background-position:top; }下面是等价的位置关键字：单一关键字等价的关键字centercenter centertoptop center 或 center topbottombottom center 或 center bottomrightright center 或 center rightleftleft center 或 center left百分数值百分数值的表现方式更为複杂 。假设你希望用百分数值将图像在其元素中居中 ， 这很容易：body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50% 50%; }这会导致图像适当放置 ， 其中心与其元素的中心对齐 。换句话说 ， 百分数值同时套用于元素和图像 。也就是说 ， 图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐 。如果图像位于 0% 0% ， 其左上角将放在元素内边距区的左上角 。如果图像位置是 100% 100% ， 会使图像的右下角放在右边距的右下角 。因此 ， 如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处 ， 可以这样声明：body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:66% 33%; }如果只提供一个百分数值 ， 所提供的这个值将用作水平值 ， 垂直值将假设为 50% 。这一点与关键字类似 。background-position的默认值是 0% 0% ， 在功能上相当于 top left 。这就解释了背景图像为什幺总是从元素内边距区的左上角开始平铺 ， 除非您设定了不同的位置值 。长度值长度值解释的是元素内边距区左上角的偏移 。偏移点是图像的左上角 。比如 ， 如果设定值为 50px 100px ， 图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50px 100px; }注意 ， 这一点与百分数值不同 ， 因为偏移只是从一个左上角到另一个左上角 。也就是说 ， 图像的左上角与 background-position 声明中的指定的点对齐 。背景关联如果文档比较长 ， 那幺当文档向下滚动时 ， 背景图像也会随之滚动 。当文档滚动到超过图像的位置时 ， 图像就会消失 。您可以通过 background-attachment 属性防止这种滚动 。通过这个属性 ， 可以声明图像相对于可视区是固定的（fixed） ， 因此不会受到滚动的影响：body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed }background-attachment 属性的默认值是 scroll ， 也就是说 ， 在默认的情况下 ， 背景会随文档滚动 。