下载掌阅APP，畅读海量书库
立即打开
专题讲座：光盘\MR\Video\3\CSS样式的具体应用.exe
视频速递：全面解读CSS样式
CSS样式是由多个规则组成的，定义规则的主要目的是告知浏览器去呈现一个经CSS修订后的文档。那么如何将定义的CSS样式嵌入到HTML文档中呢？下面将进行详细讲解。
嵌入样式表是最常用的方法，它将style标签对定义到文档的head标记部分，在style标签对内根据样式规则定义属性完成对样式的修订。定义样式的方法如下：首先定义一个选择符，这个选择符可以理解为当前内容需要进行CSS样式修订的一个句柄，然后定义属性和值，属性与值之间使用冒号（：）连接，不同属性之间使用分号（；）分隔。基本的样式格式如下。
下面定义一个样式表，包括两个选择符h1和h2，控制元素的背景颜色、元素的颜色、字体及字体的大小，其代码如下。
图 3.7 显示CSS样式
其运行效果，如图3.7所示。
CSS中有很多专属单位，也有很多能够用在大量属性的常规单位：em（例如，font-size:2em）是一个大致与一个字符高度相同的单位。px（例如，font-size:12px）是一个像素的单位。pt（例如，font-size:12pt）是一个磅的单位。%（例如，font-size:80%）是一个百分比。其他单位还包括cm（厘米）、mm（毫米）和in（英寸）。
内联的样式比其他方法要灵活一些，但是样式与内容是混淆在一起的，它的缺点是对相同的标签不能进行统一的处理。例如，当对同样的多个内容应用相同的样式时，必须在每个内容中都编写相同的代码，这样一来需要编写的代码量较多而且也不利于更新，内联样式的代码格式如下。
使用外部样式表有两个优点：第一是可以定义多个文档使用同一个样式表；第二是外部样式表可以使HTML文档与CSS样式完全分离，这种分离对于程序代码标准化来说意义非常重大。一个外部的样式表可以通过HTML的link标记嵌入到HTML文档中，<link>标签是放置在文档的HEAD部分，标记格式如下。
可选的type属性用于指定媒体类型，允许浏览器忽略它们不支持的样式表类型。
rel属性用于定义连接的文件和HTML文档之间的关系，该属性的值stylesheet指定一个固定或首选的样式。
href属性则用来指定样式文件的位置，可以是相对路径也可以是绝对路径。
外部样式表文件以“.css”为后缀进行命名，并且在样式表文件中不能含有任何类似<head>或<style>这样的HTML标记，样式表仅仅由样式规则或声明组成。示例代码如下。
当样式被应用到很多的网页时，一个外部样式表是最理想的。开发者使用外部样式表可以改变整个网站的外观。同样地，大多数浏览器会保存外部样式表在缓冲区，从而避免在展示网页时延迟。
在HTML中通过标签来进行不同功能的区别，而在CSS样式中，通过选择符来定义不同的样式表。常用的样式选择符包括HTML选择符、类选择符、ID选择符、组合选择符、关联选择符、伪类和伪元素。
HTML选择符，用来改变一个指定标签的样式，任何HTML元素都可以是一个CSS的选择符，示例如下。
每一个选择符可以有不同的类（class），因而同一个元素可以有不同样式。例如，笔者希望交替显示段落字体颜色和背景颜色。
类选择符在定义时需要在类名称前添加一个“.
这些类可以在HTML的<p>标签中使用class属性引用，每个<p>标签指定一个类名，代码如下。
在编写HTML页面中的样式时，ID属性一般被用于定义那些页面中只出现一次的单一元素的样式。ID选择符与类选择符类似，只要把class换成id即可，从原则上讲，id选择符用在唯一的元素上而class则可用在不止一个的元素上。
定义ID选择符要在ID名称前加上一个“#”，这和类选择符是不相同的，示例如下。
关联选择符是由两个或更多的单一选择符组成的字符串。这些选择符最大的特点是因为层叠顺序的关系，它们的优先权比单一的选择符大。关联选择符只对选择符的最里层元素起作用，对单独的上层元素无定义，示例如下。
两个或更多的单一选择符之间需要使用空格分隔。
在样式表文件中组合的选择符声明是允许的，它的主要作用是减少样式表中选择符的重复声明。其使用方法也很简单，用英文逗号（,）分隔选择符就可以了。例如，将标签<h1>和标签<h2>组合声明定义字体颜色为红色，代码如下所示。
伪元素选择符常用于超链接标签，它的主要作用是定义不同状态下同一个HTML元素的形态。例如，使用伪元素选择器定义<a>标签单击前的状态、单击后的状态及光标移动到超链接文本上的状态，示例代码如下。
伪元素以英文的“:”开头，后面的伪元素名称根据应用角度不同有各自固定的写法。冒号的前面须指定使用伪元素的HTML标签。目前只有<a>或<p>标签可以使用伪元素选择符。
CSS中的样式属性比较多，经常使用的属性可以分为如下几类：字体、文本、背景、位置、边框、列表及其他一些样式属性。每个类中的属性都可以单独使用，如果同一类中多个属性在一起使用，还可以将它们进行整合。
对字体的修饰可以包括类型、大小、风格、加粗和变形。有关字体属性和属性值的详细介绍如表3.10所示。
表 3.10 字体属性和属性值的详细说明
下面应用字体属性，指定HTML的段落标记<p>中的字体为bold（粗体）、times字体、12点大小，代码如下。
颜色属性用于控制指定元素的颜色。颜色值可以是一个关键字或一个RGB的格式数字。关键字颜色值共有16种颜色可以使用，如red、green、blue等。RGB格式的数字可以有四种形式：
#rrggbb（如，#00cc00）；
#rgb（如，#0c0）；
rgb（x，x，x）x是一个介乎0～255之间的整数（如rgb（0,204,0））；
rgb（y%,y%,y%）y是一个介乎0.0～100.0之间的整数（如rgb（0%,80%,0%））。
在CSS中使用color属性设定文本的颜色。定义样式STYLES，设置文本颜色为红色，示例代码如下。
background-color属性设定文本的背景颜色，为了避免用户样式表之间的冲突，背景色和颜色属性一般一起指定。指定颜色格式代码如下：
大多数HTML元素都允许设定背景，其中包括设定背景颜色、背景图像、背景重复、背景附件、背景位置等属性。常用的背景属性和属性值的详细介绍如表3.11所示。
表 3.11 常用的背景属性和属性值的详细说明
在控制背景图像的基础上，还可以对背景图像的位置进行控制，控制其与上、下、左、右的距离。例如，定义body选择符、控制网页的背景图像，以及背景图像在网页中的位置，示例代码如下。
CSS中对于文本属性的控制主要包括字符间距、文字修饰、文本排列、文本缩进、行高，以及文字大小写等，其常用属性和属性值如表3.12所示。
表 3.12 常用文本属性和属性值的说明
文字修饰属性text-decoration的属性值blink在新版的浏览器中很少有支持。
下面应用文本属性，对<p>标签中输出的文件进行样式控制，输出一段文字并为此<p>标签添加文本样式。实例代码如下。
设置text-decoration属性为文本添加下画线，line-height属性设置行高，background-color添加背景色，text-align属性设定文本在网页中的位。其运行结果，如图3.8所示。
图 3.8 文本属性的应用
边框属性主要用于设置一个元素的边框风格、边框宽度、边框颜色等，可以一次设置四边的边框，也可单独对上、右、下和左边框进行设置。
（1）边框风格属性border-style
边框风格属性设置元素的边框样式，但是前提条件是指定修饰的边框必须为可见状态，否则使用此属性毫无意义。本属性可以设置1～4个值，如果四个值全部给出，那么这些值将分别应用于边框的上、右、下和左。如果只给出一个值，则四边相同且共享这个值。如果只给出两个或三个值，则省略的边框属性值对边相等。当然也可以使用border-top-style、border-bottom-style、border-left-style和border-right-style属性单独设置各边的风格。边框风格属性可以选择的属性值如下：
none：没有边框，无论边框宽度设为多大；
dotted：点线式边框；
dashed：破折线式边框；
solid：直线式边框；
double：双线式边框；
groove：槽线式边框；
ridge：脊线式边框；
inset：内嵌效果的边距；
outset：突起效果的边框。
下面在div标签中，应用上面介绍的边框风格属性，设置边框风格，示例代码如下。
图 3.9 设置边框样式
运行效果，如图3.9所示。
（2）边框宽度属性border-width
边框宽度属性设定上下左右边框的宽度，该属性与border-style属性相同，同样使用1到4个值来设置元素的边界，值是一个关键字（包括medium（默认值）、thin（比medium细）或thick（比medium粗））或长度，不允许使用赋值长度。同样可以使用border-top-width、border-bottom-width、border-left-width和border- right-width属性单独设置对应边框的宽度。通过border-width属性设置边框宽度的示例如下。
使用border-width属性必须确保存在边框或者说存在border-style属性，否则无意义。
（3）边框颜色border-color
边框颜色属性border-color设定上下左右边框的颜色，使用方法与border-style和border-width完全相同。通过border-color属性设置边框颜色的示例如下。
在网页中鼠标指针的形状默认情况下是一个普通的箭头。但是随着Web技术的蓬勃发展，程序员开始对网页中的鼠标指针有了新的要求，大家迫切希望对网页中的一点一滴都能近乎完美地展现。通过CSS样式可以对鼠标指针实现多种不同的效果。CSS是通过cursor属性实现鼠标形状的更改，其属性值包括default（默认的鼠标形状）、hand（小手形状）、crosshair（交叉十字）、text（文本选择符号）、wait（Windows的沙漏形状）、help（带有问号的鼠标）及各个方向的箭头。定义鼠标光标的样式Windows的沙漏形状，示例代码如下。
CSS的定位技术受到业界的广泛赞誉，它不仅可以控制元素的平面或空间位置，还可以控制元素的高度、宽度及可见性。CSS定位技术有两个非常重要的定位方法：一个是相对定位；另一个是绝对定位。所谓相对定位是指让操作的元素在相对其他元素的位置上进行偏移，而绝对定位是指让操作的元素参照原始文档进行偏移。有关定位的常见属性如表3.13所示。
表 3.13 CSS定位属性说明
下面应用CSS样式的相对定位技术，对<div>标签进行定位，其CSS样式的代码如下。
使用CSS对页面进行布局时，通常都会将所有对象都放置在一个容器中，这个容器称为区块。设置一个区块所需要的属性如表3.14所示。
表 3.14 常见的区块属性说明
续表
导航栏是任何一个网站所必需的。它的主要作用是以链接的方式跳转页面或让用户取得想要的结果。导航栏的形式一般分为两种，横向导航栏和纵向导航栏。横向导航栏一般应用于网站的首页，使用户可以最快速地了解此网站共分为哪几个部分。纵向导航栏一般应用于网站的后台系统中，因为后台系统大都只有管理员或超级用户可以访问，相对主页内容而言，后台内容资源较单一很适合纵向导航栏的使用。
【例3.5】 本实例采用HTML的<ul>、<li>和<a>标签及CSS+DIV完成网站导航栏的设计。为了有更好的用户体验，笔者在程序中引入了jQuery技术生成一些网页的特性。具体步骤如下。
实例位置：光盘\MR\ Instance\3\3.5
（1）创建index.php文件，通过<link>标签载入CSS样式文件in.css，通过<script>标签载入脚本文件jquery-1.4.2.js和in.js。设计布局：定义两个<div>标签，分别设置<div>标签的id属性，利用CSS样式修订div块的width、height、margin-top和background-image等属性。
（2）在内层div块中定义四个两层嵌套的<ul>标签。并对内层<ul>标签进行CSS样式设置，包括利用display属性设置内层<ul>标签为不可见模式，还有width、height和background-color等属性，其代码如下。
（3）内层<ul>标签调用的CSS样式如下。
本实例运行效果，如图3.10所示。
图 3.10 经典导航栏