【图】CSS入门教程——样式表的基本语法(二)

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

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

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

没有加入CSS时的页面，加入CSS之后的页面。它们的源代码如下，红色字体的是我们本节将要学习的部分：

（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/webkaifa/）!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
title我真惨!被用来演示CSS!/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
/head
body
h1我是页面最上端的标题1/h1
h1我是页面左侧的标题1，用来导航/h1
h1我是页面右侧新闻的标题1/h1
p我是新闻的内容。/p
/body
/html

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
title我真惨!被用来演示CSS!/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
style type="text/css"
!--
h1.dabiaoti {
font-weight: bolder;
text-align: center;
}
h1#daohang {
font-size: 12px;
font-weight: bolder;
text-align: left;
}
h1.xinwen {
font-size: 16px;
font-weight:bold;
text-align: center;
color:green;
}
--
/style
/head
body
h1 class="dabiaoti"我是页面最上端的标题1/h1
h1 id="daohang"我是页面左侧的标题1，用来导航/h1
h1 class="xinwen"我是页面新闻的标题1/h1
p class="xinwen"我是新闻的内容。/p
/body
/html