网页设计6：CSS样式.ppt

网页设计,适用软件学院,第6课:CSS样式,学习目标：学会使用CSS控制页面元素的显示效果学习任务：1、掌握CSS样式的创建、编辑和应用2、掌握滤镜的用法重难点：1、CSS样式的设置2、CSS滤镜的设置和使用,样式样式是指一组可控制文本块或文本区域外观的格式属性。字符的样式是指字符外观的显示方式。Dreamweaver中的常用样式（文本选项卡下）加粗：文字加粗显示。斜体：文字显示为倾斜格式。加强：加强格式根据浏览器不同规定而显示，多为加粗方式显示。强调：强调格式根据浏览器不同规定显示，多为斜体显示。,段落：标签所定义的显示方式。引用块：表明选中的文字是被引用的，有缩进。已编排格式：指的是用户预先对标签中的文字排版格式将在浏览器中原样的显示。字符：插入特殊字符（利用键盘不能直接输入的字符。）使用菜单“文本”“样式”下的子菜单设置文本样式。,CSS样式CSS是一种样式表的技术，全称为“级联样式表”，是用来进行网页风格设计的。CSS的作用可以将格式和结构分离HTML语言只是定义了网页的结构和个别要素的功能，而让浏览器自己决定应该让各要素的显示方式。CSS通过将定义结构的部分和定义格式的部分分离，能够对页面的布局施加更多的控制。CSS可以更精确的控制页面的布局。CSS使网页文件变的更小、下载更快。CSS可以更快更容易的维护及更新大量的网页。,CSS分类嵌入式在独立的文档应用CSS样式外部链接式应用于多个文档，生成专门的*.CSS文件。创建新CSS样式打开CSS样式面板：“窗口”“CSS样式”或Shift+F11单击CSS样式面板中的“新建CSS样式”按钮，打开“新建CSS样式”对话框。,1、名称：为新样式命名（名称前必须以英文句点开头，如无此点，Dreamweaver自动添加）2、选择器类型：类：自定义一个新的样式，可应用于任何标签。,标签：重新定义HTML标签，定义之后不需要选中对象就直接应用到页面中去了。高级：针对超级链接状态进行设置。共四种状态。a:Link：超级链接的正常状态，没有任何动作的时候。a:Visited：访问过的超级链接状态。a:Hover：光标移上超级链接状态。a:Active：选中超级链接状态。3、定义在：新建样式表文件：在网页外部定义一个新的CSS样式表文件。仅对该文档：将CSS样式定义在该文档内部，仅能在该文档中应用。,编辑现有样式：内部CSS样式的修改：在CSS面板中右击样式，在弹出菜单中选择“编辑”，在“样式定义”对话框中编辑样式。外部CSS样式的修改：(方法同上)应用CSS样式：应用嵌入式CSS样式如果设置段落将光标定位在段落中或选中段落，如果设置多个段落需要选中这些段落，如果设置字符需要选中字符在CSS样式面板中，选择某个样式右击选择“套用”或者在属性面板样式菜单中选择某个样式。,应用外部链接式CSS样式打开CSS样式面板单击“附加样式表”按钮，打开“链接外部样式表”对话框。在“文件/URL”文件域中输入或通过浏览找到外部CSS样式表地址和名称。链接：通过链接调用外部样式表文件导入：在页面打开时加载外部样式表文件。,重置：在现有样式的基础上创建新样式。删除样式：选中样式，单击“删除CSS样式”按钮。定义CSS样式设置CSS样式的8个面板：类型、背景、区块、方框、边框、列表、定位、扩展类型：此面板可定义样式的基本类型设置。字体：为样式设置字体类型。大小：定义文本字体的大小。粗细：对字体应用指定的或相对的粗细度。样式：指定样式为普通、斜体或偏斜体。变量：设置字体变量（主要应用于英文）.,行高：设置文本所在地方的行高。大小写：设置文本的大小写状态（应用于英文。）装饰：使用下划线、上划线、删除线装饰文本。闪烁效果只在NC浏览器中可以看到。颜色：定义文本颜色。背景：此面板主要是对元素的背景进行设置，包括背景颜色、背景图象、背景图象的控制。一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。背景颜色：设置元素的背景色。背景图像：设置元素的背景图像。重复：确定背景图像是否以及如何重复。,重复：在元素的背景部分水平和垂直方向平铺图像。不重复：在元素的开头显示一遍图像。横向重复：在水平方向重复显示纵向重复：在垂直方向重复显示附件：固定背景图像在最初位置或者跟随内容滚动。有些浏览器会将固定当作滚动看待。水平位置：指定背景图像的水平位置。左对齐、右对齐和居中分别是指相对于元素的对齐方式。垂直位置：指定背景图像的垂直位置。顶部、居中、底部分别是指相对于元素的对齐方式。,区块：此面板主可定义样式的空格和对齐方式。单词间距：设置单词之间的间距。可以设置负值。字母间距：设置字符之间的间距。可以指定负值。因为中文也是字符，这个参数可以设置文字间的间距。垂直方式：指定元素的垂直对齐方式。通常是相对于其上一级而言的。文本对齐：设置文本在元素内的对齐方式。文字缩进：设置文本第一行的缩进值。负值用于将文本第一行向外拉。要在每段前空两格，可设置为2em，因为em是当前字体尺寸，2em就是两个字的大小。,空格：设置如何处理元素内的空白符（指代码）。正常：会将空白符全部压缩；保留：所有的空白符，包括空格，标签，回车，等都会得以保留不换行：指定文本只有遇到br标签时才换行。方框：此面板主要设置对象的边界、间距、高度、宽度、和漂浮方式等。宽：定义元素的宽。高：定义元素的高。注意：宽和高定义的对象多为图片，表格，层等。浮动：定义元素的漂浮方式。左对齐表示对象浮在左边、右对齐表示对象浮在右边、无表示对象不浮动。,清除：“左对齐”表示不允许左边有浮动对象、“右对齐”表示不允许右边有浮动对象、“无”表示允许两边都可以有浮动对象、“两者都不允许有浮动对象。填充：定义元素内容与其边框的间距（如果没有边框则指页边的空白）边界：定义元素的边框与其他元素之间的距离（如果没有边框就是指内容之间的距离）。,边框：此面板可以设置对象边框的宽度、颜色及样式列表：面板可以设置列表项样式、列表项图片、和位置。类型：决定项目符号或编号的外观。项目符号图像：允许指定项目符号的自定义图像。位置：决定列表项换行时是缩进还是边缘对齐。定位：此地面板改变选定文本的标签或文本块，文本块变为新层。类型：决定浏览器定位层的方式。绝对：使用在“定位”框中输入的相对于页面左上角的坐标放置层。相对：相对于文档中的对象位置的坐标放置层。,静态：将层定位在文本自身的位置。显示：决定层的初始显示状态。宽和高：设置层的高度和宽度。Z轴：决定层的放置顺序。溢出：决定在层的内容超出其大小时的处理方式。可见:扩展层的大小使其所有内容可见。隐藏：保持层的大小，剪切其超出部分。滚动：不论内容是否超出层的大小均为层添加滚动条自动：只有在内容超出层的边界时才出现滚动条。,定位：指定层的位置和大小。剪辑：定义层的可见部分，可以使用脚本语言读取该区域。,扩展：分页：在打印的时候强迫在样式控制的对象前后换页视觉效果：鼠标：当鼠标滑过样式控制的对象时改变鼠标形状。过滤器：对由样式控制的对象应用特殊效果。,过滤器效果Alpha：设置透明度Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0到100。Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。StartX和StartY：代表渐变透明效果的开始X和Y坐标。FinishX和FinishY：代表渐变透明效果结束X和Y的坐标。,BlendTrans：图像之间的淡入和淡出的效果Duration：淡入或淡出的时间。注意：这个滤镜必须配合JS建立图片序列，才能做出图片间效果。Blru：建立模糊效果Add：是否单方向模糊，此参数是一个布尔值，true（非0）或false（0）。Direction：设置模糊的方向，其中0度代表垂直向上，然后每45度为一个单位。Strength：代表模糊的象素值。Chroma：把指定的颜色设置为透明Color：是指要设置为透明的颜色。,DropShadow：建立阴影效果Color：指定阴影的颜色。OffX：指定阴影相对于元素在水平方向偏移量，整数。OffY：指定阴影相对于元素在垂直方向偏移量，整数。Positive：是一个布尔值，值为true（非0）时，表示为建立外阴影；为false(0)，表示为建立内阴影。FlipH：将元素水平反转FlipV：将元素垂直反转Glow：建立外发光效效果Color：是指定发光的颜色。Strength：光的强度，可以是1到255之间的任何整数，数字越大，发光的范围就越大。,Gray：去掉图像的色彩，显示为黑白图象Invert：反转图象的颜色，产生类似底片的效果Light：放置光源的效果，可以用来模拟光源在物体上的投影效果注意：此效果需要用JS设置光的位置和强度。Mask：建立透明遮罩Color：设置底色，让对象遮住底色的部分透明。Shadow：建立另一种阴影效果Color：是指阴影的颜色。Direction：是设置投影的方向，0度代表垂直向上，然后每45度为一个单位。,Wave：波纹效果Add：表示是否显示原对象，0表示不显示，非0表示要显示原对象。Freq：设置波动的个数。LightStrength：设置波浪效果的光照强度，从0到100。0表示最弱，100表示最强。Phase：波浪的起始相角。从0到100的百分数值。（例如：25相当于90度，而50相当于180度。）Strength：设置波浪摇摆的幅度。Xra