网页设计与制作任务驱动教程全套配套课件第3版陈承欢电子资源0401【任务4-1】使用CSS美化文本标题和文本段落.pptxVIP

网页设计与制作任务驱动教程 （第3版） 2 单元4　使用CSS布局与美化网页 【任务4-1】使用CSS美化文本标题和文本段落 3 【任务描述】 【任务4-1】使用CSS美化文本标题 和文本段落 （1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。 （2）创建网页文档0401.html，且链接外部样式文件base.css和main.css。 4 （3）在网页0401.html中添加必要的HTML标签和输入文字。 （4）浏览网页0401.html的效果，如图4-1所示，该网页包含文本标题和多个正文段落。 图4-1 网页0401.html的浏览效果 5 【任务实施】 1．创建样式文件base.css 在Dreamweaver CC主窗口的【文件】菜单中选择【新建】命令，打开【新建文档】对话框，在该对话框左侧选择“空白页”，“页面类型”选择“CSS”。 在【新建文档】对话框中单击【创建】按钮创建一个CSS样式文件。 6 将新建的CSS样式文件保存在CSS文件夹，名称为“base.css”。 （1）定义标签body的属性 打开【CSS设计器】面板，其初始状态如图4-3所示。 图4-3 【CSS设计器】的初始状态 7 在【选择器】区域单击【添加选择器】按钮，然后输入选择器名称“body”，按【Enter】。然后单击选择选择器“body”，并且取消“显示集”复选框的选中状态，如图4-4所示。 图4-4 选择新添加的选择器“body” 8 在“布局”区域“width”属性行中输入“1200px”，如图4-5所示。 图4-5 设置width的属性值 9 在【属性】面板中单击【文本】按钮，切换到“文本”属性设置区域，设置“color”属性为“#666”，如图4-6所示。 图4-6 设置color的属性值 10 然后依次设置“font-family”属性为“微软雅黑”，“font-size”属性为“12px”，“line-height:”属性为“2em”，“text-indent”属性为“2em”，设置结果如图4-7所示。 图4-7 设置body的多项属性 11 在图4-7所示的“text-indent”属性行单击【删除CSS属性】按钮，则可以删除对应的属性设置。 标签body的属性设置完成后，会自动添加如下所示的CSS代码。 body { width: 1200px; color: #666; font-size: 12px; line-height: 2em; text-indent: 2em; font-family: 微软雅黑; } 12 （2）添加选择器h1, h2, p并定义其属性 在【CSS设计器】面板的选择器列表中选择选择器“body”，然后单击【添加选择器】按钮，然后输入新的选择器“h1,h2,p”，如图4-8所示。 图4-8 添加新的选择器h1,h2,p 13 在选择器列表中选择刚才添加的选择器“h1,h2,p”，然后在【属性】面板“margin”区域依次单击将上、下、左、右的margin属性值设置为“0px”，接着在“padding”区域依次单击设置上、下、左、右的padding属性值为“0px”，如图4-9所示。 图4-9 设置margin和padding属性 14 选择器h1, h2, p的属性设置完成后，会自动添加如下所示的CSS代码。 h1, h2, p { margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 0px; } 15 由于margin和padding四个方向的属性都设置为0px，可以将代码予以简化，结果如下所示。 h1, h2, p { margin: 0px; padding: 0px; } 16 （1）定义标签section的属性 打开【CSS设计器】面板，在【选择器】区域单击【添加选择器】按钮，然后输入选择器名称“section”，按【Enter】。然后单击选择选择器“section”，在“布局”区域“width”属性行中输入“1200px”。在“margin”区域上方输入“10”，即设置margin-top的属性值为“10px”。 2．创建样式文件base.css 创建样式文件base.css，将