《第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 只显示对象的轮廓,