2.3 编辑和浏览CSS

CSS文件是纯文本格式文件，在编辑CSS时，就有了多种选择，可以使用一些简单的纯文本编辑工具，例如记事本等，同样可以选择专业的CSS编辑工具，例如Dreamweaver等。记事本编辑工具适合于初学者，不适合大项目的编辑。但专业工具软件通常占用的空间较大，打开不太方便。

2.3.1 案例1——手工编写CSS

【例2.1】（案例文件：ch02\2.1html）

使用记事本编写CSS，和使用记事本编写HTML文档基本一样。首先需要打开一个记事本，然后在里面输入相应的CSS代码即可，具体步骤如下。

step 01 打开记事本，输入HTML代码，如图2-1所示。

step 02 添加CSS代码，修饰HTML元素。在head标记中间，添加CSS样式代码，如图2-2所示。从窗口中可以看出，在head标记中间，添加了一个style标记，即CSS样式标记。在style标记中间，对p样式进行了设定，设置段落居中显示并且颜色为红色。

step 03 运行网页文件。网页编辑完成后，使用IE 11.0浏览器打开，如图2-3所示，可以看到段落在页面中间以红色字体显示。

2.3.2 案例2——使用Dreamweaver编写CSS

【例2.2】（案例文件：ch02\2.2html）

除了可以使用记事本手工编写CSS代码外，还可以使用专用的CSS编辑器，例如Dreamweaver的CSS编辑器和Visual Studio的CSS编辑器，这些编辑器有语法着色，带输入提示，甚至有自动创建CSS的功能，因此深受开发人员喜爱。

使用Dreamweaver创建CSS的步骤如下。

step 01 创建HTML文档。使用Dreamweaver创建HTML文档，此处创建了一个名称为2.2.html的文档，输入内容如图2-4所示。

step 02 添加CSS样式。在设计模式中，选中“春花秋月何时了……”段落后，右击并在弹出的快捷菜单中选择【CSS样式】|【新建】命令，将弹出【新建CSS规则】对话框，在【为CSS规则选择上下文选择器类型】下拉列表框中，选择【标签（重新定义HTML元素）】选项，如图2-5所示。

step 03 设置完成后，单击【确定】按钮，打开【body的CSS规则定义】对话框，在其中设置相关的类型，如图2-6所示。

step 04 单击【确定】按钮，即可完成p样式的设置。设置完成后HTML文档内容发生了变化，如图2-7所示。从代码模式窗口中，可以看到在head标记中，增加了一个style标记，用来放置CSS样式。其样式用来修饰段落p。

step 05 运行HTML文档。在IE 11.0浏览器中预览该网页，其显示结果如图2-8所示，可以看到字体颜色设置为浅红色，大小为12px，字体较粗。