第3章CSS层叠样式表





美轮美奂的网页，往往容易给人留下深刻印象，CSS就是网页的装饰师。本章主要介绍CSS基本格式、应用方式、选择器、常见样式设置方法等内容。熟练掌握CSS，是Web前端开发必备的技能。
3．1CSS简介
CSS全称为Cascading Style Sheets，层叠样式表，是万维网联盟W3C制定的一种标准。CSS描述了如何在页面上显示HTML的各种元素，可以方便地控制网页的样式和布局。
CSS3是CSS的升级版本，从多个方面进行了改进和扩充。本章所介绍的内容里面，已经包含了CSS3的部分内容。
3．2CSS基础
3．2．1CSS基本格式

CSS由选择器和声明两大部分组成，以下面的CSS为例： 


<style type="text/css">

div {

color:#00f;

font-size:12px;

}

</style>



 <style>： 为页面定义CSS样式信息。

 div： 选择器。选择器的意思就是选取需要设置样式的HTML元素，这里表示该CSS是对div层进行修饰。

 {}： 大括号。定义了CSS声明块的内容。声明块包含了一条或多条用分号分隔的声明。这里包含了关于颜色、字体大小的两条声明。

 声明。声明是具体用来对网页的各种元素进行修饰的部分。每条声明由“属性名： 属性值”数据对组成，多个声明之间用冒号分隔，例如“color:#00f;”中color为属性名，#00f为属性值。
上面示例的CSS，控制页面中所有div层的文本颜色为蓝色，字体大小为12px。
CSS的颜色有下面三种表示方法。
(1) 用单词表示，例如blue表示蓝色，但单词只能表示有限数目的颜色。
(2) 采用十六进制表示，格式： #RGB。RGB分别表示红、绿、蓝三原色，取值范围都是00~FF，大小写均可，例如#0000FF(蓝色，可简写为#00F)、#F00(红色)、#7D7DFF(浅蓝色)。
(3) 用RGB函数表示，例如红色rgb(255,0,0)。
3．2．2应用方式
如果要用CSS进行修饰，一般有三种方式。
1． “标签名”作为选择器


<style type="text/css">

div {

width:125px;

border: 1px dotted #00f;

}

</style>



页面代码： 


<span>观书有感</span>

<div>半亩方塘一鉴开</div>

<div>天光云影共徘徊</div>



这种方式下，样式会影响页面上所有<div>标签，即两句诗所在层都具有同样的样式： 长度125px,边框为蓝色点线,线宽1px，但<span>不具有这种样式。
2． “#自定义名”作为选择器


<style type="text/css">

#poem1 {

width:125px;

border: 1px solid #f00;

}

#poem2 {

width:125px;

border: 1px dotted #00f;

}

</style>



页面代码： 


<span>观书有感</span>

<div id="poem1">半亩方塘一鉴开</div>

<div id="poem2">天光云影共徘徊</div>



这种方式下，样式会影响页面上所有id值与选择器名称相同的页面元素。所以，“半亩方塘一鉴开”的边框为红色实线、线宽1px，而“天光云影共徘徊”的边框为蓝色点线、线宽1px。
3． “．自定义名”作为选择器


<style type="text/css">

div {

width: 130px;

text-align: center;

padding: 1px;

background-color: #fff;

display: table-cell;

}

img{

vertical-align:middle; ①

}

#title {

color: #f00;

}

.poem { ②

border: 1px dotted #00f;

}

div.poem:nth-child(odd) { ③

background-color: #e0e0f3;

}

div.poem:nth-child(even) { ④

background-color: #e8f1fb;

}

</style>



页面代码： 


<div>

<img src="image/note.png" width="16" height="16">

<span id="title">观书有感</span>

<img src="image/note.png" width="16" height="16">

<div class="poem">半亩方塘一鉴开</div>

<div class="poem">

<span>天光云影共徘徊</span>

</div>

<div class="poem">问渠那得清如许</div>

<div class="poem">为有源头活水来</div>

</div>


说明： 
①  图片与文字在垂直方向居中对齐。


图31奇偶行变色

②  这种方式下，样式会影响页面上所有class值与选择器名称相同的页面元素。所以，四句诗的边框均为蓝色点线、线宽1px，而诗名“观书有感”为红色字、无边框。
③  class="poem"的所有<div>中，奇数位置的<div>背景色为#e0e0f3。
④  class="poem"的所有<div>中，偶数位置的<div>背景色为#e8f1fb。即③④样式设置了四句诗的奇偶行背景颜色的交替变化，如图31所示。
结合上面三种应用方式，再拓展介绍几种选择器用法： 

 div．poem： 选择class="poem"的所有<div>元素，例如div．poem{fontsize:12px;}，下面几种与此类似。

 div span： 选择<div>内部的<span>元素。

 img,span： 选择所有<img>、<span>元素。

 div［class^="poem"］： 选择class属性值以"poem"开头的<div>。

 img［src$="．png"］： 选择src属性值以"．png"结尾的<img>。

 img［src ~="on"］： 选择src属性值中包含"on"的<img>。

 img+span： 选择紧跟<img>的首个<span>。
3．3CSS样式设置
熟悉了CSS基本语法和应用方式后，就可以进一步学习CSS的各种样式设置。CSS样式设置非常丰富，下面选择一些常用样式设置进行介绍。
3．3．1文本
通过表31来学习一些常见的文本设置。


表31文本设置




名称说明举例(作用)


color颜色color:#00f;(蓝色文字)
fontfamily字体fontfamily:Wingdings; (文鼎字体)
fontstyle字体样式fontstyle:italic; (斜体字)
fontweight字体粗细fontweight:bold; (文字加粗)
fontsize字体大小fontsize:1em; (字体大小为16像素)
textalign水平对齐方式textalign:center; (水平方向居中)
verticalalign垂直对齐方式verticalalign:middle; (垂直方向居中)
textdecoration装饰线textdecoration:underline; (文字有下画线)
texttransform文本转换texttransform: uppercase; (转换为大写)
letterspacing字符间距letterspacing:-5px; (字符间距5像素)
wordspacing单词间距wordspacing:5px; (单词间距5像素)
lineheight行间距lineheight:1．5; (增大行间距)
textshadow文字阴影textshadow:1px 1px 1px #ccc; (灰色阴影)

示例： 用红色加粗字体突出显示部分文字。


<style>

p.msg span {

font-weight: bold;

color: #f00;

font-size: 1.2em;

text-shadow: 2px 2px 3px #ccc;

}

</style>

<div>

<p class="msg">

<span>友情提示： </span>

优惠活动截止到今天!

</p>

</div>




图32文本样式

这里仅设置“友情提示： ”为红色、粗体、阴影效果，如图32所示。
3．3．2背景
背景主要包括背景颜色、透明度、背景图片等。表32列出一些常见设置。


表32背景设置




名称说明举例(作用)


backgroundcolor背景色backgroundcolor:#0f0; (绿色背景)
opacity透明度opacity:0．5; (半透明)
backgroundimage背景图像backgroundimage: url("image/bg．png"); (背景图像设置为
image文件夹下的bg．png)
backgroundrepeat重复图像backgroundrepeat: repeatx; (水平方向拉伸图像)

backgroundrepeat: repeaty; (垂直方向拉伸图像)

backgroundrepeat: norepeat; (不拉伸图像)
backgroundposition图像位置backgroundposition: right top; (右上角)
backgroundattachment
背景图像固定方式backgroundattachment: fixed; (固定图像)

backgroundattachment: scroll; (可滚动图像)
backgroundsize图像大小backgroundsize:60px 35px; (图像大小60×35像素)

示例： 将上面的例子稍微修改一下，加入背景图片。
其他部分不变，只需要在<style>中加入： 


div{

width:272px;

height:75px;

background-image:url("image/bg.png");

background-size:272px 75px;

}




图33背景图片

运行效果如图33所示。
3．3．3边框和边距
边框属性定义了边框的颜色、宽度、形状等，边距则定义了元素与边框的距离。表33列出了常见边框和边距属性。


表33边框和边距




名称说明举例(作用)

borderstyle边框类型borderstyle: 1px dotted #00f;(蓝色点线边框，线宽1px。边框类型还可以是solid实线、dashed虚线、double双线、none无边框等)
borderwidth边框宽度borderwidth: 1em 0．5em 1em 0．5em;(上右下左边框的宽度)
bordercolor边框颜色bordercolor: #f00 #00f #f00 #00f;(上右下左边框的颜色)
borderradius圆角边框borderradius:4px; (也可用百分数表示)
margin边距margin: 5px 3px 5px 3px;(上右下左边距，可以分别用margintop、marginright、marginbottom、marginleft代替)

示例： 将上例中的<div>加上边框“上、下边框为红色点线，左右无边框”。
只需要在<style>的div选择器中加入以下代码： 


border:1px dotted;

border-width: 1px 0px;

border-color: #f00;



3．3．4定位溢出和浮动
position定位设置元素的位置或前后顺序，overflow用于设置在内容较多无法容纳时的处理方式，float则指明了页面元素如何浮动。表34列出了定位、溢出和浮动的常见用法。



表34定位、溢出和浮动




名称说明举例(作用)

position定位position:relative;(相对定位，常见的还有fixed、absolute等)
zindex前后顺序zindex:-1;(数值越大越靠前)
overflow溢出overflow: hidden;(隐藏超出内容，还可以设置为scroll、auto等)
float浮动float:left(处于左侧)

示例： 将各自包含一张图片的两个不同的层<div>，分别放置在背景层的左上角、右上角，如图34所示。



图34定位


代码如下： 


<style>

div {

margin: auto;①

width: 260px;

height: 75px;

background-image: url("image/bg.png");②

background-size: 260px 75px;

}

.left, .right {

position: relative;③

width: 28px;

height: 28px;

}

.left {

float: left;④

}

.right {

float: right;⑤

}

</style>

<div>

<div class="left">

<img src="image/db.png" width="28" height="28">

</div>

<div class="right">

<img src="image/statistics.png" width="28" height="28">

</div>

</div>


说明： 
①  最外层<div>自动处于屏幕中央。
②  设置背景图片为image/bg．png，请使用url()函数指明图片位置。
③  相同的样式放在一起定义，位置定义为相对于最外层<div>。
④  浮动在最外层<div>的左边。
⑤  浮动在最外层<div>的右边。
3．3．5伪类和伪元素
1． 伪类

伪类常用于定义页面元素的特殊状态，例如鼠标悬停时改变颜色。表35列出一些常用的伪类。



表35伪类




名称说明举例(作用)

:active活动的a:active(活动链接)
:checked被选中的input:checked(被选中的复选框)
:disabled被禁用的button:disabled(被禁用的按钮)
:enabled被启用的button:enabled(被启用的按钮)
:focus获得焦点的input:focus(获得焦点的输入域)
:hover鼠标悬停时div:hover(鼠标悬停在层上面)
:link未访问链接a:link(未访问的链接)
:readonly具有只读属性input:readonly(只读的输入域)



图35复选框样式

示例： 用伪类设置六个复选框的状态。当鼠标在复选框上面悬停时，变成红色实线圆角矩形； 当勾选复选框后，变成蓝色点线圆角矩形。具体效果如图35所示。
代码如下： 


<style>

input:hover + span {①

border: 1px solid #f00;

border-radius: 4px;②

color: #f00;

}

input:checked + span {③

border: 1px dotted #00f;

border-radius: 4px;

}

</style>

<div>

<input type="checkbox" name="fav" value="01"><span>足球</span>

<input type="checkbox" name="fav" value="02"><span>游泳</span>

<input type="checkbox" name="fav" value="03"><span>绘画</span>

<input type="checkbox" name="fav" value="04"><span>舞蹈</span>

<input type="checkbox" name="fav" value="05"><span>阅读</span>

<input type="checkbox" name="fav" value="06"><span>拳击</span>

</div>


说明： 
①  鼠标悬停在复选框上时，改变<span>文字状态。
②  设置为圆角矩形边框。
③  复选框被选中后，改变<span>文字状态。
2． 伪元素
伪元素用于设置页面元素指定部分的样式，例如设置一段文字的首行为红色字体，或者设置<div>层中临时动态添加的文字等。表36列出了伪元素。



表36伪元素




名称说明举例(作用)

::after指定元素之后span::after {

content: url("image/m0．png");

}

(在<span>内部内容的末尾插入一张图片)
::before指定元素之前div::before { content: "欢迎光临！";}(在<div>内容前插入文字)
::firstletter首字母p::firstletter { color: #f00;} (段的首字母红色)
::firstline首行p::first line { color: #f00;} (段的首行红色)
::selection用户选择的内容p:: selection { color: #f00;} (用户选中的内容为红色)



图36聊天框

示例： 模拟微信的聊天框，如图36所示。

代码如下： 


<style>

.chat_msg {①

position: relative;

width: 150px;

height: 22px;

font-size: 0.6em;

background: #9EEA6A;

border-radius: 4px;

padding: 2px;

}

.chat_msg::after {②

position: absolute;

content: "";③

top: 100%;

left: 99%;

margin-top: -18px;

border: 6px solid;

border-color: transparent transparent transparent #9EEA6A;④

}

</style>

<div class="chat_msg">今天大家讨论得很热烈啊!</div>


说明： 
①  设置绿色背景聊天框的样式。
②  定义一个伪元素——一个小方块，修饰<div>层。
③  伪元素的内容为空字符。
④  伪元素边框——左边框为绿色实线，其他边透明。
3．3．6多列
多列允许将文字拆分成几栏，类似于Word中的分栏效果。表37列出了常用的多列属性。



表37多列属性




名称说明举例(作用)

columncount列数columncount:3; (定义为3栏)
columnfill填充方式columnfill: balance|auto; (平衡或顺序自动填充)
columngap列间隙columngap:10px; (列间隙为10像素)
columnrule列规则columnrule: 1px solid #f00;(列之间1像素、红色实线)
columnrulecolor列规则(颜色)columnrulecolor: #f00;(列颜色红色)
columnrulestyle列规则(样式)columnrulestyle: solid;(列样式实线)
columnrulewidth列规则(宽度)columnrulewidth: 1px;(列宽度1像素)
columnspan跨越的列数columnspan:all;(跨越全部列)
columnwidth列宽columnwidth:20px;(列宽20像素)

示例： 将一段出师表古文，用三栏形式展示，如图37所示。



图37文字分栏


代码如下： 


<style>

.csb {

margin: auto;

width: 380px;

font-size: 0.6em;

column-count: 3;

column-gap: 10px;

column-rule: 1px solid #ccc;

border-radius: 4px;

background-color: #e6f3fc;

padding: 2px;

box-shadow: 2px 2px 2px #ccc;

}

h2 {

column-span: all;

}

</style>

<div class="csb">

<h2> 出 师 表——诸葛亮(三国)</h2>

臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。

</div>



3．3．7动画
通过从一种样式变为另一种样式，CSS也可实现一些基本动画。我们知道，动画是通过一些关键帧的连续播放来呈现的。CSS提供了一个重要的属性@keyframes，通过它以及其他属性的组合，就可以实现动画效果。表38列出了一些常用动画属性。



表38动画属性




名称说明举例(作用)

@keyframes动画帧@keyframes mymove {

from {backgroundcolor: #f00;}

to {backgroundcolor: #00f;}

}

(颜色从红色变化为蓝色，也可以使用百分比)
animationdelay延迟时间animationdelay:2s(延迟2s开始)
animationdirection播放方向animationdirection: normal|alternate;(正常播放或反向播放)
animationduration持续时长animationduration:2s;(持续2s)
animationiterationcount播放次数animationiterationcount:infinite;(重复播放)
animationname动画名称animationname:mymove;(动画名称mymove)
animationtimingfunction速度曲线animationtimingfunction:linear;(恒定速度。还可取值为： easein低速开始、easeout低速结束、easeinout低速开始和结束)

示例： 图片的路径动画。一张图片，放置在层<div>里面。动画轨迹： ①→②→③→④→①。在运动过程中，层<div>旋转前进，且背景颜色发生变换，如图38所示。图39为动画过程中的某一帧画面。



图38动画轨迹




图39旋转动画帧


代码如下： 


<style>

.move {

width: 100px;

height: 110px;

background: #f00;

position: relative;

animation-duration:5s; /*5s完成一轮动画*/

animation-name:moveimg; /*动画名称*/




animation-iteration-count: infinite; /*循环播放*/

}

@keyframes moveimg {/*定义5个关键帧*/

0% {

transform: rotate(0deg); /*转换： 旋转0°*/

background: #f00;

left: 0px;

top: 0px;

}

25% {

transform: rotate(90deg); /*转换： 旋转90°*/

background: #d5d502;

left: 300px;

top: 300px;

}

50% {

transform: rotate(180deg); /*转换： 旋转180°*/

background: #00f;

left: 0px;

top: 300px;

}

75% {

transform: rotate(270deg); /*转换： 旋转270°*/

background: #0f0;

left: 300px;

top: 0px;

}

100% {

transform: rotate(360deg); /*还原到起点角度*/

background: #f00;

left: 0px;

top: 0px;

}

}

</style>

<div class="move"><img src="image/m1.gif"></div>




视频讲解


3．4场景应用示例——功能导航条
3．4．1应用需求



图310功能导航条

京东购物网在购物页面的右边放置了一个功能导航条。综合前面所学知识，模拟制作一个水平放置的功能导航条，如图310所示。
具体要求： 
(1) 当鼠标悬停在图标按钮上面时，颜色变为红色； 
(2) “消息”图标按钮，右上角用红色小圆圈显示有6条新消息。这里只是模拟显示，我们将在第13章，真正实现消息推送； 
(3) 单击图标按钮时，弹出显示文字的对话框，例如“查询……”。当然，这个弹出对话框功能只是示例性质，暂时没有任何实际意义，但体现了基本的处理思路，以后可以慢慢完善按钮单击功能的实际处理。
3．4．2实现思路
首先定义一个层<div>，容纳整个工具栏图标按钮。其次，图标按钮使用<button>是最合适不过的了。最后，红色消息小圆圈，用层<div>表示，辅以CSS属性borderradius修饰，并定义好相对于父级<button>的位置即可。
3．4．3CSS代码
代码如下： 


<style>

.navi {/*定义最外围层的样式*/

margin: auto;

width: 335px;

height: 50px;

font-size: 0.6em;

text-align: center;

column-count: 6;

column-gap: 1px;

column-rule-style: solid;

column-rule-color: #fff;

}

button {/*图标按钮的样式*/

border: 0px;

width: 55px;

height: 50px;

border-radius: 4px;

background-color: #bfbbbb;

}

button:hover {/*鼠标悬停在按钮上背景色变为红色*/

background-color: #de2525;

}

.msg {/*定义右上角的消息提示*/

position: relative;

left: -4.8em;

top: 6px;

border-radius: 50%;

text-align: center;




display: inline-block;

color: #fff;

background-color: #f15555;

width: 1.7em;

height: 1.6em;

line-height: 1.6em;

font-size: 0.6em;

}

</style>

<div class="navi">

<button onclick="alert('新增......')">

<img src="image/new.png" width="22" height="22"><br/>新增

</button>

<button onclick="alert('删除......')">

<img src="image/delete.png" width="22" height="22"><br/>删除

</button>

<button onclick="alert('查询......')">

<img src="image/search.png" width="22" height="22"><br/>查询

</button>

<button onclick="alert('畅聊......')">

<img src="image/chat.png" width="22" height="22"><br/>畅聊

</button>

<button onclick="alert('报表......')">

<img src="image/statistics.png" width="22" height="22"><br/>报表

</button>

<button onclick="alert('消息......')">

<img src="image/info.png" width="22" height="22"><br/>消息

<div class="msg">6</div>

</button>

</div>



上述代码只是在每个部分的第1句加了注释，希望读者认真对照以前所学知识，逐句研读，完全理解每句代码的含义！
3．5场景任务挑战——导航菜单


图311导航菜单

制作学院导航菜单，如图311所示。“学院导航”背景为浅绿色，鼠标移动到其上时，弹出菜单项。当在菜单项中滑动鼠标时，当前菜单(例如“人工智能学院”)的背景色变为灰色。