视频课：H5和JAVASCRIPT实战教程
学习内容
Ø 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标签来定义页面文档格式，例如标题、段落
、表格、链接等，但这些标签不能满足更多的文档样式需求，为了解决这个问题，W3C制定了 CSS样式规范。
样式表由样式规则组成，这些规则告诉浏览器如何显示文档，所有的样式规则都写在标签内部。一个样式(STYLE)的基本语法由3部分构成：选择器(selector)，属性(property)和属性值(value)。
基本语法：
selector { property:value }
选择器 (selector)通常是指需要定义的 HTML元素或标签。属性(property)是需要改变的属性，且每个属性都有一个属性值。属性和属性值用冒号分开，且每行样式规则后使用分号 (;)结束。所有的样式规则由花括号包围，这样就组成了一个完整的样式声明 (declaration)。
例如，可以创建一个样式规则，来指定所有
段落的字体颜色均为红色，字体大小为30px，字体为隶书。可以用来修饰网页中所有
标签的样式。样式规则示例如下：
CSS样式的属性和属性值都是CSS规范定义好的，直接使用就可以了；而CSS选择器则分为三类：标签选择器、类选择器、ID选择器；下面逐一介绍选择器的用法。
1.2 CSS选择器选择器(selector)是CSS中很重要的概念，所有HTML语言中的样式都可以通过不同CSS选择器进行控制。用户只需要通过选择器对不同的HTML标签进行控制，即可实现各种不同的效果。
根据选择器所修饰的内容类别不同选择器又分为标签选择器(有的教材也称元素选择器)、类选择器、ID选择器。
1.2.1 标签选择器一个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所示。
1.2.2 类选择器上面的标签选择器一旦声明，那么页面中的所有该标签都会相应地产生变化。例如当声明了
标签为红色时，页面中的所有
标签都将显示为红色。如果希望其中的某一个
标签不是红色而是蓝色，这时仅仅使用标签选择器是远远不够的，那怎么样解决这种需求呢？答案是可以使用类别(class)选择器。
类别选择器的名称可以由用户自定义，属性和值跟标签选择器一样，也必须符合CSS规范，如图3.1.3所示：
例如当页面中同时出现3个
标签，并且希望它们的对齐方式各不相同，就可以通过设置不同的class选择器来实现，如示例3.2所示
示例3.2
类别选择器
会议通知
大家好，明天下午（3月10日.周六）3点，请有时间的协会管理和新老志愿者到市政协一楼开会，
会议内容：
一、关于协会申请天使助学金入选的情况通报，
二、关于协会入选河南省温暖2011先进集体候选人的通报，
三、协会近期主要工作。
郑州市志愿者协会
2012年03月09日
示例3.2的运行效果如图3.1.4所示，可以看到3个
标签分别呈现了不同的对齐方式以及文字大小，而且任何一个class选择器都适合所有的HTML标签，只需要使用HTML标签的class属性设置即可，如示例3.2中的
标签同样使用了. dept这个类别。
图3.1.4 类别选择器
从图3.1.4中可以发现，最后一行
标签显示效果为粗体字，而同样使用了.two选择器的第2个标签却没有显示为居中对齐。这是因为在.content中没有定义字体的对齐方式，因此各个HTML标签都采用了其自身默认的显示样式，
默认是正常粗细，而
默认为粗体。
很多时候页面中几乎所有的
标签都使用相同的样式风格，只有一两个特殊的
标签需要使用不同的风格，这时可以使用class选择器与上一节学习的标签选择器来配合使用。如示例3.3所示。
示例3.3
标签选择器与类选择器
- ．国务院确定今年7大任务 坚决贯彻楼市调控
- ．朝鲜发射卫星计划引中方忧虑粮食援助或泡汤
- ．黄奇帆：严防社会政治事件发生拥护中央决定
- ．中国海监船完成钓鱼岛巡航 成功排除日方阻挠
- ．考研泄题案主要案犯落网 在校生作弊一律开除
- ．搜狐视频|向上吧!少年成都赛区启动海选 青盲
在示例3.3中首先通过标签选择器定义
图3.1.5 两种选择器配合
1.2.3 ID选择器ID选择器的用法和class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此针对性更强。在HTML标签中只需要利用id属性就可以直接调用CSS中的ID选择器，其格式如图3.1.6所示
示例3.4
<html>
ID选择器
ID选择器1
ID选择器2
ID选择器3
ID选择器3
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
文本属性样式
【新闻】[设搜狐为首页] 3月1日
·人工智能专家Judea Pearl获2011年图灵奖
·我国实施不安全食品召回制度 遏制非法出口
·加拿大开发者称日本游戏是垃圾
·博客| 刘翔：最后胜利的感觉真好！
示例3.5在浏览器中预览效果，如图3.1.8所示。
图3.1.8文字属性效果
在示例3.5第一个段落
使用了title类样式，所以粗体显示；第二个段落
和第五个段落
都应用了标签样式
和类样式规则 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>
背景图片
清华大学（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 背景图片竖直平铺
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
表格虚线框的样式
手机冲值 电子彩票 电脑硬件 数码相机
示例3.10在浏览器中的预览的效果如图3.1.14所示。
图3.1.14虚线框样式
1.6 CSS超链接样式超链接也是网页中最常见的元素之一，通过超链接可以实现页面的跳转。前面介绍过超链接的语法。比如：
http://www.baidu.com>百度
默认情况下，超链接统一显示为蓝色并且有下划线，被点击过的超链接则为紫色并且也有下划线；被点击过的超链接则为紫色并且有下划线，如图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">
html> html> style> style> html> style> html>
