CSS入门基础教程:class与ID


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>


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3