Java Web应用开发技术与案例教程
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.2 CSS样式表

在前面的内容中讲解了HTML，基本上可以编写出一个网页，但是这是不够的，一个好的网页需要在字体、颜色、布局等方面需要进行设置，需要给用户带来视觉的冲击，下面介绍这种美化技术——CSS技术。

CSS（Cascading Style Sheets，层叠样式表），就是通常说的样式表。CSS是一种美化网页的技术，通过使用CSS可以方便、灵活地设置网页中不同元素的外观属性，使网页在外观上达到一个更好的效果。

2.2.1 CSS样式表的定义与使用

CSS的处理思想是首先指定对什么“对象”进行设置，然后指定对该对象的哪方面的“属性”进行设置，最后给出该设置的“值”。因此，CSS就是由3个基本部分——“对象”、“属性”和“值”组成的。

在CSS的3个组成部分中，“对象”是最重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（Selector）。

定义选择器的基本语法：

978-7-111-44207-3-Chapter02-52.jpg

说明：

（1）选择器通常是指希望定义的HTML元素或标签。CSS的选择器分为如下3种类型。

●标记选择器，通过HTML标签定义选择器。

●类别选择器，使用class定义选择器。

●ID选择器，使用id定义选择器。

（2）属性（property）是希望要设置的属性，并且每个属性都有一个值。属性和值被冒号分开，属性之间用分号间隔，并由花括号包围。例如：

978-7-111-44207-3-Chapter02-53.jpg

1.CSS样式表的定义

CSS样式表的定义实际就是定义CSS选择器，由于CSS选择器有3种类型，所以其定义方式也有3种。

（1）标记选择器——通过HTML标签定义样式表。

基本语法格式： 引用样式的对象{标签属性：属性值；标签属性：属性值；标签属性：属性值；……}

例如：在<h1></h1>标签对和<h2></h2>标签对内的文本居中显示，并采用蓝色字体的样式表为：

978-7-111-44207-3-Chapter02-54.jpg

（2）类别选择器——使用class定义样式表。

若要为同一元素创建不同的样式或为不同元素创建相同的样式，可以使用CSS类选择器，CSS类有两种格式，定义时在各自定义类的名称前面加一个点号。

格式1： 标签名.类名{标签属性：属性值；标签属性：属性值；标签属性：属性值；……}

注意：这种格式的类指明所定义的样式只能用在类名前所指定的标签上。

例如，两个不同的段落，若要使一个段落向右对齐，一个段落居中对齐，则先定义两个类别选择器：

978-7-111-44207-3-Chapter02-55.jpg

然后用在不同的段落里，只要在HTML标记里加入上面定义的“类”即可：

978-7-111-44207-3-Chapter02-56.jpg

格式2：

.类名{标签属性：属性值；标签属性：属性值；标签属性：属性值；……} 注意：该格式的类使所有class属性值为该类名的标签都遵守该类所定义的样式。 例如：

978-7-111-44207-3-Chapter02-57.jpg

该定义的功能：在<p></p>标签对和<h1></h1>标签对上分别使用text类使标签对中的文本字体为宋体，颜色为红色。

（3）ID选择器——使用id定义样式表

在HTML页面中ID选择符用来对某个单一元素定义单独的样式，定义ID选择符要在ID名称前加上一个“#”号。

基本语法：

#id名称{标签属性：属性值标签属性：属性值；标签属性：属性值；……} 注意：使用该类样式表时，需要将该样式的网页内容前加一个id="id名称"。例如：

978-7-111-44207-3-Chapter02-58.jpg

2.样式表的使用

在HTML中使用CSS有4种方式：行内式、内嵌式、链接式、导入式。

（1）行内式（不需要定义选择器）：利用style属性直接为元素设置样式，只对当前的标签起作用。例如：

978-7-111-44207-3-Chapter02-59.jpg

（2）内嵌式：这种方式，需要先定义有关的选择器，然后再使用。利用<style></style>标签对，将样式表（选择器）定义在<head></head>标签对之间，内嵌式样式表的作用范围是该HTML文档内。例如：

978-7-111-44207-3-Chapter02-60.jpg

（3）链接式：外联式样式表是将定义好的CSS单独放到一个以.css为扩展名的文件中，再使用<link>标签链接到所需要使用的网页中，在<head>与</head>之间。

<link>标签链接到网页的格式：

978-7-111-44207-3-Chapter02-61.jpg

例如：首先定义一个sheet_x.css文档，其代码如下：

978-7-111-44207-3-Chapter02-62.jpg

其次，在HTML中使用：

978-7-111-44207-3-Chapter02-63.jpg

（4）导入式：该方式与链接式方法类似，只是通过import导入到页面中。import导入格式：（注意import句尾的分号不要省略）

978-7-111-44207-3-Chapter02-64.jpg

3.CSS样式表继承性

CSS是级联样式表，级联是指继承性，即在标签中嵌套的标签继承外层标签的样式。级联的优先级顺序：

（1）嵌入式样式表（优先级最高）。

（2）内联式样式表。

（3）外联式样式表。

（4）浏览器默认（优先级最低）。

注意：当样式表继承遇到冲突时，总是以最后定义的样式为准，例如：

978-7-111-44207-3-Chapter02-65.jpg

2.2.2 CSS常用属性

从CSS选择器的定义可看出，CSS美化网页是通过设置网页元素的属性来实现的，主要有字体属性、颜色属性、背景属性、文本段落属性等。

1.字体属性

字体属性主要有font-family、font-size、font等，其具体含义与取值如表2-6所示。

表2-6 字体属性含义与取值

978-7-111-44207-3-Chapter02-66.jpg

2.颜色和背景属性

颜色和背景属性主要有color、background-color、background-image、background-position、background，其具体含义与取值如表2-7所示。

表2-7 颜色和背景属性含义与取值

978-7-111-44207-3-Chapter02-67.jpg

3.文本段落属性

文本段落的属性，包括单词间隔、字符间隔、文字修饰、纵向排列、文本转换、文本排列水平对齐方式、文本缩进、文本行高、处理空白、文本反排等。主要属性有text-align、text-decoration等，具体含义与取值如表2-8所示。

表2-8 文本段落的属性含义与取值

978-7-111-44207-3-Chapter02-68.jpg

若需要其他的有关属性，可查看有关的书籍，这里不再介绍了。

2.2.3 案例——利用CSS对注册页面实现修饰

【例2-8】 设计如图2-9所示的注册网页，该页面没有修饰，不够美观，采用CSS修饰页面，重新设计页面，如图2-10所示。

978-7-111-44207-3-Chapter02-69.jpg

图2-9 未修饰的注册页面

978-7-111-44207-3-Chapter02-70.jpg

图2-10 修饰后的注册页面

【分析】 为了便于理解其设计过程，这里采用分三步实现，逐渐完善设计。

第1步：按所给出的原始界面，设计HTML文档：ch02_8_1_register.html。

第2步：设计CSS文档：ch02_8_Css.css，在该文档中包含所需要的格式控制，从而形成修饰后的页面。

第3步：利用ch02_8_Css.css中定义的样式，重新设计ch02_8_1_register.html，形成新网页ch02_8_2_registerCss.html。

【实现1】 HTML文档的实现

由图2-9所给出的页面，实际上就是一个提交表单，即需要设计注册网页（ch02_8_1_register.html），同时，为了使表单信息整齐，采用表格的形式组织表单元素。其代码如下：

978-7-111-44207-3-Chapter02-71.jpg

978-7-111-44207-3-Chapter02-72.jpg

目前代码的运行界面如图2-9所示，页面不够美观，需要改进，为此，需要使用CSS样式修饰页面。

【实现2】 设计CSS样式表文档

从图2-9和图2-10对比看，图2-10改变了页面所有字体的大小，页面最上面的“填写注册信息”也改变了颜色、字体等，每项输入域后面的提示信息也改变了，根据这些变化，编写CSS文档：ch02_8_Css.css，在该文档中定义整体样式，例如控制页面的字体大小、内容标题的样式、表格的行高、提示信息的样式，以及定义表单域的样式，例如表单域的宽度和高度等。该文档的代码如下：

978-7-111-44207-3-Chapter02-73.jpg

【实现3】 利用CSS对页面实现修饰

利用CSS样式表中所定义的样式，对程序ch02_8_1_register.html修改，形成新代码文档ch02_8_2_registerCss.html。

首先，通过import导入，将样式表文档导入页面ch02_8_1_register.html中，修改的这部分代码如下（注意import句尾的分号不要省略）：

978-7-111-44207-3-Chapter02-74.jpg

然后，修改页面的<body></body>之间的代码，其部分代码如下：

978-7-111-44207-3-Chapter02-75.jpg

对于其他行也采用这样的修改。通过这样的修改，运行界面如图2-10所示，页面就比较美观了。

上一章目录下一章