《第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:/ 格式设置规则由两部分组成:选择器和声明。选择器是标识已设置格式元素(如 P、H1、类名称或 ID)的术语,而声明则用于定义样式元素。在下面的示例中,H1 是选择器,介于大括号 () 之间的所有内容都是声明: H1 font-si
3、ze:16 pixels; font-family:Helvetica; font-weight:bold; 声明由两部分组成:属性(如 font-family)和值(如 Helvetica)。上述示例为 H1 标签创建了样式:链接到此样式的所有 H1 标签的文本都将是 16 像素大小并使用 Helvetica 字体和粗体。,任务赚钱类网站收集(含赚钱流程):http:/ Web 页面应用多个样式的能力。例如,可以创建一个 CSS 规则来应用颜色,创建另一个规则来应用边距,然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到您的 Web 页面上的元素,并最终创建您想要的设计。 CSS
4、的主要优点是容易更新;只要对一处 CSS 规则进行更新,则使用该定义样式的所有文档的格式都会自动更新为新样式。,CSS样式的分类,自定义 CSS 规则(也称为“类样式”)使您可以将样式属性应用到任何文本范围或文本块。所有类样式均以句点 (.) 开头。例如,您可以创建称为 .red 的类样式,设置规则的 color 属性为红色,然后将该样式应用到一部分已定义样式的段落文本中。 HTML 标签规则重定义特定标签(如 p 或 h1)的格式。创建或更改 h1 标签的 CSS 规则时,所有用 h1 标签设置了格式的文本都会立即更新。 CSS 选择器规则(高级样式)重定义特定元素组合的格式,或其它 CSS
5、 允许的选择器形式的格式(例如,每当 h2 标题出现在表格单元格内时,就应用选择器 td h2)。高级样式还可以重定义包含特定 id 属性的标签的格式(例如,由 #myStyle 定义的样式可以应用到所有包含属性/值对 id=“myStyle“ 的标签)。,任务赚钱类网站收集(含赚钱流程):http:/ CSS 规则,类名称必须以句点开头,并且可以包含任何字母和数字组合(例如.myhead1)。如果您没有输入开头的句点,Dreamweaver 将自动为您输入。 类样式需要手工运用到对象。 语法:class=“类名称”,重定义 HTML 标签,若要重定义特定 HTML 标签的默认格式设置,请选择
6、“标签”选项,然后在“标签”文本框中输入一个 HTML 标签,或从弹出式菜单中选择一个标签。 重定义标签必须使用内置HTML标签,不能发明第三方标签,否则无效; 重定义标签会自动运用到对象,不需要手工运用; 容器越小,优先级越高;,任务赚钱类网站收集(含赚钱流程):http:/ 选择器规则,若要为具体某个标签组合或所有包含特定 Id 属性的标签定义格式设置,请选择“高级”选项,然后在“选择器”文本框中输入一个或多个 HTML 标签,或从弹出式菜单中选择一个标签。弹出式菜单中提供的选择器(称作伪类选择器)包括 a:active、a:hover、a:link 和 a:visited。 注:伪类选择
7、器是专用来控制超链接的四种状态,且顺序必须为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 键。 在“CSS 样式”面板中,单击“附加样式表”
9、按钮。(该按钮位于面板的右下角。) 完成对话框设置,然后单击“确定”。 有关说明,请单击对话框中的“帮助”按钮。,编辑 CSS 样式表,CSS 样式表通常包含一个或多个规则。可以使用“CSS 样式”面板在 CSS 样式表中编辑单个规则,或者,如果您喜欢,可以直接在 CSS 样式表中工作。 若要编辑 CSS 样式表,请执行以下操作: 在“CSS 样式”面板中(“窗口”“CSS 样式”),选择“所有”模式。 在“所有规则”窗格中,双击要编辑的样式表的名称。 在“文档”窗口中,根据需要修改样式表,然后保存样式表。,任务赚钱类网站收集(含赚钱流程):http:/ 滤镜 语法:filter:alpha(
10、opacity=opacity,finishopacity=finishopacity,style=style,startx=startx, starty=starty,finishx=finishx,finishy=finishy) “Alpha“属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标,可以指定点、线、面的透明度。他们的参数含义分别如下: “opacity“代表透明度水准。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。”finishopacity“
11、是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是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.filters.blur 用手指在一幅尚未干透
12、的油画上迅速划过时,画面就会变得模糊。”Blur“就是产生同样的模糊效果。 “ADD”参数是一个布尔判断“TRUE(默认)”或者“FALSE”。它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的,“DIRECTION”参数用来设置模糊的方向。其中0度代表垂直向上,然后每45度为一个单位。它的默认值是向左的270度。“STRENGTH“值只能使用整数来指定,她代表有多少像素的宽度将受到模糊影响。默认是5个。对于网页上的字体,如果设置他的模糊”ADD=1“,那么这些字体的效果会非常好看的。如下: filter:blur(add=ture,direction=135,streng
13、th=10),任务赚钱类网站收集(含赚钱流程):http:/ FlipV 滤镜 语法:filter:filph ,filter:filpv 分别是水平反转和垂直反转,CSS滤镜详解,Chroma 滤镜 语法:filter:chroma(color=color) 使用”Chroma“属性可以设置一个对象中指定的颜色为透明色,参数COLOR即要透明的颜色。下面是兰色文字,然后用Chroma 滤镜过滤掉兰色,就成了下面的样子。 filter:chroma(color=blue),CSS滤镜详解,DropShadow 滤镜 语法:filter:dropshadow(color=color,offx=o
14、fx,offy=offy,positive=positive) “DropShaow“顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量,加上较深。“Color“代表投射阴影的颜色,“offx“和“offy“分别是X方向和Y方向阴影的饿偏移量。“Positive“参数是一个布尔值,如果为“TRUE(非0)”,那么就为任何的非透明像素建立可见的投影。如果为“FASLE(0)”,那么就为透明的像素部分建立透明效果,任务赚钱类网站收集(含赚钱流程):http:/ 滤镜 语法:filter:glow(color=color,strength) 当对一个对象使用“glow“属性后,这个对象的边缘
15、就会产生类似发光的效果。“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:xray Gray滤镜是把一张图片变成灰度图;Invert滤镜是把对象的可视化属性全部翻转,包括色彩、饱和度、和亮度值;Xray滤镜是让对象反映出它的轮廓并把这些
16、轮廓加亮,也就是所谓的“X”光片。,任务赚钱类网站收集(含赚钱流程):http:/ 滤镜 语法:Filterlight 这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT“滤镜属性,那么就可以调用它的“方法(Method)“来设置或者改变属性。“LIGHT“可用的方法有: AddAmbient 加入包围的光源 AddCone 加入锥形光源 AddPoint 加入点光源 Changecolor 改变光的颜色 Changestrength 改变光源的强度 Clear 清除所有的光源 MoveLight 移动光源 可以定义光源的虚拟位置,以及通过调整X轴和Y轴的数值来控制光源焦点的位置,还可以
17、调整光源的形式(点光源或者锥形光源)指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源,可能回产生一些意想不到的效果。后面几页会有具体范例。,CSS滤镜详解,Mask 滤镜 语法:filter:mask(color=color) 使用“MASK“属性可以为对象建立一个覆盖于表面的膜,其效果就象戴者有色眼镜看物体一样。,CSS滤镜详解,Shadow 滤镜 语法:filter:shadow(color=color,direction=direction) 利用“Shadow”属性可以在指定的方向建立物体的投影,COLOR是投影色,DIRECTION是设置投影的方向。其中0度代表垂直向
18、上,然后每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)”, “add”表示是否要把
19、对象按照波形样式打乱, “freq”是波纹的频率,也就是指定在对象上一共需要产生多少个完整的波纹, “lightstrength”参数可以对于波纹增强光影的效果,范围0-100, “phase”参数用来设置正弦波的偏移量。 “strength”代表振幅大小。,任务赚钱类网站收集(含赚钱流程):http:/ 设置透明度 Blur 建立模糊效果 Chroma 把指定的颜色设置为透明 DropShadow 建立一种偏移的影象轮廓,即投射阴影 FlipH 水平反转 FlipV 垂直反转 Glow 为对象的外边界增加光效 Grayscale 降低图片的彩色度 Invert 将色彩、饱和度以及亮度值完全反转建立底片效果 Light 在一个对象上进行灯光投影 Mask 为一个对象建立透明膜 Shadow 建立一个对象的固体轮廓,即阴影效果 Wave 在X轴和Y轴方向利用正弦波纹打乱图片 Xray 只显示对象的轮廓,
链接地址:https://www.31doc.com/p-3499766.html