第 3 章 CSS 基 础 使用HTML可完成网页内容的定义,并通过HTML标签的嵌套表达出页面 元素的层次结构。但正如第2章示例中所看到的那样,只使用HTML完成的网 页外观实在过于简陋,缺乏对元素大小、位置、间距、配色等外观特征的定义能力。 虽然在早期的HTML版本中存在一些表达外观的元素或属性,但功能有限,更重 要的是违背了内容与表现分离的设计理念,CSS(CascadingStyleSheets,层叠样 式表,简称“样式表”)正为解决这一问题而生。 1996年12月,CSS1面市并成为W3C推荐标准,1998年,W3C 发布CSS2。 自1999年起,W3C便着手制定CSS3标准,直至2011年6月CSS3正式成为W3C 推荐标准。虽然W3C于2011年9月开始着手设计CSS4,但目前只有极少数特性 被部分浏览器支持,因此CSS3是目前事实上的行业标准,本章内容将基于CSS3 展开。 .. 3.1 CSS基本语法 下述代码中

元素的style属性即为样式表,它提示浏览器将

元 素中的文字渲染为红色、斜体。 code-3.1.html code-3.1

Hello World

如下所示,样式表由样式声明(declaration)构成,每个声明包含属性和属性 值,中间使用冒号分隔,属性名一般使用kebab-case风格,即单词之间使用“-”连 接。样式表中可有多个声明,以分号分隔。每个样式声明表达了元素的一个样式 特征。 视频讲解 22 Web应用开发技术(微课版) 如code-3.1.html直接将样式表放在元素style属性中的写法称作内联样式表。这种做 法不便于代码的复用,例如,页面中有多个元素需要应用相同样式时,相同的样式代码就需 要编写多次。 更好的做法是将样式表集中编写,以便复用,有如下两种方式。 (1)将样式表集中置于文档的标签内,称作内嵌样式表。 (2)直接将样式表分离为一个独立文件,称作外部样式表。 内联样式表仅作用于其所在的元素,内嵌样式表可供同一页面内多个元素复用,而外部 样式表则可被网站内多个页面所复用。相对而言,从代码的书写风格上看,内嵌样式表或外 部样式表更利于内容与表现的分离(HTML与CSS代码分离)。 .. 3.2 引入外部样式表 假设有外部样式表文件style.css,则可使用link和@import两种方式将其引入当前 HTML文档,参见下例。 code-3.2.html code-3.2 一般使用link方式引入外部样式表即可,其中,rel属性提示浏览器引入的资源为样式 表,href属性值为外部样式表文件的URL,一般使用相对路径表达。 .. 3.3 CSS选择器 无论使用内嵌样式表或是外部样式表,都面临如何表达样式对哪个/哪些元素生效的问 题。CSS选择器(CSSSelector)即为解决这一问题而生。 先看一个例子,在同一文件夹下创建两个文件code-3.3.html和code-3.3.css。 code-3.3.html code-3.3 视频讲解 第3章 CSS基础 23

Red Title

This is blue text.

code-3.3.css h1 { color: red; } /*h1 标签内文字为红色*/ p { color: blue; } /*p 标签内文字为蓝色*/ 在浏览器中打开code-3.3.html应可看到一个红色的标题和一段蓝色的文字。 CSS文件{…}中的内容为样式规则,语法如3.1节所述。置于{…}前的h1、p即为CSS 选择器,它们分别选中页面中所有的

和

元素。/*…*/为注释。 简单地说,在内嵌/外部样式表中,首先通过CSS选择器选中要修饰的元素,然后将 {…}内的样式规则应用到选中的元素上。 3.3.1 CSS基本选择器 CSS3中基本选择器共6类,表3.1中简要举例说明,读者可快速浏览,建立感性认识后 再详细介绍每个选择器的具体用法。 表3.1 基本选择器举例 名 称举 例说 明 通用选择器* 选择页面内所有元素 类型选择器p 选择页面内所有

元素 id选择器#avatar 选择id值为avater的元素,例如, 类选择器.icon 选择所有class属性含icon类的元素,例如, 伪类选择器p:hover 指定鼠标位于

元素上方时该元素的样式,伪类选择器不可单独使用 属性选择器[alt] 选择所有含alt属性的元素,例如, 1.通用选择器 通用选择器(universalselector)较简单,一个星号(*)即可,但它却能选中页面内所有 元素。例如,* {color:red}可将页面内所有元素的文字颜色设置为红色。 2.类型选择器 类型选择器(typeselector)将选中页面内所有元素名(标签名)与选择器名称匹配的元 素,有时通俗地称作“元素选择器”或“标签名选择器”。 code-3.4.html code-3.4 24 Web应用开发技术(微课版)

标题呈现为默认的黑色

这段文字呈现为红色

这段文字呈现为红色

3.id选择器 id选择器(idselector)形如#idname,其中,idname为自定义值,它将选中页面中id属 性值匹配的元素。 code-3.5.html code-3.5

这段文字呈现为红色

这段文字呈现为默认的黑色

id属性值是元素的唯一标识,编写代码时应保证元素id值的唯一性。所以理论上说, id选择器只能选中唯一的一个元素。 4.类选择器 类选择器(classselector)形如.classname,其中,classname为自定义值,它将选中页面 中class属性值含有classname的元素。 code-3.6.html code-3.6

这段文字呈现为红色

这段文字呈现为红色, 斜体

这段文字呈现为默认的黑色

第3章 CSS基础 25 可以给一个元素同时指定多个“类”,各个类名之间使用空格分隔,如上例中的第2个段 落。这里所说的“类”更多地表示“分类”的意思,并非面向对象程序设计语言中的“类”。 5.伪类选择器 伪类选择器(pseudo-classselector)形如:pseudo-class,其中,pseudo-class通常表达元 素的特定状态。伪类选择器不可单独使用,必须与其他选择器结合,先由其他选择器选中元 素,再使用伪类选择器表达该元素的特定状态。 code-3.7.html code-3.7

paragraph 1

paragraph 2

paragraph 3

读者不妨实际验证一下上述代码,当鼠标移动到段落上方时,段落文字将切换为红色。 表3.2列出了部分常用的CSS伪类。 表3.2 部分常用CSS伪类 伪 类描 述 :hover 鼠标移动到元素上方时的状态 :active 元素被用户激活时的状态,例如,使用鼠标按住元素时 :focus 元素获得焦点时的状态,例如,文本输入控件获得焦点时 :link 针对超链接元素,:link为超链接未被访问过时的默认状态 :visited 针对超链接元素,:visited为超链接被访问过的状态 :first-child 选中兄弟元素①中的第一个。例如,p:first-child可选中code-3.7.html中的第1个段落 :last-child 选中兄弟元素中的最后一个。例如,p:last-child可选中code-3.7.html中的第3个段落 :nth-child() 指定一个参数以描述元素在兄弟元素集合中的位置特征。例如, p:nth-child(2) 选中code-3.7.html中第2个段落 p:nth-child(odd) 选中code-3.7.html中第1、3个段落(奇数),等价于p:nth-child(2n+1) p:nth-child(even) 选中code-3.7.html中第2个段落(偶数),等价于tr:nth-child(2n) p:nth-child(2n+1) 选中code-3.7.html中第1、3个段落 :not() 对其他伪类取反。例如,p:not(:first-child)将选中code-3.7.html中除第1个段落外的 其余段落 ① 拥有共同父元素的子元素之间互为兄弟元素。 26 Web应用开发技术(微课版) 此外,对于表单元素,以下伪类也非常有用::enabled、:disabled、:read-only、:blank、: checked、:valid、:invalid、:required。 例如,可借助:checked伪类指定复选框/单选按钮被选中时的样式。 利用好伪类选择器可令用户交互更加生动。 6.属性选择器 属性选择器(attributeselector)形如[attr-desc],其中,attr-desc是属性特征的描述。 以下示例中演示了部分属性选择器的使用方法。 code-3.8.html code-3.8 Top Section code example.com example.org 前面提到,可以自定义HTML标签和属性,这些自定义的内容对于CSS选择器仍然有 效。例如: code-3.9.html code-3.9 My Tag

Paragraph

第3章 CSS基础 27 3.3.2 CSS基本选择器的组合 3.3.1节介绍的6类CSS选择器可以不同的方式组合在一起,以表达更丰富的含义,如 表3.3所示。 表3.3 CSS选择器的组合方式 组合方式含 义举 例 直接连接并且p.red 选择应用了.red样式类的

元素 逗号连接和h1,p 选择

元素和

元素 空格连接后代divspan 选择

元素后代中的元素 > 连接直接子代div>span 选择
元素直接子代中的元素 + 连接相邻兄弟p+span 选择在

元素后且与

元素是兄弟关系的(紧邻) ~ 连接一般兄弟p~span 选择在

元素后且与

元素是兄弟关系的(无须紧邻) 直接连接和逗号连接较容易理解,不做举例,以下对其余4种组合方式举例说明。 code-3.10.html代码中在不同位置放置了元素,若表3.4中选择器对相应位置的 元素有效则标注“..”,请结合代码,仔细对比。 表3.4 选择器组合方式举例 divspan div>span p + span p ~ span AB .. .. C .. D .. .. .. .. E .. .. .. code-3.10.html code-3.10 A

B

C

D E
28 Web应用开发技术(微课版) .. 3.4 样式声明优先级 当多个样式声明都作用于元素的某个样式属性时,哪一个声明会生效呢? 这就是本节 要讨论的样式声明优先级。请考虑如下情形。 code-3.11.html code-3.11

段落A

上例中对于段落A,同时有三个修饰文字颜色的样式声明,那么它到底呈现什么颜色 呢? 运行代码即可看到,段落A 的文字为蓝色。在Chrome的开发者工具中,Elements标 签页下还可看到如图3.1所示的信息。 图3.1 在Chrome开发者工具中观察样式声明优先级 从图3.1中可看到,三个关于文字颜色的样式声明均被浏览器解读了,只是内嵌样式表 和外部样式表中的样式声明被覆盖了(带删除线),而最终生效的是内联样式表(element. style)中的声明(蓝色)。 除上述情形外,还有其他几种样式声明“冲突”的情况。以下是一般的优先级计算规则。 . 样式表类型:内联样式表优先级最高,内嵌/外部样式表书写位置靠后优先级更高。 . 选择器类型:id选择器>伪类选择器>属性选择器>类选择器>类型选择器。 . 例外规则:若在样式声明中添加!important则拥有最高优先级。 如果不是非常纠结于细节,那么可以简单理解为:CSS选择器描述得越具体,优先级越 高,越靠后的描述优先级越高。这其实也更符合人们的常规认知。 所以,当因为样式声明优先级问题导致代码并不如你想象那般运行时,不妨使用更多的 限定以提高优先级。例如:ullia{…}和p.c1{…}的写法多数情况下会优于lia{…}和 .c1{…},也更符合程序设计中所谓作用域局部化的原则。 第3章CSS基础29 视频讲解 ..3.5常用CSS属性 前文虽然讨论了那么多问题,但是我们一直在使用元素的颜色举例,没有涉及更多的样 式属性,主要是不想把繁杂的问题都混在一起讨论,增加学习难度。本节将讨论丰富的样式 属性,相信读者完成本节学习后定能把网页做得多姿多彩。 为节省篇幅,从本节起文中的代码仅保留核心部分,若要上机实践,请自行补足省略的 部分。 3.5.1颜色、方位与长度单位 样式属性中常涉及颜色、方位和长度的表达,为避免破坏后续章节内容的连贯性,一并 在这里介绍。初学者可粗略浏览或跳过本节,待有需要时再回来研读,这样带着需求来学习 效果会更好。 1.颜色 CSS中可以使用多种方式描述颜色,下面介绍常用的两种方式。 (1)命名色:CSS标准中大约为一百多种颜色取了名字,这些颜色即称作命名色,如前 文中多次使用到的red、blue。 (2)RGB色:使用红(R)绿(G)蓝(B)三个颜色分量组合出想要的颜色,表3.5列出了 RGB色的表达语法。 表3. 5 RGB色的表达语法 语法描述 #RRGGBB[AA] 其中,RR/GG/BB/AA为十六进制值(00~FF),分别表示红、绿、蓝和透明度, 透明度分量省略则表示为不透明。例如: #FF0000(红色)、#FFFFFF(白色)、#FFFF00(黄色)、#FF000088(半透明红) #RGB[A] #RRGGBB[AA]的缩写形式,将每一位重复两次。例如: #F00= #FF0000,#369= #336699 rgb[a](R,G,B[,A]) 函数形式表达,其中,R/G/B为0~255的十进制整数,A为0~1的小数。 例如:红色rgb(255,0,0),半透明红色rgba(255,255,0,0.5) 除上述两种表示颜色的方法外,CSS还支持HSL和HWB颜色表示法。 .HSL色:使用色调、饱和度、亮度定义颜色,更容易表达相近的几个颜色。 .HWB色:使用色调、白度、黑度定义颜色。 2.方位的表达 样式表中表达方位时所使用的值比较统 一,此处一并介绍,2所示。 如图3. 上、下、左、右分别为top、botom 、left、 right,水平方向居中为center,而垂直方向居中 则为middle。若需要同时指定多个方位,先描 述垂直方向再描述水平方向,例如,topleft(左图3. 2 CSS中方位的表达 上),botomright(右下)。 30 Web应用开发技术(微课版) 当方向多于4个时,通常使用地图方位词,如n、e、s、w、ne、se、nw、sw 分别表示上、右、 下、左、右上、右下、左上、左下。 有时为贴近用户习惯,使用start、end表示文本的开始方向和结束方向。例如,中文环 境用户自左向右书写,则水平方向start、end默认分别对应left、right。HTML元素的全局 属性dir的取值决定了文本方向,默认值为auto(由浏览器确定),可能的取值还有ltr(left toright,自左向右)和rtl(righttoleft,自右向左,如阿拉伯语)。 3.长度单位 在描述文字大小、元素尺寸等特征时常涉及长度的表示。CSS3中支持多种长度单位, 表3.6列出了较常用的长度单位。 表3.6 CSS中的常用长度单位 单 位描 述 px 像素,非公制单位,1px等于多少厘米与显示设备的屏幕密度和分辨率设置有关(参见4.11 节) em 当描述元素的文字大小(font-size)时,em 是相对于父元素字体大小的倍数,而用于其他样式 属性时则是相对于元素自身字体大小的倍数。 不同元素或处于不同容器内的元素,1em 的实际长度可能不一致 rem 相对于网页基准字体大小的倍数。 假设网页基准字体大小为16px,则无论应用于哪个元素,1rem 均为16px。 网页基准字体大小可由用户在浏览器选项中设置 % 通常根据父容器尺寸来确定,如40% vw 浏览器视窗①宽度的1%。 若视窗宽度为1200px,则1vw=12px,50vw即为视窗宽度的一半 vh 浏览器视窗高度的1%。 若视窗高度为800px,则1vh=8px,50vh即为视窗高度的一半 vmin vw和vh中的较小值。 若视窗大小为1200×800px,则1vmin=8px vmax vw和vh中的较大值。 若视窗大小为1200×800px,则1vmax=12px 以下示例演示了表3.6中长度单位的使用方法,运行效果如图3.3所示。 code-3.12.html
16px 1rem 1em

16px ① 浏览器视窗即呈现网页内容的区域。 第3章 CSS基础 31 1rem 1em

16px 1rem 1em
从图3.3中可以观察到: (1)黑色方框的宽、高分别为50vw、50vh,它的大小刚好是视窗的一半,灰色方块的宽、 高分别为父容器的60%和40%。 (2)无论在什么元素内,16px的字都一样大,而1rem 的字与16px的字一样大(浏览器 设置的基准字号为16px)。 (3)在不同元素内(

、

),1em 的文字大小并不相同,它们都是父元素字号 的1倍大小,但

元素的默认字号更大。 3.5.2 盒模型 盒模型(boxmodel)是CSS中最重要的概念之一,浏览器渲染引擎在进行元素布局时 会将元素理解为一个矩形盒子,如图3.4所示。 图3.3 code-3.12.html运行效果 图3.4 盒模型 从内至外由4个区域组成:内容区(content)、内边距(padding)、边框(border)、外边距 (margin),它们共同决定了元素的大小和相对位置。 以如图3.4所示盒模型为例,元素内容区的尺寸为100×100px,内边距是内容区与元 素边框之间的留白(空隙),图中四个方向的内边距均为10px;内边距之外即为元素的边框, 图中四个方向的边框宽度均为2px;边框之外的留白(空隙)即为外边距,它表达了当前元素 和相邻元素之间的间距,图中四个方向的外边距均为15px。 1.元素宽度与高度 对于块级元素,如

、

等可以使用width、height属性设置其宽度与高度,或 使用min-width、max-width、min-height、max-height指定宽度与高度的最小、最大值。对于 32 Web应用开发技术(微课版) 行内元素,如、等,声明宽度与高度无效,它们的宽度和高度由元素的内容撑 起来。关于块级元素与行内元素的区别参见3.5.5节。 图3.5 code-3.13.html运行效果 默认情况下,宽度与高度的声明指的是内容区的宽度与 高度,但当声明box-sizing:border-box时,宽度与高度的声 明将应用到border-box,即包含content、padding和border。 请参看code-3.13.html代码,两个
元素除box-sizing 属性取值不同外,其余样式都相同,导致最终显示大小不同, 如图3.5所示。 code-3.13.html
200px * 50px
180px * 30px
2.边框 任何一个可视的元素均可分别设置上、下、左、右(top/bottom/left/right)四个方向的 边框(border),而每个方向的边框又可分别设置其宽度、样式和颜色(width/style/color)。 因此元素的边框有12个配置项,例如,border-left-width、border-left-style、border-left-color 等。其中,颜色和宽度的表达方式参见3.5.1节,边框样式常用取值包括solid(实线)、dotted (由点构成的虚线)、dashed(由短线构成的虚线)等。需要注意的是,必须同时指定宽度、样 式和颜色,元素的边框才会显示出来。 实践中常使用缩写形式,例如,border:1pxsolidred;表示元素四周均有1px宽的实线 红色边框。 当然,也可以使用另外的缩写形式border-width、border-style、border-color分别表达四个 方向边框的宽度、样式和颜色。此时,可为以上样式属性指定1~4个属性值,参见表3.7。 表3.7 边框样式值的缩写形式 属性值个数含 义举 例 1个值四个方向均相同 四个方向边框宽度均为1px: border-width:1px; 2个值 上下边框取第1个值 左右边框取第2个值 上下边框红色,左右边框蓝色: border-color:redblue; 3个值 上边框取第1个值 左右边框取第2个值 下边框取第3个值 上边框红色,左右边框绿色,下边框蓝色: border-color:redgreenblue 4个值按照上右下左顺序分别取值 上、右、下、左边框宽度分别为1px2px3px4px: border-width:1px2px3px4px 表3.7的内容较难清晰记忆,但若注意方位顺序为上、右、下、左,即从上开始,顺时针绕 第3章 CSS基础 33 一圈,同时兼顾对称原则,会相对容易记住。例如,当指定3个值时,按顺时针方向,将值分 别赋给上、右、下三边,最后剩余左边框按对称原则取右边框值即可。请参见code-3.14. html,运行效果如图3.6所示。 code-3.14.html Text Text Text 图3.6 code-3.14.html运行效果 从图3.6中可看到,为文本元素添加下边框可产生类似下画线的效果,而且比3.5.4节 介绍的text-decoration:underline更美观(特别对中文而言),控制也更灵活,即可调整宽 度、颜色和线条样式,还可通过内边距调整下边框与文字之间的间距。因此,在实践中需要 为文字添加下画线效果时,常使用下边框。 3.内边距 内边距(padding)即元素内容区与边框之间的留白(间隙),仅涉及内边距的宽度设置。 可以分别指定上、下、左、右4个方向的内边距宽度,例如,padding-left:10px设置左内边距 为10px,方位的表达请参见3.5.1节;也可使用缩写形式,指定1~4个值,例如,padding: 10px设置元素四周的padding均为10px,请参见表3.7。 仔细研读code-3.15.html代码,其运行效果如图3.7所示。 code-3.15.html
Inline1 Inline2 Inline3 Inline4

Block1

Block2

Block3

Block4

图3.7中实线框为子元素和

的边框,虚线框为容器

的边框, 为行内元素,

为块级元素(参见3.5.5节)。从图3.7中可观察到如下现象。 (1)对于行内元素,其内容区始终处于“行内”,而其padding-top和padding-bottom 将 以元素内容区边界为起点向上下延伸,垂直方向上其他元素的布局以“行”的垂直边界为参 考。因此,可能出现元素上下边框被其他元素遮挡或叠到其他元素之上的情况(请为任意 元素添加样式line-height:5em,再次观察运行效果)。 (2)对于块级元素,周围元素的布局将以元素盒模型(box)的边界为参考。 (3)块级元素内容区与右边框的间距并非完全是元素的padding,图中4个块中的文字 34 Web应用开发技术(微课版) 图3.7 code-3.15.html运行效果 右侧有大量留白,这是由于块级元素宽度自动延展引起的,而非padding。 (4)实践中若文字元素有视觉上的边界效果(如有边框或不同的背景色等),则常令水 平方向的padding稍大于垂直方向padding,这样会更美观。请对比Inline1和Inline2的 padding值和显示效果。 4.外边距 外边距(margin)即元素边框之外的留白(间隙),它将影响到元素与相邻元素之间的间 距,也间接地影响了元素的位置。 与内边距类似,可以分别指定上、下、左、右4个方向的外边距宽度,例如,margin-top: 10px设置上外边距为10px,方位的表达请参见3.5.1节;也可使用缩写形式,指定1~4个 值,例如,margin:10px20px分别设置元素上下外边距为10px,左右外边距为20px,请参见 表3.7。 code-3.16.html是外边距效果的演示代码,运行效果如图3.8所示。 code-3.16.html

Inline1 Inline2

Block1

Block2

图3.8 code-3.16.html运行效果 图3.8中实线框为子元素和

的边框,虚线框为容器

的边框, 为行内元素,

为块级元素。从图3.8中可观察到如下现象。 (1)行内元素的margin-top与margin-bottom 设置无效。 (2)在一些特殊的情况下,外边距会折叠,也称外边距融合。例如,当元素垂直放置时 (如图中Block1和Block2),上下两个元素边框的垂直间距并非上面元素的margin-bottom 第3章 CSS基础 35 和下面元素的margin-top之和,而是取较大值。图中Block1与Block2的边框垂直间距为 20px,而非30px。 margin属性一个较特别的用法是当块级元素的宽度确定时,设置该元素左右两边的 margin值为auto,可令该元素在父容器内水平居中,例如,

。 3.5.3 元素背景 HTML元素的常用背景样式如表3.8所示。 表3.8 常用背景样式 样式属性描 述 background-color 为元素指定背景色,请参见3.5.1节关于颜色的表示方法 background-image 通过url()函数指定元素背景图,或使用渐变函数产生渐变背景图。可指定 多张背景图,此时它们会叠放在一起 background-repeat 背景图的尺寸小于元素尺寸时,背景图默认会沿水平方向和垂直方向重复, 以铺满整个空间,可通过此属性设置背景图的重复方式。 该属性取值可以是repeat、no-repeat、repeat-x、repeat-y、round、space。 可以给定一个值同时设置水平和垂直方向的重复方式,也可以给定两个值 分别设置。例如,repeat等价于repeatrepeat,而repeat-x是repeatno-repeat 的缩写,repeat-y同理 background-position 设置背景图的定位方式及偏移,参看下文例子 background-attachment 若元素滚动时,此属性决定背景图如何固定。scroll:相对于元素本身固定; fixed:相对于窗口固定;local:相对于内容固定 以下是上述背景样式属性的举例。 background-color: #EEE; background-image: url("bg.png"); background-image: url("bg1.png"), url("bg2.png"); /*bg1.png 叠在bg2.png 上*/ background-image: linear-gradient(45deg, red, blue); /*45°由红渐变至蓝*/ background-repeat: none; /* 背景图不重复*/ background-attachment: fixed; /* 背景图固定不滚动*/ /*背景图定位, 默认对齐元素左上角*/ background-position: center; /*背景图在元素内居中*/ background-position: top right; / * 背 景 图 靠 右上对齐*/ background-position: 10px 20px; /*背景图相对元素左上角右偏10px,下偏20px*/ background-position: bottom 10px right 20px; /*背景图相对元素右下角上偏10px,左偏20px*/ /*缩写语法*/ background: green url('bg.png') no-repeat; 注意如下细节。 . 背景色始终位于元素最底层,当指定多张背景图时,按书写顺序叠放。 . 背景图位置偏移值可为负数。 . 背景图和背景色覆盖元素边框内所有范围(含padding区域)。 36 Web应用开发技术(微课版) 背景图位置控制较灵活,且它总依附在元素底层,因此有时候需要在页面中显示图像时 不一定必须使用元素,用背景图可能会更方便。 3.5.4 文字样式 与文字相关的样式属性可粗略地分为字体修饰和文本修饰。通俗地说,字体修饰 (font-*)与文字本身相关,而文本修饰(text-*)与文字周边相关,参见图3.9。以下分别详 述每个文字样式属性的用途。 图3.9 文字样式 1.font-size 设置元素内文字的大小,如font-size:14px;font-size:.8em;,可参见3.5.1节关于长度 的表达方式。 多数浏览器的默认标准字号为16px,对于中文网页而言,16px的字稍显大,不太美观, 对于一般段落内的文字可适当设置小些,如12~14px或0.8~0.9rem。 当然,文字的大小最好使用em/rem 作为单位,这样在不同设备上或针对不同用户的系 统配置,文字大小会更合适,用户体验更好。其他元素的大小/位置若要相对于邻近文字调 整,也建议使用em/rem 作为单位。 2.font-weight 设置元素内文字的粗细,可使用100~900的整百数值描述,数值越小则越细,默认值 为400(normal)。也可指定为bold(粗体,等价于700),若取值bolder或lighter则可做相对 调整。例 如: font-weight: bold;(粗体) font-weight: 200;(细体) 3.font-family 可通过font-family为元素中的文字指定一个或一组字体,例如: font-family: Arial; font-family: "Times new Roman", monospace, serif; 若指定多个字体,浏览器将按顺序尝试使用指定的字体显示文字,如果用户设备上未安 第3章 CSS基础 37 装指定的某种字体,则尝试使用后一种字体。 遗憾的是,多数用户设备上安装的中文字体较少,一般仅有系统预装的几种字体,并且 不同操作系统预装的字体可能不一样。因此,如果设计中文网页,一般很少设置字体,因为 用户可能看不到预想的效果。 当然,也可以通过样式表配置从服务器端下载指定字体,此内容将在第4章讨论。 4.font-style 字体风格,常用取值包括normal(正体)和italic(斜体)。 5.color 定义元素中文字的颜色,如color:red,请参见3.5.1节关于颜色的表示方法。 6.text-align 用于指定文本在元素内的水平对齐方式。 常用取值包括left/right/start/end/center/justify,请参见3.5.1节关于方位的说明。 其中,justify为两端对齐(分散对齐),对最后一行文字无效。 7.text-decoration 若要使用线条装饰文本,可用如下样式属性。 (1)text-decoration-line:线条类型,如下画线underline、上画线overline、删除线linethrough 、无任何装饰none。 (2)text-decoration-style:线条样式,如实线solid、虚线dashed、波浪线wavy等,默认 为solid。 (3)text-decoration-color:线条颜色,默认与文字同色。 一般使用缩写形式text-decoration,例如: text-decoration: underline; /*实线下画线*/ text-decoration: underline wavy red; /*红色波浪下画线*/ text-decoration: none; /*常用于取消超链接默认的下画线*/ 若为中文添加下画线,很少使用text-decoration:underline(不美观),常使用下边框 border-bottom 替代。 8.text-indent 用于指定首行文字的缩进量,例如,text-indent:2em 指定首行缩进两个字符。 9.line-height line-height为文本的行高,可以直观地认为行高即是选中文字后,文本背景色块的高 度,如图3.10所示。 图3.10 行高示意 值得注意的是,一行文字所占据的实际高度并非由font-size或height属性决定,而是 由line-height决定。因此,当line-height值小于font-size值,两行文字将叠在一起。图3.10 中的4行文字实际占据的高度为line-height×4。 38 Web应用开发技术(微课版) line-height属性在实践中常用于完成如下两项任务。 . 多行文字:调整行间距。例如,line-height:2em(2倍行距)。 . 单行文字:设置文字垂直居中。将元素line-height值设置为与元素高度一致,单行 文字将在元素内垂直居中。如下代码的显示效果如图3.11所示。
Title 1
Title 2
图3.11 单行文字的垂直居中效果 视频讲解 3.5.5 元素的显示模式 在CSS中可通过设置样式属性display来改变元素的外部和内部显示模式,外部显示 模式决定该元素在HTML文档流中的表现(如block/inline/inline-block),内部显示模式则 可控制其子元素的布局(如grid/flex)。 本节将讨论display属性的常用取值:block/inline/inline-block/none。 关于grid/flex,因其内容相对复杂,将在3.5.6节和3.5.7节分列主题介绍,其他针对特 定元素的取值,如table/table-row/table-cell/list-item 等不做讨论。 1.block 当元素的默认样式中display属性值为block时元素即表现出块级元素的特征,如

、

、