样式设置指南
本节详细介绍在浏览器不支持 CSS 版本 3 (CSS3) 时应用该版本会发生什么 —— 浏览器将忽略它并退回到默认设置。 本节还将介绍 CSS3 样式（以 -moz、-webkit 等开头的样式）的特定于浏览器的实现。
简单的标记
(X)HTML 拥有非常简单的标记 ，可以使用它将网页划分为有用的区域。从设计角度讲，这是一个不错的想法，因为它在本质上就是一个包含内容的方框。
CSS 2.1 的标准效果
CSS 始终支持设置的样式。其中一些元素包括边框调整，比如：
border: size type color
其中：
size 是一个数字值。
type 是实线、虚线、点线、双线或一些 3D 样式的边框。
color 通常是一个 RGB 十六进制值。
举例而言，您可以使用 border: 1px solid #000000; 表示 1 像素宽的黑色实线。
类似于 body，也可以更改标准背景颜色以及文本的字体和颜色。可以像其他基础样式一样进行这些更改。
CSS3 增强的效果
一种呼声最高的设计元素（在 CSS2.1 中未找到）是边框的圆角边缘。这意味着过去的许多设计人员必须构建基于图像的边框或使用某种组合了 CSS 和 JavaScript 的 dirty 技术。幸运的是，在 CSS3 中不再存在此情况，它引入了 border-radius 属性（例如 border-radius: 10px;）。
要将此属性应用到一些浏览器中，必须包含类似以下形式的标记：
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
此示例只是为了让该标记适用于基于 Mozilla（比如
Mozilla Firefox）和基于 Webkit（比如 Apple Safari）的旧浏览器。如果您愿意，可以将上述 3 个属性设置为不同值并让样式在 Firefox 和 Google Chrome 中显示不同的效果。
也可以在上生成一个阴影。为此，可以使用以下 3 个属性（再次说明，一定要处理各种浏览器）：
-webkit-box-shadow: 8px 8px 6px #AAAAAA;
-moz-box-shadow: 8px 8px 6px #AAAAAA;
box-shadow: 8px 8px 6px #AAAAAA;
在这种情况下，第一个属性是水平阴影，第二个是垂直阴影，第三个是模糊量，第四个是阴影的颜色。可以在模糊量和阴影之间放置另一个属性（另一个与阴影的覆盖范围相关的大小值），但是此属性似乎没有广泛使用。
列表
(X)HTML 中另一个常见的元素是列表。列表具有两种形式：无序列表 () 和有序列表 ([ol])。它们对于为网页提供数字列表（比如步骤列表）和非数字列表（比如处方成分）很有用。在网站布局方面，列表常常对于网站导航结构的开发至关重要，因此对于样式尤其有用。
(X)HTML 列表（无论是有序还是无序的）默认将拥有所谓的列表标记。在非正式的英语中，我们可能将它们称为 “bullet points（项目符号）”。CSS2.1 拥有少量的列表标记，可以使用 list-style-type 属性设置它们。无序列表标记的常见值包括 none、disc、circle 和 square。
有序列表标记的值是基于数字的表示方式。最常用的选项包括 decimal、lower-roman 和 lower-greek。
在撰写本文时，现代 Web 浏览器支持的基于列表的新 CSS3 属性和特性不是太多。否则本文将会介绍（举例而言）全新的 list-style-type 特性。我们介绍了另一个得到更广泛支持的 CSS3 属性，称为 text-shadow。
类似于前面定义的 box-shadow，text-shadow 属性提供了一个阴影。但是，与 box-shadow 不同，text-shadow 实际上会为每个字母添加阴影。所以，当将它应用到列表项时，可以使用以下标记：
li {
text-shadow: 2px 2px 2px #AA00FF;
}
举例而言，如果拥有一个无序列表，它的 (X)HTML ID 为 nav，显示为一个导航栏，那么可以构建类似以下形式的内容：
ul#nav li:hover {
text-shadow: 2px 2px 2px #AA00FF;
}
这将仅在将鼠标悬停在 #nav 无序列表中的一个列表元素上时提供 text-shadow。
链接
在过去，CSS3 标准的开发人员认为将未单击的链接、已访问的链接、有效链接和鼠标所在的链接区分开是明智之举。在 (X)HTML 中，它们全部具有相同的标记（也就是标记），但具有不同的浏览器状态。幸运的是，许多设计人员忽略了这些区别，他们常常向一般链接或鼠标所在的链接提供样式。
一项几乎必要的任务是向一般链接应用一种特定的样式（进而设置它，无论它是未被单击的、被访问的、有效的还是其他类型的链接）。清单 2 提供了这样一个应用程序的一个示例。
清单 2. 链接修饰的 CSS 示例
a, a:link, a:active, a:visited {
color: #000000;
text-decoration: none;
font-weight: bold;
background-color: #EEEEEE;
}
a:hover {
text-decoration: underline;
background-color: #FFFFAA;
}
此标记设置一个一般链接，将字体颜色设置为黑色，取消默认的下划线，将字体加粗，以及还将背景颜色设置为白色。在悬停状态下，它重新应用下划线并创建一种黄色的新背景颜色来突出显示。当在浏览器中测试此标记时，您将会注意到在鼠标悬停自链接上时，背景从浅灰色更改为黄色，当鼠标移开时，从黄色变回浅灰色。前面已经看到，还可以向 a:hover 应用文本阴影。
当开发人员建立 CSS3 的概念时，他们撇开了任何与标记相关的特定样式，将更多精力放在泛型上。因此，本文不会介绍所谓的 transform:rotate，举例而言可将它用于导航中的 标记。相反，结合本文已经介绍的内容，可以得到类似于清单 3 的样式。
清单 3. 使用一些 CSS3 属性增强的 CSS 导航示例
a, a:link, a:active, a:visited {
color: #000000;
text-decoration: none;
font-weight: bold;
background-color: #EEEEEE;
}
li {
text-align: center;
list-style-type: none;
width: 50px;
padding: 10px;
margin: 10px;
background-color:#EEEEEE;
border: 1px solid #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
transform:rotate(-20deg);
}
li:hover {
text-decoration: underline;
background-color: #FFFFAA;
}
|
