6.2 编辑和浏览CSS_精通HTML5+CSS3+JavaScript网页设计（视频教学版）（第2版）-QQ阅读中文轻小说网

6.2 编辑和浏览CSS

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

在前面介绍过，CSS样式表由若干条样式规则组成，这些样式规则可以应用到不同的元素或文档中来定义它们的显示效果。每一条样式规则由三部分构成：选择符（selector）、属性（property）和属性值（value），基本格式如下：

     selector{property: value}

（1）selector可以采用多种形式，可以为文档中的HTML标记（例如<body>、<table>、<p>等），也可以是XML文档中的标记。

（2）property是选择符指定的标记所包含的属性。

（3）value指定了属性的值。如果定义选择符的多个属性，则属性和属性值为一组，组与组之间用“;”隔开，基本格式如下：

     selector{property1: value1; property2: value2;…… }

下面就给出一条样式规则，代码如下所示。

     p{color:red}

其中，p为段落提供样式，color指定文字颜色属性，red为属性值。此样式规则表示标记<p>指定的段落文字为红色。

如果要为段落设置多种样式，则可以使用下列语句。

     p{font-family:"隶书"; color:red; font-size:40px; font-weight:bold}

由于CSS是文本格式，因此使用传统的文本编辑器就可以编辑CSS。当然这些编辑软件不支持语法提示，不支持验证，会严重影响开发效率，但使用记事本手工编写CSS文件可以使初学者更快地掌握CSS3技术。

使用记事本编写CSS和使用记事本编写HTML的方法基本一样。首先需要打开一个记事本，然后在里面输入相应的CSS代码即可。

【例6.1】使用记事本手工编写CSS文件。

01 打开记事本，编写HTML文档

打开一个记事本，输入HTML代码，如图6-1所示。

图6-1 记事本开发HTML

02 添加CSS代码，修饰HTML元素

在head部分添加CSS样式代码，如图6-2所示。

图6-2 添加样式

从窗口中可以看出，在head部分添加了一个<style>标记（CSS样式标记）。在<style>标记中间对p样式进行了设定，设置段落居中显示并且颜色为红色。

03 运行网页文件

编辑完成后，使用IE 11.0打开（如图6-3所示），可以看到段落在页面中间以红色字体显示。

图6-3 CSS样式显示窗口

随着Web技术的发展，越来越多的开发人员开始使用功能更多、界面更友好的专业CSS编辑器（如Dreamweaver CC的CSS编辑器和Visual Studio的CSS编辑器），这些编辑器有语法着色，带输入提示，甚至有自动创建CSS的功能。

【例6.2】使用Dreamweaver CC创建CSS文件

01 创建HTML文档

使用Dreamweaver CC创建HTML文档的方法前面已经介绍过，这里就不再赘述了。此处创建一个名称为“6.2.html”的文档，如图6-4所示。

图6-4 网页显示窗口

02 添加CSS样式

在设计模式中，选中“使用CSS标记修饰”段落后，右击并在弹出的快捷菜单中选择【CSS样式】➢【新建】菜单命令，弹出如图6-5所示的对话框。

图6-5 “新建CSS规则”对话框

在【为CSS规则选择上下文选择器类型】下拉列表中，选择【标签（重新定义HTML元素）】选项（学习后面章节内容后，读者可以根据需要选择不同的选择器类型）。选择完成后单击【确定】按钮，即可显示如图6-6所示的对话框。

图6-6 “p的CSS规则定义”对话框

在对话框中可以设置p的样式，设置完成后单击【确定】按钮，此时HTML文档内容发生了变化，如图6-7所示。

图6-7 设置完成显示

从代码模式可以看到，在head部分中增加了一个<style>标记放置CSS样式，该样式用来修饰段落p。

03 运行HTML文档

在IE 11.0中预览该网页，其显示结果如图6-8所示，可以看到字体颜色设置为浅红色，大小为18px，字形加粗。

图6-8 CSS样式显示

上述使用Dreamweaver创建CSS的方法只是其中一种，读者还可以直接在代码模式中编写CSS代码，此时会有很好的语法提示。