网页制作 CSS.ppt

1、网页制作,第6章CSS层叠样式表,CSS（Cascading Style Sheets）层叠样式表是用于控制网页样式并能够将样式信息与网页内容分离的一种标记型语言。 CSS将文档呈现出各种效果，甚至可以改变文档元素在页面中的位置。 不过CSS只是改变视觉效果，文档元素的逻辑嵌套结构不会被改变。,目录,6.1层叠样式表优势 6.2与样式连用的HTML元素 6.3CSS基础语法 6.4CSS的使用 6.5Dreamweaver 8的CSS操作 6.6Dreamweaver 8的CSS定义 6.7CSS伪类和链接,6.1层叠样式表优势,强大的控制能力和排版能力 提高了网页的浏览速度 缩短修改时间、提

2、高工作效率 更有利于搜索引擎的搜索,6.2与样式连用的HTML元素,1.标记符 2.标记符,1.标记符,标记符用来在网页中创建一个有特别格式的分区或区域，它可以用来格式化该区域并在该部分的前面或后面加入一个断行符。 标记符可以包含其他区块级标记（例如段落，图片，表格等）。,2.标记符,标记符将在页面中格式化某个区域，这个区域在物理上是不通过断行符与其他区域相分离的。 如果在一个区域里面的某个部分格式化（例如一个段落中某些文字），可以使用标记符。,6.3 CSS基础语法,1. 基本规则 2. 组规则 3. 继承（层叠）规则 4. 类规则 5. ID规则 6. 嵌套规则,1. 基本规则,语法： 选

3、择符属性1：值1；属性2：值2； CSS的语法包括选择符、属性和属性值三部分。 选择符可以理解为对象的引用。 属性和值是这个对象的属性和相应的值。,例如： p color：#FF0000； font-family: 新宋体; font-size: 14px; ,2. 组规则,语法： 选择符1，选择符2，属性1：值1；属性2：值2； 需要对不同的选择符进行相同样式的定义时，可以使用CSS的组规则。,例如： p，h1，td color：#FF0000； font-family: 新宋体; font-size: 14px; ,3. 继承（层叠）规则,当对一个HTML标签定义了CSS样式后，样式会自动

4、继承给这个HTML标签的所有子标签。,例如： p color：#FF0000； font-family: 新宋体; font-size: 14px; 123ABC,4. 类规则,语法： .选择符属性1：值1；属性2：值2； 类规则可以把样式定义为一个与任何对象都无关的独立体。并且这个样式可以使用在任何HTML标记符上。 定义时选择符前面有个英文句点“.”。调用时使用HTML标记符的class属性。,例如： .p14 color：#FF0000； font-family: 新宋体; font-size: 14px; 段落 标题1,5. ID规则,语法： #选择符属性1：值1；属性2：值2； 一个

5、ID规则定义的样式通常只能用于一个标签上。 定义时选择符前面有个英文句点“#”。,例如： #par1 color：#FF0000； font-family: 新宋体; font-size: 14px; 段落,6. 嵌套规则,语法： 选择符1 选择符2 属性1：值1；属性2：值2； 嵌套规则为了从结构上保持一个关联性。 选择符可以是HTML标记符、类或者ID。,例如： p span color：#FF0000； font-family: 新宋体; font-size: 14px; 123ABC,6.4CSS的使用,1.内嵌样式 2.内联样式 3.外部样式 4.导入样式,1.内嵌样式,内嵌样式可应

6、用于整个网页，它被放在网页部分的标记之中。,2.内联样式,内联样式以HTML标记符的style属性进行定义。,3.外部样式,外部样式是将CSS格式定义放在与HTML文档相分离的文本文件中。在HTML网页部分，使用标记将外部样式文件和网页之间进行连接。 外部样式表文本文件的扩展名为.css，并且只包含样式规则，不包含任何HTML标记。 外部样式表文件可以连接到多个网页中。,4.导入样式,导入外部样式表是指在内部样式表的区域里引用一个外部的样式表文件，导入时需要使用import声明。在使用中，import声明必须在样式表定义的开始部分，而其他样式表的定义都要在import声明之后。 importu

7、rl(样式表的地址) ,6.5Dreamweaver 8的CSS操作,Dreamweaver 8中的CSS设置可以通过菜单【文本】|【CSS样式】、【CSS】浮动面板或代码方式来完成。推荐使用【CSS】浮动面板，它可以很直观而简洁地进行设置CSS格式。,1.新建样式 2.编辑样式 3.删除样式 4.链接或导入样式,1.新建样式,单击【CSS】浮动面板下方的 按钮，可以弹出【新建CSS规则】对话框。,（1）选择器类型：,选择新建CSS规则的CSS类型。 1）类（可应用于任何标签）：用于建立自定义类名类型CSS样式。 2）标签（重新定义特定标签的外观）：用于建立HTML元素类型CSS样式。 3）高

8、级（ID、伪类选择器等）：用于建立id类型、CSS伪类等其他CSS样式。,（2）名称：,在此输入新建CSS类型的选择符名称。,（3）定义在：,选择新建的CSS规则存放方式。 1）（新建样式表文件）：用于新建外部样式表文件或选择已有外部样式表文件，将新建的CSS规则采用外部样式方式。 2）仅对该文档：将新建的CSS规则采用内嵌样式方式。,（4）确定,可以弹出【CSS规则定义】对话框进行CSS规则设置。,2.编辑样式,选择一个已有CSS选择符，然后单击【CSS】浮动面板下方的 按钮，可以弹出【CSS规则定义】对话框，对已有CSS选择符的CSS规则进行修改。,3.删除样式,选择一个已有CSS选择符，

9、然后单击【CSS】浮动面板下方的 按钮，可以删除选中的CSS选择符，没有提示，但可以通过菜单【编辑】|【撤销】，撤销删除样式的操作。,4.链接或导入样式,单击【CSS】浮动面板下方的 按钮，可以打开【链接外部样式表】对话框。,（1）文件/URL,选择或输入外部CSS样式文件位置和文件名，指定外部CSS样式文件。,（2）添加为：,1）链接：外部CSS文件采用外部样式方式使用。 2）导入：外部CSS文件采用导入样式方式使用。,（3）媒体：,选择CSS文件应用于什么媒体显示，默认为屏幕方式。,6.6Dreamweaver 8的CSS定义,1.类型 2.背景 3.区块 4.方框 5.边框 6.列表 7

10、.定位 8.扩展,1.类型,字体font-family 设置文本所用的字体。 大小font-size 设置文本所用的字号，单位常用px（像素）、pt（点或磅）、em（当前字体字母M的宽度）。 粗细font-weight 设置文本的加粗效果。,样式font-style 设置文本的倾斜效果。 变体font-variant 设置英文文本的变体效果。（不常用） 行高line-height 设置文本行高。这个值常见是使用百分比。 大小写text-transform 设置英文文本的大小写。（不常用）,修饰text-decoration 设置文本的一些修饰格式，包括下划线、上划线、删除线、闪烁（IE不支持）

11、和无。 颜色color 设置文本颜色。,2.背景,背景颜色background-color 设置页面元素背景色。 背景图像background-image 设置页面元素背景图像。 重复background-repeat 设置背景图像是否重复显示，包括不重复、重复（默认）、横向重复、纵向重复。,附件background-attachment 设置页面元素的背景图像是否随对象内容滚动而滚动。 水平位置，垂直位置 background-position或background-positionX、background-positionY 设置页面元素的背景图像位置。,3.区块,单词间距word-spa

12、cing 设置英文文本单词与单词之间的间隔距离。 字母间距letter-spacing 设置英文文本字母之间距离或中文文本字与字之间距离。 垂直对齐vertical-align 设置页面元素内部对象的纵向对齐方式。单元格可以使用，div标记无效。,文本对齐text-align 设置页面元素内部对象的水平对齐方式。 文字缩进text-indent 设置页面元素内部文本对象的首行缩进效果。,空格white-space 设置如何处理元素内容的空白（空格、制表符、回车等）。值为： 【正常】（normal）：将多个空白合成一个。 【保留】（pre）：保留空白原来效果。 【不换行】（nowrap）：设置文

13、本只有遇到标记符才换行。,显示display 设置是否以及如何显示页面元素。 常用值为： 【无】（none）：隐藏相应页面元素，并消除该元素所占空间。 【内嵌】（inline）：将页面元素设置为行内对象。 【块】（block）：将页面元素设置为块状对象。对象之后会增加新行。,4.方框,宽width 设置页面块状元素的宽度。 高height 设置页面块状元素的高度。 浮动float 设置页面块状元素放置到所在容器的左侧或右侧最远端。其他内容将环绕在悬浮元素周围。值为none，left，right。,清除clear 设置不允许有浮动对象的边。值为none，left，right，both。 填充pa

14、dding 设置块状元素内容和边框之间的距离。 边界margin 设置块状元素边框与四周元素的距离。,5.边框,样式border-style 设置边框类型。 值为none（无边框）、hidden（隐藏边框。IE不支持）、dotted（点线）dashed（虚线）、solid（实线）、double（双线边框）、groove（3D凹槽）、ridge（菱形边框）、inset（3D凹边）、outset（3D凸边）。,宽度width 设置边框宽度。 值为medium（默认宽度）、thin（小于默认宽度）、thick（大于默认宽度）、length（指定数值）。 颜色color 设置边框颜色。,6.列表,类型

15、list-style-type 设置列表的列表项所使用的预设标记。 值为disc（实心圆）、circle（空心圆）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（不使用项目符号）。,项目符号图像list-style-image 设置作为列表的列表项标记的图像。 值为none（不使用图像）、url (url)（设置图像位置）。,位置list-style-position 设置作为列表的列表项标记如何根据文本排列。 值为

16、outside（列表项目标记放置在文本以外，且环绕文本不根据标记对齐）、inside（列表项目标记放置在文本以内，且环绕文本根据标记对齐）,7.定位,类型position 设置对象的定位方式。值为： static（无特殊定位，对象遵循HTML定位规则）、 absolute（将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。）、 relative（对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置）、 fixed（将对象固定在屏幕上）,宽width 同“方框”的宽。设置块状对象宽度

17、。 高height 同“方框”的高。设置块状对象高度。 显示visibility 设置页面对象的显示效果。 值为：inherit（继承上一个父对象的可见性）、visible（对象可视）、hidden（对象隐藏）,Z轴z-index 设置对象的层叠顺序（对象定位方式是absolute或relative）。 值为：auto（遵从其父对象的定位）、number（无单位的整数值，可为负数。数值大，层叠在上。）,溢位overflow 设置对象内容超出其指定长度或宽度时的处理方法。 值为：visible（不剪切内容也不添加滚动条，内容全部显示。）、auto（在需要时添加滚动条）、hidden（不显示超过对

18、象尺寸的内容）、scroll（总是显示滚动条）,置入top, right, bottom, left 设置对象与其父对象的位置关系。 top，right，bottom，left：分别设置对象与父对象上方，右方，下方，左方的距离。主要设置top和left。 值为：auto（无特殊定位，根据HTML定位规则在文档流中分配）、length（数值或百分比）,裁切clip 设置对象的可视区域。区域外的部分是透明的。 值为：auto（对象无剪切）、rect ( number number number number )（依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数

19、值都可用auto替换，即此边不剪切）。,8.扩展,分页之前page-break-before 分页之后page-break-after 这两项是关于页面打印的分页设置的，通常不用设置。,光标cursor 设置鼠标指针效果。 值为：auto、crosshair、default、hand、move、help、wait、text、w-resize、s-resize、n-resize、e-resize、ne-resize、sw-resize、se-resize、nw-resize、pointer（前面都是用户系统的鼠标指针效果）；url (url)（指定某张图片为鼠标指针效果，如.ani或.cur图片

20、。）,滤镜filter 设置对象所应用的滤镜效果。 值为： filter：要使用的滤镜 如果使用多个滤镜，多个滤镜之间用空格隔开。,滤镜：,Alpha设置透明层次 Blur模糊效果 Chroma制作专用颜色透明 DropShadow创建对象的固定影子 FlipH创建水平镜像图片 FlipV创建垂直镜像图片 Glow加光辉在附近对象的边外,Gray把图片灰度化 Invert反色 Mask创建透明掩膜在对象上 Shadow创建偏移固定影子 Wave波纹效果 Xray使对象变的像被x光照射一样,Alpha滤镜,Alpha(Opacity=?, FinishOpacity=?, Style=?, St

21、artX=?, StartY=?, FinishX=?, FinishY=?) 参数： Opacity：透明度，范围0100，百分比。0表示全透明。 FinishOpacity：结束时透明度，取值与Opacity相同。,Style：指定透明区域的开头特征 0表示统一形状 1表示线性 2表示放射性 3表示长方形 StartX和StartY：表示渐变效果开始的X和Y坐标。图片左上角为0，0。,FinishX和FinishY：表示渐变效果结束时的X和Y坐标。和图片大小（像素）有关。,Blur滤镜,Blur（Add？，Direction？，Strength？） ADD 布尔值 用于设置是否使用滤镜。

22、Direction 模糊方向 单位是角度 Strength 模糊移动值 单位是像素,Chroma滤镜,Chroma (Color=?) 把指定颜色设置为透明效果,DropShadow滤镜,DropShadow（Color？，OffX？，OffY？，Positive？） Color表示投影颜色 OffX，OffY表示偏离文字位置量（像素） Positive逻辑值： 1 为所有不透明元素建立阴影 0 为所有透明元素建立可见阴影,FlipH和FlipV滤镜,完成图像的水平和垂直翻转,Glow滤镜,Glow（Color？，Strength？） Color 表示光晕颜色 Strength 发光强度 02

23、55,Gray滤镜,降低图片的彩色度，显示黑白效果。,Invert滤镜,将色彩、饱和度以及亮度等值完全翻转成底片效果。,Mask滤镜：,Mask（Color？） Color 表示遮罩颜色,Shadow滤镜,建立对象阴影效果 Shadow（Color？，Direction？） Color为投影颜色 Direction为投影角度，取值0360。,Wave滤镜,在X轴和Y轴方向利用正弦波纹打乱图片。 Wave (Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Add：表示是否要使用滤镜 Freq：是波纹的频率，也就是指定在这个对象上面一共需要

24、产生多少个完整的波纹。 Lightstrength：参数可以对于波纹增强光影的效果。它的参数值范围是从0到100的整数值。,Phase：参数用来设置正弦波开始的偏移量。值从0到100之间，这个数值代表开始时的偏移量取自波长的百分比值。 Strength：表示波形的振幅大小，也可以简单的理解为扭曲的程度。,Xray滤镜,显示对象轮廓，类似X光效果。,6.7CSS伪类和链接,伪类（Pseudo classes）用来指定一个与其相关的选择符的状态。它们的形式简单地用一个半角英文冒号（:）来隔开选择符和伪类。 CSS有四个可以安全使用的用在链接上的伪类： :link用在未访问的链接上。 :visited用在已经访问过的链接上。 :hover用于鼠标光标悬停其上的链接。 :active用于获得焦点的链接上。,