网站设计制作中常见的几种CSS样式的类型

2019-11-11

次

在网站设计技术中，DIV+CSS是目前最流行也是最实用的一种网页的布局方法。与传统中通过表格布局定位的方式不同，它可以实现网页页面内容与表现相分离。另外，在网站优化的优势方面，也深得大多数站长的喜爱。本文，东莞网站建设公司易捷网科技要总结的是CSS样式的类型。

一般CSS 样式可分为不同的类型，其中常用的样式类型主要有3种，即HTML标记样式、类样式与伪类样式。

1．HTML标记样式

HTML标记样式用于重定义HTML标记的格式。对于HTML中的各种标记，如 P、TR、DIV、IMG、BODY 等，均可通过CSS样式定义为相应的格式。在创建或更改HTML标记样式后，页面中所有使用相应HTML标记的内容便具有与其对应的HTML标记样式所定义的格式，如下例所示：

BODY {font-size: 9pt; color: #000099; background-color: #ffffff;}

2．类样式

类样式又称为自定义样式，其选择符通常是以点号“.”开头的某个合法的标识符，如下例所示：

.center {text-align: center} /*文字居中*/

与HTML标记样式不同，类样式可根据需要应用于任意HTML标记或元素。为此，只需在HTML标记中通过class属性指定相应的类样式即可，如下例所示：

<H1 class=”center”>这个标题是居中排列的</H1>

<P class=”center”>这个段落也是居中排列的</P>

3．伪类样式

伪类样式是一种特殊的类样式，主要用于将某个HTML元素区分不同的种类，其基本格式为：

选择符:伪类{属性:值}

例如，通过伪类样式，可将链接区分为一般的链接（Ank）、已被访问的链接（A:visited）、已被选中的链接（A:active）与鼠标指向时的链接（A:hover），并分别进行定义，如下例所示：

Ank {font-size: 9pt; text-decoration: underline; color: blue}

A:visited {font-size: 9pt; text-decoration: none; color: green}

A:active {font-size: 9pt; text-decoration: none; color: red}

A:hover {font-size: 9pt; text-decoration: underline; color: red}

需要注意的是，伪类样式能自动地被支持CSS的浏览器所识别，因此无须使用HTML标记的class属性加以指定。