UltraEdit样式编辑器功能介绍

网页主要由三部分组成：结构、表现、行为，它们又用三种语言来描述。

HTML——结构，决定网页的结构和内容（“是什么”）

CSS——表现（样式），设定网页的表现样式（“什么样子”）

JavaScript（JS）——行为，控制网页的行为（“做什么”）

制作网页时往往是三者的复用，而我们大多数只使用HTML与CSS，行为动作是可以不使用的。其中结构的搭建不会消耗太多的时间，毕竟语句与结构较少，我们的精力基本上全都用在样式的处理上，繁多的样式选择、设定、复合、调用......可以说对新人是很不友好的。

而UltraEdit并没有让我们失望，它的样式编辑器功能可以帮助我们解决大部分的难题。我们只需选择相应的样式的设定，编辑器会自动生成能够直接使用的代码，便利之余还能减少出错率，毕竟这些样式全是固定的英文描述的样式，这也使英语水平较次的些许程序员松了口气。

本文章主要介绍UltraEdit中样式编辑器的使用以及使用过程中的一些注意事项。

一、打开样式编辑器窗口

点击“编码”、“样式编辑器”便可打开如图1的窗口。

图1：样式编辑器窗口

二、样式编辑器介绍

调用样式编辑器的时机：在写好框架后，需要插入“style”，此时调用样式编辑器，生成的代码刚好会用双引号标记，如此便完成样式编辑。

图2：调用对比

样式编辑器主要有三大设定区域：背景、字体/文本、边缘/位置。每个大的设定下都是各种细化的补充设定，如此功能更加完备。

图3：样式编辑器

最后的“小写字母”、“使用引号”就是生成的代码的格式，一般都是默认勾选，自己有需要可以更改。

“背景”样式构建。

背景样式的构建分为纯色填充和图片背景两种。

图4：选择青色的背景

图5：打开浏览器后的背景

如图4设定“青色”的背景代码后，把程序在浏览器中打开可以看见如图5的“青色”背景。

如图6设定图片作为背景，但设定时需写入图片的地址路径，如图7是打开浏览器中的效果。

图6：设定图片作为背景

图7：铺满的图片背景

设定图片作为背景图片的注意事项：背景图片的路径尽量使用英文，中文情况下有概率导致浏览器中图片无法显示。图片的其它选项可以不选，但平铺项一定要选，不然在图片像素达不到网页页面的像素时同样无法显示。

“字体/文本”样式构建。

与前面的用法相同，选择相应的样式，编辑器生成代码，样式的选择我们可以理解为使用word来对文字进行编辑，不再依次演示。

图8：字体/文本样式构建

“边缘/位置”样式构建。

在设置文字或者图片的时候，我们需要改变它们出现的位置以及设定出现的范围，此时就可以用到该功能。如图9，每一个可设定的选项都有两栏，左边是用来输入量化的数字，后面是一些特殊的标识符。例如下面设定的宽500像素、高500像素的范围，“px”在CSS语言中用来表示像素，如图10可以直观的看见效果。可以根据自己的需求完成相应的配置。

图9：边缘/位置样式构建

图10：位置演示

以上便是UltraEdit样式编辑器的功能介绍。

在熟知规则的情况下，使用该样式编辑器制作网页还是很方便的，只需简单的几步就能完成样式的编写，大大提高了效率。