使用css样式修饰页面

《使用css样式修饰页面》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、1.1初识CSS11.1.1CSS基础11.1.2【CSS】样式面板21.2定义CSS样式的属性31.2.1创建CSS样式31.2.2文本样式的定义41.2.3背景样式的定义51.2.4区块样式的定义61.2.5方框样式的定义71.2.6边框样式定义81.2.7列表样式的定义91.2.8定位样式的定义101.2.9扩展样式的定义101.3使用CSS过滤器111.3.1Alpha滤镜111.3.2Blur滤镜141.3.3Chroma滤镜171.3.4DropShadow滤镜181.3.5FlipH和FlipV滤镜191.3.6Glow滤镜211.3.7Gray滤镜211.3.8Inver

2、滤镜221.3.9Mask滤镜241.3.10Shadow滤镜251.3.11Wava滤镜261.3.12Xray滤镜261.1初识CSS现在网页排版格式越来越多，布局也越来越复杂，通过使用CSS样式，很多效果都可以实现，并且便于控制、维护及更新。因此，CSS是现代网页设计中必不可少的工具之一。1.1.1CSS基础CSS是CascadingStyleSheet的缩写，译作“层叠样式表”，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS样式，可以对文本格式进行设置，还可以控制网页中块元素的格式和位置，实现HTML标记无法实现的效果。对于一个网站来说，CSS样式的

3、应用是必不可少的。CSS样式可以一次对若干个文档的样式进行控制，当CSS样式更新后，所有应用了该样式的文档格式都会自动更新。默认情况下，Dreamweaver均使用CSS样式表设置文本格式。使用【属性】面板或菜单命令应用于文本的样式将自动创建为CSS规则。CSS样式也可以说是一个文本文件。CSS样式表的功能主要有以下几点：l几乎在所有浏览器中都可以使用。l使页面文字更加美观，更容易编排，使页面赏心悦目。l便于修改、维护和更新大量网页。l由于是直接的HTML格式的代码，因此网页打开的速度非常快。1.1.2【CSS】样式面板在Dreamweaver中，使用【CSS样式】面板可以查看文档所有C

4、SS规则和属性（【全部】模式），也可以查看所选择页面元素的CSS规则和属性（【正在】模式）。在CSS面板中可以创建、编辑和删除CSS样式，还可以添加外部样式到文档中。在菜单栏中选择【窗口】

5、【CSS样式】命令，打开【CSS样式】面板。在【CSS样式】面板中会显示已有CSS样式，如图1.1所示。图1.1【CSS样式】面板【CSS样式】面板的功能如下：1、全部模式l【所有规则】：在窗口中可以查看文档中所有的CSS样式l【属性】：在窗口中可以查看并修改所选择CSS样式的属性。l【显示类别视图】按钮、【显示列表视图】按钮和【只显示设置属性】按钮：单击相应按钮，可以更改【属性】选项卡的显示方式。l

6、【附加样式表】按钮：可以在文档中链接一个外部CSS样式。l【编辑样式】按钮：编辑选中的CSS样式。l【新建CSS规则】按钮：创建新的CSS样式l【删除CSS属性】按钮：删除选择的CSS样式或CSS属性。1、正在模式l【说选内容的摘要】：在窗口中可以查看文档中所选择内容的CSS样式。l【关于】：在窗口中显示所选属性的位置。l【属性】：在窗口中可以查看并修改所选择内容的CSS规则和属性。1.2定义CSS样式的属性CSS样式属性分为类型、背景、区块、方框、边框、列表、定位和扩展8个部分。下面介绍如何创建CSS样式以及定义CSS样式。1.2.1创建CSS样式可以创建一个CSS规则来自动完成HTM

7、L标签的格式设置或者class或ID属性所标识的文本范围的格式设置。创建CSS样式的具体操作步骤如下。步骤01将光标放置在页面中，执行以下操作。l在【CSS样式】面板中单击【新建CSS规则】按钮步骤02打开【新建CSS规则】对话框，选择CSS规则的选择器类型，如图1.2所示：l【类（可应用于任何HTML元素）】：可以创建一个作为class属性应用于任何HTML元素的自定义样式。类名称必须以英文字母或句点开头，不可包含空格或其他符号。l【标签（重新定义特定标签的外观）】：重新定义特定HTML标签的默认格式。l【高级（ID、伪类选择器）】：定义包含特定ID属性的标签的格式。ID名称必须以英文

8、字母开头，Dreamweaver将自动在名称前添加“#”，不可包含空格或其他符号。或定义同时影响两个或多个标签、类或ID的复合规则。图1.2步骤02：在名称文本框中输入样式的名称步骤03：选择要定义规则的位置l【新建样式表文件】：创建外部样式表l【仅限该文档】：在当前文档中嵌入样式步骤04设置完成后，单击【确定】按钮，弹出CSS规则定义对话框，如图1.3所示：图1.3步骤05设置完成后，单击【确定】按钮，CSS样式创建完成。可以在【