第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> 说明: ① 图片与文字在垂直方向居中对齐。 图31奇偶行变色 ② 这种方式下,样式会影响页面上所有class值与选择器名称相同的页面元素。所以,四句诗的边框均为蓝色点线、线宽1px,而诗名“观书有感”为红色字、无边框。 ③ class="poem"的所有<div>中,奇数位置的<div>背景色为#e0e0f3。 ④ class="poem"的所有<div>中,偶数位置的<div>背景色为#e8f1fb。即③④样式设置了四句诗的奇偶行背景颜色的交替变化,如图31所示。 结合上面三种应用方式,再拓展介绍几种选择器用法: div.poem: 选择class="poem"的所有<div>元素,例如div.poem{fontsize: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文本 通过表31来学习一些常见的文本设置。 表31文本设置 名称说明举例(作用) color颜色color:#00f;(蓝色文字) fontfamily字体fontfamily:Wingdings; (文鼎字体) fontstyle字体样式fontstyle:italic; (斜体字) fontweight字体粗细fontweight:bold; (文字加粗) fontsize字体大小fontsize:1em; (字体大小为16像素) textalign水平对齐方式textalign:center; (水平方向居中) verticalalign垂直对齐方式verticalalign:middle; (垂直方向居中) textdecoration装饰线textdecoration:underline; (文字有下画线) texttransform文本转换texttransform: uppercase; (转换为大写) letterspacing字符间距letterspacing:-5px; (字符间距5像素) wordspacing单词间距wordspacing:5px; (单词间距5像素) lineheight行间距lineheight:1.5; (增大行间距) textshadow文字阴影textshadow: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> 图32文本样式 这里仅设置“友情提示: ”为红色、粗体、阴影效果,如图32所示。 3.3.2背景 背景主要包括背景颜色、透明度、背景图片等。表32列出一些常见设置。 表32背景设置 名称说明举例(作用) backgroundcolor背景色backgroundcolor:#0f0; (绿色背景) opacity透明度opacity:0.5; (半透明) backgroundimage背景图像backgroundimage: url("image/bg.png"); (背景图像设置为 image文件夹下的bg.png) backgroundrepeat重复图像backgroundrepeat: repeatx; (水平方向拉伸图像) backgroundrepeat: repeaty; (垂直方向拉伸图像) backgroundrepeat: norepeat; (不拉伸图像) backgroundposition图像位置backgroundposition: right top; (右上角) backgroundattachment 背景图像固定方式backgroundattachment: fixed; (固定图像) backgroundattachment: scroll; (可滚动图像) backgroundsize图像大小backgroundsize:60px 35px; (图像大小60×35像素) 示例: 将上面的例子稍微修改一下,加入背景图片。 其他部分不变,只需要在<style>中加入: div{ width:272px; height:75px; background-image:url("image/bg.png"); background-size:272px 75px; } 图33背景图片 运行效果如图33所示。 3.3.3边框和边距 边框属性定义了边框的颜色、宽度、形状等,边距则定义了元素与边框的距离。表33列出了常见边框和边距属性。 表33边框和边距 名称说明举例(作用) borderstyle边框类型borderstyle: 1px dotted #00f;(蓝色点线边框,线宽1px。边框类型还可以是solid实线、dashed虚线、double双线、none无边框等) borderwidth边框宽度borderwidth: 1em 0.5em 1em 0.5em;(上右下左边框的宽度) bordercolor边框颜色bordercolor: #f00 #00f #f00 #00f;(上右下左边框的颜色) borderradius圆角边框borderradius:4px; (也可用百分数表示) margin边距margin: 5px 3px 5px 3px;(上右下左边距,可以分别用margintop、marginright、marginbottom、marginleft代替) 示例: 将上例中的<div>加上边框“上、下边框为红色点线,左右无边框”。 只需要在<style>的div选择器中加入以下代码: border:1px dotted; border-width: 1px 0px; border-color: #f00; 3.3.4定位溢出和浮动 position定位设置元素的位置或前后顺序,overflow用于设置在内容较多无法容纳时的处理方式,float则指明了页面元素如何浮动。表34列出了定位、溢出和浮动的常见用法。 表34定位、溢出和浮动 名称说明举例(作用) position定位position:relative;(相对定位,常见的还有fixed、absolute等) zindex前后顺序zindex:-1;(数值越大越靠前) overflow溢出overflow: hidden;(隐藏超出内容,还可以设置为scroll、auto等) float浮动float:left(处于左侧) 示例: 将各自包含一张图片的两个不同的层<div>,分别放置在背景层的左上角、右上角,如图34所示。 图34定位 代码如下: <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. 伪类 伪类常用于定义页面元素的特殊状态,例如鼠标悬停时改变颜色。表35列出一些常用的伪类。 表35伪类 名称说明举例(作用) :active活动的a:active(活动链接) :checked被选中的input:checked(被选中的复选框) :disabled被禁用的button:disabled(被禁用的按钮) :enabled被启用的button:enabled(被启用的按钮) :focus获得焦点的input:focus(获得焦点的输入域) :hover鼠标悬停时div:hover(鼠标悬停在层上面) :link未访问链接a:link(未访问的链接) :readonly具有只读属性input:readonly(只读的输入域) 图35复选框样式 示例: 用伪类设置六个复选框的状态。当鼠标在复选框上面悬停时,变成红色实线圆角矩形; 当勾选复选框后,变成蓝色点线圆角矩形。具体效果如图35所示。 代码如下: <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>层中临时动态添加的文字等。表36列出了伪元素。 表36伪元素 名称说明举例(作用) ::after指定元素之后span::after { content: url("image/m0.png"); } (在<span>内部内容的末尾插入一张图片) ::before指定元素之前div::before { content: "欢迎光临!";}(在<div>内容前插入文字) ::firstletter首字母p::firstletter { color: #f00;} (段的首字母红色) ::firstline首行p::first line { color: #f00;} (段的首行红色) ::selection用户选择的内容p:: selection { color: #f00;} (用户选中的内容为红色) 图36聊天框 示例: 模拟微信的聊天框,如图36所示。 代码如下: <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中的分栏效果。表37列出了常用的多列属性。 表37多列属性 名称说明举例(作用) columncount列数columncount:3; (定义为3栏) columnfill填充方式columnfill: balance|auto; (平衡或顺序自动填充) columngap列间隙columngap:10px; (列间隙为10像素) columnrule列规则columnrule: 1px solid #f00;(列之间1像素、红色实线) columnrulecolor列规则(颜色)columnrulecolor: #f00;(列颜色红色) columnrulestyle列规则(样式)columnrulestyle: solid;(列样式实线) columnrulewidth列规则(宽度)columnrulewidth: 1px;(列宽度1像素) columnspan跨越的列数columnspan:all;(跨越全部列) columnwidth列宽columnwidth:20px;(列宽20像素) 示例: 将一段出师表古文,用三栏形式展示,如图37所示。 图37文字分栏 代码如下: <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,通过它以及其他属性的组合,就可以实现动画效果。表38列出了一些常用动画属性。 表38动画属性 名称说明举例(作用) @keyframes动画帧@keyframes mymove { from {backgroundcolor: #f00;} to {backgroundcolor: #00f;} } (颜色从红色变化为蓝色,也可以使用百分比) animationdelay延迟时间animationdelay:2s(延迟2s开始) animationdirection播放方向animationdirection: normal|alternate;(正常播放或反向播放) animationduration持续时长animationduration:2s;(持续2s) animationiterationcount播放次数animationiterationcount:infinite;(重复播放) animationname动画名称animationname:mymove;(动画名称mymove) animationtimingfunction速度曲线animationtimingfunction:linear;(恒定速度。还可取值为: easein低速开始、easeout低速结束、easeinout低速开始和结束) 示例: 图片的路径动画。一张图片,放置在层<div>里面。动画轨迹: ①→②→③→④→①。在运动过程中,层<div>旋转前进,且背景颜色发生变换,如图38所示。图39为动画过程中的某一帧画面。 图38动画轨迹 图39旋转动画帧 代码如下: <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应用需求 图310功能导航条 京东购物网在购物页面的右边放置了一个功能导航条。综合前面所学知识,模拟制作一个水平放置的功能导航条,如图310所示。 具体要求: (1) 当鼠标悬停在图标按钮上面时,颜色变为红色; (2) “消息”图标按钮,右上角用红色小圆圈显示有6条新消息。这里只是模拟显示,我们将在第13章,真正实现消息推送; (3) 单击图标按钮时,弹出显示文字的对话框,例如“查询……”。当然,这个弹出对话框功能只是示例性质,暂时没有任何实际意义,但体现了基本的处理思路,以后可以慢慢完善按钮单击功能的实际处理。 3.4.2实现思路 首先定义一个层<div>,容纳整个工具栏图标按钮。其次,图标按钮使用<button>是最合适不过的了。最后,红色消息小圆圈,用层<div>表示,辅以CSS属性borderradius修饰,并定义好相对于父级<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场景任务挑战——导航菜单 图311导航菜单 制作学院导航菜单,如图311所示。“学院导航”背景为浅绿色,鼠标移动到其上时,弹出菜单项。当在菜单项中滑动鼠标时,当前菜单(例如“人工智能学院”)的背景色变为灰色。