CSS样式表详解.ppt

《CSS样式表详解.ppt》由会员分享，可在线阅读，更多相关《CSS样式表详解.ppt（33页珍藏版）》请在三一文库上搜索。

1、第6章 CSS样式表,CSS入门 CSS详解 创建和应用CSS,开 始,CSS是Cascading Style Sheets（层叠样式表）的简称。CSS的基本概念在于可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容独立出来，并集中管理。这样，当要改变网页外观时，只需更改样式设定的部分，HTML文件本身并不需要更改。,本章主要内容：,6.1.1 “CSS样式”面板 6.1.2 定义CSS样式 6.1.3 在网页中应用CSS样式,返回本章首页,6.1 CSS入门述,CSS是W3C定义和维护的标准，是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色

2、等）的计算机语言。它可以使网页制作者的工作更加轻松和灵活，现在越来越多的网站采用了CSS技术。,6.1.1 “CSS样式”面板,返回本节,在Dreamweaver中，“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。 在没有定义CSS前，“CSS样式”面板是空白的。如果在Dreamweaver中定义了CSS，那么“CSS样式”面板中会显示所定义好的CSS规则。,图6-1 “CSS样式”面板,6.1.2 定义CSS样式,返回本节,在【CSS样式】面板上，单击【新建CSS规则】按钮，会打开如图6-3所示的【新建CSS规则】对话

3、框。,图6-3 【新建CSS规则】对话框,1【定义在】选项 【定义在】选项包括两个单选项，分别介绍如下。 （1）【新建样式表文件】：此选项将会把设定的样式最终保存在一个外部单独的样式表文件中，这个样式表文件可以被其他HTML文件共同使用，也就是说可以使站点内的所有页面文件使用同一个样式表文件，甚至不同的站点只要是网页就可以使用。 （2）【仅对该文档】：此选项将会把设定的样式仅仅放在当前文件的头文件中，这些样式只能在此文件中使用。 专家点拨：根据运用CSS的范围是局限于当前网页内部还是可以运用到其他网页文件，可以分为“内联样式表”和“外部样式表”。“内联样式表”是将CSS规则定义在HTML网页文

4、档内部。 “外部样式表”是将CSS规则定义在一个独立的外部样式表文件（扩展名为.css）中。,6.1.2 定义CSS样式,返回本节,【选择器类型】选项包括3个单选项，分别介绍如下。 （1）【类（可应用于任何标签）】：选择此类型后，需要在上方的【名称】文本框中填入一个样式名字，需要注意的是，此类名称必须以“.”开头。这种方式定义的样式可以用来定义绝大多数的HTML对象，可以使这些对象有统一的外观。如图6-4所示是创建一个.mystyle的样式。,图6-4 创建mystyle样式,6.1.2 定义CSS样式,返回本节,专家点拨：如果在【定义在】选项中选择的是【新建样式表文件】，那么单击【确定】按钮

5、后会弹出【保存样式表文件为】对话框，在其中选择要保存到的目录，输入文件名，单击【保存】按钮后进入【.mystyle的CSS规则定义】对话框。在其中可以定义【类型】、【背景】、【区块】、【方框】、【边框】、【列表】、【定位】、【扩展】等属性。 （2）【标签（重新定义特定标签的外观）】：选择此选项后，在【标签】下拉框里选择需要重新定义的HTML标签。 （3）【高级（ID、伪类选择器等）】：重新定义特定元素组合的格式，或其他CSS允许的选择器表单的格式（例如，每当h2标题出现在表格单元格内时，就会应用选择器td h2）。还可以重定义包含特定id属性的标签的格式（例如，由#myStyle定义的样式可以

6、应用于所有包含属性/值对id=“myStyle“的HTML标签）。另外，这个选项还可以设定链接文本的样式。,返回本节,定义完样式表文件后，就可以在Dreamweaver中套用这些样式了。套用样式表的方法主要有3种，下面分别进行介绍。 1在【属性】面板选择应用样式 在网页中选中需要应用样式的元素，打开【属性】面板，单击打开【样式】右边的下拉列表框，里面列出了已经定义的一些CSS样式。如图6-8所示。,6.1.3 在网页中应用CSS样式,图6-8 【属性】面板中的 “样式”列表框,2利用【标签选择器】选择样式 首先需要在【标签选择器】上选定一个标签，如图6-9中的标签，然后在标签上右击，在弹出的快

7、捷菜单中选择【设置类】|【mycss】，则可以快速把已经定义的mycss样式类指定给标签。,图6-9 利用【标签选择器】 应用样式,返回本节,3使用右键快捷菜单 也可以从右键快捷菜单中直接给对象指定一个样式，首先选中需要应用样式的对象，在右键快捷菜单中指定样式类。如图6-10所示。,6.1.3 在网页中应用CSS样式,图6-10 从右键快捷菜单中直接给对象指定样式,4清除样式 如果想清除应用的样式，首先选中对象，然后从右键快捷菜单中选择“无”，即可清除原有的样式。需要提醒注意的是，这里的清除样式并不是将定义的样式完全删除，而是网页中的某个对象不再使用这个样式了。,返回本章首页,6.2 CSS样

8、式详解,在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性，Dreamweaver把这些属性分为Type（类型）、Background（背景）、Block（块）、Box（盒子）、Border（边框）、List（列表）、Positioning（定位）、Extensions（扩展）8个部分，如图6-11所示。,图6-11 CSS规则定义,6.2.1 类型 6.2.2 背景 6.2.3 区块 6.2.4 方框 6.2.5 边框 6.2.6 列表 6.2.7 定位 6.2.8 扩展,6.2.1 类型,返回本节,类型选项主要是对文字的字体大小、颜色、效果等基本样式进行设置，如

9、图4-11所示。只对要改变的属性进行设置，没有必要改变的属性就使之为空。 1字体 字体系列是指对文字设定几个字体，当遇到第一个字体不能显示时会自动用系列中的第二个字体或后面的字体显示。相对应的CSS属性是font-family。 大小 可以通过选取数字和度量单位来选择具体的字体大小，或者也可以选择一个相对的字体大小。最好使用像素作为单位，这样不会在浏览器中文本变形。一般小字体用比较标准的12像素。相对应的CSS属性是font-size。 3样式 定义字体样式为“正常”、“斜体”或“偏斜体”。默认设置为正常。相对应的CSS属性是font-style。“斜体”和“偏斜体”都是斜体字体。而它们不同的

10、是，“斜体”是斜体字，而“偏斜体”是倾斜的文字，对于没有斜体的字体应该用“偏斜体”。 4行高 设置文本所在行的行高。默认为正常，也可以自己键入一个精确的数值并选取一个计量单位。比较直观的写法用百分比，例如140%是指行高等于文字大小的1.4倍。相对应CSS属性是line-height。 5修饰 向文本中添加下划线、上划线或删除线，或使文本闪烁。常规文本的默认设置是“无”。链接的默认设置是“下划线”。将链接设置设为无时，可以通过定义一个特殊的类去除链接中的下划线。这些效果可以同时存在，将效果前的复选框选定即可。相对应的CSS属性是text-decoration。,6.2.1 类型,返回本节,6粗

11、细 对字体应用特定或相对的粗体量。“正常”等于400；“粗体”等于700。相对应的CSS属性是font-weight。 7变体 设置文本的小型大写字母变体。Dreamweaver不在“文档编辑区”中显示此属性。Internet Explorer支持变体属性，但Navigator不支持。相对应的CSS属性是font-variant。 8大小写 将选区中每个单词的第一个字母转为大写，或者令单词全部大写或全部小写。相对应的CSS属性是 text-transform。 9颜色 定义文字颜色。相对应的CSS属性是color。CSS中颜色的值有3种表示方法。 #RRGGBB格式，是由红绿蓝三种颜色的值组合

12、，每种颜色的值为“00FF”的两位十六进制正整数。例如，#FF0000表示红色，#FFFF00表示黄色。 RGB格式，RGB为三色的值，取0255，例如，RGB（255,0,0）表示红色，RGB（255,255,0）表示黄色。 用颜色名称。CSS可以使用已经定义好的颜色名称。例如，red表示红色，yellow表示黄色。,6.2.2 背景,返回本节,背景选项主要是对元素的背景进行设置，包括背景颜色、背景图像、背景图像的控制。如图6-12所示。一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。,图6-12 背景选项,1背景颜色 设置元素的背景色。相对应的CSS属性是backgro

13、und-color。可以单击“颜色”按钮打开调色板，然后在其中选择需要的颜色。或者直接在文本框中输入颜色代码。 2背景图像 设置元素的背景图像。相对应的CSS属性是background-image。可以单击“浏览”按钮打开“选择图像源文件”对话框，在其中选择需要的图像文件。或者直接在文本框中输入图像文件的完整路径。,6.2.2 背景,返回本节,3重复 确定背景图像是否以及如何重复。相对应的CSS属性是background-repeat。在下拉列表中包括4个选项。 不重复：在元素的开头显示一遍图像。 重复：在元素的背景部分水平和垂直方向平铺图像。 横向重复：在水平和垂直方向重复显示。 纵向重复：

14、在垂直方向重复显示。 4附件 确定背景图像是固定在其原始位置还是随内容一起滚动。注意，某些浏览器可能将“固定”选项视为“滚动”。Internet Explorer支持该选项，但Netscape Navigator不支持。相对应的CSS属性是background-attachment。 5水平位置 指定背景图像相对于元素的水平位置。相对应的CSS属性是background-position。在下拉列表中可以指定为left（左边），center（居中），right（右边）；也可以在文本框中直接输入数值，如20px是指背景距离左边20象素。 6垂直位置 指定背景图像相对于元素的垂直位置。相对应的CS

15、S属性是background-position。在下拉列表中可以指定为top（顶部），center（居中），bottom（底部）；也可以在文本框中直接输入数值。,6.2.3 区块,返回本节,区块选项主要是设置对象文本文字间距、对齐方式、上标、下标、排列方式、首行缩进等。如图6-13所示。,图6-13 区块选项,6.2.3 区块,返回本节,区块选项主要是设置对象文本文字间距、对齐方式、上标、下标、排列方式、首行缩进等。如图4-13所示。 1单词间距 设置单词之间的间距。若要设置特定的值，请在下拉列表中选择“值”，然后输入一个数值。在第二个下拉列表中选择度量单位（例如像素、点等）。相对应的CSS属

16、性是word-spacing。可以指定负值，但显示方式取决于浏览器。Dreamweaver不在“文档”窗口中显示此属性。 2字母间距 设置字符之间的间距。可以指定负值。因为中文也是字符，这个参数可以设置文字间的间距。相对应的CSS属性是letter-spacing。 3垂直对齐 指定元素的垂直对齐方式。可以指定sub（下标）、super上标）、top（与顶端对齐）、middle（居中）、bottom（与底端对齐）等。相对应的CSS属性是vertical-align。,6.2.3 区块,返回本节,4文本对齐 设置文本的排列方式。下拉列表中包括Left（左对齐）、right（右对齐）、center

17、（居中）、justify（两端对齐）。相对应的CSS属性是text-align。 5文本缩进 设置文本第一行的缩进值。负值用于将文本第一行向外拉。要在每段前空两格，可设置为2em，因为em是当前字体尺寸，2em就是两个字的大小。相对应的CSS属性是text-indent。 6空格 设置如何处理元素内的空白符。相对应的CSS属性是white-space。下拉列表中包括“正常”、“保留”和“不换行”3个选项。 “正常”：会将空白符全部压缩； “保留”：如同处理pre标签内的文本一样处理这些空白符（也就是说，所有的空白符，包括空格，标签，回车，等都会得以保留）； “不换行”：指定文本只有遇到br标签

18、时才换行。 7显示 指定是否以及如何显示元素。“无”指定到某个元素时，它将禁用该元素的显示。,6.2.4 方框,返回本节,方框选项主要设置对象的边界、间距、高度、宽度、和漂浮方式等。如图6-14所示。,图6-14 方框选项,6.2.4 方框,返回本节,1宽 定义元素的宽。相对应的CSS属性是width。在下拉列表中包括自动和值两个选项。 选择“值”这个选项后，可以在文本框中输入具体的数值，并且再后面的下拉列表中选择一个单位。 2高 定义元素的高。相对应的CSS属性是height。在下拉列表中包括自动和值两个选项。 选择“值”这个选项后，可以在文本框中输入具体的数值，并且再后面的下拉列表中选择一

19、个单位。 3浮动 定义元素的漂浮方式。下拉列表中包括左对齐、右对齐和无。相对应的CSS属性是float。,6.2.4 方框,返回本节,4清除 定义不允许AP元素的边。如果清除边上出现AP元素，则带清除设置的元素将移到该元素的下方。相对应的CSS属性是clear。 5填充 定义元素内容与其边框的空距（如果元素没有边框就是指页边的空白）。可以分别设置top（上补白）、right（右补白）、bottom（下补白）、left（左补白）的值。相对应的CSS属性分别是padding-top、 padding-right、padding-bottom、padding-left。 如果勾选“全部相同”复选框，

20、则为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的填充属性。 6边界 定义元素的边框与其他元素之间的距离（如果没有边框就是指内容之间的距离）。可以分别设置top（上边界）、right（右边界）、bottom（下边界）、left（左边界）的值。相对应的CSS属性分别是margin-top、margin-right、 margin-bottom、margin-left。 如果勾选“全部相同”复选框，则为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边界属性。,6.2.5 边框,返回本节,边框选项可以设置对象边框的宽度、颜色及样式。如图6-15所示。,图6-15 边框选项,1

21、样式 设置边框样式。可以设置为none（无边框）、dotted（点划线）、dashed（虚线）、solid（实线）、double（双线）、groove（槽状）、ridge（脊状）、inset（凹陷）、outset（凸出）等边框样式。相对应的CSS属性是border-style。 专家点拨：dotted（点划线）、dashed（虚线）必须要IE5.5以上或者MAC平台支持，否则效果为实线。 如果勾选“全部相同”复选框，为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框样式属性。,6.2.5 边框,返回本节,2宽度 设置元素边的宽度。可以分别设定Top（上边宽）、Right（右边宽）

22、、Bottom（下边宽）、Left（左边宽）的值。相对应的CSS属性分别是border-top、border-right、border-bottom、border-left。 如果勾选“全部相同”复选框，为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框宽度属性。 3颜色 设置边框的颜色。可以分别对每条边设置颜色。相对应的CSS属性分别是border-top-color、border-right-color、 border-bottom-color、border-left-color。可以通过设置不同的颜色做出亮边和暗边的效果，这样元素看起来是立体的。 如果勾选“全部相同”复选框

23、，为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框颜色属性。,6.2.6 列表,返回本节,列表选项可以设置列表项样式、列表项图片和位置。如图4-16所示。,图4-16 列表选项,1类型 设置列表项所使用的预设标记。可以设置的样式有：disc（实心圆）、circle（空心圆）、square（方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无项目符号）。相对应的CSS属性是list-style-type。,6.2.6 列表,

24、返回本节,2项目符号图像 设置列表项的图像。相对应CSS属性是list-style-image。可以在文本框中直接输入图像URL地址或路径。或者单击“浏览”按钮，在弹出的“选项图像源文件”对话框中选择需要的图像文件。 3位置 设置列表项在文本内还是在文本外。相对应的CSS属性是list-style-position。下拉列表中包括两个选项。 内：列表项目标记放置在文本以内。 外：列表项目标记放置在文本以外。,6.2.7 定位,返回本节,定位选项中的CSS属性用来确定与选定的CSS样式相关的内容在页面上的定位方式。如图6-17所示。这就相当于对象放在一个AP元素里来定位，它相当于HTML的DIV

25、标记。可以把定义看作为一个CSS定义的AP元素。,图6-17 定位选项,6.2.7 定位,返回本节,1类型 设定对象的定位方式。相对应的CSS属性是position。有4种方式可供选择，如下所述。 绝对：使用“定位”文本框中输入的、相对于最近的绝对或相对定位上级元素的坐标（如果不存在绝对或相对定位的上级元素，则为相对于页面左上角的坐标）来放置内容。 相对：使用“定位”文本框中输入的、相对于区块在文档文本流中的位置的坐标来放置内容区块。例如，若为元素指定一个相对位置，并且其上坐标和左坐标均为20px，则将元素从其在文本流中的正常位置向右和向下移动20px。也可以在使用（或不使用）上坐标、左坐标、

26、右坐标或下坐标的情况下对元素进行相对定位，以便为绝对定位的子元素创建一个上下文。 固定：使用“定位”文本框中输入的坐标（相对于浏览器的左上角）来放置内容。当用户滚动页面时，内容将在此位置保持固定。 静态：将内容放在其在文本流中的位置。这是所有可定位的HTML元素的默认位置。,6.2.7 定位,返回本节,2显示 确定内容的初始显示条件。相对应的CSS属性是visibility。如果不指定“显示”属性，则默认情况下内容将继承父级标签的值。body标签的默认可见性是可见的。“显示”下拉列表中包括3个选项。 继承（默认）：继承内容的父级可见性属性。 可见：将显示内容，而与父级的值无关。 隐藏：将隐藏内

27、容，而与父级的值无关。 3Z 轴 确定内容的堆叠顺序。Z轴值较高的元素显示在Z轴值较低的元素（或根本没有Z 轴值的元素）的上方。值可以为正，也可以为负。 4溢出 确定当容器（如DIV或P）的内容超出容器的显示范围时的处理方式。“溢出”下拉列表中包括4个选项。 可见：将增加容器的大小，以使其所有内容都可见。容器将向右下方扩展。 隐藏：保持容器的大小并剪辑任何超出的内容。不提供任何滚动条。 滚动：将在容器中添加滚动条，而不论内容是否超出容器的大小。明确提供滚动条可避免滚动条在动态环境中出现和消失所引起的混乱。 自动：将使滚动条仅在容器的内容超出容器的边界时才出现。,6.2.7 定位,返回本节,5定

28、位 指定内容块的位置和大小，包括上、下、左、右4个选项。浏览器如何解释位置取决于“类型”设置。如果内容块的内容超出指定的大小，则将改写大小值。 位置和大小的默认单位是像素。还可以指定以下单位：pc（皮卡）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）、em（全方）、（ex）或%（父级值的百分比）。单位缩写字母必须紧跟在值之后，中间不留空格。例如，3mm 。 6剪辑 定义内容的可见部分，包括上、下、左、右4个选项。如果指定了剪辑区域，可以通过脚本语言（如JavaScript）访问它，并使用“改变属性”行为可以设置擦除效果。,6.2.8 扩展,返回本节,扩展选项中的CSS属性包括分页、光标

29、和过滤器（滤镜效果）选项。如图4-18所示。,图4-18 扩展选项,6.2.8 扩展,返回本节,1分页 打印网页时，在样式所控制的对象之前或者之后强行分页。下拉列表中包括4个选项：自动、总是、左对齐和右对齐。 2光标 当鼠标指针位于样式所控制的对象上时改变鼠标指针的外观。“光标”下拉列表中包括一些具体的选项，选择后可以改变鼠标指针的视觉效果。 3过滤器 对样式所控制的对象应用特殊效果（包括模糊和反转等滤镜效果）。“过滤器”下拉列表中包括一些具体的选项，这些效果应用到网页中元素上后，可以得到一种类似于Photoshop的滤镜效果。,6.3.1 内部样式表 6.3.2 外部样式表,返回本章首页,6

30、.3 创建CSS样式,在需要设置单个页面的格式时，可以使用内部样式表保存在网页文档内部的样式表。在需要同时控制多个文档的外观以便在多个页面上实现统一的格式时，可以使用外部样式表，这是保存在网页文档外部的样式表，它被链接到当前页面。,6.3.1 内部样式表,返回本节,内部样式是那些定义来只使用当前文档的样式。如果用户想定义只在自己站点的一个页面中使用的样式，就可以使用内部样式。 例6-1(原始网页) 例6-1 CSS,6.3.2 外部样式表,返回本节,内部样式表只在一个网页中起作用，如果想制作很多具有统一样式的网页，就必须在每个网页内定义相同的CSS样式表。这样很麻烦，效率也很低。外部CSS样式表能够较好地解决这个问题。具体实现方法是，先建立一个外部CSS样式表文件，在这个文件中定义文字、段落、表格、超级链接等网页元素的样式。然后在需要的网页上链接这个外部CSS样式表文件即可。 下面通过实例介绍外部CSS样式表的创建及应用的方法。 原始网页 1创建外部CSS样式表 2链接外部CSS样式表,结束放映,返回本章首页,