全部章节 >>>>
本章目录
4.1 CSS 概述
4.1.1 CSS 简介
CSS 是 Cascading Style Sheet 的缩写，翻译为层叠样式表或级联样式表，简称为“样式表”。本书介绍的 CSS 版本是 CSS3。利用 CSS3 样式表定义页面样式，将会大大减少设计工作量。也可以美化页面，精确定制页面的布局。
使用 CSS3 样式表主要有以下优势：
- 丰富的修饰样式
- 内容与修饰分离，利于项目开发
- 实现样式复用，提高开发效率
- 实现页面的精确控制
4.1.2 CSS3 基本语法
一个样式（style）的基本语法由选择器、属性和属性值 3 个部分构成。层叠样式表通常用 <style> 标签来声明样式规则，即告诉浏览器如何显示页面中各类元素。
语法：
<style type="text/css">
选择器 {
属性1：属性值1;
属性2：属性值2;
……
}
</style>
示例：
CSS样式的代码有以下规范：
（1）虽然CSS代码不区分大小写，但推荐全用小写。
（2）每条样式规则用分号“；”隔开，通常写为多行，简单的规则也可以合并为一行。
（3）当CSS代码较多时，可以使用“/*……*/”添加必要的注释，增加代码的可读性。
4.1.3 样式表的分类
根据样式表的书写位置，可以将样式表分为外部样式表、内嵌样式表以及行内样式表。
一、外部样式表
1、链接外部样式：链接外部样式表是指通过HTML的link链接标签，建立样式文件和网页的关联。
语法：
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
</head>
其 中，rel=“stylesheet” 表 示 在 网 页 中 使 用 该 外 部 样 式 表，
type =“text/css” 表 示 文 本 类 型 的 样 式，href=“newstyle.css”指定样式文件，样式表文件规定后缀名为“.css”。
示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>链接外部样式表</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>通过使用 CSS 来提升工作效率！</p>
<hr>
<p>开始学习 CSS ！</p>
</body>
</html>
在上述代码中，定义了水平线的颜色为蓝色，并以虚线的方式呈现，线框宽度为2px。段落文字的颜色为红色，大小为36px，字体为宋体。其中，border属性设置边框样式，color属性设置字体的颜色，font-size属性设置字号、font-family属性设置字体。
2、导入样式表：在网页中，还可以使用@import方法导入样式表。
语法：
<head>
<style type="text/css">
@import "css/style.css";
</style>
</head>
示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>链接外部样式表</title>
<style type="text/css">
@import "css/style.css";
</style>
</head>
<body>
<p>通过使用 CSS 来提升工作效率！</p>
<hr>
<p>开始学习 CSS ！</p>
</body>
</html>
style.css
hr {
border: 2px dashed #5151A2
}
p {
color: red;
font-size: 36px;
font-family: "宋体";
}
二、内嵌样式表
内嵌样式表是将样式表的内容直接放置于 HTML5 文档的 <head> 和 </head> 区域中，通过 style 标签定义。
语法：
<head>
<style type=”text/css”>
选择符 {样式属性：属性值;......}
选择符 {样式属性：属性值;......}
......
</style>
</head>
示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌样式表</title>
<style type="text/css">
hr {border: 2px dashed #5151A2;}
p {color: red;font-size: 36px;font-family: "宋体";}
</style>
</head>
<body>
<p>通过使用 CSS 来提升工作效率！</p>
<hr>
<p>开始学习 CSS ！</p>
</body>
</html>
在实际应用中，为了充分利用CSS 3样式表的优势，建议使用“链入外部样式表”或“导入外部样式表”的方式来设置。
三、行内样式表
行内样式是混合在HTML 5标签中定义的，用这种方法可以对某个元素直接定义样式。行内样式的使用是直接在HTML 5标签中加入style属性，其内容即为CSS 3的属性和属性值。
语法：
<标签名 style=”样式属性：属性值;”>......</标签名>
- style属性引号的内容类似于样式表大括号中的内容。每个样式属性之间用分号间隔。
- 行内样式通常用于对页面中某个具体的元素进行单独的修饰。
示例：
<body>
<p style="color:red;font-size:30px;font-family:黑体;">
使用行内样式的段落！
</p>
<p>
没有使用行内样式的段落!
</p>
</body>
<body>
<p style="color:red; font-size:36px; font-family:"宋体";">通过使用 CSS 来提升工作效率！</p>
<hr style="border:2px dashed #5151A2">
<p>开始学习 CSS ！</p>
</body>
定义了内嵌样式的标签均有样式效果。由于第二个p标签没有定义内嵌样式，最后以默认样式显示。
4.2 CSS 基本选择器
在 CSS3 中，一个样式的基本语法由选择器、属性和属性值 3 个部分构成。其中，选择器是一种模式，用于选择需要添加样式的元素。根据选择器表示所修饰的内容类别，基本选择器分为标签选择器（元素选择器）、类选择器和 ID 选择器。
4.2.1 标签选择器
当需要对页面内某类标签的内容进行修饰时，采用标签选择器
语法：
<style type="text/css">
标签名 {
属性1：属性值1;
属性2：属性值2;
……
}
</style>
其中，x 代表标签名称。<x> 和 </x> 就如同一组开关：起始标签 <x> 为开启的某种功能，而结束标签 </x>为关闭功能，文字信息便放在两标签之间。
示例：
<body>
<div>
<ul>
<li>诺基亚面对的最大风险是摇摆不定的微软！</li>
<li>真正的移动支付王者竟然是星巴克？</li>
<li>马云再度减持华谊兄弟股份 套现近亿元</li>
<li>报告称苹果在美智能手机市场统治地位继续扩大</li>
<li>戴尔和甲骨文扩大合作：联手开发商用产品</li>
</ul>
</div>
</body>
css
<style type="text/css">
li {
color:blue;/*字体颜色为蓝色*/
font-size:18px;/*字体大小为18px*/
font-family:黑体;/*字体类型为黑体*/
}
</style>
4.2.2 类选择器
使用类选择选择器分以下两步：
1、定义类样式
<style type="text/css">
.类名 {
属性1：属性值1;
……
}
</style>
2、应用类样式。
在标签中使用“class”属性设置标签的类名，即<标签名 class=“类名”>标签内容</标签名>。标签中的类名定义完毕后，就会在标签内容中应用该类名所对应的样式。
<标签名 class=“类名”>标签内容</标签名>
示例：
<div>
<ul>
<li class="red">诺基亚面对的最大风险是摇摆不定的微软！</li>
<li>真正的移动支付王者竟然是星巴克？</li>
<li class="red">马云再度减持华谊兄弟股份 套现近亿元</li>
<li>报告称苹果在美智能手机市场统治地位继续扩大</li>
<li>戴尔和甲骨文扩大合作：联手开发商用产品</li>
</ul>
</div>
css
<style type="text/css">
li {
color:blue;
font-size:18px;
font-family:黑体;
}
.red {
color:red; /*字体颜色为红色*/
}
</style>
4.2.3 ID 选择器
ID属性作为HTML元素的唯一标识，要求页面内不能有重复的ID标识属性。ID选择器中的样式修饰对应ID标识的HTML元素内容，在实际应用中常与<div>标签配合使用，表示修饰对应ID标识的某个div区块。
语法：
<style type="text/css">
#ID标识名 {
属性1：属性值1;
属性2：属性值2;
……
}
</style>
示例：
<div id="news">
<ul>
<li>诺基亚面对的最大风险是摇摆不定的微软！</li>
<li>真正的移动支付王者竟然是星巴克？</li>
<li>马云再度减持华谊兄弟股份 套现近亿元</li>
<li>报告称苹果在美智能手机市场统治地位继续扩大</li>
<li>戴尔和甲骨文扩大合作：联手开发商用产品</li>
</ul>
</div>
css
<style type="text/css">
#news {
background-color:#FFFFAA; /*设置背景颜色为浅黄色*/
font-size:12px; /*字体大小为12px*/
font-family:宋体; /*字体为宋体*/
width:330px; /*内容宽度为330px*/
}
</style>
4.3 CSS 扩展选择器
4.3.1 组合选择器
组合选择器（也称为并集选择器）将同样的定义应用于多个选择符。可以将选择符以逗号分隔的方式并为一个样式组，它的选择范围是各选择器范围的并集。任何形式的选择器都可以作为并集选择器的一部分，使用选择符组时，各选择器用逗号连接。
示例：
p,.red,#header {
color:red;
font-size:12px;
}
4.3.2 包含选择器
包含选择器也称为后代选择器，它主要用于选择元素的后代元素，所谓后代元素即该标签内的元素，经常称外层的标签为父标签，内层的标签为子标签。
示例：
<div id="header">
<ul class="menu">
<li><a href="#">家用电器</a></li>
<li><a href="#">手机数码</a></li>
<li><a href="#">日用百货</a></li>
</ul>
</div>
后代选择器“#header ul li a”表示选择 id 为“header”标签下的 ul，ul 下的 li 标签，li 标签下的 a 标签。使用后代选择器比较灵活，且能较精确地选择页面元素。
4.3.3 交集选择器
交集选择器由两个选择器之间的连接构成，其结果是选中两者各自元素访问的交集。其中，第一个必须是标签选择器，第二个必须是类选择器或 id 选择器。这两个选择器之间不能有空格，必须连续书写。
示例：
p.red {
color: red;
font-size: 23px;
}
该代码中的“p.red”即为交集选择器，该选择器的范围是选中 p 标签中 class 属性值为 red 的所有元素。
4.3.4 伪类选择器
CSS样式表中还提供了一种伪类选择器，所谓伪类即根据标签处于某种行为或状态时的特征来修饰样式。伪类可以对用户与文档交互时的行为作出响应。
语法：
标签名:伪类名{
属性：属性值;
}
| 伪类 |
含义 |
应用场景 |
| a:link |
未单击访问时的超链接样式 |
常用，超链接主样式 |
| a:visited |
单击访问后的超链接样式 |
区分是否已被访问 |
| a:hover |
鼠标悬浮在超链接上的样式 |
常用，实现动态效果 |
| a:active |
鼠标单击未释放的超链接样式 |
少用，通常与 link 一致 |
示例：
<body>
<h1>This is H1</h1>
<h2>This is H2</h2>
<p class="warning">Real Warning!</p>
<span class="warning">Common Worning</span>
<p id="top">id选择符</p>
<h1><span>包含选择符</span>
<p><a href="#">这里是链接</a></p>
<p id="down">超链接标签的CSS伪类link,visited,hover,active,CSS伪类，是一种特殊的类，它针对到CSS选择器起作用，使选中的标签或元素产生特定的效果。</p>
</body>
4.4 CSS 的特性
4.4.1 CSS 继承性
CSS3 的继承性，亦称为样式表的层叠性。样式表的继承规则是，所有在元素中嵌套的元素都会继承外层指定的样式，有时会将很多层样式叠加在一起，但另行更改除外。
示例：
<body>
<p>段落文字</p>
<p id="p1">段落文字</p>
</body>
body {
font-size: 12px;
font-style: italic;
}
#p1 {
font-size: 30px;
}
解释：在该示例中，p元素包含在元素body中，因此标签p中的内容会继承body定义的属性，即示例中的段落文字同样会以斜体的12像素大小的文字显示，除非定义新的样式。
注意：但是在某些特殊的情况下，内部选择符不继承包含它的选择符的属性值。例如，CSS 3上边界属性值是不会继承的。
4.4.2 CSS3 层叠性和优先级
层叠性是指当有多个选择器都作用于同一元素时，即多个选择器中的样式发生了重叠，CSS 会对其进行处理。
CSS 的处理原则如下：
如果多个选择器定义的样式规则不发生冲突，则元素将应用所有选择器定义的样式。
如果多个选择器定义的样式规则发生了冲突，则 CSS 按照选择器的优先级来处理，元素将应用优先级高的选择器定义的样式。
CSS样式优先级从高到低为：
CSS 规定选择器总原则是：越特殊的样式，优先级越高。
示例：
<body>
<p>CSS3 层叠性和优先级</p>
</body>
body { color:red; font-size:12px; }
p { color:blue; }段落文字会继承 body 定义的 12px 大小，颜色则按照最后 p 定义的蓝色显示。不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级和 CSS 代码的定义优先级。
（1）CSS3 的选择符优先级从高到低依次为：id 选择符优先级最高，其次是类选择符，最后是元素选择符。
（2）CSS3 的定义优先级依照后定义优先的原则，依次为：优先级最高的是内嵌样式，其次是内部样式表，链入外部样式表和内部样式表之间则根据定义的先后顺序评定，即最后定义的优先级高。
示例：
<body>
<div>
<ul>
<li>手机</li>
<li class="sale">电脑</li>
<li class="blue">服装</li>
<li>食品</li>
</ul>
</div>
</body>
<style type="text/css">
div {
font-size:24px;
color:red;
}
.sale {
text-decoration:underline;
}
.blue {
color:blue;
}
</style>
4.4.3 综合案例
做一个商品图像浏览页面，该页面分为 3 个区域，分别是标题区、商品图像展示区和图像导航区。如果点击下面的导航小图像，则会在商品展示区展示该商品对应的大图像。
使用DIV+CSS实现页面布局
<div id="goods">
<h1>三星手机图片展示</h1><!--标题-->
<div id="show"> <!--大图片展示区-->
<ul>
<li></li>
......
</ul>
</div>
<div id="nav_box"><!--图片导航区-->
<ul id="nav">
<li></li>
......
</ul>
</div>
</div>
使用页面布局样式
<style type="text/css">
body, ul, li,h1{
margin:0px;padding:0px;border:0px;list-style-type:none;
}
/*标题栏样式*/
#goods h1 {
text-align:center;font-family:"微软雅黑";color:#808080;
}
/*商品展示框样式*/
#show { margin:0px auto;width:350px;height:500px;border:3px solid #ccc;
overflow:hidden;
}
/*图片导航栏*/
#nav_box {border:1px solid #808080;height:150px;}
</style>
在页面中点击导航栏中的小图像，在展示区内显示该商品的大图像。
<div id="goods">
<h1>三星手机图片展示</h1><!--标题-->
<div id="show"> <!--大图片展示区-->
<ul>
<li><a name="p1"></a><img src="images/b1.jpg" alt="手机"/></li>
......
</ul>
</div>
<div id="nav_box"><!--图片导航区-->
<ul id="nav">
<li><a href="#p1"><img src="images/b1.jpg" alt="手机"/></a></li>
......
</ul>
</div>
</div>
/*清除图片边框*/
a:hover,img { border:0px; }
/*商品展示区图片大小样式*/
#show img { width:350px;height:500px;}
/*导航*/
#nav {margin:0px auto; /*导航居中*/
height:150px; width:560px;}
#nav li{float:left; /*左浮动*/
width:100px;height:150px;
margin-right:10px; /*小图片右外边距的间隙*/
border:1px solid #ccc;}
/*导航区图片大小样式*/
#nav li img {width:100px;height:150px;}
总结：
- CSS是Cascading Style Sheet的缩写，可以翻译为“层叠样式表”或“级联样式表”，简称为“样式表”，利用CSS样式可以定义页面样式，将会大大减少设计工作量。
- CSS根据样式表的书写位置，可以将样式表分为外部样式表、内嵌样式表以及行内样式表。选择器是一种模式，用于选择需要添加样式的元素。常用的选择器有标签选择器、类选择器、ID选择器、组合选择器、包含选择器、交集选择器以及伪类选择器等。
- CSS规定选择器的优先级从高到低为：行内样式→ID样式→类样式→标签样式。其总原则是：越特殊的样式，优先级越高。
CSS的处理层叠性的原则是：
如果多个选择器定义的样式规则不发生冲突，则元素将应用所有选择器定义的样式。
如果多个选择器定义的样式规则发生了冲突，则CSS按照选择器的优先级来处理，元素将应用优先级高的选择器定义的样式。
