网页设计与制作第八章_第1页
网页设计与制作第八章_第2页
网页设计与制作第八章_第3页
网页设计与制作第八章_第4页
网页设计与制作第八章_第5页
已阅读5页，还剩42页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第8章CSS样式8.1使用CSS8.2CSS属性8.1使用CSS8.1.1CSS的基本概念8.1.2创建CSS样式8.1.3CSS样式规则综合实例8.1.4设置CSS属性8.1.5应用CSS样式8.1.6应用外部样式表综合实例8.1.1CSS的基本概念CSS是CascadingStyleSheets的缩写，中文名称是“层叠样式表”或“级联样式表”，是一种应用于网页的标记语言，其作用是为HTML、XHTML以及XML等标记语言提供样式描述。即当IE浏览器读取HTML、XHTML或XML文档时，同时将加载相对应的CSS样式，按照CSS文件描述的格式来控制网页的布局格式和网页内容的样式。相对于传统HTML而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，拥有对网页对象盒模型的能力，能够进行初步交互设计，并支持几乎所有的字体字号样式，是目前基于文本展示最优秀的表现设计语言。使用CSS后可大大降低网页设计者的工作量，提高网页设计的效率。8.1.2创建CSS样式1．CSS样式面板在DreamweaverCS6中，可以在【属性】面板中单击【CSS面板】按钮，或者从折叠面板组中单击【CSS样式】按钮，打开【CSS样式】面板，如图8-1、8-2、8-3所示。8.1.2创建CSS样式2．创建CSS样式在DreamweaverCS6中，可以在【属性】面板中单击【编辑规则】按钮，或者从【CSS样式】面板组中单击“”按钮，打开【新建CSS规则】对话框，如图8-4所示。

图8-4【新建CSS规则】对话框8.1.2创建CSS样式2．创建CSS样式在【选择器类型】下拉列表框中提供了4种类型，分别是“类、ID、标签、复合内容”，如图8-5所示。根据【选择器类型】在【选择器名称】文本框中输入项目内容。

图8-5【选择器类型】对话框8.1.2创建CSS样式2．创建CSS样式在【规则定义】下拉列表中选择要定义规则的位置，包括“仅限该文档、新建样式表文件”两项，如图8-6所示。如果选择“仅限该文档”选项，将在当前文档中嵌入样式；选择“新建样式表文件”，将创建外部样式表文件，用于存放样式规则。

图8-6【定义规则位置】对话框8.1.3CSS样式规则综合实例创建CSS空白规则并嵌入当前文档中。8.1.4设置CSS属性无论在【新建CSS规则】对话框中选择了哪种类型选择器，都只仅仅创建了一个CSS规则，并没有具体内容。要想设置更详细的样式属性，需在创建样式后的【CSS规则定义】对话框中设置。例如，将style1样式中的字体设为宋体、红色、12PX，如图8-11所示。图8-11CSS规则定义8.1.5应用CSS样式将CSS样式规则应用到HTML网页中有四种方法，即“直接定义元素的style属性、定义内部样式表、嵌入外部样式表和链接外部样式表”。其中，前两种方法又称为内部样式表，后两种称为外部样式表。1．定义内部样式表内部样式表是指将CSS样式表直接在HTML页面代码的<head>标记区定义，样式表定义由“<styletype=”text/css“>”标记开始至“</style>”结束，如图8-12所示。在DreamweaverCS6中，通过选择【新建CSS规则】对话框中【规则定义】的“仅限该文档”选项，即可将CSS样式表直接定义在HTML页面代码的<head>标记区内，从而完成内部样式表定义。8.1.5应用CSS样式图8-12定义内部样式8.1.5应用CSS样式将CSS样式规则应用到HTML网页中有四种方法，即“直接定义元素的style属性、定义内部样式表、嵌入外部样式表和链接外部样式表”。其中，前两种方法又称为内部样式表，后两种称为外部样式表。2．应用内部样式表在网页设计状态中，选定要应用样式的对象，如“文字”、“图像”等，右击【CSS面板】中样式名称，在弹出的快捷菜单中选择“套用”命令；或在【属性面板】类选项框中直接选择相应样式，如图8-13所示。8.1.5应用CSS样式

图8-13应用CSS样式8.1.5应用CSS样式3．直接定义元素的style属性直接定义元素的style属性，也叫内嵌样式表，就是通过对某个元素单独定义样式，即直接在XHTML标记中使用style属性，设置CSS属性和值。例如：<bodystyle="background-image:url("flower.jpg");background-position:center"><h3style="color:black">使用CSS内嵌样式</h3>注意：内嵌样式表只能对HTML标记定义样式，而不能使用类或ID选择符定义样式。8.1.5应用CSS样式4．创建外部样式表当样式需要应用于很多页面时，就要使用外部样式表。外部样式表可以在任何文本编辑器中进行编辑，但不能包含任何的html标签，样式表应以.css扩展名进行保存。在DreamweaverCS6中，创建CSS外部样式文件常用两种方法：一是直接新建CSS文档，如图8-14所示；二是在【新建CSS规则】对话框中选择【规则定义】下拉列表中的“新建样式文件”选项，如图8-15所示。8.1.5应用CSS样式图8-14直接创建CSS样式文件8.1.5应用CSS样式

图8-15通过新建CSS规则来创建样式表文件8.1.5应用CSS样式5．链接外部样式表链接外部样式表是指通过<link>链接标记链接外部CSS样式文件到页面中，该链接语句必须放在页面的<head>标记区，代码如下：<linkhref="mystyle.css"rel="stylesheet"type="text/css"/>在DreamweaverCS6中，通过【CCS样式】面板中“”按钮来链接外部样式表，如图8-16所示；也可通过【新建CSS规则】来创建样式表文件。8.1.5应用CSS样式图8-16链接外部样式表8.1.5应用CSS样式6．导入外部样式表导入外部样式表是指是指在内部样式表的<style>标记中使用@import导入一个外部样式表，代码如下所示：<styletype="text/css"><!--@importurl("mystyle.css");--></style>导入外部样式表方法与链接外部样式表的方法一样。导入外部样式表相当于将样式表导入到内部样式表中，其输入方式更有优势。在DreamweaverCS6中，也可通过【CCS样式】面板中“”按钮来导入外部样式表，如图8-17所示。8.1.5应用CSS样式图8-17导入外部样式表8.1.6应用外部样式表综合实例创建CSS外部样式并链接到当前文档中

8.2CSS属性8.2.1类型8.2.2背景8.2.3区块8.2.4方框8.2.5边框8.2.6列表8.2.7定位8.2.8扩展8.2.9CSS滤镜8.2.1类型【CSS规则定义】中的【类型】选项主要用来对文本样式进行设置，如文本的字体、大小、颜色、样式、行高、装饰等，如图8-19所示。

8.2.2背景【CSS规则定义】中的【背景】选项可用来定义CSS样式的背景设置，对WEB页面中任何元素应用背景属性等，如图8-20所示。

8.2.3区块【CSS规则定义】中的【区块】选项是指网页中的文本、图像、AP元素等替代元素，主要用于控制块中内容的间距、对齐方式和缩进等，如图8-21所示。

8.2.4方框【CSS规则定义】中的【方框】选项用于为控制元素在页面上的放置方式的标签和属性定义设置，如图8-22所示。

8.2.5边框【CSS规则定义】中的【边框】选项用于定义元素周围边框的设置，如图8-23所示。

8.2.6列表【CSS规则定义】中的【列表】选项用于定义列表的类型设置，如图8-24所示。

8.2.7定位【CSS规则定义】中的【定位】选项用于精确控制网页中的元素（主要针对AP元素）的位置，如图8-25所示。

8.2.8扩展【CSS规则定义】中的【扩展】样式属性包括分页、光标和过滤器选项，它们中大部分不受任何浏览器支持，或者仅受IE4或更高版本支持，如图8-26所示。

8.2.9CSS滤镜CSS滤镜就是使用一些简单的语法把可视化的滤镜和转换效果添加到一个标准的html元素上，实现图片、文本等元素对象的特殊效果，为Web页面添加一些丰富变化。CSS滤镜可分为基本滤镜和高级滤镜两种。一种直接作用于对象上，并且立即生效的滤镜称为基本滤镜，也叫做静态滤镜；另一种需要配合JavaScript等脚本语言，产生更多变幻效果的则称为高级滤镜，也做动态滤镜。CSS滤镜的应用有两种方法：一是先定义好CSS滤镜，再在页面中需要的对象上使用预先定义好的CSS滤镜。定义CSS滤镜实际上就是按照滤镜的语法格式设置适合的具体参数即可。二是直接在支持CSS滤镜效果的HTML控件元素上编写CSSfilter代码。CSS滤镜样式的语法规则程序代码style="filter:滤镜名(属性1=值1,属性2=值2)"8.2.9CSS滤镜—alpha滤镜:alpha设置透明渐进效果语法:STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"说明：Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0到100。Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。StartX和StartY：代表渐变透明效果的开始X和Y坐标。FinishX和FinishY：代表渐变透明效果结束X和Y的坐标。例子：filter:Alpha(Opacity="0",FinishOpacity="40",Style="2")8.2.9CSS滤镜—blur滤镜:blur创建高速移动效果，即模糊效果语法:STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"说明：Add：是否单方向模糊，此参数是一个布尔值，true（非0）或false（0）。一般为1，或0。Direction：设置模糊的方向，其中0度代表垂直向上，然后每45度为一个单位，0-315度，步长为45度。Strength：代表模糊的象素值，Strength:效果增长的数值,一般5即可.例子：filter:Blur(Add="1",Direction="45",Strength="5")8.2.9CSS滤镜—Chroma滤镜:Chroma制作专用颜色透明语法:STYLE="filter:Chroma(Color=color)"说明:color:#rrggbb格式，任意.例子：filter:Chroma(Color="#FFFFFF")8.2.9CSS滤镜—DropShadow滤镜:DropShadow创建对象的固定影子语法:STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"说明:Color：指定阴影的颜色。Color:#rrggbb格式，任意。OffX：指定阴影相对于元素在水平方向偏移量，整数。OffY：指定阴影相对于元素在垂直方向偏移量，整数。Positive：是一个布尔值，值为true（非0）时，表示为建立外阴影；为false(0)，表示为建立内阴影。Positive:1或0.例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")8.2.9CSS滤镜—FlipH、FlipV滤镜:FlipH创建水平镜像图片语法:STYLE="filter:FlipH"例子：filter:FlipH滤镜:FlipV创建垂直镜像图片语法:STYLE="filter:FlipV"例子：filter:FlipV8.2.9CSS滤镜—Glow7.滤镜:Glow加光辉在附近对象的边外语法:STYLE="filter:Glow(Color=color,Strength=strength)"说明:Color:发光颜色.Strength:强度(0-100)例子：filter:Glow(Color="#6699CC",Strength="5")8.2.9CSS滤镜—Gray、Invert、Light滤镜:Gray去掉图像的色彩，显示为黑白图象即图片灰度化语法:STYLE="filter:Gray"例子：filter:Gray滤镜:Invert反转图象的颜色，产生类似底片的效果语法:STYLE="filter:Invert"例子：filter:Invert滤镜:Light放置光源的效果，可以用来模拟光源在物体上的投影效果语法:STYLE="filter:Light"例子：filter:Light8.2.9CSS滤镜—Mask、Shadow滤镜:Mask创建透明掩膜在对象上，即建立透明遮罩语法:STYLE="filter:Mask(Color=color)"例子：filter:Mask(Color="#FFFFE0")滤镜:Shadow创建偏移固定影子语法:filter:Shadow(Color=color,Direction=direction)说明:Color：是指阴影的颜色。Color:#rrggbb格式.Direction：是设置投影的方向，0度代表垂直向上，然后每45度为一个单位。例子：filter:Shadow(Color="#6699CC",Direction="135")8.2.9CSS滤镜—Wave滤镜:Wave波纹效果 语法:filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)说明:Add：表示是否显示原对象，0表示不显示，非0表示要显示原对象。Freq：设置波动的个数。LightStrength：设置波浪效果的光照强度，从0到100。0表示最弱，100表示最强。Phase：波浪的起始相角。从0到100的百分数值。（例如：25相当于90度，而50相当于180度。）Strength：设置波浪摇摆的幅度。例子：filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Stren

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论