点击这里给我发消息 点击这里给我发消息

CSS入门基础教程:class与ID

添加时间:2011-7-25
    相关阅读: CSS 链接

class与ID主要用来对相同的标签进行不同的设置和对不同的标签进行相同的设置。

  一、class

  class通常叫做类选择符,

  语法:

  1 定义类

  (1)带标签定义

语法:选择符.标识符{ 选择符样式定义 }

  (2)不带标签定义

语法:.标识符{ 选择符样式定义 }

  2 引用类

<选择符 class="标识符">......</选择符>

  示例6-1

htm6-1.htm

<html>
<head>
<title>链接外部样式表</title>
<style type="text/css">
<!--
@charset"gb2312";
p.A{
font-size:20pt;
color:#ff0000;
}
p.B{
font-size:20pt;
color:#0000ff;
}
.AB{
font-size:20pt;
color:#ff00ff;
}
-->
</style>
</head>
<body>
<p class="A">床前明月光,疑是地上霜</p>
<p class="B">举头望明月,低头思故乡</p>
<h1 class="AB">床前明月光,疑是地上霜</h1>
<h2 class="AB">床前明月光,疑是地上霜</h2>
<p class="AB">床前明月光,疑是地上霜</p>
</body>
</html>

  二、ID

  1 定义ID

语法:#标识符{ 样式定义 }

  2 引用

语法:<选择符 ID="标识符">......</选择符>

  示例6-2

htm6-2.htm

<html>
<head>
<title>链接外部样式表</title>
<style type="text/css">
<!--
@charset"gb2312";
#A1{
font-size:20pt;
color:#ff0000;
}
#A2{
font-size:20pt;
color:#0000ff;
}
#A3{
font-size:20pt;
color:#ff00ff;
}
-->
</style>
</head>
<body>
<p ID="A1">床前明月光,疑是地上霜</p>
<p ID="A2">举头望明月,低头思故乡</p>
<h1 ID="A1">床前明月光,疑是地上霜</h1>
<h1 ID="A2">床前明月光,疑是地上霜</h1>
<h1 ID="A3">床前明月光,疑是地上霜</h1>
</body>
</html>

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册