JSP从入门到精通
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

2.4 CSS样式表

CSS是Cascading Styles Sheets的缩写，为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。前面所介绍的HTML和CSS的关系就是“内容”和“形式”的关系，由HTML组织网页的结构和内容，而通过CSS来决定页面的表现形式。它可以定以HTML标记，按列表的语法将文字、图片、表格、表单、图层等设计加以格式的设定。如果要对多个网页中应用同样的样式风格，可以将已编写好的CSS样式存于样式表中，这样就能确保多个网页具有一致的格式，并且只要修改样式表文件就可以使所有的网页自动更新，从而大大降低了网站的开发和维护的工作量。因为HTML只能对元素一个一个地进行样式设置，而CSS可以对多个元素统一进行格式修改，如以下代码所示（请查看源码目录/CSS/00/00.html文件）。

<HTML>
<HEAD>
<TITLE>CSS样式示例</TITLE>
</HEAD>
<BODY>
 <h2><font color="#FF0000" face="黑体">标记1</font></h2>
  <p>标记1的正文内容</p>
 <h2><font color="#FF0000" face="黑体">标记2</font></h2>
  <p>标记2的正文内容</p>
 <h2><font color="#FF0000" face="黑体">标记3</font></h2>
  <p>标记3的正文内容</p>
</BODY>
</HTML>

如果我们要对元素的样式逐个进行修改，那么工作量将会大，而且代码冗余。在这种情况下，我们使用CSS可以大大减小工作量且易于维护，请看如下代码（请查看源码目录/CSS/00/01.html文件）。

<HTML>
<HEAD>
<TITLE>CSS样式示例</TITLE>
<STYLE>
h2{ font-family:黑体;
       color:red;
       }
</STYLE>
</HEAD>
<BODY>
   <h2>CSS标记1</h2>
   <p>CSS标记1的正文内容</p>
   <h2>CSS标记2</h2>
   <p>CSS标记2的正文内容</p>
   <h2>CSS标记3</font></h2>
   <p>CSS标3的正文内容</p>
</BODY>
</HTML>

使用CSS之后，如果要修改相应的内容，只需要修改选择器中的内容，即h2{……}就可以了，这样做也没有了代码冗余的麻烦。因此，在进行网页整体排版、段落格式等方面的设置时，最好通过CSS样式来完成。

样式表CSS中的元素一般可分为如下三类。

●块级元素：如段落、标题、列表、表格、div和body等元素，每个块级元素都从新的一行开始显示，而且其后的元素也从新的一行开始显示。

●内联元素：如a、em元素及大多数的替换元素，以及图形和表单的输入元素。它们不必在新的一行显示，也不强迫其他元素在新的一行显示。而且这些元素可以作为任何其他元素的子元素。

●列表项元素：在html中只有li元素。

有关CSS样式表的基本知识请查看相关的资料，表2.3为大家总结了CSS样式表中常用的一些元素及其功能。

表2.3 CSS样式表中常用元素及其功能

而CSS样式语法结构主要有三种，可细分为下述语法。

■直接定义法：将CSS样式语法嵌入HTML卷标当中。

■内部定义法：利用<STYLE>卷标安排CSS样式卷标。

2.4.1 直接定义法

当在同一档案多处使用相同的文件格式时，我们可以使用直接定义法，只要将样式定义写在<HEAD>和</HEAD>标记中，并指明该样式的名称，最后设定适用范围即可。下面通过一个具体的实例来说明直接定义法的应用（请查看源码目录/CSS/01/01.html文件）。首先，打开系统默认的记事本，输入以下代码，然后保存为“01.html”文件。

<HTML>
<HEAD>
<TITLE>CSS样式示例</TITLE>
<STYLE>
        #id1                        /*利用#来标识一个id*/
         {color:green;font-family:Times New Roman;font-style:Italic}
        #id2
         {color:blue;font-family:楷体}
        #id3
         {color:red;font-family:Arial}
</STYLE>
</HEAD>
<BODY>
 <H1 id=id1>CSS样式id1</H1>
 <H1 id=id2>CSS样式id2</H1>
 <H1 id=id3>CSS样式id3</H1>
</BODY>
</HTML>

最后，使用浏览器打开，CCS样式示例的显示效果如图2.4所示。

图2.4 CSS样式示例

2.4.2 内部定义法

当有某一段落需要使用某一特殊格式时，我们可以使用内部定义法，只要将CSS样式定义写在要使用该样式的标记里面即可，而其作用范围仅限于该标记内部。下面通过一个具体的实例来说明内部定义法的应用（请查看源码目录/CSS/02/01.html文件）。首先，打开系统默认的记事本，输入以下代码，然后保存为“01.html”文件。

<HTML>
<HEAD>
<TITLE>CSS样式示例</TITLE>
</HEAD>
<BODY STYLE = "COLOR:GREEN; FONT-FAMILY:楷体">
CSS样式1<BR>
内部定义法效果<BR>
<P STYLE="FONT-FAMILY:Arial">
CSS样式2!
</P>
</BODY>
</HTML>

最后，使用浏览器打开，CCS样式示例的显示效果如图2.5所示。

图2.5 CSS样式示例

在该示例中，我们使用内部定义法定义了两种CSS样式，一种是在<BODY>标记内定义的，而另一种是在<P>标记内定义的，它们的作用域不同，从而显示出了图2.5中的不同结果。

2.4.3 外部定义法

当多个档案共用相同的样式格式时，可以使用外部定义法。首先，CSS样式要以文件的形式存在（*.css），然后在HTML文档头通过文件引用进行控制。CSS文件的引用是在<HEAD>和</HEAD>标签记之间写下列语句如下所示。

<link rel=“stylesheet” href=“文件名.CSS” type=“text/css”>

下面通过一个具体的实例来说明外部定义法的应用（请查看源码目录/CSS/03/sheet.css文件）。首先，打开系统默认的记事本，输入以下代码，然后保存为“sheet.css”文件。

H1
{COLOR:BLUE;
TEXT-ALIGN:CENTER;
FONT-WEIGHT:BOLD}

然后，再新建一个“01.html”文件，使用记事本打开，输入以下代码（请查看源码目录/CSS/03/01.html文件）。

<HTML>
<HEAD>
<TITLE>CSS样式示例</TITLE>
<LINK HREF=sheet.css REL=stylesheet>
</HEAD>
<BODY>
 <H2><FONT COLOR=red>
 <CENTER>CSS样式1</CENTER>
 </FONT></H2>
<H1>CSS样式2</H1>
</BODY>
</HTML>

最后，使用浏览器打开，CCS样式示例的显示效果如图2.6所示。

图2.6 CSS样式示例

在该示例中，我们使用外部定义法定义了CSS样式，即在<HEAD>标记内加入代码：<LINK HREF=sheet.css REL=stylesheet>，从而显示了图2.6的结果。当然，我们也可以使用IMPORT语句来嵌入CSS样式，其代码格式如下所示（请查看源码目录/CSS/03/02.html文件）。

<STYLE>
@IMPORT URL("sheet.css");
</STYLE>
上一章目录下一章