HTML5+CSS3 Web前端设计基础教程 第3版 课件 第4章 实现Web前端排版的基本美化

第4章本章主要从文本控制、图像控制、超链接应用、表格控制等多个方向，向读者介绍在工作中经常遇到的排版问题。实现Web前端排版的基本美化4.1控制文本4.1控制文本（1）插入特殊字符（2）批量替换和查找图4-2“查找和替换”面板4.1控制文本4.1.1CSS中字体属性与文本属性介绍表4-1CSS中常用的“字体”属性CSS字体属性解

释font该属性是简写属性，其作用在于将所有针对字体的属性设置在一个声明中。font-family设置网页使用字体的类别。font-size设置文本的字体大小。font-weight设置字体的粗细，包含100～900等多个级别。font-style设置文本的字体样式。font-variant设置文本为小型大写字母的外形。font-stretch（CSS3新增）设置或检索对象中的文字是否横向拉伸变形。font-size-adjust（CSS3新增）设置或检索小写字母x的高度与对象文字字号的比率。4.1控制文本表4-2CSS中常用的“文本”属性CSS文本属性解

释text-transform设置对象中的文本的大小写。word-wrap（CSS3新增）设置当前行超过指定容器的边界时是否断开换行。overflow-wrap（CSS3新增）设置当内容超过指定容器的边界时是否断行。white-space设置对象内空格的处理方式。word-break（CSS3新增）设置对象内文本的字内换行行为。text-align（CSS3更新）设置文本的水平对齐方式。text-justify（CSS3新增）设置对象内调整文本使用的对齐方式。text-indent（CSS3更新）设置文本块首行的缩进（段落设置中经常使用）。line-height设置行高。text-overflow设置文本溢出时的事件。text-decoration（CSS3更新）设置添加到文本的装饰效果（超链接设置中经常使用）。text-shadow（CSS3新增）设置文本的阴影。4.1控制文本1．font-family（字体类型）2．font-size（字号大小）3．font-style（字体风格）标题设置固定字号，字体风格为斜体此行设置为“宋体”此行设置为“华文彩云”此行设置为“黑体”，字号大小为父级的80%此行设置为“文鼎pop”，由于系统本机未安装该字体，由默认字体进行渲染此行设置为“微软雅黑”图4-3字体类型、字号和风格预览效果4.1控制文本4．font-weight（字体粗细）5．font-size-adjust（字体适合尺寸）

相同的字号，但外观显示差异较大通过调整使其外观差异变小图4-4font-weight与font-size-adjust预览效果6．font-stretch（字体拉伸）4.1控制文本4.1.2在线字体与@font-face1．什么是在线字体

WebFont又称之为在线字体，主要是把自定义的特殊字体嵌入到网页中，无需安装，无需下载，直接在线使用。2．@font-face语法图4-5font-face预览效果4.1控制文本4.1.3文本的首行缩进、行高和阴影1．text-indent（文本缩进）p{text-indent:24px;}/*由于是固定值，故不能根据字体大小变化准确地缩进两个汉字距离*/p{text-indent:2em;}/*由于是相对值，故能够根据字体大小变化自动缩进两个汉字距离*/2．line-height（行高）4.1控制文本3．text-shadow（文本阴影）图4-6text-indent、line-height和text-shadow预览效果此处对h1元素设置了高度，要想让其中的文字垂直居中，通常将line-height的值设置为height的值，即两者的值相同。由于使用了绝对值进行缩进，不能自动适应字体大小的变化。由于使用了相对值进行缩进，无论父级元素字体如何变化，这里总能精确缩进2个汉字的距离除了使用line-height，还可以使用padding将文字设置为垂直居中，具体修改内容如下：h1{

height:80px;padding:20px000;}4.1控制文本4.1.4文本溢出处理1．text-overflow（文本溢出）2．overflow（溢出）3．white-space（处理空格）此处文本溢出，文字折返到下一行此列表项内容超出了容器设置的范围，出现了省略标记图4-7文本溢出处理预览效果4.2控制超链接4.2.1文本链接、邮件链接与锚链接4.2.2CSS伪类与超链接1．什么是CSS伪类

伪类的语法形式为：选择符：伪类{属性:属性值;}伪

类解

释:link、:visited、:hover、:active设置超链接被访问前后的4个状态样式。:focus设置对象在成为输入焦点时的样式。:not(s)（CSS3新增）匹配不含有s选择符的元素。:root（CSS3新增）匹配某一个元素在文档的根元素。:first-child匹配父元素的第一个子元素。:last-child（CSS3新增）匹配父元素的最后一个子元素。:nth-child(n)（CSS3新增）匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。表4-3常见的伪类及其含义4.2控制超链接2．CSS伪类在超链接方面的应用超链接初始效果设置为，清除下划线，增加左侧无色背景图进行美化图4-13伪类在超链接方面的应用鼠标悬停后，出现绿色图标，字体变为红色，并有下划线出现4.3控制图像和颜色4.3.1CSS中控制图像和颜色的基本属性属

性解

释background（CSS3更新）简写属性，作用是将背景属性设置在一个声明中。background-repeat（CSS3更新）设置背景图像是否重复，以及如何重复。background-color设置元素的背景颜色。background-image（CSS3更新）将图像设置为背景。background-position（CSS3更新）图像定位，用于设置背景图像的起始位置。background-attachment（CSS3更新）用于设置背景图像是否固定或者随着页面的其余部分滚动。background-size（CSS3新增）定义背景图片的大小。background-origin（CSS3新增）指定背景图的显示区域。background-clip（CSS3新增）设置对象的背景向外裁剪的区域。表4-4CSS中用于控制图像的属性4.3控制图像和颜色1．background-color2．background-image3．background-repeat4．background-attachment5．background设置背景颜色设置背景图，括号内为图像路径设置图像是否平铺，如果不设置则全屏平铺水平方向，距左多少像素的距离垂直方向，距顶多少像素的距离设置背景图像是固定还是滚动图4-14background属性简写示意图4.3控制图像和颜色图4-15背景色、背景图预览效果此处图片通过横向平铺实现效果。此外，同时设置图像高度，如果不设置，div元素内又没有内容将容器撑起来，将无法显示背景图片此处图片设置了跟随滚动条滚动的效果，即便不设置，浏览器默认状态就是滚动效果此处为box容器同时设置背景图和背景色此处设置的图像位置为水平方