《HTML5+CSS3网页设计与制作》课件_第4章 设计文本样式.pptx

第4章设计文本样式;掌握使用CSS设置文本颜色、字型、大小、大小写、粗体和斜体等样式;本章任务;任务1设计字体样式;任务描述;任务分析;如何定义字体？

使用font-family属性来定义字体类型

使用font属性也可以定义字体类型

font-family

用法：font-family：name

name表示字体名称，可指定多种字体，多个字体将按优先顺序排列，以逗号隔开，如果字体名称包含空格，则应使用引号括起。;案例设置字型：

部分代码如下：

;如何定义字体大小？

HTML5之前：使用font标记，它有大小7个级别的字号，具有很大的局限性

HTML5之中：使用font-size属性设置字体大小

font-size

语法：font-size:长度|绝对尺寸|相对尺寸|百分比;设置字体尺寸：

部分代码如下：

;如何定义字体颜色？

使用color属性来设置

color还会应用到元素的所有边框，除非被其它边框颜色属性覆盖

color

语法：color:color_name|HEX|RGB|RGBA|HSL|HSLA|transparent

常用：color:color_name|RGB|transparent;设置字体颜色：

部分代码如下：

;如何定义字体粗细？

使用font-weight属性来定义字体粗细

语法：font-weight:normal|bold|bolder|lighter|100|200....900

语法说明

normal：正常的字体。相当于数字值400

bold：粗体。相当于数字值700。

bolder：定义比继承值更重的值

lighter：定义比继承值更轻的值

100-900：用数字表示字体粗细;设置字体粗细效果：

部分代码如下：

;如何定义斜体字体？

使用font-style属性来定义字体粗细

语法：font-style：normal|italic|oblique

语法说明

normal表示默认值，即正常的字体

italic表示斜体

oblique表示倾斜的字体;设置字体尺寸：

部分代码如下：

;如何定义字体大小写？

使用font-variant属性来定义字大小写

语法：font-variant：normal|small-caps

语法说明

normal表示默认值，即正常的字体

small-caps表示小型的大写字母字体

;使用小型大写字母：

部分代码如下：

;;任务2设计文本样式;任务描述;任务分析;定义文本水平对齐;;;;定义字符间距;案例设置字符间距;单词间距;案例设置行高;定义行高;;;;任务实现;任务3案例实战——文本页面的排版;案例描述;案例分析;案例分析;案例实现;总结;千里之行始于足下