CSS样式面板

【CSS样式定义】对话框中共有8个子面板，在这8个子面板中，有些内容并不常用，有些内容会在后面的章节用到。这里将介绍一些常用的设置并通过简单的实例让读者了解实际制作中样式的应用。

1．类型设置

【类型】子面板如图6-4所示，虽然软件将这个子面板翻译成类型，但从各个设置项目看，都是关于文字的。

图6-4  样式定义【类型】子面板
类型子面板中的各项参数含义如下：
l 【字体】：可以在下拉菜单中选择相应的字体。如果系统安装了某种字体，但在下拉菜单中找不到，可以选择菜单上的“编辑字体列表”添加字体。具体方法请参考第3章的第一节。
l 【大小】：实际就是字号。可以直接填写数字，然后选择单位。有很多单位供选择。“点数”是计算机字体的标准单位，这个单位的好处是设置的字号会随着显示器分辨率的变化而自动调整大小，可以防止不同分辨率显示器中字体大小的不一致。还有其他的单位，如像素、英寸、厘米、毫米等。目前网页上最流行的字体大小是12像素（px）。
l 【样式】：设置文字的外观，包括正常、斜体、偏斜体。
l 【行高】：这项设置在实际制作中很常用。设置行高，可以选择“正常”，让计算机自动调整行高。也可以使用数值和单位结合的形式。需要注意的是，单位应该和文字的单位一致。行高的数值是包括字号数值在内的。例如，文字设置为12px高，如果要创建一倍行距，则行高应该为24px。
l 【修饰】：几个复选项目介绍如下：
【下划线】：为文字添加下划线；
【上划线】：为文字添加上划线；
【删除线】：为文字添加删除线；
【闪烁】：为文字添加闪烁效果，只有在Netscape浏览器下能显示出这一效果；
【无】：没有任何修饰。如果想去掉链接默认的下划线，就选择此项。
l 【粗细】：可以选择相对粗细，也可以选择具体的数值。在实际中不常用。
l 【变量】：在英文中，大写字母的字号一般比较大，采用下拉选项中的【小型大写字母】设置，可以缩小大写字母。
l 【大小写】：下拉选项中的【首字母大写】可以将每句话的第一个字母大写，【大写】或【小写】可以将全部字母变化为大写或小写。IE浏览器不支持这一效果。
l 【颜色】：设置文字的颜色。

2．背景设置

在HTML语言中，背景只能使用单一的色彩或利用图像水平垂直方向平铺。使用CSS之后，可以进行更加灵活的设置，如图6-5所示。
       
     图6-5  有无“背景”样式对照图
【背景】子面板，如图6-6所示，它是对页面背景进行设置，其中的参数含义如下：

图6-6  样式定义【背景】子面板
l 【背景颜色】：选择固定颜色作为背景。
l 【背景图像】：直接填写背景图像的文件路径，或者单击【浏览】按钮选择背景图像文件。
l 【重复】：在使用图像作为背景时，可以使用此项设置背景图像的重复方式。包括【不重复】、【重复】、【横向重复】、【纵向重复】。
l 【附件】：可以设置图像是否跟随网页一起滚动。下拉列表中的选项包括【滚动】与【固定】。Netscape浏览器不支持固定的背景图片。
l 【水平位置】：设置图像在水平方向上的位置。可以是【左对齐】、【右对齐】、【居中】，还可以使用数值与单位结合标示位置的方式，这时比较常用的单位是像素。
l 【垂直位置】：设定图像在垂直方向上的位置，可以选择【顶部】、【底部】、【居中】。同水平位置相同，也可以设置数值与单位结合标示位置的方式。

3．区块设置

【区块】面板，主要是对文字整体的设置。图6-7所示的是在文本上添加样式前后的对照图。
        
图6-7  添加区块样式设置前后对照图
选择分类中的【区块】选项切换到如图6-8所示的【区块】子面板，该面板的各参数含义如下：

图6-8  样式定义【区块】子面板
子面板各项参数的含义如下：
l 【单词间距】：设置英文单词之间的间距。可以使用默认的设置【正常】，也可以使用数值和单位结合的形式。使用正值为增加单词间距，使用负值为减小单词间距。
l 【字母间距】：设置英文字母间距。使用正值为增加字母间距，使用负值为减小字母间距。
l 【垂直对齐】：设置对象垂直对齐方式，包括：【基线】、【下标】、【上标】、【顶部】、【文本底对齐】、【中线对齐】、【底部】、【文本底对齐】、【自定义】的数值和单位结合形式。
l 【文本对齐】：设置文本的水平对齐方式，包括【左对齐】、【右对齐】、【居中】、【两端对齐】。
l 【文字缩进】：这是文字整体属性面板上最重要的选项，中文文字的首行缩进就是由它来实现。首先填入具体的数值，然后选择单位。文字缩进和字号设置要保持统一。如字号为9pt，想创建两个中文的缩进效果，文字缩进就应该为18pt。
l 【空格】：对源代码文字空格的控制。选择【正常】忽略源代码之间的所有空格。选择【保留】将保留源代码中所有的空格形式，包括有空格键、<Tab>键、<Enter>键创建的空格。如果写了一首诗，使用普通的方法很难保留诗的结构，这时可以使用【保留】，保留所有的空格形式。
l 【显示】：设置是否及如何显示元素。常用的选项有：
【无】：关闭元素的显示。
【内嵌】：元素会被显示为内联元素，元素前后没有换行符。
【块】：元素将显示为块级元素，此元素前后会带有换行符。

4．方框设置

在前面讲到图像的设置时，应用到的一些内容，如设置图像的大小，设置图像水平和垂直方向上的空白区域，设置图像是否有文字环绕等。利用【方框】设置能进一步完善、丰富这些设置。
选择分类中的【方框】选项切换到如图6-9所示的【方框】子面板，该面板的各参数含义如下：

图6-9  样式定义【方框】子面板
l 【宽】：使用数值和单位设置对象的宽度。
l 【高】：使用数值和单位设置对象的高度。
l 【浮动】：实际就是对象的环绕效果。选择【右对齐】，对象居右，其他内容从另一侧环绕对象；选择【左对齐】，对象居左；【无】取消环绕效果。IE和Netscape浏览器都支持浮动效果
l 【清除】：规定对象的一侧不许有其他对象。可以选择【左对齐】或【右对齐】，选择不允许出现其他对象的一侧。【两者】是指左右都不允许出现其他对象。【无】是不限制其他对象的出现。IE和Netscape浏览器都支持【清除】设置。
l 【填充】和【边界】：如果对象设置了边框，【填充】指的是边框和其中内容之间的空白区域。【边界】指的是边框外侧的空白区域。可以在下面对应上、下、左右各项中设置具体的数值和单位。

5．边框设置

使用边框设置可以给对象添加边框，设置边框的颜色、粗细、样式。图6-10所示的是在表格上添加样式前后的对照图。
    
图6-10  添加【边框】样式设置前后对照图
在分类中单击【边框】选项，切换到【边框】子面板，如图6-11所示，其中各参数含义如下：

图6-11  样式定义【边框】子面板
l 【样式】：设置边框的样式，包括【无】、【虚线】、【点划线】、【实线】、【双线】、【槽状】、【脊状】、【凹陷】、【突出】。如果选择【全部相同】复选框，则只需要设置【上】的样式，其他方向样式与【上】的相同。
l 【宽度】：设置4个方向边框的宽度。可以选择相对值：【细】、【粗】、【中】。也可以设置边框的宽度值和单位。
l 【颜色】：设置对应边框的颜色。
6．列表设置
CSS中有关列表的设置丰富了列表的外观。在介绍CSS样式之前我们对项目的符号设置是通过【属性】面板，从中只能选择有限的、简单的符号，如图6-12（a）所示。使用CSS之后，可以使用任意的图像文件作为项目符号，如图6-12（b）所示。
         
（a）                                                                                       （b）
图6-12  添加【列表】样式设置前后对照图
【列表】子面板如图6-13所示，各项参数意义如下：

图6-13  样式定义【列表】子面板
l 【类型】：设置列表项目的符号类型。可以选择【圆点】、【圆圈】、【方块】、【数字】、【小写罗马数字】、【大写罗马数字】、【小写字母】、【大写字母】、【无】列表符号等。
l 【项目符号图像】：可以选择图像作为项目的引导符号，单击右侧的【浏览】按钮，找到图像文件即可。
l 【位置】：决定列表项目所缩进的程度。选择【外】，列表贴近左侧边框。选择【内】，列表缩进。这项设置效果不明显。