《网页设计与制作实践》课件第3章CSS入门 (2).ppt

1、第3章CSS入门1 1 考核知识点考核知识点CSS样式规则、CSS文本样式、CSS内联式2 2 练习目标练习目标熟练掌握CSS样式规则。灵活运用CSS内联式的引用方法。熟练掌握常用文本样式。实验实验1 1 文章排版文章排版请做出以下效果：要求：（1）标题居中显示，字体为“微软雅黑”、加粗、加下划、颜色为红色。（2）段落字体为“微软雅黑”，首行缩进2个字符，行高为24px。（3）用CSS内联式设置标题和正文的样式。3 3 实验内容及要求实验内容及要求实验实验1 1 文章排版文章排版此页面由标题、段落构成。用内联式样式设置标题样式，格式，用内联式样式设置正文段落样式，格式。标题居中，可以使用CSS

2、的水平对齐属性text-align。标题突出显示，设置字体为“微软雅黑”、加粗、加下划、颜色为红色，可以应用CSS的字体属性font-family进行字体设置，应用CSS的文字着重属性font-weight进行字体加粗设置，应用CSS的文本修饰属性text-decoration进行下划线设置，应用CSS的文字颜色属性color进行颜色设置。段落的首行缩进2个字符应用text-indent属性进行设置，段落的行高24px，应用line-height属性进行行高。4 4 实验分析实验分析实验实验1 1 文章文章排排版版1 1 考核知识点考核知识点CSS样式规则、CSS文本样式、CSS内嵌式样式、标

3、签选择器2 2 练习目标练习目标熟练掌握CSS样式规则。灵活运用CSS内嵌式样式。熟练掌握常用文本样式。熟练掌握用标签选择器设置元素的样式。实验实验2 2 文章排版文章排版要求：（1）标题居中显示，字体为“微软雅黑”、加粗、加下划、颜色为红色。（2）段落字体为“微软雅黑”，首行缩进2个字符，行高为24px。（3）用CSS内嵌式设置标题和正文的样式。（4）用标签选择器选择标题和段落。实验实验2 2 文章排版文章排版3 实验内容及要求实验内容及要求实验内容与上述实验1相同。此 页 面 由 标 题、段 落 构 成。内 嵌 式 样 式 设 置 标 题 和 正 文 段 落 样 式，在 中 添 加 标签对

4、，在该标签对中设置样式。用标签选择器选择标题设置样式，格式为h1;用标签选择器选择段落设置样式，格式为p。实验实验2 2 文章排版文章排版4 4 实验分析实验分析1 1 考核知识点考核知识点CSS样式规则、CSS链入外部样式、类选择器、id选择器、群 组选择器2 2 练习目标练习目标熟练掌握CSS样式规则。熟练掌握CSS外部样式的引用。熟练掌握常用文本样式。熟练掌握用类选择器、id选择器、群组选择器选择元素。实验实验2 2 文章排版文章排版 要求：（1）标题居中显示，字体为“微软雅黑”、加粗、加下划、颜色为红色。（2）段落字体为“微软雅黑”，首行缩进2个字符，行高为24px。（3）用CSS链入

5、外部样式设置标题和正文的样式，需要建立一个样式文件，设样式文件名为“mystyle.css”。（4）用id选择器选择标题进行样式设置，设标题的id属性值为heading，用class选择器选择段落进行样式设置，设段落的class属性值为paragraph。利用群组选择器为标题和段落定义相同的CSS样式。实验实验2 2 文章排版文章排版3 3 实验内容及要求实验内容及要求实验内容与上述实验1相同此页面由标题、段落构成。引入外部样式设置标题和正文段落样式，在中引入外部样式文件，语句为。用id选择器选择标题设置样式，格式为#heading;用类选择器选择段落设置样式，格式为.paragraph。标题和段落相同的字体样式定义在群组选择器中,格式为#heading,.paragraph 实验实验2 2 文章排版文章排版4 4 实验分析实验分析