网页制作基础-使用CSS美化网页

1、Dreamweaver网页制作基础山西大学现代教育技术中心 庄靖第九章 使用CSS美化网页由于HTML语言本身的一些客观特点，导致了其结构与显示不分离的特点，这也是阻碍其发展的一个原因。因此，W3C很快发布了CSS（层叠样式表）来解决这一问题，以便不同的浏览器都能够正常地显示同一页面。本章主要讲解CSS的创建与编辑及CSS语法结构，从而阐明CSS在不同网页中的技术应用。9.1 CSS样式表概述一、认识CSS 层叠样式表 (CSS) 是一组格式设置规则，用于控制网页内容的外观。通过使用 CSS 样式设置页面的格式，可将页面的内容与表示形式分离开。页面内容（即 HTML 代码）存放在 HTML 文

2、件中，而用于定义代码表示形式的 CSS 规则存放在另一个文件（外部样式表）或 HTML 文档的另一部分（通常为文件头部分）中。 将内容与表示形式分离可使得从一个位置集中维护站点的外观变得更加容易，因为进行更改时无需对每个页面上的每个属性都进行更新。将内容与表示形式分离还会可以得到更加简练的 HTML 代码，这样将缩短浏览器加载时间，并为存在访问障碍的人员（例如，使用屏幕阅读器的人员）简化导航过程。 CSS的功能：能更加灵活地控制网页中文字的字体、颜色、大小、间距、风格及位置。能灵活地设置一段文本的行高和缩进，并可以为其加入三维效果的边框。能方便地为网页中的任何元素设置不同的背景色和背景图像。能

3、精确地控制网页上各元素的位置。能为网页中的元素设置阴影、模糊和透明效果。能与脚本语言结合，从而产生各种动态效果。使网页浏览速度非常快。CSS的特性：将格式和结构分离。页面更加简洁、高效。兼容性好。 引入CSS后HTML的改变 修改CSS定义后的改变二、CSS基本选择器1、标签一个HTML 页面由很多不同的标记组成，CSS 标记选择器用来声明哪些标记采用哪种CSS 样式。因此，每一种HTML 标记的名称都可以作为相应的标记选择器的名称。例如，选择器就是用于声明页面中所有标记的样式风格。同样可以通过选择器来声明页面种所有的标记的风格。如:cssli1.html无标题文档pfont-size:30p

4、x;color:red;h1font-size:50px;color:blue;我是p 标记我是h1 标记2、类 用于创建名称以“.”开头的“类”CSS样式规则，能够应用在网页中的任何标签。如：cssli2.html类别选择器.onefont-size:30px; color:red;.twofont-size:50px; color:blue;第一行P 标记文字第二行P 标记文字.a1 font-size: 12px;line-height: 25px;font-weight: 25;color: #F00; 在网页文档中使用class属性引用“.a1”类，凡是含有“class=”a1“”的

5、标签都应用该样式，class属性用于指定元素属于何种样式的类。我的第一个网页3、IDID 选择器的使用方法与类别选择器基本相同，不同之处在于ID 选择器只能在HTML 页面中使用一次，因此针对性更强。在HTML 的标记中只需要利用ID 属性，就可以直接调用CSS 中的ID 选择器。如：cssli3.htmlID 选择器#onefont-size:25px;color:red;#twofont-size:45px;color:#09c;#threefont-weight:bold; background-color:yellow;color:green;font-style:italic; fo

6、nt:35px/2em 宋体;emcolor:rgb(50,125,200);font-size:40px;font-style:normal;欢迎来到传智播客网络课堂要想成为优秀的网站设计师，必须先学好基础课我是em 标签#l1 font-size: 30px;color: #00F;可以通过id属性应用到HTML中。我的第一个网页9.2 使用【CSS样式】面板一、认识“CSS面板” 启动 Dreamweaver，需要新建一个网页文档，然后选择【窗口】|【CSS 样式】菜单命令，就会打开【CSS 样式】面板，【CSS 样式】面板包含的所有功能可以使用一句话来概括：一个全能菜单、两种显示模式、

7、三种属性视图、四个操作按钮。1、全能菜单CSS 样式操作的所有功能都可以在面板菜单中找到。单击面板右上角的下拉菜单图标（ ），将弹出一个下拉菜单，该菜单显示了所有 CSS 操作功能。2、两种显示模式在面板的顶部有两个按钮（ ），单击可以在这两种模式间进行来回切换。在“全部”模式下，“CSS样式”面板显示两个窗格。所有规则：显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表，包括外部样式、内部样式和行内样式。属性：可以编辑“所有规则”窗格中任何所选规则的CSS属性。在“当前”模式下，CSS样式面板显示三个面板：所选内容的摘要：其中显示文档当前所选内容的CSS属性。规则：其中

8、显示所选属性的位置。属性：允许编辑应用于所选内容的规则的CSS属性。3、三种视图在“全部”和“当前”模式下，CSS样式面板都包含三个改变视图的按钮。A. 类别视图 B. 列表视图 C. “设置属性”视图类别视图：将 Dreamweaver 支持的 CSS 属性分为八个类别：字体、背景、区块、边框、方框、列表、定位和扩展名。每个类别的属性都包含在一个列表中，您可以单击类别名称旁边的加号 (+) 按钮展开或折叠它。“设置属性”（蓝色）将出现在列表顶部。列表视图：会按字母顺序显示 Dreamweaver 支持的所有 CSS 属性。“设置属性”（蓝色）将出现在列表顶部。“设置属性”视图：“仅显示那些已

9、进行设置的属性。“设置属性”视图为默认视图。4、操作按钮在“全部”和“正在”模式下，“CSS 样式”面板还包含下列按钮：A. 附加样式表 B. 新建 CSS 规则 C. 编辑样式 D. 禁用/启用 CSS 属性 E. 删除 CSS 规则附加样式表：打开“链接外部样式表”对话框。选择要链接到或导入到当前文档中的外部样式表。新建 CSS 规则：打开一个对话框，您可在其中选择要创建的样式类型（例如，创建类样式、重新定义 HTML 标签或定义 CSS 选择器）。编辑样式：打开一个对话框，您可在其中编辑当前文档或外部样式表中的样式。删除 CSS 规则：删除“CSS 样式”面板中的选定规则或属性，并从它所

10、应用于的所有元素中删除格式设置。（不过，它不会删除由该样式引用的类或 ID属性）。“删除 CSS 规则”按钮还可以分离（或“取消链接”）附加的 CSS 样式表。二、使用“CSS样式”面板制作样式将插入点放在文档中，然后执行以下操作之一打开“新建 CSS 规则”对话框：选择“格式”“CSS 样式”“新建”。在“CSS 样式”面板（“窗口”“CSS 样式”）中，单击面板右下侧的“新建 CSS 规则”(+) 按钮。在“文档”窗口中选择文本，从 CSS 属性检查器（“窗口”“属性”）的“目标规则”弹出菜单中选择“新建 CSS 规则”，然后单击“编辑规则”按钮，或者从属性检查器中选择一个选项（例如单击“

11、粗体”按钮）以启动一个新规则。在“新建 CSS 规则”对话框中，指定要创建的 CSS 规则的选择器类型。若要创建一个可作为class 属性应用于任何 HTML 元素的自定义样式，从“选择器类型”弹出菜单中选择“类”选项，然后在“选择器名称”文本框中输入样式的名称。 类名称必须以句点开头，并且可以包含任何字母和数字组合（例如，.a1）。如果没有输入开头的句点，则 Dreamweaver 将自动为其输入句点。若要定义包含特定ID 属性的标签的格式，从“选择器类型”弹出菜单中选择“ID”选项，然后在“选择器名称”文本框中输入唯一 ID。 ID 必须以井号 (#) 开头，并且可以包含任何字母和数字组合

12、（例如，#myID1）。如果没有输入开头的井号，则 Dreamweaver 将自动为其输入井号。若要重新定义特定 HTML 标签的默认格式，从“选择器类型”弹出菜单中选择“标签”选项，然后在“选择器名称”文本框中输入 HTML 标签或从弹出菜单中选择一个标签。若要定义同时影响两个或多个标签、类或 ID 的复合规则，选择“复合内容”选项并输入用于复合规则的选择器。选择要定义规则的位置，然后单击“确定”：若要将规则放置到已附加到文档的样式表中，请选择相应的样式表。若要创建外部样式表，请选择“新建样式表文件”。若要在当前文档中嵌入样式，请选择“仅对该文档”。在“CSS 规则定义”对话框中，选择要为新

13、的 CSS 规则设置的样式选项。 完成对样式属性的设置后，单击“确定”。建立CSS样式实例：在【CSS 样式】面板底部单击【新建CSS 规则】按钮图标，打开【新建CSS规则】对话框。在该对话框中需要完成三件事：指定选择器类型、定义选择器名称和设置样式存放位置。【新建 CSS 规则】对话框所提供的选择器类型还是比较有限的，包括类选择器、标签选择器和 ID 选择器等。例如：定义一个比较复杂的包含选择器“#main p.red”【规则定义】选 项用来设置所要定义的样式存放位置，可以把样式放在外部样式表中，随后系统会要求你新建或选择一个外部样式表文件。而【仅限该文档】选项则表示定义内部样式表，所定义的

14、样式将被放置在当前网页文档的头部区域。假设定义一个样式，选择器名称为“#main p.red”， 存放位置为内部样式，然后单击【确定】按钮关闭【新建CSS 规则】对话框。此时 Dreamweaver 会自动打开【CSS规则定义】对话框，并在文档头部区域插入标签。在【CSS 规则定义】对话框中定义样式包含的属性。【CSS 规则定义】对话框分类集成了CSS 大部分属性。设置时应该先在左侧的【分类】列表框中选择属性类别，然后在右侧设置具体的属性。所有设置项都可以自由定义，也可以修改、删除和增加声明等操作。例如，如果定义“#main p.red”选择器样式为带有下划线样式的红色、14 像素字体，则可以

15、在左侧列表框中选择【类型】项，并在右侧设置【大小】文本框，可以同时设置文本框后面出现的单位；在【颜色】文本框中设置“#FF0000”（ 红色），也可以单击 进行快速选择；在【修饰】选项组中勾选【下划线】复选框。设置完毕单击【确定】按钮，Dreamweaver 会自动在当前文档中插入一个样式表。#main p.red font-size: 14px; /* 字体大小 */color: #F00; /* 字体颜色 */text-decoration: underline; /* 字体下划线 */在样式表中手工输入代码、编辑声明，增删属性都不会影响Dreamweaver 对样式表的解析，并能够自由地

16、在代码环境和可视化环境之间进行转换。例如，在上面定义的样式基础上，在【代码】视图下继续增加声明，定义 fontfamily属性，并修改已声明的属性值。手工编辑的代码如下：#main p.red font-family: Times New Roman, Times, serif;font-size: 0.75em;color: #00F;text-decoration: none;然后在【CSS 样式】面板底部单击【编辑样式】按钮图标（ ），将再次打开【CSS 规则定义】对话框，此时就会看到样式表中所有修改都会显示在可视化对话框中。三、应用 CSS 样式可视化定义样式需要把定义的样式应用到文档

17、中。对于不同类型的选择器，它们的作用范围不同。例如，对于标签选择器样式，只要引入文档就会自动作用于文档对象，而对于多数选择器（如类选择器、ID 选择器）还需要进一步操作才能够应用于文档。对于标签选择器样式来说，只要把样式表引入到文档中即可生效。对于类选择器样式来说，可以在【属性检查器】面板中进行设置。例如，定义一个红色样式类：.red color:red然后在文档中选中应用该样式的对象，可以在【代码】视图下，也可以在【设计】视图下。在【属性检查器】面板的【目标规则】下拉列表中会看到文档中已定义的所有类样式。从【目标规则】下拉列表中选择.red 样式，即可把红色字体样式类应用到当前对象中。四、C

18、SS属性1、类型 主要用于定义网页中文本的字体、大小、颜色、样式、行高及文本链接的修饰效果。字体（Font-family）:为样式设置字体家族。大小（Font-size）:定义文本的大小。可以通过选择数字和度量单位选择特定的大小，也可以选择相对大小。使用像素作为单位可以有效地防止浏览器扭曲文本。粗细（Font-weight）:对字体应用特定或相对的粗体量。“正常”等于 400；“粗体”等于 700。 normal:正常 bold:粗体 bolder:特粗 lighter:细体样式（Font-style）:指定normal“正常”、italic“斜体”或oblique“偏斜体”作为字体样式。默认

19、设置是“正常”。变体（Font-variant）:设置文本为小型大写字母变体，即将正常文字缩小一半尺寸后大写显示。行高（Line-height）:设置文本所在行的高度。习惯上将该设置称为行高。选择“正常”自动计算字体大小的行高，或输入一个确切的值并选择一种度量单位。大小写（Text-transform）:将所选内容中的每个单词的首字母大写或将文本设置为全部大写或小写。 capitalize:首字母大写 uppercase:大写 lowercase:小写 none:无修饰（Text-decoration）:向文本中添加下划线、上划线或删除线，或使文本闪烁。常规文本的默认设置是“无”。链接的默认设

20、置是“下划线”。将链接设置设为无时，可以通过定义一个特殊的类去除链接中的下划线。颜色（Color）:设置文本颜色。2、背景 可以定义CSS样式的背景设置，也可以对网页中的任何元素应用背景属性。背景颜色（ Background color）背景图像（ Background image）重复（Background Repeat）：确定是否以及如何重复背景图像。两种浏览器都支持重复属性。 No-repeat:只在元素开始处显示一次图像。 repeat:在元素的后面水平和垂直平铺图像。 Repeat-x、repeat-y:分别显示图像的水平带区和垂直带区。图像被剪辑以适合元素的边界。注意：使用“重复”

21、属性重定义body 标签并设置不平铺、不重复的背景图像。附件（Background Attachment）：确定背景图像是固定在其原始位置还是随内容一起滚动。 fix:固定，文字滚动时，背景图像保持固定。 scroll: 滚动，背景图像随文字内容一起滚动。水平位置（Background Position (X) ）和 垂直位置（Background Position (Y)）：用来确定背景图像的水平/垂直位置。Left:左对齐，将背景图像与前景元素左对齐。Right:右对齐Top:顶部。Bottom:底部。Center:居中。值：自定义背景图像的起点位置。3、区块 主要用于控制网页元素的间距、

22、对齐方式。单词间距（Word-spacing）:设置单词的间距。字母间距（Letter-spacing）:定义组成词的字母间距。可以使用正值和负值可以增加和减少间距。垂直对齐（Vertical-align）:指定应用元素的垂直对齐方式。 baseline:基线，将元素的基准线同母体元素的基准线对齐 sub:下标 super:上标 top:顶部，将元素顶部同最高的母体元素对齐 text-top:文本顶对齐，将元素的顶部同母体元素文字的顶部对齐。 middle:中线对齐 bottom:底部 text-bottom:文本底对齐文本对齐（Text-align）:设置元素中的文本对齐方式。 left :

23、左对齐 right：右对齐 center：居中 justify：两端对齐文本缩进（Text-indent）:指定第一行文本缩进的程度。空格（White-space）:确定如何处理元素中的空白。 normal:正常,收缩空白 pre：保留所有空白，包括空格、制表符和回车。 nowrap：不换行，仅当遇到标签时文本才换行。显示（Display）:指定是否或如何显示元素。None标识关闭显示.4、方框 为用于控制元素在页面上的放置方式的标签和属性定义设置。可以在应用填充和边距设置时将设置应用于元素的各个边，也可以使用“全部相同”设置将相同的设置应用于元素的所有边。宽（Width）:用于设置方框本身的

24、宽度，可以使方框的宽度不依靠它所包含内容的多少。高（Height）:用于设置方框本身的高度。浮动（Float）:用于设置块元素的浮动效果。清除（Clear）:清除设置的浮动效果。填充（Padding）:指定元素内容与元素边框（如果没有边框，则为边距）之间的间距。 上（top）:控制上留白的宽度 右（right）:控制右留白的宽度 下（bottom）：控制下留白的宽度 左（left）：控制左留白的宽度边界（Margin）：指定一个元素的边框（如果没有边框，则为填充）与另一个元素之间的间距。 上（top） :控制上边距的宽度 右（right） :控制右边距的宽度 下（bottom） ：控制下边距的

25、宽度 左（left） ：控制左边距的宽度5、边框 可以定义元素周围边框的设置。样式（style）:设置边框的样式外观，取消选择“全部相同”可以设置元素各个边的边框样式。 none:无边框 dotted:虚线 dashed:点划线 solid:实线 double:双线 groove:槽状 ridge:脊状 inset:凹陷 outset:凸出宽度（width）：设置元素边框的粗细。颜色（color）6、列表 为列表标签定义列表设置。类型（list-style-tyoe）：设置项目符号或编号的外观。Disc:圆点 circle:圆圈 square:方块Decimal:数字 lower-roman:

26、小写罗马数字upper-roman:大写罗马数字 Lower-alpha:小写字母 upper-alpha:大写字母 none:无项目符号图像（list-style-image）：可以为项目符号指定自定义图像。位置（list-style-position）：设置列表项文本是否换行或缩进以及文本是否换行到左边距。 outside:在方框外显示 inside:在方框内显示7、定位 定位属性可以使网页元素随处浮动，这对于一些固定元素（如表格）来说，是一种功能的扩展。对于浮动元素（如层）可以精确控制其位置。类型（position）：用于确定定位的类型。Absolute:绝对，使用定位框中输入的坐标来放

27、置元素，坐标原点为页面左上角。Relative:相对，坐标原点为当前位置。Static:静态，不使用坐标，只使用当前位置Fixed:固定显示（visibility）：用于将网页中的元素隐藏。Inherit:继承母体要素的可视性设置。Visble:可见Hidden:隐藏宽（width）：设置元素的宽度。高（height）：设置元素的高度。Z轴（z-index）：用于控制网页中块元素的叠放顺序，可以为元素设置重叠效果。溢出（overflow）：在确定了元素的高度和宽度后，如果元素的面积不能全部显示元素中的内容时，该属性起作用。Visible:可见，扩大面积以显示所有内容。Hidden:隐藏超出范围

28、的内容。Scroll:滚动，在元素的右边显示一个滚动条。Auto:自动，当内容超出元素面积时，自动显示滚动条。定位（placement）：为元素确定了绝对和相对定位类型后，该属性决定元素在网页中的具体位置。Top: 控制元素上面的起始位置。 bottom:下Right:右 left:左编辑（clip）：当元素被指定为绝对定位类型后，该属性可以把元素区域剪切成各种形状（目前只有一种方形）8、扩展分页，为打印的页面设置分页符之前（break-before）：之后（break-after）：视觉效果，为网页元素加特殊效果。光标（cursor）：可以指定在某个元素上要使用的鼠标形状。过滤器（filte

29、r）：为网页元素设置特殊显示效果，如阴影、模糊、透明等。Alpha:设置透明度。Blur:建立模糊效果。Chroma:把指定颜色设置为透明。Dropshadow:建立一种偏移的影像轮廓，即投射阴影。flipH:水平翻转。flipV:垂直翻转。Glow:为对象的外边界增加光效。Gray:降低图片的彩色度。Invert:将色彩、饱和度以及亮度值反转，建立底片效果。Light:在一个对象上进行灯光投影。Mask:为一个对象建立透明膜。Shadow:建立一个对象的固体轮廓，即阴影效果。Wave:在 x轴和y轴方向利用正弦波纹打乱图片。Xray:只显示对象的轮廓。9、过渡 实现过渡效果，例如把鼠标指针悬

30、停在某个元素上时高亮它们。五、在“CSS样式”面板中修改当在“CSS样式”面板“所有规则”窗格中选中需要修改的样式后，面板下方的属性栏中将会显示样式的属性，此时可以在该栏中直接修改样式。六、“CSS样式”面板应用实例例：设置文本格式打开文件“我们是谁.html”。单击“CSS样式”面板中的“新建CSS规则”按钮，打开“新建CSS规则”对话框，将选择器名称设置为“.text01”，“选择器类型”为“类”，单击“确定”按钮。在“.text01的CSS规则定义”对话框中的“分类”列表框中选择“类型”选项，设置字体、大小（14 px）、粗细（bold）、颜色（红色）；选择“区块”选项，设置字母间距（4

31、px)，单击“确定”按钮。选择文字，在属性检查器的【目标规则】下拉列表中选择.text01样式。9.2 手工输入代码一、基本语法声明文档样式表结束例：css9-1二、在HTML中使用CSS的方法1、内联式样表 直接写在现有的HTML标签中，即在标记的style 属性中设定CSS 样式，这种方式本质上没有体现出CSS 的优势，因此不推荐使用。例如:这里文字是红色的。2、嵌入式样表 使用“”标签嵌入到HTML文件的头部（在之间）。例如： h1 color:red; font-size:25px; 3、外部式样式样式表外部文件以.css为扩展名，在内使用标签将样式表文件链接到HTML文件内。例如：产

32、生一个普通的网页，但不使用规则，而是在内使用标签： My First Stylesheet Stylesheets: The Tool of the Web Design Gods Amaze your friends! Squash your enemies! 再生成一个单另的文本文件，起名 mystyles.css (或者其任何你喜欢的名字)。文件内容如下： H1 color: green; font-family: impact P background: yellow; font-family: courier 三、CSS复合选择器1、“交集”选择器(标签指定式选择符)“交集”选择器由

33、两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。注意：第一个必须是标记选择器，第二个必须是类别选择器或ID 选择器;两个选择器之间必须连续书写，不能有空格。例：cssli42、“并集”选择器(选择符分组)“并集”选择器又称为“集体声明”，是同时选中各个基本选择器所选择的范围。在声明各种CSS 选择器时，如果某些选择器的风格是完全相同的，或者部分相同，那么这时便可以利用并集选择器同时声明风格相同的CSS选择器。注意：任何形式的选择器（包括标记选择器、class 类别选择器、ID 选择器等）都可以作为并集选择器的一部分;并集选择器是多个选择器通过逗号连接而成的。例：cssli53、 “

34、后代”选择器(包含选择符/嵌套/派生)“后代”选择器是通过嵌套的方式，对特殊位置的HTML 标记进行声明。注意：后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开;当标记发生嵌套时，内层的标记就称为外层标记的后代。选择器之间的空格是一种结合符。每个空格结合符可以解释为“. 在 . 找到”、“. 作为 . 的一部分”、“. 作为 . 的后代”。例：cssli6希望只对 h1 元素中的 em 元素应用样式：无标题文档h1 em color:red;这是 第一 行这是 第二 行这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的

35、em）则不会被这个规则选中。（ h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。）四、CSS继承性 CSS 的继承性：继承是一种机制，它允许CSS 样式不仅可以应用于某个特定的元素，还可以应用于它的后代。 就是在HTML 文档结构中，包含在内部的标签将拥有外部标签的某些样式。CSS 继承性最典型的应用就是在body 元素中定义整个页面的字体大小、字体颜色等基本页面属性，这样包含在body 元素内的其他元素都将继承该基本属性，以实现页面显示效果的统一。 灵活运用CSS 的继承性可以节省大量的CSS 代码，缩短开发时间。例：cssli7五、 CSS层叠性层叠性是指当有多个

36、选择器都作用于同一元素时，即多个选择器的作用范围发生了重叠，CSS 的处理原则：如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式;如果多个选择器定义的规则发生了冲突，则CSS 按选择器的优先级让元素应用优先级高的选择器定义的样式。CSS 规定选择器的优先级从高到低为：行内样式ID 样式类别样式标记样式。例：cssli8六、CSS控制文本属性CSS字体属性解释Font:该属性是简写属性，其作用在于将所有针对字体的属性设置在一个声明中。font-family:设置网页使用字体的类别font-size:设置文本的字体大小font-weight:设置字体的粗细，包含100900等多

37、个级别。font-style:设置文本的字体样式font-variant:设置文本为小型大写字母的外形。CSS文本属性解释Color:设置文本的颜色。line-height:设置行高。text-indent:设置文本块首行的缩进（段落设置中经常使用）。text-align:设置文本的水平对齐方式。text-decoration:设置添加到文本的装饰效果（超链接设置中经常使用）。1字体的类别font-family通常，访问者的计算机中不会安装诸如“方正综艺简体”和“方正水柱简体”等特殊字体，如果网页设计者使用这些字体，极有可能造成访问者看到的页面效果与设计者的本意存在很大差异。为了避免这种情况的

38、发生，一般使用系统默认的“宋体”、“仿宋体”、“黑体”、“楷体”、“Arial”、“Verdana”和“Times New Roman”等常规字体。在CSS中，可以一次定义多个字体类别让系统自行选择，样式代码如下：p font-family:微软雅黑, 宋体, Arial, Verdana, Time New Roman;标题没有定义字体系统使用默认字体此行设置为“宋体”此行设置为“华文彩云”此行设置为“黑体”此行设置为“微软雅黑”字体，但系统没有安装该字体，此时该行字体使用默认字体进行显示此行设置为“华文行楷”图4-32 “字体的类别”预览效果2字体的尺寸font-size该属性用于设置元素

39、的字体大小，其值可以是绝对值也可以是相对值。常见的有“px”（绝对单位）、“em”（相对单位）、“%”（相对单位）和“pt”（绝对单位）等。标题继承#box定义的字体大小此行设置为1.5em此行继承父级元素的字体大小此行丢弃继承来的16px，更新为12px此行设置为“x-small”，这种定义的方法在不同浏览器中会出现不同的效果，因此不推荐使用此行设置为200%【教与练4-6】：字体的样式、粗细与颜色。设置标题为斜体去除标题原本的加粗属性，使其变为正常粗细设置字体为倾斜体设置字体为加粗使用颜色名称设置颜色，段落中字体为红色使用RGB代码设置颜色，这里为绿色使用十六进制值设置颜色，这里为蓝色图4

40、-38 “字体的样式、粗细与颜色”预览效果第4章 网页的文本元素4.3.3 首行缩进与设置行高+ 4.3 使用CSS控制页面文本1首行缩进在CSS样式中text-indent属性能够实现文本缩进效果，该属性值可以为百分比数字或者由浮点数字和单位标识符组成的长度值，且允许为负值。p text-indent: 24px;/*由于是固定值，故不能根据字体大小变化准确地缩进两个汉字距离*/p text-indent: 2em;/*由于是相对值，故能够根据字体大小变化自动缩进两个汉字距离*/2设置行高段落中两行文字之间垂直的距离称为行高。第4章 网页的文本元素4.3.3 首行缩进与设置行高+ 4.3 使

41、用CSS控制页面文本【教与练4-7】：首行缩进与设置行高。使用像素值设置行高为30px，不能根据字体大小自动调整设置缩进距离为字体大小的2倍，即两个汉字的距离行高设置为60%，文字出现重叠现象使用数值设置行高为1.5，指的是1.5倍行距，能够根据字体大小自动调整行间距图4-41 “首行缩进与设置行高”预览效果第4章 网页的文本元素4.3.4 文字的截断与首字下沉+ 4.3 使用CSS控制页面文本1文字的截断在CSS样式中“text-overflow”属性可以实现这种效果，该属性包含clip和ellipsis两个属性值。前者表示简单的裁切，不显示省略标记（）；后者表示当文本溢出时显示省略标记（）。特别注意的是，要实现溢出文本显示省略号的效果，除了使用text-overflow属性以外，还必须配合white-space:nowrap（强制文本在一行内显示）和overflow