工信版（中职）Web前端设计基础 项目七-1电子课件

YCF （中职）Web前端设计基础 项目七-1电子课件 1 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 CSS 3图文混排 项目七 授课教师：姓名 WEB前端设计基础 学习情境一 授课教师：姓名 单击此处编辑母版标题样式 Contents 1.项目描述 2.知识准备 3.项目实施 4.项目拓展 5.项目小结 6.技能训练 Contents 1.项目描述 2.知识准备 3.项目实施 4.项目拓展 5.项目小结 6.技能训练 一 项目描述 本项目学习要点 CSS 3美化段落； CSS 3美化图片； CSS 3图文混排。 CSS 3美化文本； 二 知识准备 CSS 3美化文本； CSS 3美化段落； CSS 3图文混排。 CSS 3美化图片； CSS 3美化文本 1.设置文本字体 在CSS 3样式中，使用font-family属性定义文本的字体类型，格式如下： {font-family：字体1,字体2,字体3;} font-family可定义多种字体，多个字体将按优先顺序排列，以逗号隔开（逗号为英文逗号）。如果字体名称包含空格，如Times New Roman，则应该将名称用引号括起来。 CSS 3美化文本 2.设置文本大小 在CSS 3样式中，使用font-size属性定义文本的大小，格式如下： {font-size：像素值/关键字;} font-size的属性值可以使用两种方式，一种是使用像素为单位的数值；二是使用关键字，如表所示。 关键字 说 明 xx-small 最小。绝对字体尺寸，根据对象字体进行调整 x-small 较小。绝对字体尺寸，根据对象字体进行调整 small 小。绝对字体尺寸，根据对象字体进行调整 medium 默认值，正常。绝对字体尺寸，根据对象字体进行调整 large 大。绝对字体尺寸，根据对象字体进行调整 x-large 较大。绝对字体尺寸，根据对象字体进行调整 xx-large 最大。绝对字体尺寸，根据对象字体进行调整 larger 相对字体尺寸。相对于父对象中字体尺寸进行相对增大，使用成比例的em单位计算 smaller 相对字体尺寸。相对于父对象中字体尺寸进行相对减小，使用成比例的em单位计算 length 百分数或由浮点数和单位标识符组成的长度值，不可为负值。百分比取值是基于父对象中的字体尺寸 CSS 3美化文本 3.设置文本粗细 在CSS 3样式中，使用font-weight属性定义文本的粗细程度，格式如下： {font-weight:粗细值/关键字;} 粗细值可以使用两种方式，一是使用100~900 的数值（100、200、…、900），值越大就表示越粗，值越小就表示越细，400相当于正常字体normal，是浏览器默认的字体粗细， 700相当于bold；二是使用关键字，关键字如表所示。如果没有设置该属性，则使用默认值normal。 关键字 说 明 normal 默认值，标准字体 lighter 定义更细的字体，相对值 bold 定义粗体字体 bolder 定义更粗的字体，相对值 CSS 3美化文本 4.设置文本颜色 在CSS 3样式中，使用color属性定义文本的颜色，格式如下： { color:颜色值;} 颜色值可以使用颜色的英文名称、一个十六进制的RGB值等多种方式来表示，如表所示。 颜色值 说 明 color_name 颜色值为颜色名称的英文（例red，表示红色） hex_number 颜色值为十六进制值（例#ff0000或#f00，表示红色） rgb_number 颜色值为RGB代码（例rgb(255,0,0)，表示红色） rgba_number 颜色值为RGBA代码（例rgba(255,0,0,0.5)，表示红色） inherit 从父元素继承颜色 hsl_number 颜色值为HSL代码（例hsl(0,75%,50%)） hsla_number 颜色值为HSLA代码（例hsla(120,50%,50%,1)） CSS 3美化文本 5.设置文本样式 在CSS 3样式中，使用font-style属性定义文本的样式，格式如下： { font-style:属性值;} 属性值如表所示。 属性值 说 明 normal 默认值，标准的字体样式 italic 斜体的字体样式 oblique 倾斜的字体样式 inherit 从父元素继承的字体样式 CSS 3美化文本 6.设置文本阴影效果 在CSS 3样式中，文本阴影效果属于文本的高级样式，如果使用上面的CSS样式进行定义，不能得到正确显示效果，这就需要使用特定的CSS标签来完成。 使用CSS 3样式中的text-shadow属性定义文字的阴影效果，格式如下： {