轮廓QoutlineQ是l制于元素周围的一条线Q位于边框边~的外围Q可起到H出元素的作用?/span>
CSS outline 属性规定元素轮廓的样式、颜色和宽度?/span>
轮廓QOutlineQ?实例Q?/h2>- 在元素周围画U?/a>
- 本例演示使用outline属性在元素周围M条线?/dd>
- 讄轮廓的颜?/a>
- 本例演示如何讄轮廓的颜艌Ӏ?/dd>
- 讄轮廓的样?/a>
- 本例演示如何讄轮廓的样式?/dd>
- 讄轮廓的宽?/a>
- 本例演示如何讄轮廓的宽度?/dd>
CSS Ҏ属?/h2>
"CSS" 列中的数字指C哪?CSS 版本定义了该属性?/p>
| 属?/th> | 描述 | CSS |
|---|---|---|
| outline | 在一个声明中讄所有的轮廓属性?/td> | 2 |
| outline-color | 讄轮廓的颜艌Ӏ?/td> | 2 |
| outline-style | 讄轮廓的样式?/td> | 2 |
| outline-width | 讄轮廓的宽度?/td> | 2 |
]]>
CSS 表格属性可以帮助您极大地改善表格的外观?/span>
表格Ҏ
如需?CSS 中设|表D框，请?border 属性?/p>
下面的例子ؓ table、th 以及 td 讄了蓝色边框：
table, th, td { border: 1px solid blue; } h意，上例中的表格h双线条边框。这是由?table、th 以及 td 元素都有独立的边框?/p>
如果需要把表格昄为单U条ҎQ请使用 border-collapse 属性?/p>
折叠Ҏ
border-collapse 属性设|是否将表格Ҏ折叠为单一ҎQ?/p>
table { border-collapse:collapse; } table,th, td { border: 1px solid black; } 表格宽度和高?/h2>
通过 width ?height 属性定义表格的宽度和高度?/p>
下面的例子将表格宽度讄?100%Q同时将 th 元素的高度设|ؓ 50pxQ?/p>
table { width:100%; } th { height:50px; } 表格文本寚w
text-align ?vertical-align 属性设|表g文本的对齐方式?/p>
text-align 属性设|水q_齐方式，比如左对齐、右寚w或者居中：
td { text-align:right; } vertical-align 属性设|垂直对齐方式，比如剙寚w、底部对齐或居中寚wQ?/p>
td { height:50px; vertical-align:bottom; } 表格颜色
下面的例子设|边框的颜色Q以?th 元素的文本和背景颜色Q?/p>
table, td, th { border:1px solid green; } th { background-color:green; color:white; } CSS Table 属?/h2>
| 属?/th> | 描述 |
|---|---|
| border-collapse | 讄是否把表D框合qؓ单一的边框?/td> |
| border-spacing | 讄分隔单元D框的距离?/td> |
| caption-side | 讄表格标题的位|?/td> |
| empty-cells | 讄是否昄表格中的I单元格?/td> |
| table-layout | 讄昄单元、行和列的算法?/td> |
亲自试一?- 更多实例
- 制作一个漂亮的表格
- 本例演示如何创造一个漂亮的表格?/dd>
- 昄表格中的I单?/a>
- 本例演示是否昄表格中的I单元?/dd>
- 讄表格Ҏ之间的空?/a>
- 本例演示如何讄单元D框之间的距离?/dd>
- 讄表格标题的位|?/a>
- 本例演示如何定位表格的标题?/dd>
]]>
CSS 列表属性允怽攄、改变列表项标志Q或者将囑փ作ؓ列表Ҏ志?/span>
CSS 列表
从某U意义上Ԍ不是描述性的文本的Q何内定w可以认ؓ是列表。h口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示Z个列表或者是列表的列表?/p>
׃列表如此多样Q这使得列表相当重要Q所以说QCSS 中列表样式不太丰富确实是一大憾事?/p>
列表cd
要媄响列表的样式Q最单（同时支持最充分Q的办法是改变其标志类型?/p>
例如Q在一个无序列表中Q列表项的标?(marker) 是出现在各列表项旁边的圆炏V在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符受?/p>
要修改用于列表项的标志类型，可以使用属?nbsp;list-style-typeQ?/p>
ul {list-style-type : square}上面的声明把无序列表中的列表Ҏ志设|ؓ方块?/p>
列表图?/h3>
有时Q常规的标志是不够的。你可能惛_各标志用一个图像，q可以利?nbsp;list-style-image 属性做刎ͼ
ul li {list-style-image : url(xxx.gif)}只需要简单地使用一?url() |可以用图像作为标志?/p>
列表标志位置
CSS2.1 可以定标志出现在列表项内容之外q是内容内部。这是利?nbsp;list-style-position 完成的?/p>
写列表样?/h3>
为简单v见，可以以?3 个列表样式属性合qؓ一个方便的属性：list-styleQ就像这P
li {list-style : url(example.gif) square inside}list-style 的值可以按M序列出Q而且q些值都可以忽略。只要提供了一个|其它的就会填入其默认倹{?/p>
CSS 列表实例Q?/h2>- 在无序列表中的不同类型的列表标记
- 本例演示在CSS中不同类型的列表Ҏ记?/dd>
- 在有序列表中不同cd的列表项标记
- 本例演示在CSS中不同类型的列表Ҏ记?/dd>
- 所有的列表样式cd
- 本例演示在CSS中所有不同类型的列表Ҏ记?/dd>
- 图像作为列表项标记
- 本例演示如何图像作为列表项标记?/dd>
- 攄列表标记
- 本例演示在何处放|列表标记?/dd>
- 在一个声明中定义所有的列表属?/a>
- 本例演示所有针对列表的属性设|于一个简写属性?/dd>
CSS 列表属?list)
| 属?/th> | 描述 |
|---|---|
| list-style | 写属性。用于把所有用于列表的属性设|于一个声明中?/td> |
| list-style-image | 图象设|ؓ列表Ҏ志?/td> |
| list-style-position | 讄列表中列表项标志的位|?/td> |
| list-style-type | 讄列表Ҏ志的cd?/td> |
| marker-offset |
]]>
我们能够以不同的Ҏ为链接设|样式?/span>
讄链接的样?/h2>
能够讄链接样式?CSS 属性有很多U（例如 color, font-family, background {等Q?/p>
链接的特D性在于能够根据它们所处的状态来讄它们的样式?/p>
链接的四U状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上?/li>
- a:active - 链接被点ȝ时刻
实例
a:link {color:#FF0000;} /* 未被讉K的链?*/ a:visited {color:#00FF00;} /* 已被讉K的链?*/ a:hover {color:#FF00FF;} /* 鼠标指针Ud到链接上 */ a:active {color:#0000FF;} /* 正在被点ȝ链接 */ 当ؓ链接的不同状态设|样式时Q请按照以下ơ序规则Q?/p>
- a:hover 必须位于 a:link ?a:visited 之后
- a:active 必须位于 a:hover 之后
常见的链接样?/h2>
在上面的例子中，链接Ҏ其状态改变颜艌Ӏ?/p>
让我们看看其他几U常见的讄链接样式的方法：
文本修饰
text-decoration 属性大多用于去掉链接中的下划线Q?/p>
实例
a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} 背景?/h3>
background-color 属性规定链接的背景Ԍ
实例
a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;} 更多实例
- 向链接添加不同的样式
- 本例演示如何向链接添加其他样式?/dd>
- 高 - 创徏链接?/a>
- 本例演示了更高的示例，我们l合了若q种 CSS 属性，来把链接昄为方框?/dd>
]]>
CSS 字体属性定义文本的字体pd、大、加_、风|如斜体）和变形（如小型大写字母）?/span>
CSS 字体pd
?CSS 中，有两U不同类型的字体pd名称Q?/p>
- 通用字体pd - 拥有怼外观的字体系l组合（比如 "Serif" ?"Monospace"Q?/li>
- 特定字体pd - 具体的字体系列（比如 "Times" ?"Courier"Q?/li>
除了各种特定的字体系列外QCSS 定义?5 U通用字体pdQ?/p>
- Serif 字体
- Sans-serif 字体
- Monospace 字体
- Cursive 字体
- Fantasy 字体
如果需要了解更多有兛_体系列的知识Q请阅读 CSS 字体pd?/p>
CSS 字体实例Q?/h2>- 讄文本的字?/a>
- 本例演示如何讄文本字体?/dd>
- 讄字体寸
- 本例演示如何讄字体寸?/dd>
- 讄字体风格
- 本例演示如何讄字体风格?/dd>
- 讄字体的异?/a>
- 本例演示如何讄字体的异体?/dd>
- 讄字体的粗l?/a>
- 本例演示如何讄字体的粗l?/dd>
- 所有字体属性在一个声明之?/a>
- 本例演示如何使用写属性将字体属性设|在一个声明之内?/dd>
CSS 字体属?/h2>
| 属?/th> | 描述 |
|---|---|
| font | 写属性。作用是把所有针对字体的属性设|在一个声明中?/td> |
| font-family | 讄字体pd?/td> |
| font-size | 讄字体的尺寸?/td> |
| font-size-adjust | 当首选字体不可用ӞҎ换字体进行智能羃放。（CSS2.1 已删除该属性。） |
| font-stretch | 对字体进行水qx伸。（CSS2.1 已删除该属性。） |
| font-style | 讄字体风格?/td> |
| font-variant | 以小型大写字体或者正常字体显C文本?/td> |
| font-weight | 讄字体的粗l?/td> |
]]>
CSS 文本属性可定义文本的外观?/span>
通过文本属性，您可以改变文本的颜色、字W间距，寚w文本Q装饰文本，Ҏ本进行羃q，{等?/span>
水^寚w
text-align 是一个基本的属性，它会影响一个元素中?span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">文本?/span>互相之间的对齐方式。它的前 3 个值相当直接，不过W?4 个和W?5 个则略有些复杂?/p>
?left、right ?center 会导致元素中的文本分别左寚w、右寚w和居中?/p>
西方语言都是从左向右读，所?text-align 的默认值是 left。文本在左边界对齐，双界呈锯ӞUCؓ“从左到右”文本Q。对于希伯来语和阿拉伯语之类的的语言Qtext-align 则默认ؓ rightQ因些语a从右向左诅R不出所料，center 会每个文本行在元素中居中?/p>
提示Q?/span>块U元素或表元素居中，要通过在这些元素上适当地设|左、右外边距来实现?/p> 您可能会认ؓ text-align:center ?<CENTER> 元素的作用一P但实际上二者大不相同?/p> <CENTER> 不仅影响文本Q还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本w不会从一D늧到另一端，只是其中的文本受影响?/p> 最后一个水q_齐属性是 justify?/p> 在两端对齐文本中Q文本行的左右两端都攑֜父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意CQ两端对齐文本在打印领域很常见?/p> 需要注意的是，要由用户代理Q而不?CSSQ来定两端寚w文本如何拉Q以填满父元素左双界之间的I间。如需了解详情Q请参阅 CSS text-align 属性参考页?/p>text-align:center ?<CENTER>
justify
字间?/h2>
word-spacing 属?/a>可以改变字（单词Q之间的标准间隔。其默认?normal 与设|gؓ 0 是一L?/p> word-spacing 属性接受一个正长度值或负长度倹{如果提供一个正长度|那么字之间的间隔׃增加。ؓ word-spacing 讄一个负|会把它拉q： 注释Q?/span>如需深入理解 CSS ?#8220;?#8221;QwordQ的定义Q请讉K CSS word-spacing 属性参考页?/p>p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;} <p class="spread"> This is a paragraph. The spaces between words will be increased. </p> <p class="tight"> This is a paragraph. The spaces between words will be decreased. </p>
字符转换
text-transform 属?/a>处理文本的大写。这个属性有 4 个|
- none
- uppercase
- lowercase
- capitalize
默认?none Ҏ本不做Q何改动，用源文档中的原有大小写。顾名思义Quppercase ?lowercase 文本{换ؓ全大写和全小写字W。最后，capitalize 只对每个单词的首字母大写?/p>
作ؓ一个属性，text-transform 可能无关紧要Q不q如果您H然军_把所?h1 元素变ؓ大写Q这个属性就很有用。不必单独地修改所?h1 元素的内容，只需使用 text-transform Z完成q个修改Q?/p>
h1 {text-transform: uppercase}使用 text-transform 有两斚w的好处。首先，只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本n。其ơ，如果您以后决定将所有大写再切换ؓ原来的大写Q可以更Ҏ地完成修攏V?/p>
文本方向
如果您阅ȝ是英文书c，׃从左到右、从上到下地阅读Q这是英文的流方向。不q，q不是所有语a都如此。我们知道古汉语是从右到左来阅ȝQ当然还包括希伯来语和阿拉伯语等{。CSS2 引入了一个属性来描述其方向性?/p>
direction 属?/a>影响块元素中文本的书写方向、表中列布局的方向、内Ҏq_充其元素框的方向、以及两端对齐元素中最后一行的位置?/p> 注释Q?/span>对于行内元素Q只有当 unicode-bidi 属?/a>讄?embed ?bidi-override 时才会应?direction 属性?/p> direction 属性有两个|ltr ?rtl。大多数情况下，默认值是 ltrQ显CZ左到右的文本。如果显CZ叛_左的文本Q应使用?rtl?/p>
CSS 文本实例Q?/h2>- 讄文本颜色
- 本例演示如何讄文本的颜艌Ӏ?/dd>
- 讄文本的背景颜?/a>
- 本例颜色如何讄部分文本的背景颜艌Ӏ?/dd>
- 规定字符间距
- 本例演示如何增加或减字W间距?/dd>
- 使用癑ֈ比设|行间距
- 本例演示如何使用癑ֈ比值来讄D落中的行间距?/dd>
- 使用像素D|行间距
- 本例演示如何使用像素值来讄D落中的行间距?/dd>
- 使用数值来讄行间?/a>
- 本例演示如何使用一个数值来讄D落中的行间距?/dd>
- 寚w文本
- 本例演示如何寚w文本?/dd>
- 修饰文本
- 本例演示如何向文本添加修饰?/dd>
- ~进文本
- 本例演示如何~进文本首行?/dd>
- 控制文本中的字母
- 本例演示如何控制文本中的字母?/dd>
- 在元素中止文本折行
- 本例演示如何止在元素中的文本折行?/dd>
- 增加单词间距
- 本例演示如何增加D落中单词间的距R?/dd>
CSS 文本属?/h2>
| 属?/th> | 描述 |
|---|---|
| color | 讄文本颜色 |
| direction | 讄文本方向?/td> |
| line-height | 讄行高?/td> |
| letter-spacing | 讄字符间距?/td> |
| text-align | 寚w元素中的文本?/td> |
| text-decoration | 向文本添加修饰?/td> |
| text-indent | ~进元素中文本的首行?/td> |
| text-shadow | 讄文本阴媄。CSS2 包含该属性，但是 CSS2.1 没有保留该属性?/td> |
| text-transform | 控制元素中的字母?/td> |
| unicode-bidi | 讄文本方向?/td> |
| white-space | 讄元素中空白的处理方式?/td> |
| word-spacing | 讄字间距?/td> |
]]>
CSS 允许应用U色作ؓ背景Q也允许使用背景囑փ创徏相当复杂的效果?/span>
CSS 在这斚w的能力远q在 HTML 之上?/span>
背景重复
如果需要在面上对背景囑փq行q铺Q可以?nbsp;background-repeat 属?/a>?/p> 属性?repeat D囑փ在水q_直方向上都^铺，像以往背景囑փ的通常做法一栗repeat-x ?repeat-y 分别D囑փ只在水^或垂直方向上重复Qno-repeat 则不允许囑փ在Q何方向上q铺?/p> 默认圎ͼ背景囑փ从一个元素的左上角开始。请看下面的例子Q?/p> 如需查看上例的效果，可以亲自试一?/a>?/p>body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; }
背景定位
| 单一关键?/th> | {h的关键字 |
|---|---|
| center | center center |
| top | top center ?center top |
| bottom | bottom center ?center bottom |
| right | right center ?center right |
| left | left center ?center left |
癑ֈ数?/h3>
癑ֈ数值的表现方式更ؓ复杂。假设你希望用百分数值将囑փ在其元素中居中，q很ҎQ?/p>
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50% 50%; } q会D囑փ适当攄Q其中心与其元素的中心对齐?span style="margin: 0px; padding: 0px; border: 0px; font-family: 微Y雅黑; font-size: 14px; font-weight: 800;">换句话说Q百分数值同时应用于元素和图像?/span>也就是说Q图像中描述?50% 50% 的点Q中心点Q与元素中描qCؓ 50% 50% 的点Q中心点Q对齐?/p>
如果囑փ位于 0% 0%Q其左上角将攑֜元素内边距区的左上角。如果图像位|是 100% 100%Q会使图像的右下角放在右边距的右下角?/p>
因此Q如果你x一个图像放在水qx?2/3、垂直方?1/3 处，可以q样声明Q?/p>
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:66% 33%; } 如果只提供一个百分数|所提供的这个值将用作水^|垂直值将假设?50%。这一点与关键字类伹{?/p>
background-position 的默认值是 0% 0%Q在功能上相当于 top left。这p释了背景囑փZ么L从元素内边距区的左上角开始^铺，除非您设|了不同的位|倹{?/p>
长度?/h3>
长度D释的是元素内边距区左上角的偏UR偏Uȝ是图像的左上角?/p>
比如Q如果设|gؓ 50px 100pxQ图像的左上角将在元素内边距区左上角向右 50 像素、向?100 像素的位|上Q?/p>
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50px 100px; } 注意Q这一点与癑ֈ数g同，因ؓ偏移只是从一个左上角到另一个左上角。也是_囑փ的左上角?background-position 声明中的指定的点寚w?/p>
背景兌
如果文档比较长，那么当文档向下滚动时Q背景图像也会随之滚动。当文档滚动到超q图像的位置Ӟ囑փ׃消失?/p>
您可以通过 background-attachment 属?/a>防止q种滚动。通过q个属性，可以声明囑փ相对于可视区是固定的QfixedQ，因此不会受到滚动的媄响：
body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed } 如需查看上例的效果，可以亲自试一?/a>?/p> background-attachment 属性的默认值是 scrollQ也是_在默认的情况下，背景会随文档滚动?/p>
CSS 背景实例
- 讄背景颜色
- 本例演示如何为元素设|背景颜艌Ӏ?/dd>
- 讄文本的背景颜?/a>
- 本例颜色如何讄部分文本的背景颜艌Ӏ?/dd>
- 图像设|ؓ背景
- 本例演示如何图像设|ؓ背景?/dd>
- 图像设|ؓ背景 2
- 本例演示如何为多个元素同时设|背景图像?/dd>
- 如何重复背景囑փ
- 本例演示如何重复背景囑փ?/dd>
- 如何在垂直方向重复背景图?/a>
- 本例演示如何垂直地重复背景图像?/dd>
- 如何在水qx向重复背景图?/a>
- 本例演示如何水^地重复背景图像?/dd>
- 如何仅显CZơ背景图?/a>
- 本例演示如何仅显CZơ背景图像?/dd>
- 如何攄背景囑փ
- 本例演示如何在页面上攄背景囑փ?/dd>
- 如何使用%来定位背景图?/a>
- 本例演示如何使用癑ֈ比来在页面上定位背景囑փ?/dd>
- 如何使用像素来定位背景图?/a>
- 本例演示如何使用像素来在面上定位背景图像?/dd>
- 如何讄固定的背景图?/a>
- 本例演示如何讄固定的背景图像。图像不会随着面的其他部分滚动?/dd>
- 所有背景属性在一个声明之?/a>
- 本例演示如何使用写属性来所有背景属性设|在一个声明之中?/dd>
CSS 背景属?/h2>
| 属?/th> | 描述 |
|---|---|
| background | 写属性，作用是将背景属性设|在一个声明中?/td> |
| background-attachment | 背景囑փ是否固定或者随着面的其余部分滚动?/td> |
| background-color | 讄元素的背景颜艌Ӏ?/td> |
| background-image | 把图像设|ؓ背景?/td> |
| background-position | 讄背景囑փ的v始位|?/td> |
| background-repeat | 讄背景囑փ是否及如何重复?/td> |
]]>
如何插入样式?/h2>
当读C个样式表Ӟ览器会Ҏ它来格式?HTML 文档。插入样式表的方法有三种Q?/span>
外部样式?/h3>
当样式需要应用于很多面Ӟ外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面?<link> 标签链接到样式表?lt;link> 标签在（文档的）头部Q?/p>
<head> <linkrel="stylesheet" type="text/css" href="mystyle.css" /> </head>
览器会从文?mystyle.css 中读到样式声明，q根据它来格式文档?/p>
外部样式表可以在M文本~辑器中q行~辑。文件不能包含Q何的 html 标签。样式表应该?.css 扩展名进行保存。下面是一个样式表文g的例子：
hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}不要在属性g单位之间留有I格。假如你使用 “margin-left: 20 px” 而不?“margin-left: 20px” Q它仅在 IE 6 中有效，但是?Mozilla/Firefox ?Netscape 中却无法正常工作?/p>
内部样式?/h3>
当单个文档需要特D的样式Ӟ应该用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表Q就像这?
<head><style type="text/css">hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}</style></head>
内联样式
׃要将表现和内Ҏ杂在一P内联样式会损失掉样式表的许多优势。请慎用q种ҎQ例如当样式仅需要在一个元素上应用一ơ时?/p>
要用内联样式，你需要在相关的标{ֆ使用样式QstyleQ属性。Style 属性可以包含Q?CSS 属性。本例展C如何改变段落的颜色和左外边距：
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被l承q来?/p>
例如Q外部样式表拥有针对 h3 选择器的三个属性：
h3 { color: red; text-align: left; font-size: 8pt; }而内部样式表拥有针对 h3 选择器的两个属性：
h3 { text-align: right; font-size: 20pt; }假如拥有内部样式表的q个面同时与外部样式表链接Q那?h3 得到的样式是Q?/p>
color:red; text-align:right; font-size:20pt;
即颜色属性将被承于外部样式表，而文字排列（text-alignmentQ和字体寸Qfont-sizeQ会被内部样式表中的规则取代?/p>
]]>
选择器的分组
你可以对选择器进行分l，q样Q被分组的选择器就可以分n相同的声明。用逗号需要分l的选择器分开。在下面的例子中Q我们对所有的标题元素q行了分l。所有的标题元素都是l色的?/p>
h1,h2,h3,h4,h5,h6 { color: green; }l承及其问题
Ҏ CSSQ子元素从父元素l承属性。但是它q不L按此方式工作。看看下面这条规则：
body { font-family: Verdana, sans-serif; }Ҏ上面q条规则Q站点的 body 元素?Verdana 字体Q假如访问者的pȝ中存在该字体的话Q?/p>
通过 CSS l承Q子元素承最高元素Q在本例中是 bodyQ所拥有的属性（q些子元素诸?p, td, ul, ol, ul, li, dl, dt,?ddQ。不需要另外的规则Q所?body 的子元素都应该显C?Verdana 字体Q子元素的子元素也一栗ƈ且在大部分的C览器中Q也实是这L?/p>
但是在那个浏览器大战的血腥年代里Q这U情况就未必会发生，那时候对标准的支持ƈ不是企业的优先选择。比方说QNetscape 4 ׃支持l承Q它不仅忽略l承Q而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 q存在相关的问题Q在表格内的字体样式会被忽略。我们又该如何是好呢Q?/p>
友善地对待Netscape 4
q运地是Q你可以通过使用我们UCؓ "Be Kind to Netscape 4" 的冗余法则来处理旧式览器无法理解承的问题?/p>
body { font-family: Verdana, sans-serif; } p, td, ul, ol, li, dl, dt, dd { font-family: Verdana, sans-serif; }4.0 览器无法理解承，不过他们可以理解l选择器。这么做虽然会浪费一些用L带宽Q但是如果需要对 Netscape 4 用户q行支持Q就不得不这么做?/p>
l承是一个诅咒吗Q?/h2>
如果你不希望 "Verdana, sans-serif" 字体被所有的子元素承，又该怎么做呢Q比方说Q你希望D落的字体是 Times。没问题。创Z个针?p 的特D规则，q样它就会摆q元素的规则：
body { font-family: Verdana, sans-serif; } td, ul, ol, ul, li, dl, dt, dd { font-family: Verdana, sans-serif; } p { font-family: Times, "Times New Roman", serif; }]]>
CSS 教程
通过使用 CSS 来提升工作效率！
在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重|页的样式和布局?/p>
开始学?CSS Q?/p>
]]>
CSS 语法
CSS 规则׃个主要的部分构成Q选择器，以及一条或多条声明?/p>
selector {declaration1; declaration2; ... declarationN }选择器通常是您需要改变样式的 HTML 元素?/p>
每条声明׃个属性和一个值组成?/p>
属性（propertyQ是您希望设|的样式属性（style attributeQ。每个属性有一个倹{属性和D冒号分开?/p>
selector {property: value}下面q行代码的作用是?h1 元素内的文字颜色定义为红Ԍ同时字体大设|ؓ 14 像素?/p>
在这个例子中Qh1 是选择器，color ?font-size 是属性，red ?14px 是倹{?/p>
h1 {color:red; font-size:14px;}下面的示意图为您展示了上面这D代码的l构Q?/p>
提示Q?/span>请用花括号来包围声明?/p> 除了英文单词 redQ我们还可以使用十六q制的颜色?#ff0000Q?/p> Z节约字节Q我们可以?CSS 的羃写Ş式： 我们q可以通过两种Ҏ使用 RGB | h意，当?RGB 癑ֈ比时Q即使当gؓ 0 时也要写癑ֈ比符受但是在其他的情况下׃需要这么做了。比如说Q当寸?0 像素Ӟ0 之后不需要?px 单位Q因?0 是 0Q无论单位是什么?/p> 提示Q?/span>如果gؓ若干单词Q则要给值加引号Q?/p> 提示Q?/span>如果要定义不止一个声明，则需要用分号每个声明分开。下面的例子展示出如何定义一个红色文字的居中D落。最后一条规则是不需要加分号的，因ؓ分号在英语中是一个分隔符P不是l束W号。然而，大多数有l验的设计师会在每条声明的末N加上分号Q这么做的好处是Q当你从现有的规则中增减声明Ӟ会尽可能地减出错的可能性。就像这P 你应该在每行只描qC个属性，q样可以增强样式定义的可L，像q样Q?/p> 大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和I格的用得样式表更容易被~辑Q?/p> 是否包含I格不会影响 CSS 在浏览器的工作效果，同样Q与 XHTML 不同QCSS 对大写不敏感。不q存在一个例外：如果涉及C HTML 文档一起工作的话，class ?id 名称对大写是敏感的?/p>值的不同写法和单?/h2>
p { color: #ff0000; }p { color: #f00; }p { color: #ff0000; } p { color: rgb(100%,0%,0%); }记得写引?/h2>
p {font-family: "sans serif";}多重声明Q?/h2>
p {text-align:center; color:red;} p { text-align: center; color: black; font-family: arial; }I格和大写
body { color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; }
]]>