DW_09使用CSS样式表

1、主讲：主讲：韩维良韩维良2022年年3月月网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院第一节第一节 认识认识CSS语言语言一、一、CSSCSS样式概述样式概述层叠样式简称CSS（Cascading Style Sheet技术是一种是用于控制网页样式的标记性语言），是以HTML为基础的语言，用于定义网页中内容的格式，它，使网页设计者以更有效的方式设置网页格式。3网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院主要特点主要特点：可以独立地为网页中的各种对象定义格式，即样式，包含多方面的格式要求，并为样式定义一个名称，从而可将一种样式用于多个网页。 保

2、证了同一样式的多次重复使用。CSS 样式表中的层叠层叠是指多个 CSS 样式表可以同时应用于同一个页面或网页中的同一元素，浏览器根据 CSS 定义的层叠规则来决定哪一种样式具有最高优先级。4网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院1、可以将网页样式与内容分离。2、能以前所未有的能力控制页面的布局。3、可以制作出体积更小，下载更快的网页。4、可以更快、更容易的维护及更新大量的网页。5、让浏览器成为更友好的界面。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院二、二、 CSS CSS样式作用样式作用1、CSS可以定义网页的多种样式，美化网页，如文

3、字的大小颜色、段落格式、排版定位、对象位置、图片特效、鼠标指针样式等；2、样式与文档分离，通过修改样式表，实现页面格式的自动更新；3、CSS可以独立于网页文件，从而实现网站页面风格的批量修改。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院第二节第二节 CSS语言基本语法语言基本语法CSS 样式由“选择符”和“声明”组成。选择符说明样式作用的对象是谁；声明由“属性”和“属性值”组成。每条声明之间用“;” 分隔。文本编辑器编辑生成，大小写不等价；selectors property: value; 选择符选择符属性属性属性值属性值声明声明网站建设网站建设第9章使用CSS样式

4、表2022年3月3日星期四教育学院CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。因此，概括来说，CSS就是由3个基本部分“对象”、“属性”和“值”组成的。而且在一个样式中可以设置多个属性及其值。举例：定义一个样式体验。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院选择符的类别：CSS选择符的使用有四种情况：（1）单元素名作为选择符 元素名样式规则（2）CLASS（类）作为选择符 .class名称样式规则 圆点引导（3）ID(标识符)作为选择符 ID号样式规则 # 号引导网站建设网站建设第9章使用CS

5、S样式表2022年3月3日星期四教育学院（4）元素组合作为选择符元素名1，元素名2，.元素名n样式规则.class名称1，.class名称2， .class名称n样式规则ID号1，ID号2，. ID号n样式规则用逗号分隔的多个选择符的组合。如下：H1,H2font-family:arial;text-align:center; color:red;.a,.b,.cfont-family: 隶书; color:yellow;#1,#2color:blue; font-family: 楷体;#2font-size=100pt;.cfont-size=100pt;网站建设网站建设第9章使用CSS样式

6、表2022年3月3日星期四教育学院第三节第三节 CSS基本应用基本应用1、在标签内部定义样式属性在Html标签内部设计样式属性：标签内容如：img border: thick double;即重新定义一个Html标签的样式，只能用于再定义特定标签的样式。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院2、使用标签定义仅在单个文档内部使用的样式，一般在文档首部定义： 网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院3、使用标签导入外部CSS文件一般定义样式常用的方式，一个样式可被用于多个网页文件，只要修改了CSS样式文件中的样式，则所有使用该样式的网页

7、格式同步发生变化，。使用LINK（链接）标签 ，语法：网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院4、使用import命令导入外部CSS文件与Link标签的功能相同，可用于导入一个外部样式文件。语法： import url(“样式表文件.css”);要求：必须放在Style标签中使用。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院第四节第四节 CSS样式优先级样式优先级层叠样式表的一般处理原则：（1）当两个不同的样式应用于同一段文本时，浏览器会显示所有的样式属性。如：一个样式定义字体为宋体，另一个样式定义颜色为红色，则这段文本显示为红色宋体，（

8、2）如果两个样式发生冲突，则根据样式与文本的远近关系来选择样式，最近优先原则，越近越优先。（3）CSS样式比HTML定义的样式具有优先权。 （4）内部样式优先于外部样式。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院当一个网页文档中为同一个对象定义多个样式时，根据这些样式的优先级决定谁有效。一、环境方面的优先级顺序一、环境方面的优先级顺序1、网页设计者定义的样式；2、浏览者在浏览器中设置的样式；3、浏览器自带的默认样式。二、应用方面的优先级顺序二、应用方面的优先级顺序1、在标签内部添加的样式属性；2、使用标签定义的样式3、导入的外部样式；网站建设网站建设第9章使用CSS

9、样式表2022年3月3日星期四教育学院三、选择符方面的优先级顺序三、选择符方面的优先级顺序1、ID选择符（优先权值为100）；2、类选择符（优先权值为10）；3、Html标签选择符（优先权值为1）；网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院第五节第五节 CSS设备类型（略）设备类型（略）用于指定CSS样式所作用的设备类型，使之能在不同的设备上正确显示。方法一：import url(样式表文件) 设备类型；方法二：media 设备类型 属性1：值； 属性2：值； 网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院第六节第六节 CSS单位和属性单位和

10、属性一、一、CSSCSS单位单位1 1、长度单位、长度单位主要用于定义对象的宽度、高度、字号、字间距、文本缩排、行高、边距、间距、边框宽度等属性。绝对类型绝对类型：英寸（in）、厘米（cm）、毫米（mm）、点（point，写作pt）、字高（派卡pica，印刷单位，写作pc）相对类型相对类型：em:相对于当前字符的高度； ex:相对于字母x的高度； px:像素（相对于屏幕分辨率）网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院2 2、百分比单位。、百分比单位。相对于上一级对象的相同属性作为参照值，为其百分之多少。格式：“+/-”+数值+“%”如：表格的宽度是屏幕宽度的80%

11、。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院3 3、颜色单位、颜色单位颜色名称，如red，blue；百分比合成颜色，RGB(*%,*%,*%)如：RGB(100%,100%,100%)表示白色数字合成颜色，RGB(*,*,*)如：RGB(255,255,255)表示白色十六进制数合成法#RRGGBB 或者#RGB如：#FF00CC #F0C网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院4 4、URLURL单位单位指链接路径，有相对路径和绝对路径之分，其中相对路径又分为相对根目录的路径和相对文档的路径。一般站外链接用绝对路径，站内链接用相对路径

12、。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院二、二、CSSCSS属性属性1 1、CSSCSS盒模型盒模型CSS将元素假设放在一个矩形区域中，然后对这个矩形区域进行属性设置，共有五类属性：边界(Margin)、边框(Border)、填充(Padding)、大小 (Height、Weight)、背景（background）等。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院24边界边界边框边框填充填充对象对象网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院边界边界(Margin)(Margin)：区块与其他对象的空白距离，有5

13、 个属性：Margin-top、Margin-bottom、Margin-left、Margin-right、Margin等。边框边框(Border)(Border)：自身的外围边框属性，有3类属性：边框宽度、边框颜色、边框样式，而宽度又有5个属性： Border-top-width、Border-bottom-width、Border-left-width、Border-right-width、Border-width填充填充(Padding)(Padding)：区块内元素与区块边框的空白距离，有5个属性：Padding-top、Padding-bottom、Padding-left、Pad

14、ding-right、Padding等。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院26网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院27padding-rightpadding-leftborder-rightborder-leftmargin-rightmargin-leftwidth元素的总宽度元素的总宽度元素的总宽度 = 左边界+左边框+左填充+Width+右边界+右边框+右填充网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院28网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院元素的总高度 =

15、 上边界+上边框+上填充+height+下边界+下边框+下填充padding-toppadding-bottomborder-topborder-bottommargin-topmargin-bottomheight元元素素的的总总高高度度网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院2、CSS定位CSS 定位 (Positioning) 属性允许你对元素进行定位。position 属性值的含义：staticstatic :没有特殊定位，遵循基本的定位规定，不能通过z-index进行层次分级。如层的定位：R e l a t i v eR e l a t i v e ：

16、不 脱 离 文 档 流 ， 参 考 自 身 静 态 位 置 通 过 top(上),bottom（下）,left（左）,right（右） 定位，并且可以通过z-index进行层次分级。即相对于自身原有的位置定位到某处，元素仍保持其未定位前的形状，它原本所占的空间仍保留。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院31#box_relative position: relative; left: 30px; top: 20px; 网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院absoluteabsolute : :脱离文档流，相对于其包含块通过 t

17、op,bottom, left,right定位。元素框从文档流完全删除，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院33#box_relative position: absolute; left: 30px; top: 20px;网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院CSS的定位属性属性描述position把元素放置到一个静态的、相对的、绝对的、或固定的位置

18、中。top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。right定义了定位元素右外边距边界与其包含块右边界之间的偏移。bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。left定义了定位元素左外边距边界与其包含块左边界之间的偏移。overflow设置当元素的内容溢出其区域时发生的事情。clip设置元素的形状。元素被剪入这个形状之中，然后显示出来。vertical-align设置元素的垂直对齐方式。z-index设置元素的堆叠顺序。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院第七节第七节 使用使用Dreamweaver CS5可视化定义可

19、视化定义CSS样式样式一、新建样式的一般方法一、新建样式的一般方法1、CSS的应用类型外部外部CSSCSS样式表样式表：各种自定义样式存放在扩展名为.css.css的的纯文本文纯文本文件件。可以共享外部外部CSSCSS样式表样式表文件 ，让多个网页共同引用并应用，达到站点文件样式的一致性。同时，如果修改该样式表文件，所有引用的网页都将改变其样式，达到网站迅速改版的目的。通过CSS样式面板中“附加样式”按钮，可将外部样式链接到当前网页中使用。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院内部内部CSSCSS样式表样式表：只存在于当前网页中，并只针对当前页进行样式应用的方法

20、。一般存在于文档head部分的style标签内。2 2、CSSCSS样式面板样式面板显示显示“CSSCSS样式样式”面板面板：在“窗口”菜单中单击“CSS 样式”。或者按 Shift+F11 键。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院CSS样式面板下方的四个按钮分别是：附加样式表附加样式表，新建新建CSSCSS规则规则，编编辑样式表辑样式表，删除嵌入样式表删除嵌入样式表。37附加样式表新建CSS规则编辑样式表删除嵌入的样式表网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院“所有所有”模式与模式与“当前当前”模式模式“CSS”面板默认情况下，

21、是以“所有”模式展开。或者单击“全部”按钮；在“所有”模式下，“CSS”面板显示应用到当前文档的所有CSS规则。单击其中一个规则，该规则的属性出现在下方的列表框中。单击“正在”切换到“当前模式”。在“CSS”面板中，单击“切换到当前选择模式”按钮。此时，在“当前”模式中，“CSS”面板显示当前所选内容的属性的摘要。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院3、创建CSS样式表 打开设计视图，在需要插入样式的地方，执行“格式”“CSS样式”“新建”命令。 CSS样式面板中单击“新建CSS规则”。属性面板CSS目标规则中选“新CSS”编辑规则定义CSS样式的类型选择定义

22、样式的位置；在“CSS规则定义”对话框中选择要为新CSS样式设置的样式选项。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院输入所定义的样式名称输入所定义的样式名称网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院CSS样式共有四种类型：类（自定义的类（自定义的CSSCSS样式：可用于任何样式：可用于任何HTMLHTML元素）元素）：是唯一可以应用于文档中的任何文本（与控制文本的标签无关）的 CSS 样式类型。与当前文档关联的所有自定义 (Class) 样式都显示在“CSS 样式”面板的“应用样式”视图中以及文本属性面板的 CSS 模式中。标签（重新定

23、义标签（重新定义HTMLHTML元素）元素）：重定义现有的HTML标签，当创建或更改这类标签的CSS样式时，文档中所有用该标签设置了格式的文本都将自动更新，如给Body设置格式。41网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院ID（可用于一个可用于一个HTMLHTML元素元素）：可以创建一个用id属性声明的仅应用于一个HTML元素的id选择器。然后在“选择器名称”文本框中输入ID号。ID必须以井号（#）开头，能够包含任何字母和数字（如：#one）。仅对指定ID标签标识的一个标签有效。复合内容（基于选择的内容）复合内容（基于选择的内容）：主要定义超级链接四种形式的不同属

24、性。42网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院4 4、设置、设置CSSCSS样式格式样式格式CSS样式格式共有8种类型，根据需要设置相关的属性。 类 型(主要定义文字的属性) 背 景(设置网页表格单元格行层等的背景) 区 块(对段落的设置,定义文本的间距、对齐、缩进设置。) 方 框(对文本框图像框的设置) 边 框(设置表格的边框) 列 表(设置项目符号编号) 定 位(定义在网页中的位置) 扩 展(制作一些特殊效果)43网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院44在“属性”面板中选择“CSS”按钮，单击“编辑规则”按钮，在弹出的“新建

25、CSS规则”对话框中进行设置。在选择器名称中输入该文本样式名称“.head1”，单击“确定”按钮，在弹出的“.head1的CSS规则定义”对话框中进行设置。回到网页正文部分，选中需要设置该种文本样式的文字，然后用鼠标单击“属性”面板中的“目标规则”下拉列表框中的样式名称，该样式就应用到文字上了。 网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院二、定义文本样式二、定义文本样式在CSS规划定义的分类列表中选择“类型”；主要用于定义文本的属性。 设置行间距网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院字体（字体（Font-familyFont-fami

26、ly）：可以在下拉菜单中设置当前样式所用的字体。大小（大小（Font-sizeFont-size）：设置字体的大小。可以通过选择数字和单位来指定字体，如“磅”、“像素”、“英寸”、“厘米”等，也可以选择相对的字体大小，如“极小、“特小”等。可以直接输入样式文本的字号，或从下拉列表中选择需要的字号，当选择字号后，可以在其右侧的下拉列表框中选择字号的单位。46网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院粗细（粗细（Font-weightFont-weight）：设置字体的粗细程度，有“正常”、“粗体”、“特粗”和“细体”等。下拉列表框中可输入字体的粗细程度，也可从下拉列表

27、中选择需要的粗细程度。样式（样式（Font-styleFont-style）：通过选择“正常”、“斜体”或“偏斜体”来设置字体的特殊格式；下拉列表框中可输入字体的特殊格式，也可以从下拉列表中选择字体的特殊格式。47网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院变体（变体（Font-variantFont-variant） ：允许设置字体的变形形式，有“正常”和“小型大写字母”，主要针对英文字符设置。行高（行高（Line-heightLine-height） ：设置文本的行高。选择“正常”，则由系统自动计算字体的行高和大小；也可以通过输入一个精确的数值并选择其计算单位，来

28、具体指定行高。下拉列表中可选择“正常”或“值”选项，当选择“值”选择项时可在右侧的下拉列表框中选择值的单位。48网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院大小写（大小写（Text-transformText-transform） ：可以设置字符的大小写方式。“首字母大写”，可以指定将每个单词的第一个字符大写；“大写”或“小写”可以分别将别选择的文本设置为大写或小写；“无”保持字符本身原有的大小写格式。可以输入文本的大小写方式，也可以在下拉列表中选择文本的大小写方式。修饰（修饰（Text-decorationText-decoration） ：在该栏中设置文本的修饰效

29、果，包括下划线、上划线、删除线、闪烁、无等复选框。49网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院颜色（颜色（ColorColor） ：用于设置文字的颜色，单击选色按钮，在打开的颜色列表中选择需要的颜色，也可在文本框中直接输入颜色值。例如：设置文本样式：字体为“幼圆”、大小为9pt、颜色为浅红色（#FF6666）、粗细为“细体”，其它为默认。50网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院三、定义背景样式三、定义背景样式在CSS规划定义的分类列表中选择“背景”；主要用于设置CSS样式的背景，包括背景颜色、背景图像、背景图像的控制等 。 网站建

30、设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院背景颜色（背景颜色（Background-colorBackground-color） ：设置样式的背景颜色。背景图像（背景图像（ Background-image Background-image） ：设置作为样式背景的图像文件所在的URL地址：单击“浏览”按钮从磁盘中选择某一个图像文件。重复（重复（ Background-repeat Background-repeat） ：可以设置是否允许背景图像被重复。“不重复”只在应用样式的元素开始部分显示一次图像；“重复”在应用样式的元素背景上纵向和横向重复显示图像；“横向重复”相应的

31、显示图像的横向重复延伸；“纵向重复”相应的显示图像的纵向重复延伸。52网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院附件（附件（Background-attachmentBackground-attachment） ：设定当拖动浏览器滚动条浏览滚动页面时，背景图像是固定在它的原始位置，还是同内容一起滚动。“固定”表明背景图像固定在原始位置；“滚动”表明背景图像可以滚动。有些浏览器会将固定方式始终作为滚动方式来处理。水平位置（水平位置（Background-position(X)Background-position(X)）：设置背景图像相对于文档窗口的水平位置：左、中、

32、右。垂直位置（垂直位置（Background-position(Y)Background-position(Y)） ：设置背景图像相对于文档窗口的垂直位置：顶部、底部、居中。53网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院四、定义区块样式四、定义区块样式在CSS规划定义的分类列表中选择“区块”，主要用于设置块元素的文字间距、对齐方式、排列方式、文字缩进等。块元素可以是文本、图像和层等。设置首行缩进网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院单词间距（单词间距（Word-sp

33、acingWord-spacing）：设置单词间的间距方式，可以输入一个数值，并在其右方的下拉列表中选择设置数值的单位；字母间距（字母间距（Letter-spacingLetter-spacing）：设置字母间的间距，设置字母间的间距。若在列表中选择“值”选项，在右侧的下拉列表中可以设置数值的单位。垂直对齐（垂直对齐（Vertical-alignVertical-align）：可设置指定元素相对于其父级元素在垂直方向上的对齐方式。应用于IMG图像，可以设置图文的对齐方式 如果输入数值，显示的是一个百分比。56网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院文本对齐（文本对

34、齐（Text-alignText-align） ：设置文本中元素的对齐方式：left（左）、right（右）、center（居中）、justify（两端对齐）。文字缩进（文字缩进（Text-indentText-indent） ：设置文本首行缩进的距离，在其右侧的下拉列表中选择数值单位。如果输入为负值时等于创建了文本凸出（反缩进），其显示取决于浏览器。输入第一行的缩进距离，只有当标签应用于文本块时，该设置才会显示在Dreamweaver的文档窗口中。57网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院空格（空格（White-spaceWhite-space） ：设置在应用

35、样式元素时空格、Tab键和换行符的处理方法。“正常”表示按照正常的方法处理空格，多个空格当做一个空格来对待；“保留”表示保留所有的原始空格形象，比如空格、跳格和回车符等，都作为文本用PRE标签包围；“不换行”表示设定文本不会自动换行，只有使用换行标记BR才换行。该设置不会显示在Dreamweaver的文档窗口中。显示（显示（DisplayDisplay）：可以设置哪些元素被显示以及如何显示。58网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院五、定义方框样式五、定义方框样式在CSS规划定义的分类列表中选择“方框”，主要用于控制网页中块元素的内容距区块边框的距离、区块的大小

36、、区块间的间隔等。块元素可为文本、图像和层等。 网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院宽（宽（WidthWidth）和高（）和高（HeightHeight）：设置元素的大小尺寸。在该下拉列表中可指定元素的宽度和高度，也可以输入一个数值，然后在右侧的下拉列表中设置数值的单位。浮动浮动(Float)(Float)：在该下拉列表框中设置应用样式元素的浮动位置。页面不并移动，将元素放置在页面边缘的左侧或右侧时，其他元素会围绕该元素。只有在被用于IMG标签时，才会在Dreamweaver的文档窗口中显示该属性。如在下拉列表框中选择“右对齐”选项，则将元素放置到页面右侧的空

37、白处，同样若选择“左对齐”选项则将元素放置到页面左侧的空白处。60网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院清除清除(Clear)(Clear)：定义元素的某个边侧不允许有层出现。如在下拉列表框中选择“左对齐”选项，则层不能出现在应用样式元素的左侧。同样如选择“右对齐”选项，则层不能出现在应用样式的右侧。如果层在设置该样式前已在元素的某侧，而又设置了层不能出现在该侧边，则该元素会被将会自动移开,移动到层的下面。只有在被用于IMG标签时，才会在Dreamweaver的文档窗口中显示该属性。61网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院填充填

38、充(Padding)(Padding)：定义元素的内容和边框之间的间距大小。该设置不会显示在Dreamweaver的文档窗口中。在“上”、“右”、“下”和“左”下拉列表框中设置对应边的空白大小。四边可以相同，也可以不同。边界：定义元素边缘和其他元素之间的空间大小。只 有 在 被 应 用 于 文 本 块 一 类 的 元 素 时 ， 才 会 在Dreamweaver的文档窗口中显示该属性。可分别在“上”、“右”、“下”和“左”下拉列表框中设置对应边的空白大小。在其右侧的下拉列表框中可选择值的单位，四边可以相同，也可以不同。62网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院六

39、、定义边框样式六、定义边框样式在CSS规划定义的分类列表中选择“边框”,主要用于设置表格、图像框的边框样式。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院样式（样式（StyleStyle）：设置边框的样式；“点划线”表明边框是点线形，“虚线”表明边线是虚线形。通过上、右、下和左可以分别设置四个边的风格，“全部相同”表示四边边框线的风格一致。宽度（宽度（WidthWidth）：定义应用该样式的元素边框的宽度。细、中、粗和数值可以作为相应的宽度选项。颜色（颜色（ColorColor）：可以设置边框对应位置

40、的颜色。65网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院七、定义列表样式七、定义列表样式在CSS规划定义的分类列表中选择“列表”，主要用于设置文本列表的类型、列表项图片等。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院类型（类型（List-style-typeList-style-type）：在下拉列表中，可以选择无序列表或者有序项目的符号或编号的外观类型。项目符号图像（项目符号图像（List-style-imageList-style-image）：可以设置以图片作为列表项

41、目的符号。通过直接在文本框中输入图片文件的URL地址，或单击浏览按钮，从磁盘上选择图片文件。位置（位置（List-style-positionList-style-position）：可以设置列表项换行时是缩进还是边缘对齐。如选择“内”选项，则当列表过长而自动换行时，不缩进；若选择“外”选项，则当列表过长而自动换行时以缩进方式显示。68网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院八、定义定位样式八、定义定位样式在CSS规划定义的分类列表中选择“定位”，主要用于精确控制网页元素的位置，主要针对Ap div层的位置进行控制。提供网页元件的相对位置或绝对位置的设置，甚至可以

42、将两个元件重叠在一起，使用“层”参数选择定义层的默认标签，将标签或所选文本块更改为新层。这部分参数被扩展成了DW中的层。 网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院类型（类型（PositionPosition）：在下拉列表中，可以选择设置浏览器中分层的放置方式。“绝对”使用在Placement框中输入的相对于页面左上角的绝对坐标放置分层。“相对”使用在Placement框中输入的坐标放置分层，该坐标是相对于文档中的对象位置。“固定”相对于浏览器容器来定位，固定定位的元素不会随浏览器滚动条的滚动而变

43、化。“静态”将层定位在文本自身的位置。宽（宽（WidthWidth）和高（）和高（HeightHeight）：设置层的大小。71网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院溢出（溢出（OverflowOverflow） ：设置层内容溢出的处理方式。可见：当分层中的内容超出分层的边界时，分层会自动向下或向右扩展它的大小，以容纳分层的内容，使之可见。隐藏：当分层中的内容超出分层的边界时，分层大小不变，也不出现滚动条，超出边界的内容不显示。滚动：无论分层中的内容是否超出分层范围，分层上总会出现滚动条，利用滚动条进行浏览。自动：在分层中的内容超出分层的边界时，出现滚动条以便显

44、示所有分层内容。72网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院定位（定位（PlacementPlacement）：指定层的位置和大小。它的具体使用依赖于类型部分的设置，分为上、右、下和左四个部分。显示（显示（VisibilityVisibility） ：决定层的初始显示状态，如果没有设置该属性，在默认状态下，大多数浏览器将继承其上级的值。“继承”继承层的上一级的可见性属性。“可见”显示各个分层的内容，而不考虑其上级元素。“隐藏”隐藏层的内容，而不考虑其上级元素。73网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院Z Z轴（轴（Z-indexZ-

45、index） ：在下拉列表中可以选择定义分层的叠放顺序。编号高的分层显示在编号低的分层之上。其数值可以为正也可以为负。剪辑（剪辑（ClipClip） ：设置Apdiv层可见部分的位置和大小。定义可视区域的左上角和右下角的坐标。如 果 指 定 了 剪 辑 区 域 ， 可 以 通 过 脚 本 语 言 如JavaScript来对其进行操作，例如可以输入其属性以创建特殊效果。74网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院九、定义扩展样式九、定义扩展样式在CSS规划定义的分类列表中选择“扩展”，主要用于控制鼠标指针形状、图片特殊效果、控制打印时的分页以及为网页元素添加滤镜效果

46、。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院分页（分页（Page-breakPage-break）：可以设置在打印页面时强制分页的位置。在“之前”（Page-break-beforePage-break-before）和“之后” （Page-break-afterPage-break-after）的下拉列表中，可分别设置分页前和分页后的位置。此属性只有4.0以上版本的浏览器支持。视觉效果：可以设置样式的一些可视效果。光标（光标（CursorCursor）：用于设置当鼠标掠过被样式控制的对象时的指针外观。如选择hand，鼠标指针会变为“手形”，只有4.0及其以上版本的

47、浏览器支持此属性。76网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院过滤镜（过滤镜（FilterFilter）：在其下拉菜单中选择需要的特效，对被样式控制的对象指定特殊的效果，包括模糊和反转，只有4.0及其以上版本的浏览器支持此属性。77网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院十、管理十、管理CSSCSS样式样式1 1、应用自定义（、应用自定义（ClassClass）CSSCSS样式样式将插入点置于欲设置CSS样式的段落中或者在段落中选择一个文本范围，右击选择“CSS样式”，再选择某种已定义的格式。 也可以在菜单中选择。或在属性面板的或在属

48、性面板的“类类”列表中选择。列表中选择。78网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院2 2、将自定义样式从选定内容中删除、将自定义样式从选定内容中删除选中内容，右击选择“CSS样式”，再选择“无”。3 3、创建和链接到外部、创建和链接到外部CSSCSS样式表样式表单击附加样式表按钮，再选择CSS样式文件。4 4、编辑、编辑CSSCSS样式样式在CSS样式面板中，双击欲修改的CSS样式文件名称。 79网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院例1：创建一个CSS文件，定义一个正文的格式，要求行首留两字的空白，行间距为1.5倍，其它格式自定

49、。新建CSS样式，选择“类（可应用于任何HTML元素）”，保存样式在zw.css样式文件中。从创建一个样式文件，定义一个样式到应用样式的全过程演示一遍。80网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院设置CSS样式内容网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院设置行间距网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院83设置行首空白：两个12磅字的空白。网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院应用：应用：用刚才建立的ZW样式，设置当前网页中的不同位置上的一段文本。拓展：拓展：将刚才建立的ZW样式，附加到另一个网页中，再设置该网页中的文本对象。修改：修改：修改ZW样式中的文本颜色。查看两个网页中的表现情况，从而了解CSS的工作原理，体会其优势。84网站建设网站建设第9章使用CSS样式表2022年3月3日星期四教育学院例2：重定义单元格标签。新建CSS样式，先选中定义CSS的类型为“标签（重新定义）”，再在其下方的下拉列表中选择欲重新定义格式的标签。保存样式在table_td.css样式文件中。85网站建设网