第10章CSS的使用.ppt

《第10章CSS的使用.ppt》由会员分享，可在线阅读，更多相关《第10章CSS的使用.ppt（24页珍藏版）》请在三一办公上搜索。

1、第10章 CSS的使用,本章内容,了解层叠样式表 关于“CSS 样式”面板 使用“CSS 样式”面板 创建新的 CSS 规则 应用类样式 导出样式以创建 CSS 样式表 链接到或导出外部 CSS 样式表 编辑 CSS 规则 编辑 CSS 样式表 CSS滤镜的使用,任务赚钱类网站收集（含赚钱流程）：http:/,术语专解,层叠样式表(CSS)是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML 代码）位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件（外部样式表）或 HTML 文档的另一部

2、分（通常为 部分）中。使用 CSS 可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。CSS 使您可以控制许多仅使用 HTML 无法控制的属性。例如，您可以为所选文本指定不同的字体大小和单位（像素、磅值等）。通过使用 CSS 从而以像素为单位设置字体大小，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。,任务赚钱类网站收集（含赚钱流程）：http:/,CSS语法,CSS 格式设置规则由两部分组成：选择器和声明。选择器是标识已设置格式元素（如 P、H1、类名称或 ID）的术语，而声明则用于定义样式元素。在下面的示例中，H1 是选择器，介于大括号()之间的所有内容

3、都是声明：H1 font-size:16 pixels;font-family:Helvetica;font-weight:bold;声明由两部分组成：属性（如 font-family）和值（如 Helvetica）。上述示例为 H1 标签创建了样式：链接到此样式的所有 H1 标签的文本都将是 16 像素大小并使用 Helvetica 字体和粗体。,任务赚钱类网站收集（含赚钱流程）：http:/,CSS最大优点,术语“层叠”是指对同一个元素或 Web 页面应用多个样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一文本。所定义的样式

4、“层叠”到您的 Web 页面上的元素，并最终创建您想要的设计。CSS 的主要优点是容易更新；只要对一处 CSS 规则进行更新，则使用该定义样式的所有文档的格式都会自动更新为新样式。,CSS样式的分类,自定义 CSS 规则（也称为“类样式”）使您可以将样式属性应用到任何文本范围或文本块。所有类样式均以句点(.)开头。例如，您可以创建称为.red 的类样式，设置规则的 color 属性为红色，然后将该样式应用到一部分已定义样式的段落文本中。HTML 标签规则重定义特定标签（如 p 或 h1）的格式。创建或更改 h1 标签的 CSS 规则时，所有用 h1 标签设置了格式的文本都会立即更新。CSS 选

5、择器规则（高级样式）重定义特定元素组合的格式，或其它 CSS 允许的选择器形式的格式（例如，每当 h2 标题出现在表格单元格内时，就应用选择器 td h2）。高级样式还可以重定义包含特定 id 属性的标签的格式（例如，由#myStyle 定义的样式可以应用到所有包含属性/值对 id=myStyle 的标签）。,任务赚钱类网站收集（含赚钱流程）：http:/,自定义 CSS 规则,类名称必须以句点开头，并且可以包含任何字母和数字组合（例如.myhead1）。如果您没有输入开头的句点，Dreamweaver 将自动为您输入。类样式需要手工运用到对象。语法：class=“类名称”,重定义 HTML

6、标签,若要重定义特定 HTML 标签的默认格式设置，请选择“标签”选项，然后在“标签”文本框中输入一个 HTML 标签，或从弹出式菜单中选择一个标签。重定义标签必须使用内置HTML标签，不能发明第三方标签，否则无效；重定义标签会自动运用到对象，不需要手工运用；容器越小，优先级越高；,任务赚钱类网站收集（含赚钱流程）：http:/,CSS 选择器规则,若要为具体某个标签组合或所有包含特定 Id 属性的标签定义格式设置，请选择“高级”选项，然后在“选择器”文本框中输入一个或多个 HTML 标签，或从弹出式菜单中选择一个标签。弹出式菜单中提供的选择器（称作伪类选择器）包括 a:active、a:ho

7、ver、a:link 和 a:visited。注：伪类选择器是专用来控制超链接的四种状态，且顺序必须为a:linka:visiteda:hovera:active;注：每一个页面的ID必须唯一；,导出样式以创建 CSS 样式表,可以从文档中导出样式以创建新的 CSS 样式表。然后，可链接到其他文档以应用这些样式。若要从文档中导出 CSS 样式并创建 CSS 样式表，请执行以下操作：选择“文件”“导出”“CSS 样式”或选择“文本”“CSS 样式”“导出”。出现“导出样式为 CSS 文件”对话框。输入样式表的名称，然后单击“保存”。样式随即保存为 CSS 样式表。注:导出样式只局限于内嵌式样式表

8、,对链接式样式表无效!,任务赚钱类网站收集（含赚钱流程）：http:/,链接到或导出外部 CSS 样式表,编辑外部 CSS 样式表时，链接到该 CSS 样式表的所有文档全部更新以反映所做的编辑。可以导出文档中包含的 CSS 样式以创建新的 CSS 样式表，然后附加或链接到外部样式表以应用那里所包含的样式。当然，您可以将创建的任何样式表附加到页面或复制到站点中。此外，Dreamweaver 附带了预置的样式表，这些样式表可以自动移入站点并附加到页面。若要链接到或导出外部 CSS 样式表，请执行以下操作：执行下列操作之一打开“CSS 样式”面板：选择“窗口”“CSS 样式”。按 Shift+F11

9、 键。在“CSS 样式”面板中，单击“附加样式表”按钮。（该按钮位于面板的右下角。）完成对话框设置，然后单击“确定”。有关说明，请单击对话框中的“帮助”按钮。,编辑 CSS 样式表,CSS 样式表通常包含一个或多个规则。可以使用“CSS 样式”面板在 CSS 样式表中编辑单个规则，或者，如果您喜欢，可以直接在 CSS 样式表中工作。若要编辑 CSS 样式表，请执行以下操作：在“CSS 样式”面板中（“窗口”“CSS 样式”），选择“所有”模式。在“所有规则”窗格中，双击要编辑的样式表的名称。在“文档”窗口中，根据需要修改样式表，然后保存样式表。,任务赚钱类网站收集（含赚钱流程）：http:/,

10、CSS滤镜详解,Alpha 滤镜 语法：filter：alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)Alpha属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。他们的参数含义分别如下：“opacity代表透明度水准。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明

11、，100代表完全不透明。”finishopacity是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。“style 参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。”STARTX“和”STARTY“代表渐变透明效果的开始X和Y坐标。”FINISHX“和”FINISHY“代表渐变透明效果结束X和Y 的坐标。,CSS滤镜详解,Blur 滤镜语法：对于HTML：filter:blur(add=?,direction=?,strength=?)对于Script语言：oblurfilter=object.fi

12、lters.blur用手指在一幅尚未干透的油画上迅速划过时，画面就会变得模糊。”Blur就是产生同样的模糊效果。“ADD”参数是一个布尔判断“TRUE（默认）”或者“FALSE”。它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的，“DIRECTION”参数用来设置模糊的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。“STRENGTH“值只能使用整数来指定，她代表有多少像素的宽度将受到模糊影响。默认是5个。对于网页上的字体，如果设置他的模糊”ADD=1“，那么这些字体的效果会非常好看的。如下：filter:blur(add=ture,dir

13、ection=135,strength=10）,任务赚钱类网站收集（含赚钱流程）：http:/,CSS滤镜详解,FlipH,FlipV 滤镜 语法：filter:filph,filter:filpv 分别是水平反转和垂直反转,CSS滤镜详解,Chroma 滤镜语法：filter:chroma(color=color)使用”Chroma属性可以设置一个对象中指定的颜色为透明色，参数COLOR即要透明的颜色。下面是兰色文字，然后用Chroma 滤镜过滤掉兰色，就成了下面的样子。filter:chroma(color=blue),CSS滤镜详解,DropShadow 滤镜语法：filter:drop

14、shadow(color=color,offx=ofx,offy=offy,positive=positive)“DropShaow顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量，加上较深。Color代表投射阴影的颜色，offx和offy分别是X方向和Y方向阴影的饿偏移量。Positive参数是一个布尔值，如果为“TRUE（非0）”，那么就为任何的非透明像素建立可见的投影。如果为“FASLE（0）”，那么就为透明的像素部分建立透明效果,任务赚钱类网站收集（含赚钱流程）：http:/,CSS滤镜详解,Glow 滤镜语法：filter:glow(color=color,strength

15、)当对一个对象使用glow属性后，这个对象的边缘就会产生类似发光的效果。“COLOR”是指定发光的颜色，“STRENGTH”则是强度的表现，可以从1到255之间的任何整数来指定这个力度。filter:glow(color=red,strength=10)后的效果filter:glow(color=#ffff00,strength=5)后的效果,CSS滤镜详解,Gray,Invert,Xray 滤镜语法：filter:gray,filter:invert,filter:xrayGray滤镜是把一张图片变成灰度图；Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值；Xray滤

16、镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片。,任务赚钱类网站收集（含赚钱流程）：http:/,CSS滤镜详解,Light 滤镜语法：Filterlight这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT滤镜属性，那么就可以调用它的“方法(Method)来设置或者改变属性。“LIGHT可用的方法有：AddAmbient 加入包围的光源 AddCone 加入锥形光源 AddPoint 加入点光源 Changecolor 改变光的颜色 Changestrength 改变光源的强度 Clear 清除所有的光源 MoveLight 移动光源 可以定义光源的虚拟位置，以及通过

17、调整X轴和Y轴的数值来控制光源焦点的位置，还可以调整光源的形式（点光源或者锥形光源）指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源，可能回产生一些意想不到的效果。后面几页会有具体范例。,CSS滤镜详解,Mask 滤镜语法：filter:mask(color=color)使用MASK属性可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。,CSS滤镜详解,Shadow 滤镜语法：filter:shadow(color=color,direction=direction)利用“Shadow”属性可以在指定的方向建立物体的投影，COLOR是投影色，DIRECTION

18、是设置投影的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。filter:shadow(color=red,direction=225)filter:shadow(color=blue,direction=225)filter:shadow(color=gray,direction=225),CSS滤镜详解,Wave 滤镜 语法：filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)wave 属性把对象按垂直的波形样式打乱。默认是“TRUE（非0）”，

19、“add”表示是否要把对象按照波形样式打乱，“freq”是波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹，“lightstrength”参数可以对于波纹增强光影的效果，范围0-100，“phase”参数用来设置正弦波的偏移量。“strength”代表振幅大小。,任务赚钱类网站收集（含赚钱流程）：http:/,滤镜效果描述,Alpha 设置透明度 Blur 建立模糊效果 Chroma 把指定的颜色设置为透明 DropShadow 建立一种偏移的影象轮廓，即投射阴影 FlipH 水平反转 FlipV 垂直反转 Glow 为对象的外边界增加光效 Grayscale 降低图片的彩色度 Invert 将色彩、饱和度以及亮度值完全反转建立底片效果 Light 在一个对象上进行灯光投影 Mask 为一个对象建立透明膜 Shadow 建立一个对象的固体轮廓，即阴影效果 Wave 在X轴和Y轴方向利用正弦波纹打乱图片 Xray 只显示对象的轮廓,