第5章 使用CSS样式（课堂PPT）

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