中职 网页设计与制作案例教程第4章 .pptx

中职 网页设计与制作案例教程第4章 工信版第4章 使用CSS设置文字样式WEB3目录4.1基础项目1：制作“古人书房佳联赏析”网页4.2知识库：CSS文字样式4.3基础项目2：制作“创业人物”网页4.4知识库：CSS段落样式与元素特性4.5提高项目：制作“诗词鉴赏”网页4.6拓展项目：制作“智能交通”网页WEB44.1 基础项目1：制作“古人书房佳联赏析”网页WEB54.1 基础项目1：制作“古人书房佳联赏析”网页（1）掌握CSS文字样式常用属性及使用方法。（2）了解网页元素的长度单位及元素特性。知识技能目标64.2 知识库：CSS文字样式CSS文字样式大多以font为前缀，也可以为文字设置多种其它样式。74.2.1 文字样式常用属性规定元素的字体系列语法格式：font-family:字体1,字体2,字体3;例：p font-family:华文隶书,华文行楷,华文仿宋;指定的系列名称 通用字体系列名称font-family属性具体字体的名称，比如：times、courier、arial。serif、sans-serif、cursive、fantasy、monospace84.2.1 文字样式常用属性设置文本的斜体样式语法格式：font-style:normal|italic|oblique;font-style属性属性值 描述normal默认值。浏览器显示一个标准的字体样式。it alic浏览器会显示一个斜体的字体样式。oblique浏览器会显示一个倾斜的字体样式。inherit规定应该从父元素继承字体样式。94.2.1 文字样式常用属性font-style属性This is a paragraph,normal.This is a paragraph,normal.This is a paragraph,oblique.代 码网 页 效 果104.2.1 文字样式常用属性font-weight属性设置文本粗细语法格式：font-weight:normal|bold|bolder|lighter|number;属性值 描述normal默认显示，定义标准字符bold定义粗体字符bolder定义更粗的字符Ligh t er定义更细的字符数字值100 900 定义由粗到细的字符。400 等同于 normal，700 等同于 bold。inherit规定应该从父元素继承字体的粗细。114.2.1 文字样式常用属性font-weight属性This is a paragraph,normal.This is a paragraph,bold.This is a paragraph,bolder.This is a paragraph,900.代 码网 页 效 果124.2.1 文字样式常用属性font-size属性设置文字大小语法格式：font-size:尺寸|length（数值）|%（百分比）;属性值 描述xx-smallx-smallsmallmediumlar g ex-lar g exx-lar g e把文字的大小设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。smaller 把 font-size 设置为比父元素更小的尺寸。lar g er 把 font-size 设置为比父元素更大的尺寸。leng th 把 font-size 设置为一个固定的值。%把 font-size 设置为基于父元素的一个百分比值。未设置父元素字体大小时，相对于浏览器默认字体大小。inherit规定应该从父元素继承字体尺寸。134.2.1 文字样式常用属性这是测试文字这是测试文字这是测试文字代 码网 页 效 果font-size属性144.2.1 文字样式常用属性color属性设置文字颜色语法格式：color:颜色名称|RGB值|十六进制数;值 描述c olor_name 规定颜色值为颜色名称的颜色（比如 red）。he x_number 规定颜色值为十六进制值的颜色（比如#ff0000）。r gb_number 规定颜色值为rgb代码的颜色（比如 rgb(255,0,0)）。inherit规定应该从父元素继承颜色。154.2.1 文字样式常用属性这是测试文字这是测试文字这是测试文字代 码网 页 效 果color属性164.2.1 文字样式常用属性font-variant属性设置小型大写字母文本语法格式：font-variant:normal|small-caps;值 描述normal 默认值。浏览器会显示一个标准的字体。small-caps 浏览器会显示小型大写字母的字体。inherit 规定应该从父元素继承 font-variant 属性的值。174.2.1 文字样式常用属性This is a paragraphThis is a paragraph代 码网 页 效 果font-variant属性184.2.1 文字样式常用属性This is a paragraph.代 码网 页 效 果font属性组合设置文字的属性194.2.2 网页安全色Web安全色用16进制值00、33、66、99、CC和FF来表达三原色（RGB）中的每一种。输出结果包括6种红色调、6种绿色调、6种蓝色调。6*6*6的结果就给出了216种特定的颜色“只有Web颜色”勾选前后拾色器的对比204.2.3 CSS网页元素的长度单位绝对长度单位绝对长度单位定义元素大小后就固定了，大小显示不受其他因素影响，使用范围比较有限。长度单位 描述in inch，英寸cm centimeter，厘米mm millimeter，毫米p t point，印刷的点数，1pt=1/72inchpc pica，1pc=12pt214.2.3 CSS网页元素的长度单位相对长度单位相对长度单位是指网页元素的大小相对于某个参照物来确定，如父元素、使用屏幕分辨率或浏览器作为参照物等。长度单位 描述p x以像素为单位。当使用px作为文字或其他网页元素的长度单位时，屏幕分辨率越大，相同像素的网页元素就显得越小。em以字符为单位，以父元素字体大小的倍数来定义字体大小。例如：父元素文字大小为12px，则1em=12px，2em=24px。如果没有设置父元素的字体大小，则相对于浏览器默认字体大小的倍数。%以百分比为单位，相对于父元素字体大小的百分比来定义当前文字或其他网页元素的大小。如果没有设置父元素字体大小，则相对于浏览器默认字体大小的百分比。