HTML5+CSS3_Web前端设计基础教程_第2版（第4章）.html5+css3_web前端设计基础教程_第2版（第4章）.pptVIP

Web前端设计基础教程HTML5+CSS3第②版

Chapter/04实现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文本链接