收藏 分享(赏)

层叠样式表的应用.ppt

上传人:天天快乐 文档编号:775596 上传时间:2018-04-22 格式:PPT 页数:31 大小:991.50KB
下载 相关 举报
层叠样式表的应用.ppt_第1页
第1页 / 共31页
层叠样式表的应用.ppt_第2页
第2页 / 共31页
层叠样式表的应用.ppt_第3页
第3页 / 共31页
层叠样式表的应用.ppt_第4页
第4页 / 共31页
层叠样式表的应用.ppt_第5页
第5页 / 共31页
点击查看更多>>
资源描述

1、CSS样式表的应用,本章重点:创建、编辑CSS样式,创建、编辑、选用CSS外部样式表,常用CSS特效滤镜的使用方法。,CSS样式表的应用,1 使用CSS样式格式化网页元素2CSS样式概述3 【CSS样式】面板的使用4 实战演练,1使用CSS样式格式化网页元素,1.1 案例综述 为了使网页具有同一的风格,我们通常在网页中使用CSS样式美化、格式化页面。,1使用CSS样式格式化网页元素,1.2 案例分析 CSS样式的创建有三种方式:一、是使用【属性】检查器或菜单命令创建应用于文本的样式的CSS 规则;二、是在【页面属性】对话框中设置;三、是使用“CSS 样式”面板创建和编辑 CSS 规则和属性。,

2、1使用CSS样式格式化网页元素,1.3实现步骤 一、打开HTML网页 二、设置页面属性添加嵌入头部的CSS样式 三、用【CSS样式】面板创建CSS样式 四、在页面中应用CSS样式 五、链接样式表,统一网站风格。,2CSS样式概述,2.1 CSS的特点其特点可以归结为以下3点: 1 控制页面中的每一个元素(精确定位)。2 对HTML语言处理样式的最好补充。3 把内容和格式处理相分离,减少工作量。,2CSS样式概述,2.2 CSS的类型自定义CSS样式自定义CSS样式(也称为类样式),可以将样式属性设置为任何文本范围或文本块。 HTML标签样式HTML标签样式,用于重新定义特定标签,如H1的格式。

3、创建或更改H1标签的CSS样式时,所有用H1标签设置了格式的文本都立即更新。CSS选择器样式CSS选择器样式重定义特定标签组合的格式(如每当H2标题出现在表格单元格内时都应用td h2),或重定义包含特定id属性的所有标签的格式。,2CSS样式概述,2.3 CSS的3种存在方式1 外部文件方式外部CSS样式文件,是一系列存储在一个单独的外部文件.css文件(并非HTML文件)中的CSS样式。 CSS文件的引用是在HTML的标签之间编写下列语句: 其中的Style.css文件应为已编好的样式表文件。,2.内部文档头方式内部(或嵌入式)CSS样式表,是一系列包含在HTML文档head部分的styl

4、e标签内的CSS样式。将风格直接定义在文档头之间 ,如:,2CSS样式概述,3.直接插入式 直接插入式很简单,只需在每个HTML标签后书写CSS属性即可。例如:规定一个Table标志中的字为红色,字体大小为10pt,则可书写如下: ,2CSS样式概述,2.4 CSS在Dreamweaver中的创建方法1、在“页面属性”中设置,2CSS样式概述,切换到“代码”视图,可以看到对“页面属性”进行的设置,变成了一段CSS样式代码,嵌在文档头之间,2、文本编辑Dreamweaver 8在属性检查器中增加了“样式”选项,这一选项的功能是在设计页面时进行添加字体、设置颜色、大小等样式操作时,“样式”中套用样

5、式;如果套用的CSS样式不是文字,而是表格,同样可以在属性面板中设置CSS。在属性面板中都有一个类别(Class),在这里就可以设计表格的CSS样式。3、CSS样式面板【CSS样式】面板集成在【CSS】面板组中,在此面板中可以方便地进行CSS样式的添加、编辑、查看属性和删除等样式的管理。,2CSS样式概述,3【CSS样式】面板的使用,3.1 CSS样式面板,附加样式,新建样式,编辑样式,删除样式,样式属性,样式列表,2、【CSS样式】面板的结构,1、打开【CSS样式】面板 【窗口】【CSS样式】命令,3【CSS样式】面板的使用,3.1 CSS样式面板3、管理样式,查看属性视图按钮,管理CSS规

6、则按钮,3【CSS样式】面板的使用,3.1 CSS样式面板3、管理样式包含三个允许在“属性”窗格中改变视图的按钮: 【类别】视图将 Dreamweaver 支持的 CSS 属性划分为 8 个类别。每个类别的属性都包含在一个列表中,您可以单击类别名称旁边的加号 (+) 按钮展开或折叠它。【列表】视图按字母顺序显示 Dreamweaver 所支持的所有 CSS 属性。“设置属性”(蓝色)将出现在列表顶部【设置属性】视图仅显示那些已设置的属性。“设置属性”视图为默认视图。,3【CSS样式】面板的使用,3.1 CSS样式面板3、管理样式管理CSS样式按钮:【附加样式表】按钮:可调出“链接外部样式表”对

7、话框,从中选择要链接到或导入到当前文档中的外部样式表。【新建CSS样式】按钮:单击后可弹出“新建CSS样式”对话框,使用“新建CSS样式”对话框可以选择要创建的样式类型。【编辑样式表】按钮:单击后可弹出“CSS样式定义”对话框。编辑当前文档或外部样式表中的任何样式。【删除CSS样式】按钮:删除“CSS样式”面板中的所选样式,并从应用该样式的所有元素中删除样式。,3【CSS样式】面板的使用,3.2 创建新的CSS样式 打开“新建CSS样式”对话框定义要创建的CSS样式的类型 创建自定义样式(Class)重定义标签使用CSS选择器“选择器”下拉列表中提供的选择器包括:a:active、a:hove

8、r、 a:link a:visited。选择定义样式的位置 新建样式表文件:用于创建外部样式表。仅对该文档:在当前文档中嵌入样式。,3【CSS样式】面板的使用,3.3 编辑CSS样式 CSS样式有8种类型:定义CSS样式类型属性 定义CSS样式背景属性 定义CSS样式区块属性 定义CSS样式方框属性 定义CSS样式边框属性定义CSS样式列表属性 定义CSS样式定位属性定义CSS样式扩展属性,3【CSS样式】面板的使用,1 定义CSS类型属性使用“CSS样式定义”对话框中的“类型”类别可以定义CSS样式的基本字体和类型设置。,3【CSS样式】面板的使用,2定义CSS样式背景属性使用“CSS样式定

9、义”对话框中的“背景”类型,可以定义CSS样式的背景设置。可以网页中的任何元素应用背景属性。,3【CSS样式】面板的使用,3定义CSS样式区块属性使用“CSS样式定义”对话框中的“区块”类别,可以定义标签和属性的间距和对齐设置。,3【CSS样式】面板的使用,4定义CSS样式方框属性使用“CSS样式定义”对话框中的“方框”类别可以为控制元素在页面上的放置方式的标签和属性定义设置。,3【CSS样式】面板的使用,5定义CSS样式边框属性使用“CSS样式定义”对话框中的“边框”类别可以定义元素周围的边框的设置(如宽度、颜色和样式)。,3【CSS样式】面板的使用,6定义CSS样式列表属性使用“CSS样式

10、定义”对话框中的“列表”类别可以为列表标签定义列表设置(如项目符号大小和类型) 。,3【CSS样式】面板的使用,7定义CSS样式定位属性“定位”样式属性使用“层”首选参数中定义层的默认标签,将标签或所选文本块更改为新层。,3【CSS样式】面板的使用,8定义CSS样式扩展属性“扩展”样式属性包括过滤器、分页和指针选项,它们中的大部分不受任何浏览器的支持,或者仅受InternetExplorer4.0和更高版本的支持。,3【CSS样式】面板的使用,1) Alpha滤镜:设置透明度。其参数格式是:Alpha(Opacity=100,Finishopacity=0, Style=2, StartX=0

11、 ,StartY=0, FinishX=550, FinishY=450)2)Blur滤镜:设置模糊效果。其参数格式是:,8定义CSS样式扩展属性,Blur (Add=true, Direction=135, Strength=20),3【CSS样式】面板的使用,3)DropShadow滤镜:设置文本或图像的阴影效果,应用在文本上时,其效果更加明显。其参数格式是:DropShadow (Color=blue, OffX=2, OffY=2, Positive=true)4) Glow滤镜:设置发光效果,其参数格式是:Glow (Color=black, Strength=10),8定义CSS样

12、式扩展属性,3【CSS样式】面板的使用,5) Shadow滤镜:设置阴影效果,其参数格式是:Shadow (Color=?, Direction=?)6)Wave滤镜:设置波纹效果,其参数格式是:Wave (Add=0,Freq=8, LightStrength=10, Phase=0, Strength=6),8定义CSS样式扩展属性,4实战演练,一、实战效果Snoopy的世界,4实战演练,网页中创建四个CSS样式,他们分别是body用于设置背景;box用于设置图片的环绕;box2用于设置正文的字体、背景、缩进、边距;text用于设置标题的滤镜效果。选定不同的对象,使用CSS样式。,二、实战要求,

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 企业管理 > 经营企划

本站链接:文库   一言   我酷   合作


客服QQ:2549714901微博号:道客多多官方知乎号:道客多多

经营许可证编号: 粤ICP备2021046453号世界地图

道客多多©版权所有2020-2025营业执照举报