《使用CSS样式》PPT课件.ppt

《《使用CSS样式》PPT课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、学习目标能够创建、编辑、删除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样式在网页设计中得到了广泛的应用，大大提高了网页的制作效率，其主要作用如下：实现了网页中内容与形式的分离，便于网站的管理与维护。创建一个样式可

2、以在多个网页中多次使用，提高了工作效率。使网站中各网页风格统一。5.1CSS样式的建立与编辑2.CSS样式的组织形式Dreamweaver8.0中CSS样式有三种组织方式分别为内嵌CSS样式文档内部CSS样式外部文件CSS样式5.1CSS样式的建立与编辑3.CSS样式的类型在Dreamweaver8.0中CSS样式根据作用的不同可以分为以下几种类型：自定义CSS样式自定义CSS样也称为类样式，由用户命名，可以用于任何标签。重定义HTML标签重定义HTML标签是将原有的HTML标签重新定义，给原有的标签赋予新的样式。CSS选择器CSS选择器允许用户创建用于指定标签组合的样式，常用于设置超链

3、接，也可创建ID，但ID在网页中只能使用一次，由于具有惟一的特性，常用于脚本，由符号“＃”表示。5.1CSS样式的建立与编辑4.CSS样式面板通过“CSS样式”面板，可以方便的创建、删除、编辑CSS样式等，也可以附加已有的CSS样式。打开“CSS样式”面板的方法。按Shift＋F11键。选择主菜单“窗口”｜“CSS样式”命令。“CSS样式”面板的结构共分为两个部分，上半部分显示CSS样式，下半部分则显示所选定的CSS样式的属性。CSS样式根据所显示内容的不同分两种显示方式，若单击“全部”按钮，则显示该所有的CSS样式；若选择“正在”按钮，则显示所选中内容的CSS样式，在CSS样式属性中可

4、以方便地修改某一属性。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

5、）“选择器类型”项选择“类”，“名称”文本框中输入.content，“定义在”选择“仅对该文档”。4）单击“确定”按钮，打开“CSS规则定义”对话框，在“分类”列表中选择“类型”。设置字体为宋体，大小为9pt，行高140%，颜色为#666666，设置自定义样式content属性的对话框。如图所示。5）设置完成后单击“确定”按钮，在“属性”面板和“CSS样式”面板中会显示新建的样式。5.1CSS样式的建立与编辑5.1CSS样式的建立与编辑7.创建重定义HTML标签样式重定义HTML标签样式用于重新定义HTML中的某一标签，被重定义过的HTML标签具有新的格式。在此将表示单元格的标签td重定

6、义。操作步骤如下：1）打开“CSS样式”面板。单击“CSS样式”面板右下角的新建CSS规则按钮，打开“新建CSS规则”对话框。2）“选择器类型”选择“标签”，标签下拉列表框中选择td，“定义在”选择“新建样式表文件”。3）单击“确定”按钮，打开“保存样式表文件”对话框，输入文件名td_css，并选择保存文件的位置。4）单击“确定”按钮，打开“CSS规则定义”对话框，在“分类”列表中选择“类型”，右侧字体设置为宋体，大小为12px，行高150%，颜色为#333333。5.1CSS样式的建立与编辑8.创建CSS选择器CSS选择器很重要的一个应用是对超链接进行设置，超链接分为四种状态。a:li

7、nk：初始状态的超链接。a:visited：超链接被访问过后的状态a:hover：光标移到超链接上的状态。a:active：超链接被激活时的状态，即在超链接上按下鼠标时的状态5.1CSS样式的建立与编辑在此以对超链接的设置为例，分别四种高级样式进行设置，操作步骤如下。（1）设置a:link1）打开“CSS样式”面板，单击面板中新建CSS规则按钮，打开新建CSS规则对话框。2）“选择器类型”项选择“高级”，“选择器”下拉列表框中选择a