WEB入门三 CSS样式表基础

学习内容

Ø CSS的基本语法

Ø CSS选择器

Ø 常见的CSS样式

Ø 网页中3种使用CSS的方式

能力目标

Ø 理解CSS的作用

Ø 掌握CSS基本语法

Ø 熟练掌握CSS选择器的定义和使用

会使用CSS设置文字样式

本章简介

对于网页设计者而言，如果希望网页美观、大方，并且升级方便、维护轻松，那么仅仅使用 HTML 不能满足要求，CSS (层叠样式表)在这中间扮演着重要的角色。HTML规定了页面上显示什么内容，但是没有规定怎么显示内容(也就是用什么样的样式显示内容)，所以没有CSS的支持，网页是很单调的，应用了CSS的页面外观上将有质的改观。

CSS以 HTML 为基础，提供了丰富的样式，例如字体、颜色、背景、整体排版等。本章将开始学习CSS的基础知识。其主要内容包括：样式表的基本语法、样式表的分类、CSS各种选择器，最后学习如何使用CSS设置文字样式。

核心技能部分

1.1 CSS简介

1.1.1 为什么需要 CSS

通过定义CSS样式表，能让网页具有美观一致的界面，可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。此外，使用样式表能有效地分离网页的内容与外观控制，从而便于美工与程序员之间的分工协作，发挥各自的优势。为什么需要CSS样式表主要是基于以下几点原因：

1. HTML标签的外观样式比较单一

大家在学习前面几章时，不知发现没有?前面几章网页中的文字的字体、颜色、大小、超链接、间距等样式都比较单一，为了弥补这个缺点，就需要使用CSS样式表来对HTML标签进行控制，从而实现更加丰富多彩的效果。

2. 页面外观维护修改方便

同样的内容，采用不同的CSS样式文件，可以看到不同的布局和效果。从美工的角度来看，可以更容易地调整页面外观，调整页面里某个部分的文字或者图片等，从而实现复杂多变的页面效果。

3. 样式表能实现内容与样式的分离，方便团队开发

样式表能把内容结构和格式控制相分离，使网页可以仅由内容构成，而将所有的网页格式通过CSS样式表文件来控制，从而方便美工和程序员分工协作、各司其职、各尽其能，为开发出优秀的网站提供了有力的保障。

4. 减少网页的代码量，提高网页的浏览速度

使用CSS后，页面的内容与表现完全分离，减少了页面的代码量，浏览器在加载页面时能够快速地解析并显示效果。

1.1.2 CSS基本语法

CSS 是 Cascading Style Sheets 的英文缩写，即层叠样式表。它是一种用于 (增强)控制网页样式并将样式与内容分离的标签性语言。网页设计最初是用HTML标签来定义页面文档格式，例如标题<hl>、段落<p>、表格<table>、链接<a>等，但这些标签不能满足更多的文档样式需求，为了解决这个问题，W3C制定了 CSS样式规范。

样式表由样式规则组成，这些规则告诉浏览器如何显示文档，所有的样式规则都写在<style>和</style>标签内部。一个样式(STYLE)的基本语法由3部分构成：选择器(selector)，属性(property)和属性值(value)。

基本语法：

selector { property:value }

选择器 (selector)通常是指需要定义的 HTML元素或标签。属性(property)是需要改变的属性，且每个属性都有一个属性值。属性和属性值用冒号分开，且每行样式规则后使用分号 (;)结束。所有的样式规则由花括号包围，这样就组成了一个完整的样式声明 (declaration)。

例如，可以创建一个样式规则，来指定所有<p>段落的字体颜色均为红色，字体大小为30px，字体为隶书。可以用来修饰网页中所有<p>标签的样式。样式规则示例如下：

CSS样式的属性和属性值都是CSS规范定义好的，直接使用就可以了；而CSS选择器则分为三类：标签选择器、类选择器、ID选择器；下面逐一介绍选择器的用法。

1.2 CSS选择器

选择器(selector)是CSS中很重要的概念，所有HTML语言中的样式都可以通过不同CSS选择器进行控制。用户只需要通过选择器对不同的HTML标签进行控制，即可实现各种不同的效果。

根据选择器所修饰的内容类别不同选择器又分为标签选择器(有的教材也称元素选择器)、类选择器、ID选择器。

1.2.1 标签选择器

一个HTML页面由很多不同的标签组成，而CSS标签选择器就是声明哪些HTML标签采用哪种CSS样式。如下代码中，就是使用标签选择器声明CSS样式，同样也可以使用p选择器来声明页面中所有<p>标签的CSS风格，如下所示：

color:red;/* 字体颜色为红色*/

font-size:25px;/* 字体大小为25像素 */

font-family:”隶书”;/*字体为隶书*/

}

每一个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标签，声明多种样式风格，如图3.1.1所示：

图3.1.1 标签选择器

在网站的后期维护中，如果希望<p>标签的字体颜色不同使用红色，而是蓝色，仅仅需要将color的属性值改为blue，即可全部生效。标签选择器的应用如示例3.1所示。

示例3.1

<HTML>

<HEAD>

P {

color:red;

font-family:"隶书";

font-size:24px;

}

</STYLE>

</HEAD>

<BODY>

<P>床前明月光，</P>

<P>疑是地上霜。</P>

<P>我是郭德刚，</P>

<P>低头思故乡。</P>

</BODY>

</HTML>

示例3.1在浏览器中预览的效果，如图3.1.2所示。

1.2.2 类选择器

上面的标签选择器一旦声明，那么页面中的所有该标签都会相应地产生变化。例如当声明了<p>标签为红色时，页面中的所有<p>标签都将显示为红色。如果希望其中的某一个<p>标签不是红色而是蓝色，这时仅仅使用标签选择器是远远不够的，那怎么样解决这种需求呢？答案是可以使用类别(class)选择器。

类别选择器的名称可以由用户自定义，属性和值跟标签选择器一样，也必须符合CSS规范，如图3.1.3所示：

例如当页面中同时出现3个<p>标签，并且希望它们的对齐方式各不相同，就可以通过设置不同的class选择器来实现，如示例3.2所示

示例3.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>类别选择器</title>

.title{

font-size:24px;

font-family:"微软雅黑";

text-align:center;

}

.content{

text-indent:2em;

font-size:16px;

font-family:"新宋体";

}

.dept{

font-size:14px;

text-align:right;

}

</style>

</head>

<body>

大家好，明天下午（3月10日.周六）3点，请有时间的协会管理和新老志愿者到市政协一楼开会，

会议内容：

一、关于协会申请天使助学金入选的情况通报，

二、关于协会入选河南省温暖2011先进集体候选人的通报，

三、协会近期主要工作。</p>

<p class="dept">郑州市志愿者协会</p>

</body>

</html>

示例3.2的运行效果如图3.1.4所示，可以看到3个<p>标签分别呈现了不同的对齐方式以及文字大小，而且任何一个class选择器都适合所有的HTML标签，只需要使用HTML标签的class属性设置即可，如示例3.2中的<h3>标签同样使用了. dept这个类别。

图3.1.4 类别选择器

从图3.1.4中可以发现，最后一行<h3>标签显示效果为粗体字，而同样使用了.two选择器的第2个<p>标签却没有显示为居中对齐。这是因为在.content中没有定义字体的对齐方式，因此各个HTML标签都采用了其自身默认的显示样式，<p>默认是正常粗细，而<h3>默认为粗体。

很多时候页面中几乎所有的<p>标签都使用相同的样式风格，只有一两个特殊的<p>标签需要使用不同的风格，这时可以使用class选择器与上一节学习的标签选择器来配合使用。如示例3.3所示。

示例3.3

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>标签选择器与类选择器</title>

li{

list-style:none;

font-size:15px;

line-height:23px;

}

.special{

color:red;

font-size:18px;

}

</style>

</head>

<body>

<ul>

<li class="special">．<a href="#">国务院确定今年7大任务坚决贯彻楼市调控</a></li>

<li>．<a href="#">朝鲜发射卫星计划引中方忧虑</a><a href="#">粮食援助或泡汤</a></li>

<li>．<a href="#">黄奇帆：严防社会政治事件发生</a><a href="#">拥护中央决定</a></li>

<li>．<a href="#">中国海监船完成钓鱼岛巡航成功排除日方阻挠</a></li>

<li>．<a href="#">考研泄题案主要案犯落网在校生作弊一律开除</a></li>

<li>．<a href="#">搜狐视频|向上吧!少年成都赛区启动海选</a> <a href="#">青盲</a></li>

</ul>

</body>

</html>

在示例3.3中首先通过标签选择器定义<li>标签的相同样式，然后在通过一个class选择器对需要突出的<li>标签进行单独的设置，这样大大提高了代码的编写效率，其运行结果如图3.1.5所示：

图3.1.5 两种选择器配合

1.2.3 ID选择器

ID选择器的用法和class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此针对性更强。在HTML标签中只需要利用id属性就可以直接调用CSS中的ID选择器，其格式如图3.1.6所示

示例3.4

<html>

<head>

<title>ID选择器</title>

#one{

font-weight:bold; /* 粗体 */

}

#two{

font-size:30px; /* 字体大小 */

color:#009900; /* 颜色 */

}

</style></head>

<body>

<p id="one">ID选择器1</p>

<p id="two">ID选择器2</p>

<p id="two">ID选择器3</p>

<p id="one two">ID选择器3</p>

</body>

</html>

示例3.4的运行效果如图3.1.7所示，但是要注意的是，第2行和第3行都应用了定义的CSS样式,在很多浏览器中ID选择器可以用于多个标签。但要指出的是，将ID选择器用于多个标签是错误的。在编写CSS代码时，应该养成良好的习惯，一个ID只能用于一个HTML标签。

下面主要介绍一下，常见的样式属性及属性的值； CSS常见样式属性非常多，再结合不同的值可以做出非常绚丽多彩的网页效果。常见的样式属性分为以下几类：文字样式、背景样式、方框样式、超链接样式等等。

1.3 CSS文字样式

前面学习了CSS的基础语法，下面将学习CSS中常用的样式设置，由于CSS可以修饰的样式很多，比如：文字样式、图片样式、背景、表格、超链接等，这些样式再后面的章节中都会详细的学习。

使用Word编辑文字的时候，可以对文字的字体、大小、颜色等各种属性进行设置，从而实现不同的效果。文字是网页中不可缺少的元素，CSS同样可以对HTML中的文字进行全面的设置。

文字属性用于定义文字的字体类型、字号大小、字体是否加粗等，常用的字体样式如表3-1-1所示：

表3-1-1 常用CSS文字属性

属性名	含义	示例
font-family	定义字体类型	font-family:宋体
font-size	定义字体大小	font-size:15px
font-style	定义字体样式	font- style: italic
text-align	定义字体对齐方式	text- align: center
color	定义字体颜色	color:red
font-weight	定义字体粗细	font-weight:bold

示例3.5

<html>

<head>

<title>文本属性样式</title>

font-size: 12px;

font-family: "宋体";

text-align:left;

}

/* 大字体的样式*/

.bigFont{

font-style:italic;

font-size: 16px;

color:red;

}

.title{

font-weight:bold;

}

</style>

</head>

<body>

<p class="title">【新闻】[设搜狐为首页] 3月1日 </p>

<p class="bigFont">·人工智能专家Judea Pearl获2011年图灵奖</p>

<p>·我国实施不安全食品召回制度遏制非法出口</p>

<p>·加拿大开发者称日本游戏是垃圾</p>

<p class="bigFont">·博客| 刘翔：最后胜利的感觉真好！ </p>

</body>

</html>

示例3.5在浏览器中预览效果，如图3.1.8所示。

图3.1.8文字属性效果

在示例3.5第一个段落<p>使用了title类样式，所以粗体显示；第二个段落<p>和第五个段落<p>都应用了标签样式<p>和类样式规则 bigFont，那么究竟哪个样式规则其作用呢？这里有一个原则，就近原则；所谓“近水楼台先得月”。也就是说当有了不同的样式规则应用在同一个标签上时，根据这些样式规则距离修饰的文本内容的远近，来决定应用哪个样式规则。

1.4 CSS背景样式

适当的使用背景，可以使网页既美观显示速度又快。CSS背景样式包括背景颜色、背景图像、背景位置以及背景图像以何种方式平铺在指定的区域内。常用的背景样式如表3-1-2所示。

表3-1-2 CSS背景样式常用属性

属性名	含义	示例
background-color	设置背景颜色	background-color:#f0aabb;
background-image	背景图像：none(没有)或urn(图像路径及图像名)	background-image:url(bg.gif)
background-position	背景图像位置：垂直位置(top, center, bottom)、水平位置(1eft, center, right)	background-position:center
background-repeat	背景图像重复的方式：no-repeat(不重复)、repeat(重复〕、repeat-x水平方向重复)或repeat-Y(垂直方重复)	background-repeat:repeat-x;
background	上述4种属性的综合应用，顺序是： background-color background-image background-repeat background-position

示例3.6

<html>

<style>

body{

background-image:url(bg.jpg); /* 背景图片 */

background-repeat:no-repeat; /* 不重复 */

background-position:bottom right; /* 背景位置，右下 */

background-color:#eeeee8; /* 背景颜色 */

}

span{ /* 首字放大 */

font-size:70px;

float:left;

font-family:黑体;

font-weight:bold;

}

</style></head>

<body>

<p><span>清</span>华大学（Tsinghua University）是中国著名高等学府，坐落于北京西北郊风景秀丽的清华园,是中国高层次人才培养和科学技术研究的重要基地。</p>

<p>清华大学的前身是清华学堂，成立于1911年，当初是清政府建立的留美预备学校。1912 年更名为清华学校，为尝试人才的本地培养，1925 年设立大学部，同年开办国学研究院，1928年更名为“国立清华大学”。1937年抗日战争爆发后，南迁长沙，与北京大学、南开大学联合办学，组建国立长沙临时大学，1938年迁至昆明，改名为国立西南联合大学。1946年，清华大学迁回清华园原址复校。</p>

<p>

1911年清华学堂成立<br>

1912年更名为清华学校<br>

1928年更名为国立清华大学<br>

1929年设文学院、理学院、法学院<br>

1932年设工学院<br>

1933年开始招考留美公费生<br/>

1937年组建国立长沙临时大学<br/>

1938年长沙临时大学迁到昆明更名国立西南联合大学<br/>

1946年在清华园复员开学<br/>

2004年成立航天航空学院<br/>

2008年成立马克思主义学院<br/>

2009年成立生命科学学院<br/>

2011年成立环境学院建校100周年<br/>

</p>

</body>

示例3.6在浏览器中预览效果，如图3.1.9所示。通过CSS设置，背景图片位于页面的右下方，不重复。

图3.1.9 背景样式

背景图片的重复即平铺方式，如示例3.7所示。

示例3.7

<html>

<head>

<style>

body{

background-image:url(bg.gif); /* 页面背景图片 */

}

</style></head>

<body>

</body>

</html>

示例3.7运行效果如图3.1.10所示，可以看出图片铺满整屏幕。

图3.1.10 背景图片默认平铺

如果想更改平铺方式只需要使用background-repeat属性进行设置即可，比如示例3.7中加入CSS代码中加入

<style>

body{

background-image:url(bg.gif); /* 页面背景图片 */

background-repeat: repeat-y; /*竖直平铺*/

}

</style>

运行效果如图3.1.11所示：

图3.1.11 背景图片竖直平铺

1.5 CSS方框样式

方框样式其实就是对应CSS盒子模型，CSS盒子模型都具备方框样式。常用的方框样式有：边界(margin)、边框(border)、填充(padding)、内容。

这些样式我们可以理解为日常生活使用中使用的盒子，日常生活中所见的盒子也都具有这些样式，所以叫它盒子模型。日常生活中的盒子的内容就是盒子里面装的东西(如图3.1.14所示)：填充就是怕盒子里装的贵重物品损坏而添加的减震材料；边框就是盒子本身(如图3.1.14所示的纸箱)；至于边界则说明盒子摆放的时候不能和盒子挨在一起，盒子与盒子之间要留间隙，这间隙就相当于边界(相邻纸箱之间的距离)。

图3.1.12 生活中的盒子模型

下面我们回过头来看看网页设计中的盒子模型，在网页设计中，内容常指图片、文字等元素；填充就是盒子内容距离盒子边框之间的距离，可以理解为生活中盒子里的减震材料的厚度；而边框有宽度、颜色和样式之分，又可以理解为生活中所见盒子的厚度以及这个盒子是什么颜色材料做成的以及什么样式；边界就是该盒子与其他网页元素之间的距离，如图3.1.13所示。

图3.1.13 网页中的盒子模型

表3-1-3列出了更为详细的常用方框样式属性。

表3-1-3 CSS方框样式常用属性

属性	CSS属性名	含义
边界属性	margin-top	设置对象的上边界
	margin-right	设置对象的右边界
	margin-bottom	设置对象的下边界
	margin-left	设置对象的左边界
边框属性	border-style	设置边框的样式
	border-width	设置边框的宽度
	border-color	设置边框的颜色
填充属性	padding-top	设置内容与上边框之间的距离
	padding-right	设置内容与右边框之间的距离
	padding-bottom	设置内容与下边框之间的距离
	padding-left	设置内容与左边框之间的距离

使用方框属性实现如图3.1.14所示的效果。首先表格有背景颜色，因此要用到背景颜色属性background；其次图3.1.14中的虚线，是通过方框属性中的边框属性来实现的，因此要用到边框属性；最后像“手机充值”等内容与表格的边框之间有距离，因此要用到填充属性。图3.1.14中的右边框是虚线，虚线样式是“dashed”属性值来表示的，因此图3.1.14中的右边框可以写为“border-right-style:dashed;”。其他属性表示方法类同，就不一一列举了，完整的代码如示例3.8所示。

示例3.8

<HTML>

<HEAD>

<TITLE>表格虚线框的样式</TITLE>

.tableBorder

{

border-right-width: 3px;

border-right-color:red;

border-right-style:dashed;

padding-top:20px;

padding-left:10px;

}

TR{

background:yellow;

}

</STYLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例3.10在浏览器中的预览的效果如图3.1.14所示。

图3.1.14虚线框样式

1.6 CSS超链接样式

超链接也是网页中最常见的元素之一，通过超链接可以实现页面的跳转。前面介绍过超链接的语法。比如：

默认情况下，超链接统一显示为蓝色并且有下划线，被点击过的超链接则为紫色并且也有下划线；被点击过的超链接则为紫色并且有下划线，如图3.1.15所示。

图3.1.15 普通超链接

超链接默认样式大多数情况下并不能满足用户的需求。通过CSS 可以设置超链接的各种属性，比如字体、颜色、背景、是否有下划线等等。现在使用CSS代码设置超链接的字体，并去掉下划线，代码如下。

font-family: 微软雅黑; /*超链接字体*/

text-decoration: none; /*没有下划线*/

}

此时的运行效果如图3.1.16所示，超链接的字体已经发生了变化，并且没有了下划线。

图3.1.16超链接简单样式

仅仅通过<a>标记的样式来改变超链接的样式，并没有太多的效果。如果想对超链接进行更精细的CSS设置就要用到超链接的伪类，具体超链接的伪类属性如表3-1-4所示。

表3-1-4 CSS方框样式常用属性

属性名	含义	示例	应用场景
a:link	未访问时的超链接样式	a:link{color:#a3ffdd;}	常用，主要样式
a:visited	访问过的超链接样式	a:visited{color:#a3fead;}	常用，区分是否被访问
a:hover	鼠标悬浮时的样式	a:hover{color:#ooffff;}	常用，实现动态效果
a:active	鼠标单击未释放时的样式	a:active{color:#a3ffdd;}	不常用，一般和a:link一致

通过以上四个伪类，再配合其他CSS样式就能制作各种动态效果的超链接。如示例3.9使用CSS对超链接进行修饰，包括了对超链接本身，被访问过的超链接、鼠标经过时的样式等等。

示例3.9

<html>

<head>

<title>动态超链接</title>

<style>

body{

margin:0px; padding:0px;

cursor:pointer;

}

.nev{

font-size:12px;

background-color:#C8C4B7; /* 导航条的背景颜色 */

}

.nev td{

text-align:center;

}

a:link{ /* 超链接正常状态下的样式 */

color:#000033; /* 黑蓝 */

text-decoration:none; /* 无下划线 */

}

a:visited{ /* 访问过的超链接 */

color:#ff00ff; /* 紫色 */

text-decoration:none; /* 无下划线 */

}

a:hover{ /* 鼠标经过时的超链接 */

color:#FFFF00; /* 黄色 */

text-decoration:underline; /* 下划线 */

}

</style></head>

<body>

</table>

<table width="685px" cellpadding="2"

cellspacing="2" class="nev" align="center">

<tr>

</tr>

</table>

</body>

</html>

示例3.9的显示效果如图3.1.17所示，可以看到链接文字都变成了黑蓝色，且没有下划线。而点击过的超链接颜色变成了紫色，同样没有下划线。当鼠标悬停到超链接上时颜色变成了黄色，带有下划线。

图3.1.17 动态超链接效果

1.7 样式表的3类应用方式

在对CSS大致了解之后，便可以使用CSS对页面进行全方位的控制。本节将学习如何使用CSS控制页面，以及其在页面中的应用方式，包含行内样式、内嵌式、链接式。

1.7.1 行内样式表

行内样式表是所有方法中最为直接的一种，它直接对HTML标签的style属性进行设置，将CSS代码直接写在其中，如示例3.10所示

示例3.10

<html>

<body>

<h2 style="font-family:'微软雅黑';text-align:center">或将年内发布……</h2>

[<a href="#">汽车之家</a> 新闻] 早在2010年，……</p>

</body>

</html>

示例3.10的运行效果如图3.1.18所示。可以看到三个<p>标签都使用了style属性，并且设置了不同的CSS样式，各个样式之间互不影响，分别显示自己的样式效果。

图3.1.18 行内样式

第1个标签<h2>设置了字体为微软雅黑，文字为居中对齐(text-align:center),第2个标签<p>设置字体大小为12px。最后一个<p>标签设置文字缩进2em，字体大小为14px，行高为23px。（在网页上，一个em是网页浏览器的基础文本尺寸的高度，它一般情况下是16px。）

行内样式是最简单的CSS使用方法，但由于要为每一个标签都设置style属性，后期维护成本很高，而且网页内容容易过多，因此不推荐使用。

1.7.2 内部样式表

把CSS代码写在<head>的<style>标签中。与HTML内容位于同一文件，这就是内部样式表。这种方式方便在同页面中修改样式。对于示例3.10如果采用内部样式表，则3个<li>标签的效果将完全相同，如示例3.11所示，显示效果如图3.1.19所示

示例3.11

<html>

<head>

li{

font-size:12px;

line-height:18px;

list-style:none;

}

</style>

</head>

<body>

<ul>

<li><a href="#">150万买城六区两居</a></li>

<li><a href="#">5朝阳地铁房全接触</a></li>

<li><a href="#">牡丹园准现房230万</a></li>

<li><a href="#">80后一百万买婚房</a></li>

<li><a href="#">四环在售热盘解析</a></li>

<li><a href="#">一百万婚房全公示</a></li>

<li><a href="#">千元抄底首付10万</a></li>

<li><a href="#">54平80万五环买房</a></li>

</ul>

</body>

</html>

图3.1.19 内部样式表

从示例3.11中看到，所有CSS的代码被集中放到了同一个区域，方便了后期的维护，页面本身也大大的瘦身。但不利于在多页面间共享复用代码及维护。对内容与样式的分离也不够彻底。实际开发时会在页面开发结束后，将这些样式代码剪切到单独的CSS文件中。将样式和内容彻底分离开。即下面介绍的外部样式表。

1.7.3 外部样式表

把CSS代码单独写在另外一个或多个CSS文件中，需要用时在<head>中通过<link>标签引用。这种方式就是应用外部样式表文件的方式。它的好处是实现了样式和结构的彻底分离、同时方便网站的其他页面复用该样式有利于保持网站的统一样式和网站维护。

其语法如下。

示例3.12

Ø 首先创建一个HTML文件3.12.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>外部样式表</title>

</head>

<body>

<ul>

<li>03月17日<a href="#">上市指日可待北斗星X5无伪谍照曝光</a></li>

<li>03月17日<a href="#">称"凯美瑞经典"? 老款凯美瑞或将复出</a></li>

<li>03月17日<a href="#">SX7/SC5-RV 1.3T领衔英伦今年推5款车</a></li>

<li>03月16日<a href="#">或北京试点销售北汽E30EV电动版曝光</a></li>

<li>03月16日<a href="#">多项升级迎战奥迪新A6L将3月28日上市</a></li>

<li>03月16日<a href="#">定位城市SUV 江淮全新SUV SII实车曝光</a></li>

<li>03月16日<a href="#">配置较丰富旗云5将于3月24日正式上市</a></li>

</ul>

</body>

</html>

Ø 然后创建一个文件命名为chapter3.css，内容如下所示:

@charset "utf-8";

/* CSS Document */

h3{

background-color:#CCC;

}

ul{

list-style-type:disc

}

li{

font-size:14px;

line-height:20px;

}

text-decoration:none;

}

从示例3.12中可以看到，把HTML页面中CSS代码分离出来放到一个单独的文件中chapter3.css，然后在html文件中在<head>和</head>标签之间使用<link>标签把chapter3.css文件引用到页面中，对其中的标签进行样式控制，示例3.12的运行效果如图3.1.20所示：

图3.1.20 外部样式表

外部样式表的最大优势在于CSS代码与HTML代码完全分离，并且同一个css文件可以被多个HTML页面共用。因此在设计整个网站时，很多页面都可以使用同一个css文件，从而实现同样的风格。如果整个网站的样式要进行修改，就仅仅需要修改一个css文件即可。

本章总结

Ø CSS 的概念：CSS 是 Cascading Style Sheets 的英文缩写，即层叠样式表

Ø CSS 选择器

n 标签选择器

n 类选择器

n ID选择器

Ø CSS常用样式

n 文字样式

n 背景样式

n 方框样式

n 超链接样式

Ø 样式表三类应用

n 行内样式表

n 内部样式表

n 外部样式表

任务实训部分

实训任务1：CSS标签选择器

训练技能点

Ø CSS标签选择器

Ø CSS常用字体样式

需求说明

使用HTML和CSS知识实现如图3.2.1所示CSS效果。要求标题字体为楷体_GB2312,内容字体为“隶书”，颜色为灰黑色(#333333)，大小为22px

图3.2.1 CSS标签选择器实现文字效果

实现思路

Ø 使用内部样式表添加CSS样式规则

Ø 使用标签选择器为页面中的元素设置相应的样式

实现步骤

(1) 编写HTML页面内容，代码如下所示。

<html>

<head>

</head>

<body>

<p>床前明月光，疑是地上霜。</p>

<p>抬头看明月，低头思故乡。</p>

</body>

</html>

(2) 使用内部样式表为页面元素添加CSS样式，即在页面中使用<style>标签添加样式。

</style>

(3) 使用标签选择器分别为<h2>标签和<p>标签设置相应的样式，使用font-family设置字体，font-size设置字号，color设置字体颜色。

h2{ font-family: 楷体_GB2312;}

p { color:#333333; font-family:"隶书"; font-size:22px;}

</style>

实训任务2：CSS ID选择器

训练技能点

Ø ID选择器

Ø 字体样式

需求说明

在实训任务1的基础上，使用CSS ID选择器把内容的第二行的字体颜色变成蓝色(#0000ff)并加粗，运行效果如图3.2.2所示

图3.2.2 字体样式

实训任务3：CSS 类选择器

训练技能点

Ø 类别选择器

Ø 字体样式

需求说明

使用CSS类别选择器实现如图3.2.3所示效果，具体要求如下：

Ø 列表项“图书音像”和 “日用百货”字体为黑体，加粗，大小为15px，颜色为橘黄色(#ff7500)

Ø 其余列表项的字体为宋体，大小为12px

图3.2.3购物网站商品分类

实现思路

Ø 使用<ul>-<li>实现列表

Ø 使用标签选择器为每个列表项设置字体样式

Ø 使用类别选择器为“图书音像”和“日用百货”设置特殊的样式

实现步骤

(1) 使用<ul>-<li>实现列表，为每个列表项添加相应的内

<html>

<head><title>文字下划线、顶划线、删除线</title>

</head>

<body>

<ul>

</ul>

<ul>

</ul>

</body>

</html>

(2) 使用标签选择器为每个列表项添加CSS样式

<style>

li{font-size:12px;color:#636362;}

</style>

(3) 使用类别选择器定义列表项“图书音像”和“日用百货”的样式

.menu-class{font-family:黑体; font-weight: bold; font-size:15px; color:#ff7300;}

(4) 在列表项“图书音像”和“日用百货”对应的<li>标签上只用class属性指定应用上一步定义的类别选择器menu-class

实训任务4：CSS 内嵌样式表

训练技能点

Ø 内嵌样式表的使用

Ø 多种选择器混合使用

Ø 字体样式

Ø 超链接样式

需求说明

新闻标题字体颜色为灰黑色(#636362)，字号为13px，加上下划线。鼠标悬停时新闻标题没有下划线；头条和重点内容内容字体为黑体，加粗，颜色为橘红色(#ff2200)。效果如图3.2.4所示：

图3.2.4 新闻列表页面

实训任务5：CSS外部样式表

训练技能点

Ø CSS外部样式表的应用

Ø CSS选择器

Ø 字体样式综合应用

需求说明

使用CSS制作Google公司Logo，效果如图3.2.5所示。

图3.2.5 Google Logo效果

实现思路

通过对各个字母应用不同的文字样式就能达到想要的效果。

实现步骤

(1) 首先编写页面，使用段落显示 “Google”几个字母

<html>

<head><title>Google</title>

</head>

<body>

<p>Google</p>

</body>

</html>

(2) 对<p>标签进行整体字体控制，考虑到Google标志的实际字体及字母之间的距离，对<p>标签进行进一步的CSS设置，加入如下CSS代码

font-size:80px;

letter-spacing:-2px; /* 字母间距 */

font-family:Arial, Helvetica;

font-weight: bold;

}

此时的显示效果，除了各个字符的颜色已经十分接近标志，如图3.2.6所示：

图3.2.6 Google标志初步效果

(3) 在Google标志中最醒目的是各个字母的颜色，因此组后需要对各个字母分别设定CSS风格，因此加入<span>标签进行控制，并利用CSS控制各个字母颜色。提示代码如下：

(4) 最后对各个<span>标签设置不同的CSS样式(控制每个字符的颜色)，就能达到最终的效果。核心代码如下。

.g{ color:#184dc6; }

.oe{ color:#c61800; }

.o2{ color:#efba00; }

.l{ color:#42c34a; }

实训任务6：CSS背景样式

训练技能点

Ø CSS设置背景颜色

Ø CSS控制背景图片

需求说明

页面内容如下：要求使用CSS实现如下设置

Ø 给整个页面加入背景颜色#E4565F

Ø 给页面加入背景图片bg.gif，测试水平重复、垂直重复

Ø 实现固定背景图片：当浏览器出现滚动条时，拉动滚动条默认背景图片会随着上下移动，要实现背景图片不随着滚动条而滚动的效果，在CSS中通常设置background-attachment:fixed实现。

<html>

<body>

<tr>

</table>

</td>

</tr>

</table>

</body>

</html>

巩固练习

一、选择题

1. 在以下的 HTML 中，哪个是正确引用外部样式表的方法 ( )

A. <stylesrc="mystyle.css">

B. <linkrel="stylesheet" type="text/css"href="mystyle.css">

C. <stylesheet>mystyle.css</stylesheet>

2. 在 HTML 文档中，引用外部样式表的正确位置是？ ( )

A. 文档的末尾

B. 文档的顶部

C. <body>部分

D. <head>部分

3. 哪个 HTML 标签用于定义内部样式表？ ( )

A. <style>

B. <script>

C. <css>

4. 哪个 HTML 属性可用来定义行内样式？ ( )

A. font

B. class

C. styles

D. style

5. 下列哪个选项的 CSS 语法是正确的？( )

A. body:color=black

B. {body:color=black(body}

C. body {color: black}

D. {body;color:black}

6. 如何改变某个元素的文本颜色？( )

A. text-color:

B. fgcolor:

C. color:

D. text-color=

二、上机练习

1. 制作新闻列表页面CSS效果，显示效果如图3.3.1所示：

要求：普通标题字体宋体，字号15px，颜色#0449BE。特殊标题字体黑体，字号16px，颜色红色。

3.3.1新闻列表

2. 实现如图3.3.2所示效果，要求给文字加上或去掉划线。

图3.3.2文字划线效果