可以定义 CSS 规则的属性,如文本字体、背景图像和颜色、间距和布局属性以及列表元素外观。首先创建新规则,然后设置下列任意属性。
定义 CSS 类型属性
使用“CSS 规则定义”对话框中的“类型”类别可以定义 CSS 样式的基本字体和类型设置。
如果尚未打开“CSS 样式”面板,请打开该面板 (Shift+F11)。
双击“CSS 样式”面板顶部窗格中的现有规则或属性。
在“CSS 规则定义”对话框中,选择“类型”,然后设置样式属性。
下列任何属性若对于样式并不重要,可将其保留为空:
Font-family
为样式设置字体系列(或多组字体系列)。浏览器使用用户系统上安装的字体系列中的第一种字体显示文本。为确保与 Internet Explorer 兼容,应首先列出 Windows 字体。两种浏览器都支持字体属性。
Font-size
定义文本大小。可以通过选择数字和度量单位选择特定的大小,也可以选择相对大小。使用像素作为单位可以有效地防止浏览器扭曲文本。两种浏览器都支持大小属性。
Font-style
指定“正常”、“斜体”或“偏斜体”作为字体样式。默认设置是“正常”。两种浏览器都支持样式属性。
Line-height
设置文本所在行的高度。习惯上将该设置称为行高。选择“正常”自动计算字体大小的行高,或输入一个确切的值并选择一种度量单位。两种浏览器都支持行高属性。
Text-decoration
向文本中添加下划线、上划线或删除线,或使文本闪烁。常规文本的默认设置是“无”。链接的默认设置是“下划线”。将链接设置设为无时,可以通过定义一个特殊的类去除链接中的下划线。两种浏览器都支持修饰属性。
Font-weight
对字体应用特定或相对的粗体量。“正常”等于 400;“粗体”等于 700。两种浏览器都支持粗细属性。
Font-variant
设置文本的小型大写字母变体。Dreamweaver 不在“文档”窗口中显示此属性。Internet Explorer 支持变体属性,但 Navigator 不支持。
Text-transform
将所选内容中的每个单词的首字母大写或将文本设置为全部大写或小写。两种浏览器都支持大小写属性。
颜色
设置文本颜色。两种浏览器都支持颜色属性。
设置完这些选项后,在面板左侧选择另一个 CSS 类别以设置其它的样式属性,或单击“确定”。
定义 CSS 样式背景属性
使用“CSS 规则定义”对话框的“背景”类别可以定义 CSS 样式的背景设置。可以对网页中的任何元素应用背景属性。例如,创建一个样式,将背景颜色或背景图像添加到任何页面元素中,比如在文本、表格、页面等的后面。还可以设置背景图像的位置。
如果尚未打开“CSS 样式”面板,请打开该面板 (Shift+F11)。
双击“CSS 样式”面板顶部窗格中的现有规则或属性。
在“CSS 规则定义”对话框中,选择“背景”,然后设置样式属性。
下列任何属性若对于样式并不重要,可将其保留为空:
背景颜色
设置元素的背景颜色。两种浏览器都支持背景颜色属性。
背景图像
设置元素的背景图像。两种浏览器都支持背景图像属性。
Background Repeat
确定是否以及如何重复背景图像。两种浏览器都支持重复属性。
“不重复”只在元素开始处显示一次图像。
“重复”在元素的后面水平和垂直平铺图像。
“横向重复”和“纵向重复”分别显示图像的水平带区和垂直带区。图像被剪辑以适合元素的边界。
注意:使用“重复”属性重定义 body 标签并设置不平铺、不重复的背景图像。
Background Attachment
确定背景图像是固定在其原始位置还是随内容一起滚动。注意,某些浏览器可能将“固定”选项视为“滚动”。Internet Explorer 支持该选项,但 Netscape Navigator 不支持。
Background Position (X) 和 Background Position (Y)
指定背景图像相对于元素的初始位置。这可用于将背景图像与页面中心垂直 (Y) 和水平 (X) 对齐。如果附件属性为“固定”,则位置相对于“文档”窗口而不是元素。
设置完这些选项后,在面板左侧选择另一个 CSS 类别以设置其它的样式属性,或单击“确定”。
定义 CSS 样式区块属性
使用“CSS 规则定义”对话框的“区块”类别可以定义标签和属性的间距和对齐设置。
如果尚未打开“CSS 样式”面板,请打开该面板 (Shift+F11)。
双击“CSS 样式”面板顶部窗格中的现有规则或属性。
在“CSS 规则定义”对话框中,选择“区块”,然后设置以下任意样式属性。(如果某个属性对于样式并不重要,可将其保留为空。)
单词间距
设置字词的间距。若要设置特定的值,请在弹出菜单中选择“值”,然后输入一个数值。在第二个弹出菜单中,选择度量单位(例如像素、点等)。
注意:可以指定负值,但显示方式取决于浏览器。Dreamweaver 不在“文档”窗口中显示此属性。
字母间距
增加或减小字母或字符的间距。若要减小字符间距,请指定一个负值(例如 -4)。字母间距设置覆盖对齐的文本设置。Internet Explorer 4 和更高版本以及 Netscape Navigator 6 支持“字母间距”属性。
垂直对齐
指定应用此属性的元素的垂直对齐方式。Dreamweaver 仅在将此属性应用于 <img> 标签时才会在“文档”窗口中显示。
文本对齐
设置文本在元素内的对齐方式。两种浏览器都支持“文本对齐”属性。
文字缩进
指定第一行文本缩进的程度。可以使用负值创建凸出,但显示方式取决于浏览器。仅当相应的标签应用于块级元素时,Dreamweaver 才会在“文档”窗口中显示此属性。两种浏览器都支持“文字缩进”属性。
空格
确定如何处理元素中的空格。从三个选项中进行选择:“正常”,收缩空白;“保留”,其处理方式与文本被括在 pre 标签中一样(即保留所有空白,包括空格、制表符和回车);“不换行”,指定仅当遇到 br 标签时文本才换行。Dreamweaver 不在“文档”窗口中显示此属性。Netscape Navigator 和 Internet Explorer 5.5 支持“空白”属性。
显示
指定是否以及如何显示元素。“无”指定到某个元素时,它将禁用该元素的显示。
设置完这些选项后,在面板左侧选择另一个 CSS 类别以设置其它的样式属性,或单击“确定”。
定义 CSS 样式方框属性
使用“CSS 规则定义”对话框的“方框”类别可以为用于控制元素在页面上的放置方式的标签和属性定义设置。
可以在应用填充和边距设置时将设置应用于元素的各个边,也可以使用“全部相同”设置将相同的设置应用于元素的所有边。
如果尚未打开“CSS 样式”面板,请打开该面板 (Shift+F11)。
双击“CSS 样式”面板顶部窗格中的现有规则或属性。
在“CSS 规则定义”对话框中,选择“方框”,然后设置以下任意样式属性。(如果某个属性对于样式并不重要,可将其保留为空。)
宽和高
设置元素的宽度和高度。
浮动
指定其它元素在浮动的元素周围流动的一侧。浮动的元素固定在浮动一侧,其它内容在另一侧围绕它流动。
例如,在右侧浮动的图像固定在右侧,您以后添加的内容流动到图像的左侧。
清除
指定不允许有其它浮动元素的元素一侧。
填充
指定元素内容与元素边框之间的间距(如果没有边框,则为边距)。取消选择“全部相同”选项可设置元素各个边的填充。
全部相同
为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的填充属性。
边距
指定一个元素的边框与另一个元素之间的间距(如果没有边框,则为填充)。仅当属性应用于块级元素(段落、标题、列表等)时,Dreamweaver 才会在“文档”窗口中显示此属性。取消选择“全部相同”可设置元素各个边的边距。
全部相同
为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边距属性。
设置完这些选项后,在面板左侧选择另一个 CSS 类别以设置其它的样式属性,或单击“确定”。
定义 CSS 样式边框属性
使用“CSS 规则定义”对话框的“边框”类别可以定义元素周围的边框的设置(如宽度、颜色和样式)。
如果尚未打开“CSS 样式”面板,请打开该面板 (Shift+F11)。
双击“CSS 样式”面板顶部窗格中的现有规则或属性。
在“CSS 规则定义”对话框中,选择“边框”,然后设置以下任意样式属性。(如果某个属性对于样式并不重要,可将其保留为空。)
类型
设置边框的样式外观。样式的显示方式取决于浏览器。取消选择“全部相同”可设置元素各个边的边框样式。
全部相同
为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框样式属性。
宽度
设置元素边框的粗细。两种浏览器都支持“宽度”属性。取消选择“全部相同”可设置元素各个边的边框宽度。
全部相同
为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框宽度。
颜色
设置边框的颜色。可以分别设置每条边的颜色,但显示方式取决于浏览器。取消选择“全部相同”可设置元素各个边的边框颜色。
全部相同
为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框颜色。
设置完这些选项后,在面板左侧选择另一个 CSS 类别以设置其它的样式属性,或单击“确定”。
定义 CSS 样式列表属性
“CSS 规则定义”对话框的“列表”类别为列表标签定义列表设置(如项目符号大小和类型)。
如果尚未打开“CSS 样式”面板,请打开该面板 (Shift+F11)。
双击“CSS 样式”面板顶部窗格中的现有规则或属性。
在“CSS 规则定义”对话框中,选择“列表”,然后设置下列任意样式属性。(如果某个属性对于样式并不重要,可将其保留为空。)
List style type
设置项目符号或编号的外观。两种浏览器都支持“类型”。
List style image
使您可以为项目符号指定自定义图像。单击“浏览”(Windows) 或“选择”(Macintosh) 通过浏览选择图像,或键入图像的路径。
List style position
设置列表项文本是否换行并缩进(外部)或者文本是否换行到左边距(内部)。
设置完这些选项后,在面板左侧选择另一个 CSS 类别以设置其它的样式属性,或单击“确定”。
定义 CSS 样式定位属性
“定位”样式属性确定与选定的 CSS 样式相关的内容在页面上的定位方式。
如果尚未打开“CSS 样式”面板,请打开该面板 (Shift+F11)。
双击“CSS 样式”面板顶部窗格中的现有规则或属性。
在“CSS 规则定义”对话框中,选择“定位”,然后设置所需的样式属性。
下列任何属性若对于样式并不重要,可将其保留为空:
位置
确定浏览器应如何来定位选定的元素,如下所示:
绝对 使用“定位”框中输入的、相对于最近的绝对或相对定位上级元素的坐标(如果不存在绝对或相对定位的上级元素,则为相对于页面左上角的坐标)来放置内容。
相对 使用“定位”框中输入的、相对于区块在文档文本流中的位置的坐标来放置内容区块。例如,若为元素指定一个相对位置,并且其上坐标和左坐标均为 20px,则将元素从其在文本流中的正常位置向右和向下移动 20px。也可以在使用(或不使用)上坐标、左坐标、右坐标或下坐标的情况下对元素进行相对定位,以便为绝对定位的子元素创建一个上下文。
固定 使用“定位”框中输入的坐标(相对于浏览器的左上角)来放置内容。当用户滚动页面时,内容将在此位置保持固定。
静态 将内容放在其在文本流中的位置。这是所有可定位的 HTML 元素的默认位置。
可见性
确定内容的初始显示条件。如果不指定可见性属性,则默认情况下内容将继承父级标签的值。body 标签的默认可见性是可见的。选择以下可见性选项之一:
继承 继承内容父级的可见性属性。
可见 将显示内容,而与父级的值无关。
隐藏 将隐藏内容,而与父级的值无关。
Z 轴
确定内容的堆叠顺序。Z 轴值较高的元素显示在 Z 轴值较低的元素(或根本没有 Z 轴值的元素)的上方。值可以为正,也可以为负。(如果已经对内容进行了绝对定位,则可以轻松使用“AP 元素”面板来更改堆叠顺序。)
溢出
确定当容器(如 DIV 或 P)的内容超出容器的显示范围时的处理方式。这些属性按以下方式控制扩展:
可见 将增加容器的大小,以使其所有内容都可见。容器将向右下方扩展。
隐藏 保持容器的大小并剪辑任何超出的内容。不提供任何滚动条。
滚动 将在容器中添加滚动条,而不论内容是否超出容器的大小。明确提供滚动条可避免滚动条在动态环境中出现和消失所引起的混乱。该选项不显示在“文档”窗口中。
自动 将使滚动条仅在容器的内容超出容器的边界时才出现。该选项不显示在“文档”窗口中。
位置
指定内容块的位置和大小。浏览器如何解释位置取决于“类型”设置。如果内容块的内容超出指定的大小,则将改写大小值。
位置和大小的默认单位是像素。还可以指定以下单位:pc(皮卡)、pt(点)、in(英寸)、mm(毫米)、cm(厘米)、em(全方)、(ex) 或 %(父级值的百分比)。缩写必须紧跟在值之后,中间不留空格。例如,3mm。
剪辑
定义内容的可见部分。如果指定了剪辑区域,可以通过脚本语言(如 JavaScript)访问它,并操作属性以创建像擦除这样的特殊效果。使用“改变属性”行为可以设置擦除效果。
设置完这些选项后,在面板左侧选择另一个 CSS 类别以设置其它的样式属性,或单击“确定”。
定义 CSS 样式扩展属性
“扩展”样式属性包括滤镜、分页和指针选项。
注意:Dreamweaver 中提供了许多其它扩展属性,但是您必须使用“CSS 样式”面板才能访问这些属性。您可以轻松查看提供的扩展属性的列表,方法是:打开“CSS 样式”面板(“窗口”>“CSS 样式”),单击该面板底部的“显示类别视图”按钮,然后展开“扩展”类别。
如果尚未打开“CSS 样式”面板,请打开该面板 (Shift+F11)。
双击“CSS 样式”面板顶部窗格中的现有规则或属性。
在“CSS 规则定义”对话框中,选择“扩展”,然后设置以下任意样式属性。(如果某个属性对于样式并不重要,可将其保留为空。)
Page break before
在打印期间在样式所控制的对象之前或者之后强行分页。在弹出菜单中选择要设置的选项。此选项不受任何 4.0 版本浏览器的支持,但可能受未来的浏览器的支持。
光标
当指针位于样式所控制的对象上时改变指针图像。在弹出菜单中选择要设置的选项。Internet Explorer 4.0 和更高版本以及 Netscape Navigator 6 支持该属性。
过滤器
对样式所控制的对象应用特殊效果(包括模糊和反转)。从弹出菜单中选择一种效果。
设置完这些选项后,在面板左侧选择另一个 CSS 类别以设置其它的样式属性,或单击“确定”。