Dreamweaver网页设计与应用（Dreamweaver CC 2019）（微课版）课件 7 CSS样式

项目引入：通过CSS样式可以将网页制作得更加绚丽多彩。本项目主要对CSS样式进行讲解。通过对本项目的学习，学生可以轻松、有效地对页面的整体布局、颜色、字体、链接、背景，以及同一页面的不同部分、不同页面的外观和格式等效果进行精确控制。项目7CSS样式了解CSS选择器的类型、CSS样式的创建与应用方法掌握CSS属性的设置方法熟练使用“CSS过渡效果”面板项目目标掌握“山地车网页”的关键制作步骤掌握“羽毛球运动网页”的关键制作步骤技能目标培养对网页布局、颜色、字体等方面的审美能力激发对CSS技术的学习兴趣素养目标任务7.1CSS样式概述“CSS设计器”面板

CSS选择器的类型7.1.1“CSS设计器”面板使用“CSS设计器”面板可以创建、编辑和删除CSS样式，并且可以将外部样式表附加到文档中。1．打开“CSS设计器”面板2．CSS的功能“CSS设计器”面板7.1.2CSS选择器的类型CSS选择器可分为类选择器、标签选择器、ID选择器、复合选择器等。同级别声明嵌套式声明任务7.2CSS样式的创建与应用创建CSS样式应用CSS样式创建和附加外部样式7.2.1创建CSS样式使用“CSS设计器”面板可以创建类选择器、标签选择器、ID选择器和复合选择器等。7.2.2应用CSS样式创建自定义样式后，要为不同的网页元素应用不同的样式，具体操作步骤如下。（1）在文档编辑窗口中选择网页元素。（2）根据选择器的类型使用不同的应用方法。7.2.3创建和附加外部样式如果不同网页的不同HTML元素需要使用同一样式，则可通过附加外部样式来实现。首先创建一个外部样式，然后在不同网页的不同HTML元素中附加定义好的外部样式。1．创建外部样式2．附加外部样式任务7.3编辑CSS样式网站设计者有时需要修改应用于文档的内部样式和外部样式，如果修改内部样式，则会自动重新设置受它控制的所有HTML元素的格式；如果修改外部样式文件，则会自动重新设置与它链接的所有HTML文件。任务7.4CSS属性布局属性文本属性边框属性背景属性任务实践—山地车网页7.4.1布局属性“布局”选项组用于控制网页中块元素的大小、边距、填充和位置属性等。7.4.2文本属性“文本”选项组用于控制网页中文本的字体、字号、颜色、行距、首行缩进、对齐方式、阴影等。7.4.3边框属性“边框”选项组用于控制块元素的边框粗细、样式、颜色及圆角。7.4.4背景属性“背景”选项组用于为网页元素添加背景图像或背景颜色。任务实践—山地车网页使用“Table”按钮插入表格，使用CSS属性设置链接效果。效果图任务7.5过渡效果“CSS过渡效果”面板创建CSS过渡效果任务实践—羽毛球运动网页7.5.1“CSS过渡效果”面板在“CSS过渡效果”面板中可以新建、删除和编辑CSS过渡效果。在创建CSS过渡效果时，需要为元素指定过渡效果类。如果在创建效果类之前已选择元素，则过渡效果类会自动应用于选定的元素。7.5.2创建CSS过渡效果任务实践—羽毛球运动网页使用“CSS设计器”面板设置文字的字体、颜色，使用“CSS过渡效果”面板设置文字的变色效果。效果图项目实践——电商网页使用“CSS设计器”面板改变文字的大小