HTML5+CSS3网页设计实例教程 第9章 文本与字体
单元5 CSS3基本样式设计
border-right-style border-right-width border-right-color
border-left-style border-left-width border-left-color
示例： h1{ border-bottom-style: solid; border-bottom-color: #000; border-bottom-width: 1px;
常用的样式有 dotted（点线）
solid（实线）
border-style属性
border-style属性取值可以有一到四个
border-style: dotted solid double dashed；
上
右
下
左
border-style: dotted solid double；
上
右和左 下
</head> <body>
<h1>勤学好问</h1> </body> </html>
文本样式属性
文字的颜色以及文本格式的样式效果
color text-align text-decoration text-indent line-height
文本样式属性
color属性用于设置文字的颜色
常用颜色值 1. CSS颜色规范预定义的颜色名称，例如red，blue，green等。 2. 十六进制颜色代码：#RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色），
字体样式属性
font-style属性用于规定斜体文本 <!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>字体样式</title> <style type="text/css"> p{font-style: italic;} </style>
网页设计入门--如何使用css设置字体和文本样式
⽹页设计⼊门--如何使⽤css设置字体和⽂本样式⼀、定义字体类型font-family:Arial,Helvetica,serif,sans-serif,monospace;ps.字体与字体之间⽤逗号隔开，句尾⽤分号例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-family:serif;}.p2{font-family:sans-serif;}.p3{font-family:monospace;}</style></head><body>welcome to my first text html!<p class="p1">我是serif字体!</p><p class="p2">我是sans-serif字体!</p><p class="p3">我是monospace字体!</p></body></html>显⽰结果如下：⼆、定义字体⼤⼩font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|lengthps:1、xx-small（最⼩）、x-small（较⼩）、small（⼩）、medium（正常）、large（⼤）、x-large（较⼤）、xx-large（最⼤）、larger（增⼤）、smaller（减⼩）、length（可以是百分数、或者浮点数和单位标识符组成的长度值，但不能为负值。
其百分⽐的取值是基于⽗对象中字体的尺⼨来计算的，与em单位计算⽅法相同）;2、还可以⽤px（像素）、in（英⼨）、em（基于⽗辈字体⼤⼩为参考设置字体⼤⼩）、cm（厘⽶）、pt（点）、pc（⽪卡）来定义字体⼤⼩;3、浏览器默认字体⼤⼩为16px，所以1.2em=19.2px，0.875em=14px，0.625em=10px；4、对于⽹页宽度固定或者栏⽬宽度固定的布局，使⽤像素是正确的选择；对于⽹页宽度不固定或者栏⽬宽度也不固定的页⾯，使⽤百分⽐或em是正确的选择，这样可以⽅便客户端浏览器调整字体⼤⼩；例如：<html><head><title>my first text html</title><style type="text/css">div{font-size:20px;}.p1{font-size:0.6in;}.p2{font-size:0.8em;}.p3{font-size:2cm;}.p4{font-size:16pt;}.p5{font-size:2pc;}</style></head><body>我的字号为16px!<div>我的字号为20px!<p class="p1">我的字号为0.6in!</p><p class="p2">我的字号为0.8em!</p><p class="p3">我的字号为2cm!</p><p class="p4">我的字号为16pt!</p><p class="p5">我的字号为2pc!</p></div></body></html>显⽰结果如下：三、定义字体颜⾊如下为定义字体颜⾊的四种⽅法：color:red; /*使⽤颜⾊名*/color:#693333; /*使⽤⼗六进制*/color:rgb(120,120,120); /*使⽤rgb*/color:rgb(0%,100%,50%);四、定义字体粗细font-weight:normal|bold|bolder|lighter|100|200|300|400（相当于normal）|500|600|700（相当于bold）|800|900 PS:bolder和lighter是相对于normal字体粗细进⾏加粗和减细操作五、定义斜体字体font-style:normal|italic（斜体）|oblique（倾斜的字体）PS:italic和oblique这两个取值只能在英⽂等西⽅⽂字中有效例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-style:normal;}.p2{font-style:italic;}.p3{font-style:oblique;}</style></head><body><p class="p1">我的字体为normal!</p><p class="p2">我的字体为italic!</p><p class="p3">我的字体为oblique!</p></body></html>显⽰结果如下：六、定义下划线、删除线和顶划线text-decoration:none|underline|overline|line-through|blink（闪烁效果）PS:不同的效果可以同时⽤，只需效果之间加空格即可例如：<html><head><title>my first text html</title><style type="text/css">.p1{text-decoration:underline;}.p2{text-decoration:underline overline;}.p3{text-decoration:underline overline blink;}</style></head><body><p class="p1">我的字体使⽤了underline效果!</p><p class="p2">我的字体使⽤了underline和overline效果!</p><p class="p3">我的字体使⽤了underline、overline和blink效果!</p></body></html>显⽰效果如下：七、定义字体⼤⼩写定义字体⼤⼩写有两种⽅法：font-variant:normal|small-caps（⼩型的⼤写字母字体）;text-transform:capitalize（⾸字母⼤写）|uppercase（⼤写）|lowercase（⼩写）;例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-variant:normal;}.p2{font-variant:small-caps;}.p3{text-transform:capitalize;}.p4{text-transform:uppercase;}.p5{text-transform:lowercase;}</style></head><body><p class="p1">normal!</p><p class="p2">small-caps!</p><p class="p3">capitalize!</p><p class="p4">uppercase!</p><p class="p5">LOWERCASE!</p></body></html>显⽰效果如下：⼋、定义⽂本对齐text-align:left|right|center|justify（两端对齐）九、定义垂直对齐vertical-align:auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length PS:auto：根据layout-flow属性的值对齐对象内容；baseline：将⽀持valign特性的对象内容与基线对齐；sub：垂直对齐⽂本的下标；super：垂直对齐⽂本的上标；top：将⽀持vlign特性的对象的内容与对象顶端对齐；text-top：将⽀持vlign特性的对象的⽂本与对象顶端对齐；middle：将⽀持vlign特性的对象的内容与对象中部对齐；bottom：将⽀持vlign特性的对象的内容与对象底端对齐；text-bottom：将⽀持vlign特性的对象的⽂本与对象底端对齐；length：由浮点数字和单位标识符组成的长度值或百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%例如：<html><head><title>my first text html</title><style type="text/css">.span1{vertical-align:auto;}.span2{vertical-align:baseline;}.span3{vertical-align:sub;}.span4{vertical-align:super;}.span5{vertical-align:top;}.span6{vertical-align:text-top;}.span7{vertical-align:middle;}.span8{vertical-align:bottom;}.span9{vertical-align:text-bottom;}.span10{vertical-align:2;}</style></head><body><p><span class="span1">根据layout-flow属性的值对齐对象内容</span><span class="span1">auto</span></br><span class="span1">将⽀持valign特性的对象内容与基线对齐</span><span class="span2">baseline</span></br><span class="span1">垂直对齐⽂本的下标</span><span class="span3">sub</span></br><span class="span1">垂直对齐⽂本的上标</span><span class="span4">super</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象顶端对齐</span><span class="span5">top</span></br><span class="span1">将⽀持vlign特性的对象的⽂本与对象顶端对齐</span><span class="span6">text-top</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象中部对齐</span><span class="span7">middle</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象底端对齐</span><span class="span8">bottom</span></br><span class="span1">将⽀持vlign特性的对象的⽂本与对象底端对齐</span><span class="span9">text-bottom</span></br><span class="span1">由浮点数字和单位标识符组成的长度值或百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%</span><span class="span10">length=2</span></br></p></body></html>显⽰效果如下：⼗、定义字间距letter-spacing:1em;（字母与字母或者汉字与汉字之间的间距）word-spacing:1em;（定义单词与单词之间的间距）⼗⼀、定义⾏间距line-height:normal（默认值，⼀般为1.2em）|length（表⽰百分⽐数字，或者由浮点数字和单位标识符组成的长度值，允许为负值）;例如：p{font-size:12pt;line-height:12pt;}⼗⼆、定义缩进text-indent:length（表⽰百分⽐数字，或者由浮点数字和单位标识符组成的长度值，允许为负值）;PS:建议设置缩进单位时，以em为设置单位，它表⽰⼀个字距，这样⽐较精确确定⾸⾏缩进效果。
HTML5+CSS3网页设计基础-第九章-表单(2024版)
HTML5+CSS3网页设计基础
第9章 表单
第6页
9.1 表单标签
autocomplete：指定表单是否有自动完成功能。取值为on 时，表单有自动完成功能，即将表单控件输入的内容记录下来， 当再次输入时，会将输入的历史记录显示在一个下拉列表中， 以实现自动完成输入。取值为of时表单无自动完成功能。 参考示例：9-1-1.html
HTML5+CSS3网页设计基础
第9章 表单ຫໍສະໝຸດ 第15页9.2.3 其他表单元素
2. select元素 select元素用于创建单选或多选列表，当提交表单时，浏 览器会提交选定的项目。网页上经常看到的城市、出生年月等 下拉列表框就是用select定义的。下拉列表框需要使用 select 标签和option标签定义，格式如下。 <select name="下拉框名" size="行数"
HTML5+CSS3网页设计基础
第9章 表单
第21页
表单的技术。
HTML5+CSS3网页设计基础
第9章 表单
第9页
9.2.2 input元素及其属性
<input>元素是表单中最常见的元素，它必须嵌套在表单 标签中使用，用于定义一个用户的输入项。网页中常见的单 行文本框、单选按钮、复选框等都是通过它定义的
<input>元素的基本语法格式如下。 <input type=“输入类型” name=“控件名” value=“ 默认值” ……> type属性：指定 input元素的输入类型。 name属性：属性的值是相应程序中的变量名。 value属性：属性的值是默认输入值。
HTML5+CSS3网页设计基础
HTML5+CSS3网页设计实例教程-第1章-网页设计新时代(2024版)
HTML5+CSS3网页设计实例教程
第1章 网页设计新时代
第11页
传统HTML与XHTML
标记语言在我们的日常计算中无处不在。在传统的文字处 理文档中，用于描述结构与外观的标记代码常常不是后台 编码的。在Web文档中，传统HTML和XHTML（XHTML 是HTML基于XML语法规则建立的标记语言）的标记代码 是明显可见的。这些非后台的标记语言能够将Web页面的 结构与外观传递给Web浏览器。
设计网页首先要关注不同用户如何使用Web。有些人使用 不同的设备或低速的Web连接；有些人只使用键盘；有些 人使用屏幕阅读器阅读Web页面；有些人听不到音频内容 。因此要熟悉形形色色的Web用户。不要只是假设所有人 都用相同的模式在使用Web。
HTML5给Web网页的可访问性带来的更广泛的便利。
HTML5+CSS3网页设计实例教程
第1章 网页设计新时代
第8页
结构化文档的Web
可以把Web想象成一个由文档组成的大海，文档之间相互 关联，并且与日常生活中遇到的打印文档有着很多相似性
新闻网站中文章的结构与报纸上的文章结构类似。每一篇 文章包含标题、文本段落以及一些图片（有时可能以视频 代替图片）。相同点非常明显，而唯一的不同就是，在报 纸上可以在一个版面上拥有多篇故事，而在网页上每篇故 事则倾向于独占一个页面。新闻网站还经常使用首页显示 新闻头条以及故事梗概。
在编写Web页面时，HTML代码会告知Web浏览器需要显 示的信息结构，即什么文本放在标题、段落或表格中等， 从而浏览器能够恰当地将其呈现给用户。
HTML5+CSS3网页设计实例教程
第1章 网页设计新时代
第9页
主要内容
1.1 WEB网页设计原则 1.2 HTML5概述 1.3 HTML5页面的特征 1.4 WEB网页设计基础 1.5 编写一个简单的Web页面 1.6 本章小结
HTML+CSS+DIV网页设计与布局PowerPoint 97 2000 2003格式第9章 设置文字和文本样式
9.1.4 设置文字颜色
• CSS样式表中设置文字颜色的属性是color，其语法是： • color:颜色代码/颜色名称
9.1.5 设置斜体
• 在CSS样式表中，也可以将文字设置为斜体显示，而且倾斜的程度 有两种，即倾斜字体和偏斜体。其设置语法是： • font-style:normal/italic/oblique
字体粗细取值 100~900 normal bold bolder lighter 取值的含义 数值越小字体也越细，要求所取的数值是整百的，即只有100、200、300等 正常字体效果 加粗字体，字体的粗细与设置为700基本相同 特粗字体，就是在加粗字体的基础上再加粗，基本相当于设置为900的效果 细体字，相对默认字体更细一些
• font:字体属性取值；
9.2 设置文本样式
• 文本样式的设置是对一段文字整体进行设置。文本样式的设置包括 设置阴影效果、大小写转换、文本缩进、文本对齐方式等。
9.2.1 设置阴影效果
• CSS2中允许设置文字的阴影，让文字看起来更有立体感。设置阴 影所用到的属性为text-shadow，其语法代码为。 • text-shadow : none | color | length | length | length | inherit
9.1.1 字体设置
• 在HTML里可以使用<font face="字体名">来设置文字字体，而在 CSS中设置字体所用到的属性是font-family，其语法代码如下： • font-family:"字体1","字体2","字体3",……
9.1.2 文字大小
• 设置文字大小是指为页面中的文字设置绝对大小或相对高度。相对 高度是指文字相对于父对象文字尺寸来设置的，包括larger和 samller，它使用成比例的em单位计算。绝对高度是设置的是固定 的大小，包括xx-small、x-samll、larger等。
网页设计与制作案例教程(HTML5+CSS3)第9章盒子模型
盒子模型
WEB 7
盒子模型
一个标准的W3C盒子模型由content、padding、border和margin这4个属性 组成。各属性含义如下： ➢ content（内容） - 盒子的内容，显示文本和图像。 ➢ padding（内边距） - 内容也边框之间的距离。会受到框中填充的背景颜色影响。 ➢ margin（外边距） - 盒子与其它盒子间的距离。margin是完全透明的，没有背
9.2.2 盒子模型的计算
注意：IE的盒子模型与标准的W3C盒子模型有区别，IE的盒 子模型中，width和height指的是内容区域+border+padding 的宽度和高度。 在盒模型中，外边距可以是负值，而且在很多情况下都要使 用负值的外边距。
9.2.2 盒子模型的计算
请按照W3C标准计算一下这个元素实际占用的空间
景色。 ➢ border（边框） - 盒子的边框，它具有border-style、border-width、
border-color属性。边框是受到盒子的背景颜色影响的。
8
9
9.2.2 盒子模型的计算
在CSS的标准盒子模型中，width和height指的是内容区域（content）的宽度和高度， 不是盒子的实际大小。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增 加元素框的总尺寸。
在标准的W3C盒子模型中： 元素框的总宽度 = 元素的width + padding的左右边距的值 + margin的左右边距 的值 + border的左右宽度； 元素框的总高度 = 元素的height + padding的上下边距的值 + margin的上下边距 的值 ＋ border的上下高度。
网页设计与制作案例教程(HTML5 CSS3)素材
网页设计与制作案例教程（HTML5CSS3）素材本文旨在介绍《网页设计与制作案例教程（HTML5 CSS3）素材》的主题和背景。
本教程的主题是网页设计与制作案例教程，重点涵盖HTML5和CSS3素材的使用。
随着互联网的迅速发展，网页设计和制作变得越来越重要。
作为一种应用广泛的技术，HTML5和CSS3提供了丰富的功能和特性，可以使网页呈现出更加精美和交互性强的效果。
因此，研究和掌握HTML5和CSS3的使用对于提高网页设计和制作的质量和效果至关重要。
本教程将为读者提供一系列实际案例，展示如何利用HTML5和CSS3素材设计和制作各种类型的网页。
通过研究这些案例，读者将能够掌握重要的网页设计原理和技巧，提升自己的设计能力，并能够应用到实际项目中。
教程内容涵盖了HTML5和CSS3的基础知识、常用元素和样式以及高级特性的运用。
每个案例都包含了详细的步骤和说明，帮助读者理解和掌握相关的技术和方法。
希望通过本教程，读者可以研究到实用的网页设计和制作技巧，并能够应用到自己的项目中，提升自己的能力和竞争力。
本部分将介绍HTML5的基本概念和语法，包括标签、属性和元素的使用。
HTML5是一种用于构建网页的标记语言，它在HTML4的基础上进行了增强和改进。
HTML标签是HTML文档的基本结构元素，它们用于定义网页的内容和结构。
在HTML5中，标签可以包含属性，用于提供更多的信息和控制网页的呈现方式。
属性可以对标签进行设置，如字体、颜色、大小等。
除了标签和属性，HTML5还引入了一些新的元素，用于创建更丰富和动态的网页内容。
例如，``元素可以用于嵌入视频文件，``元素可以用于绘制图形等。
掌握HTML5的基本概念和语法是网页设计与制作的基础，它将为你提供开发高质量和现代化网页的能力。
待续。
本部分将介绍CSS3的基本概念和语法，包括选择器、属性和样式表的使用。
CSS3（Cascading Style Sheets 3）是一种用于描述网页样式的标记语言，它是CSS的最新版本。
HTML5+CSS3网页设计与制作案例教程
随着信息通信技术的不断成熟，以及互联网与各行各业的日益融合，越来越多的人接触或从事网页设计制作工作。
在介绍网页制作技术之前，我们有必要先了解一下相关的基础知识。
本章主要介绍网页相关知识、网页的基本元素以及制作网页常用的技术和软件。
本章学习目标◎ 了解互联网、因特网、万维网的关系和区别。
◎ 了解网站、网页和HTML的基本概念。
◎ 了解静态网页和动态网页的区别和联系。
◎ 了解HTTP、FTP、IP地址、域名和URL等基本概念。
◎ 能够安装并使用浏览器查看网页。
◎ 了解从媒体内容和布局元素两个角度出发，网页所包含的基本元素。
◎ 了解网页开发所使用的基本技术和工具。
HTML5+CSS3网页设计与制作案例教程在学习如何设计一个网页之前，我们首先要对网站、网页及其相关知识具有最基本的认识。
1.1.1 互联网(internet)、因特网(Internet)、万维网(WWW)互联网指由若干计算机网络相互连接而成的网络。
进一步讲，凡是能彼此通信的设备组成的网络就叫互联网，即使仅有两台机器，不论用何种技术使其彼此通信，就可以称为互联网。
互联网的英文用开头字母小写的internet表示，不是专有名词，泛指由多个计算机网络相互连接而成的一个大型网络。
因特网和其他类似的由计算机相互连接而成的大型网络系统，都可算是互联网，因特网只是互联网中最大的一个网络。
因特网是目前全球最大的一个电子计算机互联网，是由美国的ARPA网发展演变而来的。
但因特网并不是全球唯一的互联网络，例如在欧洲，跨国的互联网络就有“欧盟网”(Euronet)、“欧洲学术与研究网”(EARN)、“欧洲信息网”(EIN)，在美国还有“国际学术网”(BITNET)，世界范围的还有“飞多网”等。
Internet专指全球最大的也就是我们通常所使用的互联网络——因特网，“因特网”是作为专有名词出现的，因而开头字母必须大写。
万维网是指环球信息网，英文全称为World Wide Web，简称WWW。
html5+css3课件-10
第9章 利用JavaScript实现Canvas功能
返 回
绘图基本图形常用的方法和属性
方法与属性
描述
beginPath()
开始绘制一条新的路径
moveTo(int x,int y)
将画笔移动到指定坐标点(x,y)，该点作为路 径的起点。
lineTo(int x,int y)
从当前点到指定坐标点(x,y)定义一条直线
第9章 利用JavaScript实现Canvas功能
返 回
9.2.3 绘制矩形
strokeRect()、fillRect( )、clearRect( )
strokeRect(x,y,width,height)用于绘制一个矩形边框， 参数x、y定义该矩形的起点坐标，决定了矩形的位置； width定义矩形的宽度，是(x,y)向右的距离；height定义 矩形的高度，是(x,y)向下的距离。
第9章 利用JavaScript实现Canvas功能
返 回
9.3 图形的变换
方法 translate() scale() rotate(angle)
描述
重新定义画布上的(0,0)位置
缩放当前绘画，定位也会被缩 放。如scale(2,2)，是将绘画定 位于距离画布左上角两倍远的位 置，绘画也放大两倍。 旋转当前绘画，angle为旋转角 度，以弧度计
第9章 利用JavaScript实现Canvas功能
返 回
9.3.1 保存与恢复Canvas状态
Canvas状态是指当前画面所有样式、变形和裁切的一个快 照，以堆（stack）的方式保存，save和restore方法用于 保存和恢复Canvas状态
语法： context.save(); context.restore();
HTML5+CSS3网页设计基础 第九章 表单
<fom>标签中常用属性的含义如下。
HTML5+CSS3网页设计基础 第9章 表单
第5页
9.1 表单标签
name属性：给定表单名称，表单命名之后就可以用脚本语
言(如 JavaScript或 VBScript)对它进行控制。
action属性：指定处理表单信息的服务器端应用程序。
method属性：指定表单数据的提交方式， method的值可
表9-1 input元素的相关属性
HTML5+CSS3网页设计基础
第9章 表单
第12页
9.2.2 input元素及其属性
表9-1 input元素的相关属性
HTML5+CSS3网页设计基础
第9章 表单
第13页
9.2.2 input元素及其属性
表9-1 input元素的相关属性
HTML5+CSS3网页设计基础
当再次输入时，会将输入的历史记录显示在一个下拉列表中，
以实现自动完成输入。取值为of时表单无自动完成功能。
参考示例：9-1-1.html
HTML5+CSS3网页设计基础
第9章 表单
第7页
9.2 表单元素
本节主要内容：
案例分析
input元素及其属性
其他表单元素 案例制作
HTML5+CSS3网页设计基础
HTML5+CSS3网页设计基础
第9章 表单
第17页
9.2.4 案例制作
制作完成演示案例:用户注册。 参考代码 9-2.html
HTML5+CSS3网页设计基础
第9章 表单
CSS3文字与字体的使用
@font-face { font-family: HyHelvetica; src: local("Helvetica Neue"), url(HqOpenHodernaReqular.ttf);
} 属性值的指定 @font-face 属性中可以指定的属性值：
属性值
说明
取值范围
fontfamily
@font-face 属性不仅可以用于显示服务器端的字体，也可以用来显示客户 端本地的字体。需要将字体文件路径的 URL 属性值修改为 local()形式的属性值， 并且在 local 后面的括号中写入使用的字体。
@font-face{ font-family: Arial; src: local('Arial');
normal：使用浏览器默认值
bold：使用粗体字符
设 置 字 体 bolder：使用更粗字符
的粗细
lighter：使用更细字符
100~900：从细到粗定义字符，使用的值必须为
100 的整数倍，400 等于 normal，700 等于 bold
fontstretch
normal：默认值，把缩放比例设为标准
值
换行规则
normal
使用浏览器默认换行规则
keep-all
只能在半角空格或连字符处换行
break-all 允许在单词内换行 让长单词与 URL 地址自动换行—word-wrap 属性 对于字母来说，浏览器在半角空格或连字符的地方进行换行。因此，浏览器 不能给较长的单词自动换行。当浏览器窗口比较窄的时候，文字会超出浏览器的 窗口，浏览器下部出现滚动条，让用户通过拖动滚动条的方法来查看没有在当前 窗口显示的文字。 word-wrap 属性可以实现长单词与 URL 地址的自动换行。 div{
第9章 Div标签
《网页设计与制作案例教程》（第2版）
《网页设计与制作案例教程》（第2版）
本例包含了两个Div标签，分别设置其ID为title和 content。这两个元素的盒子模型如图9-15所示。
《网页设计与制作案例教程》（第2版）
可以对margin、border、padding属性进行整体 设置，依次为上、右、下、左顺时针方向，也可以单独 设置某一侧的属性值，如margin-left。本实例关于盒 子模型的部分CSS代码如下：
《网页设计与制作案例教程》（第2版）
9.5.3 元素的定位
网页的元素必须有合理的位置，从而构成有序的页面。 网页元素的定位是通过postion、float和z-index属性 完成的。通过元素的定位，可以对网页中的块元素进行 排版。
1．float属性 float定位是CSS排版中的最重要的属性，用来定义 元素向哪个方向浮动。float属性有三个值，left、 right、none，当块元素设置了向左或向右浮动时，元 素就会向其父元素左侧或右侧浮动。
《网页设计与制作案例教程》（第2版）
9.5.2 盒子模型
CSS+Div网页布局的精髓在于盒子模型。盒子模型 （box model）用于描述一个为HTML元素形成的矩形 盒子。盒子模型还涉及为各个元素调整外边距 （margin）、边框（border）、内边距（padding） 和内容（content）的具体操作。图9-13显示了盒子 模型的结构。
《网页设计与制作案例教程》（第2版）
9.1.1 Div标签与网页布局
2．框架布局 框架布局的原理是使用网页嵌套网页的布局技术。随着 时间的发展，框架布局由于浏览器的支持性差，已经逐 渐退出网页设计的历史舞台。
《网页设计与制作案例教程》（第2版）
09-CSS字体与文本
2022/7/23
9.2 CSS文本
若有CSS代码与HTML代码：
2022/7/23
9.2 CSS文本
这段代码在浏览器中的显示效果如图所示：
2022/7/23
9.2 CSS文本
white-space 属性设置如何处理元素内的空白，其取 值如下表：
2022/7/23
9.2 CSS文本
overflow 属性规定当内容溢出元素框时怎样处理。 其取值如下表：
默认地，背景图像位于元素的左上角，并在水平和垂 直方向上重复。background-repeat 属性设置是否及 如何重复背景图像，该属性的取值如下表所示
2022/7/23
9.3 CSS背景
background-position 属性设置背景图像的起始位置 。背景图片在元素中的位置包括水平位置和垂直位置 ，因此设置background-position 属性时，需要指定 两个位置，改属性取值如下表：
2022/7/23
9.2 CSS文本
word-spacing 属性增加或减少单词间的空白（即字 间隔），letter-spacing 属性增加或减少字符间的 空白。设有CSS代码分别设置字间隔和字符间距：
若HTML代码为：
2022/7/23
9.2 CSS文本
此HTML代码在浏览器中的浏览效果如图所示：
9.1 CSS字体
2022/7/23
9.1 CSS字体
例9-1在浏览器中的浏览效果如图所示
2022/7/23
9.2 CSS文本
CSS文本主要设置文本颜色、对齐方式、字符间距以 及文本修饰效果等。text-indent 属性规定文本块中 首行文本的缩进。该属性允许使用负值，如果使用负 值，那么首行会被缩进到左边；text-indent 可以使 用百分比值， பைடு நூலகம்分数要相对于缩进元素父元素的宽 度。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第25页
主要内容
9.1 9.2 9.3 9.4 9.5 9.6 9.7 用CSS控制文本 CSS文本格式化 文本样式化实例 使用@font-face自定义字体 使用CSS3调整字体 使用CSS3控制文本格式 本章小结
HTML5+CSS3网页设计实例教程
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第7页
font-size属性
font-size属性能够为字体设置尺寸。
浏览器中字体尺寸集合的效果
HTML5+CSS3网页设计实例教程 第9章 文本与字体
第8页
font-weight属性
大多数字体都有不同的变体，如粗体及斜 体。
font-weight属性的各种取值在浏览器中的效果
指定文本是否应具有下划线、上划线或中划线
指定从左侧边框起文本的缩进 指定元素内容应全部为大写、小写，或首字母大写 指定文本应具有投影 控制字符间宽度(即印刷设计师熟知的“字距”(tracking)) 控制单词间的距离 指定空格是否应该被压缩、保留或阻止换行 指定文本行文方向(类似于dir特性)
HTML5+CSS3网页设计实例教程
字型和字体
“字型”(typeface)是一个字体族，如 Arial字体族。 “字体”(font)是该字体族的一个特定成员 ，如Arial 12号粗体。
serif字体
HTML5+CSS3网页设计实例教程
sans-serif字体 三类字型
第9章 文本与字体
等宽字体
第6页
font-family属性
第30页
字体格式、兼容性以及@font-face语法 的起源
1996年建立CSS Level 2规范时，Adobe 、Bitstream、Microsoft和其他厂商一起 提出了@font-face，@font-face规则的声 明如下：
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第31页
第11页
主要内容
9.1 9.2 9.3 9.4 9.5 9.6 9.7 用CSS控制文本 CSS文本格式化 文本样式化实例 使用@font-face自定义字体 使用CSS3调整字体 使用CSS3控制文本格式 本章小结
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第12页
9.2 用CSS文本格式化
none
移除元素中的任何文本装饰
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第17页
text-indent属性
text-indent属性能够在元素中缩进文本的 第一行。在下面的例子中，第二个段落应 用了该属性：
text-indent属性用于缩进第二段效果
HTML5+CSS3网页设计实例教程 第9章 文本与字体
第9章 文本与字体
第23页
direction属性
direction属性与dir特性很类似，用于指定 文本应该流动的方向。
direction属性应用效果
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第24页
文本伪类
在学习有关文本的知识时，有两个伪类可 以有助于对文本的使用。这些伪类能够以 与元素中其他部分不同的方式渲染元素中 的第一个字符或第一行内容。 first-letter伪类 first-line伪类
第9章 文本与字体
第26页
9.3 文本样式化实例
CSS在Web中最常见的任务就是设置文本的 样式。在接下来的实例中，为示例网站设置 文本样式。
设置文本样式后的Example Café网页效果
HTML5+CSS3网页设计实例教程 第9章 文本与字体
第27页
主要内容
9.1 9.2 9.3 9.4 9.5 9.6 9.7 用CSS控制文本 CSS文本格式化 文本样式化实例 使用@font-face自定义字体 使用CSS3调整字体 使用CSS3控制文本格式 本章小结
第9章 文本与字体
第13页
color属性
color属性能够指定文本的颜色。该属性最常见的 取值是十六进制颜色代码或颜色名称。 例如，下面的规则会使元素内容变成红色。
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第14页
text-align属性
text-align属性对于文本的功能与已经废弃的 align特性类似。它会将文本在包含元素或浏览器 窗口中进行对齐。
第18页
text-shadow属性
text-shadow属性应被用于创建投影，即文 本背后的一个稍微偏移的深色版本。该属 性经常用于打印媒体，而它的受欢迎程度 使它获得了属于自己的CSS属性。该属性 的值相当复杂，因为它需要一个颜色参数 以及三个长度参数：
HTML5+CSS3网页设计实例教程
第9章 文本与字体
font-family属性能够指定应用CSS规则的 元素中所有文本所应使用的字型。
通用字体名称
通用字体名称 serif sans-serif monospace cursive fantasy 字体类型 带有衬线字体 无衬线字体 固定宽度字体 模拟手写字体 用于标题等的装饰字体 Times Arial Courier Comic Sans Impact 示 例
第19页
text-transform属性
text-transform属性能够指定元素内容的大 小写形式。
text-transform属性的取值
值 none 不发生变化 作 用
capitalize
uppercase lowercase
大写每个单词的首字母
将元素全部内容设置为大写 将元素全部内容设置为小写
使用字距在浏览器中的效果
HTML5+CSS3网页设计实例教程 第9章 文本与字体
第21页
word-spacing属性
word-spacing属性设置单词间的距离，它 的值应该是一个距离单位。在下面的例子 中，第一段中单词间为标准间距。第二段 中单词间具有10像素的间距。而最后一段 为普通间距基础上削减1像素。
white-space属性的取值
值 normal pre 遵循正常的空格压缩规则 与HTML的<pre>元素相同，保留空格。但格式仍与该元素的设置相同(与<pre>元 素不同，默认情况下不是以等宽字符显示) nowrap 只有在显式使用<br>元素指定时才对文本进行换行，否则文本不会换行 作 用
HTML5+CSS3网页设计实例教程
第9章 文本与字体
HTML5+CSS3网页设计实例教程
第2页
本章的学习目标
了解字型和字体的概念 掌握使用CSS控制文本基本方法 了解Web字体的概念及发展历史 如何使用@font-face指令自定义字体 掌握使用CSS3控制字体的不同方式
HTML5+CSS3网页设计实例教程
第9章 文本与字体
解析font face语法: @font-face声明
下面看看@font-face规则。在样式表中声明 @font-face的方式如下：
在这个规则中，字体系列声明了使用这个定 制字体时用于引用它的名称。例如，在这个 规则中指定的字体可以用如下方式使用：
第9章 文本与字体
HTML5+CSS3网页设计实例教程
第32页
@font-face的可靠语法
学习了上一节，编写应用于所有浏览器的 @font-face规则似乎并不是很困难。其实 ，这个任务其实很难。需要确保浏览器只 下载指定的几个资源之一，这样页面会很 快加载。有一种语法可以完成这个任务。
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第29页
Web字体
Web字体是指，在@font-face规则中声明 后，就可以使用的所有字体。所有这些字 体常常为Web的使用进行了优化，因此文 件尺寸很小，并指定了别名，以便使用小 字号时可以正确显示。
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第9章 文本与字体
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计实例教程
第9章 文本与字体
本章概述
长期以来，Web页面排版是一个被很多人忽略的 领域。尽管Adobe Photoshop 或InDesign等编 辑软件在字体方面有很多改进，但浏览器仍然必 须使用非常基本、有限的字体技术。但是，这些 都随着CSS3的出现而发生了改变。在深入介绍 CSS3提供的字体新工具之前，先要了解“字体 ”的含义和Web字体的概念。本章中，将介绍如 何使用CSS来控制页面的样式风格，包括字体的 颜色与大小、线形的宽度与颜色，以及页面中各 项的间距使用CSS3调整字体的不同方式。
文本格式化属性
属 性 指定文本颜色 指定文本在包含元素中的水平对齐 指定文本在包含元素中的垂直对齐 作 用 color text-align vertical-align
textdecoration text-indent text-transform text-shadow letter-spacing word-spacing white-space direction
第9章 文本与字体
第16页
text-decoration属性
text-decoration属性的取值