13-14节《网站开发》课程地位、目标及章节.ppt

第13-14节 文字属性与段落属性 上节回顾 CSS的含义、优点及语法结构 CSS选择器 在XHTML文件中使用CSS的方法 上节案例学生展示 学生展示完善后的上节案例 本节目标 掌握文字属性 掌握段落属性 本节案例 文字段落的排版 文字属性 字体 font-family 文字属性 字号：font-size 文字属性 文字颜色color 文字属性 文字加粗 font-weight 文字属性 文字倾斜 font-style 段落属性 文字修饰 text-decoration 文字属性 文字复合属性 段落属性 文本缩进 text-indent 段落属性 文本行高 line-height 段落属性 水平对齐 text-align 段落属性 字符间隔letter-spacing 案例制作 制作文字的排版样式 总结 案例扩展 文字段落属性的综合应用 5个问题 如何设置14px、宋体、蓝色文字的CSS样式？ 如何设置文字的倾斜样式？ 如何为文字设置下划线？ 如何设置段落的行间距？ 在如何设置段落首行缩进？ 下节预习 掌握背景属性 掌握边框属性 在HTML中，字体的大小是由font标记中的size属性来控制的。在css里可以使用font-size属性来自由控制字体的大小。 语法：font-size：大小的取值 说明：font-size的取值范围如下： xx-small：绝对字体尺寸，最小; x-small：绝对字体尺寸，较小; Small：绝对字体尺寸，小; Medium：绝对字体尺寸，正常默认值; Large：绝对字体尺寸，大; x-large：绝对字体尺寸，较大; xx-large：绝对字体尺寸，最大; Larger：相对字体尺寸，相对于父对象中字体尺寸进行相对增大; Smaller：相对字体尺寸，相对于父对象中字体尺寸进行相对减小; Length：可采用百分比或长度值，不可为负值，其百分比取值是基于父对象中字体的尺寸; 上图CSS部分代码如下： style type=text/css .h{ font-family:宋体; font-size:12px; } .h3{ font-family:宋体; font-size:18px;} .h2{ font-family:宋体; font-size:16px; } .h1{ font-family:宋体; font-size:14px;} .h4{font-family:宋体; font-size:24px;} /style 掌握文字属性 掌握段落属性 Color属性用来设置指定元素的颜色，颜色值是一个关键字或一个16进制的RGB值。 语法：Color：颜色取值 说明：关键字就是颜色的英文名称，如red、green、blue分别表四红、绿、蓝。 用16进制数来设置颜色，是因为16进制数正好能表达0到255的数值。使用此种方法可以设置1677万种颜色。在完全表示颜色的时 候使用#加上16进制数即可，如下所示: color: #ff0000 表示红色；color: #000099 表示蓝色； 举例： html headtitle颜色属性设置/title style type=text/css .h1{ font-family:宋体; font-size:24px;} .h{ font-family:宋体; font-size:24px; color:#9900ff;} /style /head body p class=h1我的颜色没变/p p class=h你喜欢这种颜色么？/p /body /html 字体风格font-style属性用来设置字体是否为斜体。 语法：Font-style：样式的取值 说明：样式的取值有三种：normal是默认的正常字体；Italic以斜体显示字体；oblique属于中间状态，以偏斜体显示。 举例： html head title设置字体风格/title style type=text/css !-- .h1{