Dreamweaver中CSS样式-文档资料

1、1第6章 CSS样式2 本章主要内容是CSS样式的创建方法和它的应用，并就如何编辑CSS样式中的文字格式、背景格式、文本块格式、方框格式、边框格式、列表格式、定位格式、扩展格式等作了详细的讲解，最后以一个实例说明了如何应用CSS样式对网页进行编辑。36.1 CSS样式概述 CSS是层叠样式表（Cascading Style Sheets）的简称，利用它可以对网页中的文本内容进行精确的格式化控制。CSS样式不仅能够控制一篇文档中的文本样式，而且通过采用外部链接的方式，还可以控制多篇文档的文本格式。对CSS样式的定义进行修改时，文档中所有应用该样式的文本格式也会自动发生改变。 CSS样式通常用名称

2、或是HTML标记来表示，HTML文档中的CSS样式不仅可以控制大多数传统的文本格式属性，如字体、字号和对齐方式等，还可以定义一些特殊的HTML属性，例如定位、特效和鼠标轮替等。 CSS样式的定义代码一般书写在HTML文档的头部，通常由一系列样式的定义组成。它可以应用到使用标注HTML标记所格式化的文本上，可以定义到通过class属性所定义范围的文本上，也可以应用到其他的那些符合CSS标准规范的文本上。46.2 创建CSS样式 CSS样式最大的优点是它具有自动更新功能，当应用了CSS格式之后，如果不满意，仅需要修改CSS样式就可以更新所有的应用，而不用像设置HTML样式那样一个一个地修改。6.2

3、.1 创建新CSS样式 其操作步骤如下：1) 在Dreamweaver中，单击“窗口”“CSS样式”，打开CSS 样式面板如图6-1所示。图6-1 CSS 样式面板52) CSS样式面板显示在设计浮动面板组，单击面板组右上角的“显示菜单”按钮 ，弹出下拉菜单如图6-2所示。图6-2 CSS样式的下拉菜单63) 从其中选择“新建”选项卡。或者单击CSS样式面板右下角的【新建CSS样式】按钮 ，打开如图6-3所示的新建样式对话框。图6-3 新建样式对话框74) 选择CSS样式类型： “类（可应用于任何标签）”，可以生成一个新的样式表，制作完毕后可以在样式面板中看到制作完成的样式。在应用的时候，首先

4、在页面选中对象，然后选择样式即可。该类型样式名称必须以英文句点“.”开头，如果没有输入句点，Dreamweaver会自动添加在“名称”文本框中。它是唯一可以被应用于文档中任何文本的样式类型，而不用考虑控制文本的标签。所以可用于类样式的名称都将显示在样式工具栏中。 选择“标签（重新定义特定标签的外观）”，可以将现有的标签赋上样式，制作完毕以后不需要选中对象就可以直接应用到页面上去。 5) 定义一个外部连接的CSS还是定义一个仅应用于当前文档的CSS。 “自定义”：定义一个外部连接的CSS。 “仅仅对该文档”：定义的CSS样式只能在当前文档中使用。86) 单击【确定】按钮，出现保存样式表对话框，如

5、图6-4所示。图6-4 保存样式表97) 选择样式表所保存的位置，单击【保存】按钮，出现CSS设置对话框如图6-5所示，进行相应的属性设置，单击【确定】，一个CSS样式创建成功。图6-5 CSS设置对话框106.2.2 应用CSS样式1. 如果要在文档中应用样式 操作方法如下：1) 将插入点放置在段落之中，即选择了整个段落，可以对其设置格式；也可以选中多个段落，对多个段落设置格式；选择某些字符还可以对这些字符设置格式。2) 在CSS样式面板中，用鼠标点击某个定义好的样式，则该CSS样式就会应用在这些文档上。112. 应用外部链接式CSS样式1) 打开CSS样式面板。2) 单击CSS样式面板右下

6、角的【附加样式表】按钮，出现如图6-6所示“链接外部样式表”对话框。3) 单击【浏览】按钮，从所保存的CSS文件中选取一个，即可应用。图6-6 “链接外部样式表”对话框123. 在现有样式的基础上创建新样式1) 在CSS样式面板上，选中作为基础的样式。2) 单击CSS样式面板右上角的“显示菜单”按钮，打开面板菜单；或者在面板中单击鼠标右键，打开快捷菜单，如图6-7所示。图6-7 CSS样式的快捷菜单133) 选择“重制”命令，系统弹出如图6-8所示对话框，并显示该样式的设置。4) 在对话框中选择新样式的类型和定义，输入新的名称。5) 单击【确定】按钮，确定操作。图6-8 “重制CSS样式”对话

7、框144. 删除某个样式 在CSS样式面板上，选中要删除的样式。单击CSS样式面板右上角的“显示菜单”按钮，打开面板菜单；或者在面板中单击鼠标右键，打开快捷菜单，选择“删除”命令。或者单击面板菜单右下角的“删除CSS样式”命令按钮。将删除被选择样式，同时该样式从样式列表中消失。156.3 设置CSS样式格式 在Dreamweaver中，通过CSS样式定义对话框可以对CSS样式格式进行精确定制，在CSS面板上新建CSS样式时可以进行设置，或者通过可以打开如图6-5所示CSS样式定义对话框，从中可以看出，CSS共有8个选项。6.3.1 编辑文字格式 在CSS样式定义对话框中单击左边的“类型”，右边

8、区域显示可以设置的有关文字格式方面的CSS样式。其中：1)字体：可以在下拉菜单中设置当前样式所用的字体。2)大小：，设置字体的大小。可以通过选择数字和单位来指定字体，如“磅”、“像素”、“英寸”、“厘米”等，也可以选择相对的字体大小，如“极小、“特小”等。163)样式：通过选择“正常”、“斜体”或“偏斜体”来设置字体的特殊格式，4)行高：设置文本的行高。选择“正常”，则由系统自动计算字体的行高和大小；也可以通过输入一个精确的数值并选择其计算单位，来具体指定行高。5)粗细：对字体应用指定的或相对的粗细度，有“正常”、“粗体”、“特粗”和“细体”等。其中“正常”等于400，“粗体”一般为700。6

9、)变量：允许设置字体的变体形式，有“正常”和“小型大写字母”。7)大小写：可以设置字符的大小写方式。“首字母大写”，可以指定将每个单词的第一个字符大写；“大写”或“小写”可以分别将别选择的文本设置为大写或小写；“无”保持字符本身原有的大小写格式。8)修饰：可以设置字体的一些修饰格式。“下划线”、“上划线”、“删除线”、“闪烁”和“无”。9)颜色：用于设置文字的颜色。176.3.2 编辑背景格式在CSS样式定义对话框中单击左边的“背景”，右边区域显示可以设置CSS样式的背景格式，如图6-9所示。图6-9 编辑CSS样式背景格式18其中：1)背景颜色：设置样式的背景颜色。2)背景图像：设置作为样式

10、背景的图像文件所在的URL地址：单击【浏览】按钮可以从磁盘中选择某一个图像文件。3)重复：可以设置是否允许背景图像被重复。“不重复”只在应用样式的元素开始部分显示一次图像；“重复”在应用样式的元素背景上纵向和横向重复显示该图像；“横向重复”相应的显示图像的横向重复延伸；“纵向重复”相应的显示图像的纵向重复延伸。4)附件：设定当拖动浏览器滚动条浏览滚动页面时，背景图像是固定在它的原始位置，还是同内容一起滚动。“固定”表明背景图像固定在原始位置；“滚动”表明背景图像可以滚动。 有些浏览器会将固定方式始终作为滚动方式来处理。5)水平位置和垂直位置：设置背景图像相对于文档窗口的水平和垂直位置。196.

11、3.3 编辑文本块格式 在CSS样式定义对话框中单击左边的“区块”，右边区域显示可以设置CSS样式的区块格式，如图6-10所示。图6-10 编辑CSS样式的块格式201)单词间距：可以在文字直接添加空格。可以输入一个数值，并在其右方的下拉列表中选择设置数值的单位；如果输入负值，显示的效果会由浏览器来决定。该选项会受到页边距调整的影响。2)字母间距：可以在字符直接添加空格。如果输入负值，其显示由浏览器决定。该选项可以覆盖由页边调整产生的字母之间的多余空格。3)垂直对齐：可以设置各元素相对于上一级的纵向对齐方式。如果输入数值，显示的是一个百分比。除了应用于IMG标签的情况，该设置不会显示在Drea

12、mweaver的文档窗口中。4)文本对齐：设置文本中元素的对齐方式。5)文字缩进：设置文本首行缩进的距离。如果输入为负值时等于创建了文本凸出（反缩进），其显示取决于浏览器。只有当标签应用于文本块时，该设置才会显示在Dreamweaver的文档窗口中。216)空格：设置在应用样式元素时空格的处理方法。“正常”表示按照正常的方法处理空格，多个空格当做一个空格来对待；“保留”表示保留所有的原始空格形象，比如空格、跳格和回车符等，都作为文本用PRE标签包围；“不换行”表示设定文本不会自动换行，只有使用换行标记BR才换行。该设置不会显示在Dreamweaver的文档窗口中。7)显示：可以设置哪些元素被显

13、示以及如何显示。226.3.4 编辑方框格式 在CSS样式定义对话框中单击左边的“方框”，右边区域显示可以设置CSS样式的框格式，如图6-11所示。图6-11 编辑CSS样式框格式23其中：1)宽和高：设置元素的大小尺寸。选择“自动”由浏览器自行控制；输入一个数值，并在其右边的下拉列表中选择数值的单位，可以固定元素的大小和尺寸。只有在被应用于图像或层时，Dreamweaver的文档窗口中才会显示该属性。2)浮动：设置元素的的浮动位置。页面不并移动，将元素放置在页面边缘的左侧或右侧时，其他元素会围绕该元素。只有在被用于IMG标签时，才会在Dreamweaver的文档窗口中显示该属性。3)清除：定

14、义元素的某个边侧不允许有层出现。如果分层出现在被设置清除的元素的一边，该元素会被移动到层的下面。只有在被用于IMG标签时，才会在Dreamweaver的文档窗口中显示该属性。244)填充：定义元素的内容和边框之间的空间大小。该设置不会显示在Dreamweaver的文档窗口中。5)边界：定义元素边缘和其他元素之间的空间大小。只有在被应用于文本块一类的元素时，才会在Dreamweaver的文档窗口中显示该属性。256.3.5 编辑边框格式 在CSS样式定义对话框中单击左边的“边框”，右边区域显示可以设置CSS样式的边框格式，如图6-12所示。其中：1)样式：设置边框的样式，“点划线”表明边框是点线

15、形，“虚线”表明边线是虚线形。通过上、右、下和左可以分别设置四个边的风格，“全部相同”表示四边边框线的风格一致。2)宽度：定义应用该样式的元素边框的宽度。细、中、粗和数值可以作为相应的宽度选项。3)颜色：可以设置边框对应位置的颜色。图6-12 编辑CSS样式边框格式266.3.6 编辑列表格式 在CSS样式定义对话框中单击左边的“列表”，右边区域显示可以设置CSS样式的列表格式，如图6-13所示。其中：1)类型：在下拉列表中，可以选择无序列表或者有序项目的符号或编号的外观类型。2)项目符号图像：可以设置以图片作为列表项目的符号。通过直接在文本框中输入图片文件的URL地址，或单击【浏览】按钮，从

16、磁盘上选择图片文件。3)位置：可以设置列表项换行时是缩进还是边缘对齐。图6-13 编辑CSS样式列表格式276.3.7 编辑定位格式 在CSS样式定义对话框中单击左边的“定位”，右边区域显示可以设置CSS样式的定位格式，如图6-14所示。其中：1)类型：在下拉列表中，可以选择设置浏览器中分层的放置方式。 “绝对”使用在Placement框中输入的相对于页面左上角的绝对坐标放置分层。 “相对”使用在Placement框中输入的坐标放置分层，该坐标是相对于文档中的对象位置。 “静态”将层定位在文本自身的位置。图6-14 编辑CSS样式定位格式282) 宽和高：设置层的位置和大小。3)定位：指定层的

17、位置和大小。它的具体使用依赖于类型部分的设置，分为上、右、下和左四个部分。4) 显示：决定层的初始显示状态，如果没有设置该属性，在默认状态下，大多数浏览器将继承其上级的值。 “继承”继承层的上一级的可见性属性。 “可见”显示各个分层的内容，而不考虑其上级元素。 “隐藏”隐藏层的内容，而不考虑其上级元素。5) Z轴：在下拉列表中可以选择定义分层的叠放顺序。编号高的分层显示在编号低的分层之上。其数值可以为正也可以为负。296)溢出：如果在分层中的内容超出了分层的边界，在此决定处理方式。 可见：当分层中的内容超出分层的边界时，分层会自动向下或向右扩展它的大小，以容纳分层的内容，使之可见。 隐藏：当分

18、层中的内容超出分层的边界时，分层大小不变，也不出现滚动条，超出边界的内容不显示。 滚动：无论分层中的内容是否超出分层范围，分层上总会出现滚动条，利用滚动条进行浏览。 自动：在分层中的内容超出分层的边界时，出现滚动条以便显示所有分层内容。7) 剪辑：可以定义分层可见部分的位置和大小。如果指定了碎片区域，可以通过脚本语言如JavaScript来对其进行操作，例如可以输入其属性以创建特殊效果。306.3.8 编辑扩展格式 在CSS样式定义对话框中单击左边的“扩展”，右边区域显示可以设置CSS样式的扩展格式，如图6-15所示。图6-15 编辑CSS样式扩展格式31 扩展样式更多的是对自定义功能的扩展，

19、可能不被某些浏览器所支持。其中：1)分页：可以设置在打印页面时强制分页的位置。在“之前”和“之后”的下拉列表中，可分别设置分页前和分页后的位置。此属性只有4.0以上版本的浏览器支持。2) 视觉效果：可以设置样式的一些可视效果。 光标：用于设置当鼠标掠过被样式控制的对象时的指针外观。如选择hand，鼠标指针会变为“手形”，只有4.0及其以上版本的浏览器支持此属性。 过滤镜：在其下拉菜单中选择需要的特效，对被样式控制的对象指定特殊的效果，包括模糊和反转，只有4.0及其以上版本的浏览器支持此属性。32 利用编辑CSS样式对话框可以对CSS样式进行编辑。其步骤如下：1) 在样式面板空白处单击鼠标右键，从弹出的菜单中选择“编辑”命令；或者从CSS面板菜单的右下角处选择【编辑样式】按钮。打开如图6-16所示编辑样式对话框。2) 选择要编辑的样式，单击【编辑】按钮，打开如图6-15所示选择编辑CSS样式对话框。3) 选中要编辑的样式，可以链接外部样式表，可以新建一个样式，可以编辑、复制和删除CSS样式。图6-16编辑样式对话框6.4 编辑管理CSS样式336.5 将CSS样式转换为HTML标记 CSS样式只能在4.0或更高版