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标签来定义页面文档格式，例如标题 、表格 样式表由样式规则组成，这些规则告诉浏览器如何显示文档，所有的样式规则都写在标签内部。一个样式(STYLE)的基本语法由3部分构成：选择器(selector)，属性(property)和属性值(value)。 基本语法： selector { property:value } 选择器 (selector)通常是指需要定义的 HTML元素或标签。属性(property)是需要改变的属性，且每个属性都有一个属性值。属性和属性值用冒号分开，且每行样式规则后使用分号 (;)结束。所有的样式规则由花括号包围，这样就组成了一个完整的样式声明 (declaration)。 例如，可以创建一个样式规则，来指定所有 段落的字体颜色均为红色，字体大小为30px，字体为隶书。可以用来修饰网页中所有 标签的样式。样式规则示例如下： CSS样式的属性和属性值都是CSS规范定义好的，直接使用就可以了；而CSS选择器则分为三类：标签选择器、类选择器、ID选择器；下面逐一介绍选择器的用法。 选择器(selector)是CSS中很重要的概念，所有HTML语言中的样式都可以通过不同CSS选择器进行控制。用户只需要通过选择器对不同的HTML标签进行控制，即可实现各种不同的效果。 根据选择器所修饰的内容类别不同选择器又分为标签选择器(有的教材也称元素选择器)、类选择器、ID选择器。 一个HTML页面由很多不同的标签组成，而CSS标签选择器就是声明哪些HTML标签采用哪种CSS样式。如下代码中，就是使用标签选择器声明CSS样式，同样也可以使用p选择器来声明页面中所有 标签的CSS风格，如下所示： p{ color:red;/* 字体颜色为红色*/ font-size:25px;/* 字体大小为25像素 */ font-family:”隶书”;/*字体为隶书*/ } 每一个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标签，声明多种样式风格，如图3.1.1所示： 图3.1.1 标签选择器 在网站的后期维护中，如果希望 标签的字体颜色不同使用红色，而是蓝色，仅仅需要将color的属性值改为blue，即可全部生效。标签选择器的应用如示例3.1所示。 示例3.1 床前明月光， 疑是地上霜。 我是郭德刚， 低头思故乡。 示例3.1在浏览器中预览的效果，如图3.1.2所示。 上面的标签选择器一旦声明，那么页面中的所有该标签都会相应地产生变化。例如当声明了 标签为红色时，页面中的所有 标签都将显示为红色。如果希望其中的某一个 标签不是红色而是蓝色，这时仅仅使用标签选择器是远远不够的，那怎么样解决这种需求呢？答案是可以使用类别(class)选择器。 类别选择器的名称可以由用户自定义，属性和值跟标签选择器一样，也必须符合CSS规范，如图3.1.3所示： 例如当页面中同时出现3个 标签，并且希望它们的对齐方式各不相同，就可以通过设置不同的class选择器来实现，如示例3.2所示 示例3.2 会议通知 大家好，明天下午（3月10日.周六）3点，请有时间的协会管理和新老志愿者到市政协一楼开会， 会议内容： 一、关于协会申请天使助学金入选的情况通报， 二、关于协会入选河南省温暖2011先进集体候选人的通报， 三、协会近期主要工作。 郑州市志愿者协会 示例3.2的运行效果如图3.1.4所示，可以看到3个 标签分别呈现了不同的对齐方式以及文字大小，而且任何一个class选择器都适合所有的HTML标签，只需要使用HTML标签的class属性设置即可，如示例3.2中的 图3.1.4 类别选择器 从图3.1.4中可以发现，最后一行 标签却没有显示为居中对齐。这是因为在.content中没有定义字体的对齐方式，因此各个HTML标签都采用了其自身默认的显示样式， 默认是正常粗细，而 很多时候页面中几乎所有的 标签都使用相同的样式风格，只有一两个特殊的 标签需要使用不同的风格，这时可以使用class选择器与上一节学习的标签选择器来配合使用。如示例3.3所示。 示例3.3 在示例3.3中首先通过标签选择器定义 图3.1.5 两种选择器配合 ID选择器的用法和class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此针对性更强。在HTML标签中只需要利用id属性就可以直接调用CSS中的ID选择器，其格式如图3.1.6所示 示例3.4 <html> ID选择器1 ID选择器2 ID选择器3 ID选择器3 html> 示例3.4的运行效果如图3.1.7所示，但是要注意的是，第2行和第3行都应用了定义的CSS样式,在很多浏览器中ID选择器可以用于多个标签。但要指出的是，将ID选择器用于多个标签是错误的。在编写CSS代码时，应该养成良好的习惯，一个ID只能用于一个HTML标签。 下面主要介绍一下，常见的样式属性及属性的值； 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 【新闻】[设搜狐为首页] 3月1日 ·人工智能专家Judea Pearl获2011年图灵奖 ·我国实施不安全食品召回制度 遏制非法出口 ·加拿大开发者称日本游戏是垃圾 ·博客| 刘翔：最后胜利的感觉真好！ 示例3.5在浏览器中预览效果，如图3.1.8所示。 图3.1.8文字属性效果 在示例3.5第一个段落 使用了title类样式，所以粗体显示；第二个段落 和第五个段落 都应用了标签样式 和类样式规则 bigFont，那么究竟哪个样式规则其作用呢？这里有一个原则，就近原则；所谓“近水楼台先得月”。也就是说当有了不同的样式规则应用在同一个标签上时，根据这些样式规则距离修饰的文本内容的远近，来决定应用哪个样式规则。 适当的使用背景，可以使网页既美观显示速度又快。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> 清华大学（Tsinghua University）是中国著名高等学府，坐落于北京西北郊风景秀丽的清华园,是中国高层次人才培养和科学技术研究的重要基地。 清华大学的前身是清华学堂，成立于1911年，当初是清政府建立的留美预备学校。1912 年更名为清华学校，为尝试人才的本地培养，1925 年设立大学部，同年开办国学研究院，1928年更名为“国立清华大学”。1937年抗日战争爆发后，南迁长沙，与北京大学、南开大学联合办学，组建国立长沙临时大学，1938年迁至昆明，改名为国立西南联合大学。1946年，清华大学迁回清华园原址复校。 1911年清华学堂成立 1912年更名为清华学校 1928年更名为国立清华大学 1929年设文学院、理学院、法学院 1932年设工学院 1933年开始招考留美公费生 1937年组建国立长沙临时大学 1938年长沙临时大学迁到昆明更名国立西南联合大学 1946年在清华园复员开学 2004年成立航天航空学院 2008年成立马克思主义学院 2009年成立生命科学学院 2011年成立环境学院建校100周年 示例3.6在浏览器中预览效果，如图3.1.9所示。通过CSS设置，背景图片位于页面的右下方，不重复。
图3.1.9 背景样式 背景图片的重复即平铺方式，如示例3.7所示。 示例3.7 <html> 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 背景图片竖直平铺 方框样式其实就是对应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 示例3.10在浏览器中的预览的效果如图3.1.14所示。 图3.1.14虚线框样式 超链接也是网页中最常见的元素之一，通过超链接可以实现页面的跳转。前面介绍过超链接的语法。比如： 默认情况下，超链接统一显示为蓝色并且有下划线，被点击过的超链接则为紫色并且也有下划线；被点击过的超链接则为紫色并且有下划线，如图3.1.15所示。 图3.1.15 普通超链接 超链接默认样式大多数情况下并不能满足用户的需求。通过CSS 可以设置超链接的各种属性，比如字体、颜色、背景、是否有下划线等等。现在使用CSS代码设置超链接的字体，并去掉下划线，代码如下。 a{ font-family: 微软雅黑; /*超链接字体*/ text-decoration: none; /*没有下划线*/ } 此时的运行效果如图3.1.16所示，超链接的字体已经发生了变化，并且没有了下划线。 图3.1.16超链接简单样式 仅仅通过标记的样式来改变超链接的样式，并没有太多的效果。如果想对超链接进行更精细的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 cellspacing="2" class="nev" align="center"> 示例3.9的显示效果如图3.1.17所示，可以看到链接文字都变成了黑蓝色，且没有下划线。而点击过的超链接颜色变成了紫色，同样没有下划线。当鼠标悬停到超链接上时颜色变成了黄色，带有下划线。 图3.1.17 动态超链接效果 在对CSS大致了解之后，便可以使用CSS对页面进行全方位的控制。本节将学习如何使用CSS控制页面，以及其在页面中的应用方式，包含行内样式、内嵌式、链接式。 行内样式表是所有方法中最为直接的一种，它直接对HTML标签的style属性进行设置，将CSS代码直接写在其中，如示例3.10所示 示例3.10 2012年03月17日…… [汽车之家 新闻] 早在2010年，…… 示例3.10的运行效果如图3.1.18所示。可以看到三个 标签都使用了style属性，并且设置了不同的CSS样式，各个样式之间互不影响，分别显示自己的样式效果。 图3.1.18 行内样式 第1个标签 设置字体大小为12px。最后一个 标签设置文字缩进2em，字体大小为14px，行高为23px。（在网页上，一个em是网页浏览器的基础文本尺寸的高度，它一般情况下是16px。） 行内样式是最简单的CSS使用方法，但由于要为每一个标签都设置style属性，后期维护成本很高，而且网页内容容易过多，因此不推荐使用。 把CSS代码写在 html> 图3.1.19 内部样式表 从示例3.11中看到，所有CSS的代码被集中放到了同一个区域，方便了后期的维护，页面本身也大大的瘦身。但不利于在多页面间共享复用代码及维护。对内容与样式的分离也不够彻底。实际开发时会在页面开发结束后，将这些样式代码剪切到单独的CSS文件中。将样式和内容彻底分离开。即下面介绍的外部样式表。 把CSS代码单独写在另外一个或多个CSS文件中，需要用时在、链接等，但这些标签不能满足更多的文档样式需求，为了解决这个问题，W3C制定了 CSS样式规范。
1.2 CSS选择器
1.2.1 标签选择器
静夜思
1.2.2 类选择器
2012年03月09日
标签同样使用了. dept这个类别。
标签显示效果为粗体字，而同样使用了.two选择器的第2个
默认为粗体。
1.2.3 ID选择器
1.3 CSS文字样式
1.4 CSS背景样式
1.5 CSS方框样式
手机冲值 电子彩票 电脑硬件 数码相机 1.6 CSS超链接样式
首页 留言日志 作品展示 行业新闻 聆听杂志 天空之城 联系我们 1.7 样式表的3类应用方式
1.7.1 行内样式表
或将年内发布……
设置了字体为微软雅黑，文字为居中对齐(text-align:center),第2个标签
1.7.2 内部样式表
1.7.3 外部样式表
其语法如下。
示例3.12
Ø 首先创建一个HTML文件3.12.html
|
国产新车
|
Ø 然后创建一个文件命名为chapter3.css，内容如下所示:
@charset "utf-8"; /* CSS Document */ h3{ background-color:#CCC; } ul{ list-style-type:disc } li{ font-size:14px; line-height:20px; } a{ text-decoration:none; } |
从示例3.12中可以看到，把HTML页面中CSS代码分离出来放到一个单独的文件中chapter3.css，然后在html文件中在
和标签之间使用标签把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>
静夜思
床前明月光，疑是地上霜。
抬头看明月，低头思故乡。 html> |
(2) 使用内部样式表为页面元素添加CSS样式，即在页面中使用