class(类)和id的一个小实例

在上一节中我们了解了如何为特定的标签定义样式，例如我们利用 “h1{font-size: 12px;}”将页面内所有的标题1的字体大小改为了12像素。那么如果我不希望所有的标题1样式都被修改该怎么做呢？这时class和id就可以帮你的忙。

为了了解class和id，我们先来看两个网页。

没有加入CSS时的页面，加入CSS之后的页面。它们的源代码如下：

复制代码代码如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://www.w3.org/1999/xhtml">

我真惨!被用来演示CSS!

content="text/html; charset=gb2312" />

我是页面最上端的标题1

我是页面左侧的标题1，用来导航

我是页面右侧新闻的标题1

我是新闻的内容。

复制代码代码如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://www.w3.org/1999/xhtml">

我真惨!被用来演示CSS!

我是页面最上端的标题1

我是页面左侧的标题1，用来导航

我是页面新闻的标题1

我是新闻的内容。

class和id的用法

上面的例子应用class和id实现了3种不同的标题1。下面我们就来讲讲class和id的具体应用规则。

指定标签的class和id

首先我们要在

部分定义class(类)或id。

class的定义方法：指定标签.类名 {样式}

id的定义方法：指定标签#id名 {样式}

然后我们在想要应用类的标签上加上class(类)或者id属性：

class的应用方法：

id的应用方法：

这种方式定义的class(类)和id只能作用于指定标签。在上面的例子中我们定义了三个类，类名分别为"dabiaoti"、"daohang"和"xinwen"，它们均作用于h1标签。当我们试图将其中“xinwen”的样式应用于一个

标签的时候(

我是新闻的内容。

)，您会看到它的样式没有发生任何改变。这是一种错误的CSS应用。

注意：类名和id名不可以用数字开头。

不指定标签的类或id

在网页设计的过程中，你可能不希望你定义的类只局限于一个标签。就拿上面的例子来说，你可能希望xinwen类可以应用于段落标签

。那么你只需要将定义部分的h1.xinwen改为.xinwen，即去掉h1。这种定义中不含标签名的类当然也就不再局限于某一个标签了。看看我们修改之后的网页，“新闻的内容”也应用了xinwen类的样式。

class(类)与id的区别

到这里你也许要问了，class和id看起来除了一个.和#的区别之外，无论在定义上还是在应用上似乎都是一模一样啊？然而事实上并不如此，同一id在一个页面内只能应用一次，而class则是用于描述多次出现的元素。这从它们的名称上很容易理解。id就类似元素的省份证号码，它必须是唯一的，而class则是一类具有共同属性的元素的合称，是一类。

如果你试图在一个一面内多次使用同一个id，页面通常是可以正常显示的。但是这会给后期的维护带来不便，还可能造成其它的问题。所以我们一定要区分开id和class，并且合理的应用它们。

html class和id,css教程之样式表的基本语法(二) class(类)和id的一个小实例相关推荐

CSS叠层样式表（一）
CSS叠层样式表(一) 如何使用css 选择器如何使用css 如何在HTML页面中添加CSS: 使用style属性:在元素中直接指定CSS样式,可以使用style属性来定义,称为内联样式. < ...
css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表 Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能比如说, 有的博文写得不错, 想保存, ...
CSS三种样式表：行内样式表、内部样式表、外部样式表
目录一.CSS三种样式表 1.内部样式表 2.行内式(内联样式) 3.外部样式表(外链式) 二.三种样式表的对比三.CSS样式表规则一.CSS三种样式表 1.内部样式表 2.行内样式表(内联式) ...
CSS三种样式表内部样式表、行内部样式表、外部引用
目录 CSS三种样式表 1.内部样式表 2.行内部样式表 3.外部引用: CSS三种样式表 1.内部样式表 2.行内样式表(内联式) 3.外部样式表(外链式) 1.内部样式表内嵌式:将CSS代码集中 ...
CSS叠层样式表（三）
CSS叠层样式表(三) 文档流 display和visibility属性定位浮动背景文档流 display和visibility属性 display属性定义了元素的基本显示方式,它的常用值包括 ...
Qt样式表之 QSS 语法介绍；QLineEdit、
内容来自Qt样式表之 QSS 语法介绍-3YL的博客 Qt样式表是一个可以自定义部件外观的十分强大的机制,可以用来美化部件.Qt样式表的概念.术语和语法都受到了HTML的层叠样式表(Cascading ...
css实例 css中id/class 详解样式表（外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解）[第一天]
文章目录 css实例 css中的id css中的class 样式表外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解 css实例 CSS 规则由两个主要的部分构成:选择器,以 ...
[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
CSS三种样式表（内部样式表、行内样式表、外部样式表）
引入CSS样式表(书写位置) CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表(内嵌式) 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义 ...

html class和id,css教程之样式表的基本语法(二) class(类)和id的一个小实例

我是页面最上端的标题1

我是页面左侧的标题1，用来导航

我是页面右侧新闻的标题1

我是页面最上端的标题1

我是页面左侧的标题1，用来导航

我是页面新闻的标题1

html class和id,css教程之样式表的基本语法(二) class(类)和id的一个小实例相关推荐

最新文章

热门文章