您当时的方位:主页 > 言语编程 > CSS

CSS入门教程——款式表的根本语法(二)

2014-10-22  

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

在上一节中咱们了解了如何为特定的标签界说款式,例如咱们使用 “h1{font-size: 12px;}”将页面内一切的标题1的字体大小改为了12像素。那么假如我不期望一切的标题1款式都被修正该怎么做呢?这时class和id就可以帮你的忙。

为了了解class和id,咱们先来看两个网页。

没有参加CSS时的页面,参加CSS之后的页面。它们的源代码如下,赤色字体的是咱们本节即将学习的部分:

<!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>