第5章-使用CSS样式(课堂PPT).ppt

5.1第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式学习目标学习目标学习目标学习目标vv能够创建、编辑、删除能够创建、编辑、删除能够创建、编辑、删除能够创建、编辑、删除CSSCSS样式样式样式样式vv能够创建自定义样式、重定义能够创建自定义样式、重定义能够创建自定义样式、重定义能够创建自定义样式、重定义HTMLHTML标签、标签、标签、标签、CSSCSS选择器选择器选择器选择器vv能够应用能够应用能够应用能够应用CSSCSS样式样式样式样式5.2第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.15.1CSSCSS样式的建立与编辑样式的建立与编辑样式的建立与编辑样式的建立与编辑 5.25.2CSSCSS样式的应用样式的应用样式的应用样式的应用本章内容本章内容本章内容本章内容5.3第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑5.1.1 5.1.1 案例制作：案例制作：案例制作：案例制作：书法背后的人生书法背后的人生书法背后的人生书法背后的人生 通过本案例的操通过本案例的操通过本案例的操通过本案例的操作，你将学会创建作，你将学会创建作，你将学会创建作，你将学会创建CSSCSSCSSCSS样式的一般方法、如何样式的一般方法、如何样式的一般方法、如何样式的一般方法、如何创建自定义创建自定义创建自定义创建自定义CSSCSSCSSCSS样式、样式、样式、样式、如何创建重定义如何创建重定义如何创建重定义如何创建重定义HTMLHTMLHTMLHTML标标标标签样式、如何创建签样式、如何创建签样式、如何创建签样式、如何创建CSSCSSCSSCSS选择器、如何编辑选择器、如何编辑选择器、如何编辑选择器、如何编辑CSSCSSCSSCSS样式。样式。样式。样式。5.4第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑5 5.1.2.1.2 新知解析新知解析新知解析新知解析1.CSSCSS样式的作用样式的作用CSSCSS样式在网页设计中得到了广泛的应用，大大提高了网页的制作效率，其主样式在网页设计中得到了广泛的应用，大大提高了网页的制作效率，其主要作用如下：要作用如下：v 实现了网页中内容与形式的分离，便于网站的管理与维护。实现了网页中内容与形式的分离，便于网站的管理与维护。v 创建一个样式可以在多个网页中多次使用，提高了工作效率。创建一个样式可以在多个网页中多次使用，提高了工作效率。v 使网站中各网页风格统一。使网站中各网页风格统一。5.5第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑2.CSS样式的组织形式样式的组织形式Dreamweaver 8.0中中CSS样式有三种组织方式分别为样式有三种组织方式分别为vv 内嵌内嵌CSS样式样式v 文档内部文档内部CSS样式样式v 外部文件外部文件CSS样式样式5.6第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑3.CSS样式的类型样式的类型在在Dreamweaver 8.0中中CSS样式根据作用的不同可以分为以下几种类型：样式根据作用的不同可以分为以下几种类型：v自定义自定义CSS样式样式自定义自定义CSS样也称为类样式，由用户命名，可以用于任何标签。样也称为类样式，由用户命名，可以用于任何标签。v重定义重定义HTML标签标签重定义重定义HTML标签是将原有的标签是将原有的HTML标签重新定义，给原有的标签赋予新的样式。标签重新定义，给原有的标签赋予新的样式。vCSS选择器选择器CSS选择器允许用户创建用于指定标签组合的样式，常用于设置超链接，也可创建选择器允许用户创建用于指定标签组合的样式，常用于设置超链接，也可创建ID，但，但ID在网页中只能使用一次，由于具有惟一的特性，常用于脚本，由符号在网页中只能使用一次，由于具有惟一的特性，常用于脚本，由符号“”表示。表示。5.7第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑4.CSS样式面板样式面板通过通过“CSS样式样式”面板，可以方便的创建、删面板，可以方便的创建、删除、编辑除、编辑CSS样式等，也可以附加已有的样式等，也可以附加已有的CSS样式。样式。打开打开“CSS样式样式”面板的方法。面板的方法。v 按按ShiftF11键。键。v 选择主菜单选择主菜单“窗口窗口”“CSS样式样式”命令命令。“CSS样式样式”面板的结构共分为两个部分，上半部面板的结构共分为两个部分，上半部分显示分显示CSS样式，下半部分则显示所选定的样式，下半部分则显示所选定的CSS样样式的属性。式的属性。CSS样式根据所显示内容的不同分两种样式根据所显示内容的不同分两种显示方式，若单击显示方式，若单击“全部全部”按钮，则显示该所有的按钮，则显示该所有的CSS样式；若选择样式；若选择“正在正在”按钮，则显示所选中内按钮，则显示所选中内容的容的CSS样式，在样式，在CSS样式属性中可以方便地修改样式属性中可以方便地修改某一属性。某一属性。5.8第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑5.5.创建创建CSSCSS样式方法样式方法创建创建CSSCSS样式的方法如下：样式的方法如下：1 1）打开新建）打开新建CSSCSS规则对话框规则对话框,新建新建CSSCSS样式样式2 2）定义要创建的）定义要创建的CSSCSS样式类型样式类型自定义类型、重定义自定义类型、重定义HTMLHTML标签样式、创建标签样式、创建CSSCSS选择器样式选择器样式3 3）选择定义）选择定义CSSCSS样式的位置样式的位置4 4）设置和应用）设置和应用CSSCSS样式的属性样式的属性5.9第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑6.6.创建自定义创建自定义CSSCSS样式样式在此创建一个用于修饰文本的自定义样式，字体为宋体，大小为在此创建一个用于修饰文本的自定义样式，字体为宋体，大小为9pt9pt，颜色代码为，颜色代码为#666666#666666，行高，行高140%140%，来介绍自定义样式的操作方法。操作步骤如下：，来介绍自定义样式的操作方法。操作步骤如下：1 1）打开）打开“CSSCSS样式样式”面板。面板。2 2）单击）单击“CSSCSS样式样式”面板右下角的新建面板右下角的新建CSSCSS规则按钮，打开新建规则按钮，打开新建CSSCSS规则对话框。规则对话框。3 3）“选择器类型选择器类型”项选择项选择“类类”，“名称名称”文本框中输入文本框中输入.content.content，“定义在定义在”选择选择“仅对该文档仅对该文档”。4 4）单击）单击“确定确定”按钮，打开按钮，打开“CSSCSS规则定义规则定义”对话框，在对话框，在“分类分类”列表中选择列表中选择“类型类型”。设置字体为宋体，大小为。设置字体为宋体，大小为9pt9pt，行高，行高140%140%，颜色为，颜色为#666666#666666，设置自定义样式，设置自定义样式contentcontent属性的对话框。如图所示。属性的对话框。如图所示。5 5）设置完成后单击）设置完成后单击“确定确定”按钮，在按钮，在“属性属性”面板和面板和“CSSCSS样式样式”面板中会显示面板中会显示新建的样式。新建的样式。5.10第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑5.11第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑7.创建重定义创建重定义HTML标签样式标签样式重定义重定义HTML标签样式用于重新定义标签样式用于重新定义HTML中的某一标签，被重定义过的中的某一标签，被重定义过的HTML标签具有新的格式。在此将表示单元格的标签标签具有新的格式。在此将表示单元格的标签td重定义。操作步骤如下：重定义。操作步骤如下：1）打开）打开“CSS样式样式”面板。单击面板。单击“CSS样式样式”面板右下角的新建面板右下角的新建CSS规则按钮，打规则按钮，打开开“新建新建CSS规则规则”对话框。对话框。2）“选择器类型选择器类型”选择选择“标签标签”，标签下拉列表框中选择，标签下拉列表框中选择td，“定义在定义在”选择选择“新建样式表文件新建样式表文件”。3）单击）单击“确定确定”按钮，打开按钮，打开“保存样式表文件保存样式表文件”对话框，输入文件名对话框，输入文件名td_css，并，并选择保存文件的位置。选择保存文件的位置。4）单击）单击“确定确定”按钮，打开按钮，打开“CSS规则定义规则定义”对话框，在对话框，在“分类分类”列表中选择列表中选择“类型类型”，右侧字体设置为宋体，大小为，右侧字体设置为宋体，大小为12px，行高，行高150%，颜色为，颜色为#333333。5.12第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑8.8.创建创建CSSCSS选择器选择器CSSCSS选择器很重要的一个应用是对超链接进行设置，超链接分为四种状态。选择器很重要的一个应用是对超链接进行设置，超链接分为四种状态。a:linka:link：初始状态的超链接。：初始状态的超链接。a:visiteda:visited：超链接被访问过后的状态：超链接被访问过后的状态a:hovera:hover：光标移到超链接上的状态。：光标移到超链接上的状态。a:activea:active：超链接被激活时的状态，即在超链接上按下鼠标时的状态：超链接被激活时的状态，即在超链接上按下鼠标时的状态5.13第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑在此以对超链接的设置为例，分别四种高级样式进行设置，操作步骤如下。在此以对超链接的设置为例，分别四种高级样式进行设置，操作步骤如下。（1 1）设置）设置a:linka:link1 1）打开）打开“CSSCSS样式样式”面板，单击面板中新建面板，单击面板中新建CSSCSS规则按钮，打开新建规则按钮，打开新建CSSCSS规则对话框。规则对话框。2 2）“选择器类型选择器类型”项选择项选择“高级高级”，“选择器选择器”下拉列表框中选择下拉列表框中选择a:linka:link，“定义在定义在”选择选择 “仅对该文档仅对该文档”。3 3）单击）单击“确定确定”按钮，打开按钮，打开“CSSCSS规则定义规则定义”对话框，在对话框，在“分类分类”列表中选择列表中选择“类型类型”，右侧设置字体为宋体，大小为右侧设置字体为宋体，大小为9pt9pt，颜色为，颜色为#993300#993300，修饰设为无。单击，修饰设为无。单击“确定确定”按钮。按钮。（2 2）设置）设置a:visiteda:visited设置字体为宋体，大小为设置字体为宋体，大小为9pt9pt，颜色为，颜色为#993300#993300，修饰设为无，单击，修饰设为无，单击“确定确定”按钮。按钮。（3 3）设置）设置a:hovera:hover设置字体为宋体，大小为设置字体为宋体，大小为9pt9pt，颜色为，颜色为#FF0000#FF0000，修饰设为下划线，单击，修饰设为下划线，单击“确定确定”按钮。按钮。（4 4）设置）设置a:activea:active设置字体为宋体，大小为设置字体为宋体，大小为9pt9pt，颜色为，颜色为#FF0000#FF0000，修饰设为无，修饰设为无，5.14第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑9.CSS9.CSS样式的编辑样式的编辑若对已创建的若对已创建的CSSCSS样式不满意，可以进行编辑，操作方法如下：样式不满意，可以进行编辑，操作方法如下：v 选择某一样式，单击选择某一样式，单击“CSSCSS样式样式”面板底部的编辑样式表按钮面板底部的编辑样式表按钮。v 直接双击某一样式，打开直接双击某一样式，打开“CSS规则定义规则定义”对话框，进行编辑。对话框，进行编辑。v 选择某一样式，在选择某一样式，在“CSS样式样式”面板显示的样式属性中进行编辑，面板显示的样式属性中进行编辑，v单击单击“添加属性添加属性”按钮可以添加其他属性。按钮可以添加其他属性。5.15第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑10.CSS样式表的应用样式表的应用（1）应用自定义）应用自定义CSS样式样式v 如果要应用自定义如果要应用自定义CSS样式的网页元素是文本，那么可以选中该文本，在样式的网页元素是文本，那么可以选中该文本，在“属性属性”面板面板 中中“样式样式”选择要应用样式选择要应用样式。v 如果要应用自定义如果要应用自定义CSS样式的是其他网页元素，如表单、图像等，则可以选中该元样式的是其他网页元素，如表单、图像等，则可以选中该元 素，在素，在“属性属性”面板中面板中“类类”选择要应用的样式即可。选择要应用的样式即可。为文本应用自定义样式为文本应用自定义样式5.16第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑（2 2）应用重定义）应用重定义HTMLHTML标签标签由于重定义由于重定义HTMLHTML标签样式是对原有标签样式是对原有HTMLHTML标签重新定义，故会自动应用。标签重新定义，故会自动应用。（3 3）应用）应用CSSCSS选择器选择器CSSCSS选择器如果是对超链接的设置，则会自动应用，如果应用选择器如果是对超链接的设置，则会自动应用，如果应用“样式名样式名”的样式，可选择要应用的样式，在的样式，可选择要应用的样式，在“属性面板属性面板”中元素编号的下拉列表框中选中元素编号的下拉列表框中选择样式即可，如果给层应用样式，在择样式即可，如果给层应用样式，在“属性属性”面板中面板中“层编号层编号”的下拉列表框中的下拉列表框中选择样式。选择样式。5.17第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑11.CSS11.CSS样式的删除样式的删除选择选择“CSS样式样式”面板中某一样式，单击面板中面板中某一样式，单击面板中“删除删除CSS规则规则”按按钮，可以删除这一样式，删除样式因样式表存在的形式不同而细微的差钮，可以删除这一样式，删除样式因样式表存在的形式不同而细微的差别。别。（1 1）文档内部）文档内部CSSCSS样式的删除样式的删除（2 2）外部文件）外部文件CSSCSS样式的删除样式的删除5.18第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑12.CSS12.CSS样式属性的设置样式属性的设置CSSCSS样式的属性有很多，以上所接触的属性只是一小部分，属性设置主要在样式的属性有很多，以上所接触的属性只是一小部分，属性设置主要在“CSSCSS规则定义规则定义”对话框中进行，按照类别将属性设置介绍如下：对话框中进行，按照类别将属性设置介绍如下：v CSSCSS样式样式“类型类型”属性属性v CSSCSS样式样式“背景背景”属性属性v CSSCSS样式样式“区块区块”属性属性v CSSCSS样式样式“方框方框”属性属性v CSSCSS样式样式“边框边框”属性属性v CSSCSS样式样式“列表列表”属性属性v CSSCSS样式样式“定位定位”属性属性v CSSCSS样式样式“扩展扩展”属性属性5.19第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.1CSSCSS样式的建立与编辑样式的建立与编辑5.1.35.1.35.1.35.1.3实战演练：实战演练：实战演练：实战演练：“白洋淀旅游白洋淀旅游白洋淀旅游白洋淀旅游”通过本案例的操作你将学会，如何创建自定义通过本案例的操作你将学会，如何创建自定义CSSCSS样式、重定义样式、重定义HTMLHTML标标签样式、签样式、CSSCSS选择器、选择器、CSSCSS样式的各项属性设置。样式的各项属性设置。5.20第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.2CSSCSS样式的应用样式的应用5 5 5 5.2 2 2 2.1 1 1 1案例制作：关于词牌的几句话案例制作：关于词牌的几句话案例制作：关于词牌的几句话案例制作：关于词牌的几句话本实例是把网页已有网本实例是把网页已有网页中仅应用于本网页的页中仅应用于本网页的CSSCSS样样式导出，保存到一文件中，式导出，保存到一文件中，然后应用到尚没有然后应用到尚没有CSSCSS样式的样式的网页中，使网页更加美观。网页中，使网页更加美观。通过本案例的操作，你通过本案例的操作，你将学会如何将仅应用一个网将学会如何将仅应用一个网页的页的CSSCSS样式导出到外部样式导出到外部CSSCSS样式表文件，如何附加外部样式表文件，如何附加外部CSSCSS样式表文件。如何应用样式表文件。如何应用CSSCSS样式。最终效果如图所示。样式。最终效果如图所示。5.21第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.2CSSCSS样式的应用样式的应用5 5 5 5.2 2 2 2.2 2 2 2案例制作：案例制作：案例制作：案例制作：新知解析新知解析新知解析新知解析1.附加外部附加外部CSS样式表文件样式表文件单击单击“CSS样式样式”面板中的面板中的“附加样式表附加样式表“按钮，按钮，如图所示链接外部样式表对话如图所示链接外部样式表对话框附加外部样式文件有两种方式：链接和导入。框附加外部样式文件有两种方式：链接和导入。链接：可以认为是将样式表文件链接到网页，使用时从样式表文件中调用链接：可以认为是将样式表文件链接到网页，使用时从样式表文件中调用导入：可以简单地认为是将样式表文件嵌入到网页。导入：可以简单地认为是将样式表文件嵌入到网页。5.22第第第第5 5章使用章使用章使用章使用CSSCSS样式样式样式样式5.2CSSCSS样式的应用样式的应用2.导出到外部导出到外部CSS样式表样式样式表样式若要将某网页中的若要将某网页中的CSS样式表形成一个独立的外部文件，可样式表形成一个独立的外部文件，可以选择主菜单以选择主菜单“文件文件”“导出导出”“CSS样式样式”命令，命名并命令，命名并保存文件即可。保存文件即可。