合集下载

一代人

黑夜给了我黑色的眼睛

我却用它寻找光明

2.2.2 在STYLE标记中定义样式信息

在HTML标记中直接指定样式信息显然没有简化网页设计的格式设置和维护工作，因为每一个style属性都必须单独设置。如果能将同类的样式都统一定义，然后再具体应用到网页中的元素，那么就能简化网页设计的格式设置和维护工作。这正是CSS应用于网页的最常用方式，即在HEAD标记内使用STYLE标记，然后在STYLE标记中定义样式。

定义样式的格式：

其中，selector1和selector2表示样式作用的对象，在style标记内的定义样式时，在样式信息周围加上注释标记可以确保不支持style标记和CSS的浏览器把其作为注释忽略掉；当前绝大多数浏览器都支持CSS，所以注释标记可以省略。

例题2-2：

在STYLE标记中定义样式信息

一代人

黑夜给了我黑色的眼睛

我却用它寻找光明

2.2.3 链接外部样式表中的样式信息

在style标记中定义样式对于单独网页的格式设置和维护很有效，但如果在一个网站中，为每个页面都定义类似的样式，显然又是效率不高的，这时最好的办法是将重复在多个网页中使用的样式放在外部样式表文件中，然后通过连接的方式引用其中的样式。连接式样式的优点很明显，网页设计者可以在一个连接的CSS文件上作修改，然后所有引用他的网页都会自动更新。

连接外部样式表的方法是在head标记内使用link标记。连接外部样式表的格式：

创建样式表文件的方法是：将style标记与其中的样式定义一起放置到一个空白的文本文件中，然后将文件保存为.css扩展名即可。操作方法与用“记事本”保存.htm文件类似。例题2-3：

（1）样式表文件：文件名为mycss.css，与网页文件同目录

（2）网页文件

链接外部样式表中的样式信息

一代人

黑夜给了我黑色的眼睛
我却用它寻找光明

第三节 CSS样式定义

样式表项的组成如下：

selector{属性1：值1；属性2：值2；属性3：值3；..........}

其中，selector表示需要应用样式的内容，它有5种：html标记，具有上下文关系的html标记，用户定义类，用户定义ID，虚类。

2.3.1 HTML标记selector

html标记是最典型的selector类型，我们可以为某个或某些具体的html标记应用样式定义。对于不同的标记，我们可以采用编组的方式简化样式定义。

例如：

h1{color:#ff0000}

h2{color:#ff0000}

h3{color:#ff0000}

可以转换成编组样式如下：

h1,h2,h3{color:#ff0000}

2.3.2 具有上下文关系的HTML标记selector

若需要为位于某个标记内的标记设置特定的样式规则，则应将selector指定为具有上下文关系的html标记。

例如：如果只想使位于h1标记内的B标记具有特定的属性，则应使用以下格式：

h1 B{color:blue}

注意：h1和B之间以空格分隔，这表示只有位于h1标记内的B标记具有指定样式，其他B标记不具有该样式。

2.3.3 用户定义的类selector

可以使用类来为单一html标记创建多个样式，将一个类包括到样式定义中有两种情况：

1.定义通用类：

通用类可以应用到所有html标记，其定义格式如下：

.类名{属性1：值1；属性2：值2；属性3：值3；..........}

其引用格式如下：

<标记名 class="类名">…………

例如：

定义一个通用类如下：

.red{color:red}

引用该类如下：

本行文字为红色

本行标题为红色

此时，如果使用了h1和p标记但没有使用相应的class属性，则不应用所定义的样式，此处所定义的类在任何标记中都可以引用。

2.为html标记定义类：

其定义格式如下：

标记.类名{属性1：值1；属性2：值2；属性3：值3；..........}

其引用格式如下：

<标记名 class="类名">…………

例如：

为h1标记定义如下类：

网页设计与制作精品课程2

一代人

一代人

一代人

本行标题为红色