会员投稿
投稿指南 
RSS订阅栏目导航
热点推荐
- 3个简单却重要的CSS技巧
- css基础:熟悉了解盒子模型(box m
- CSS Hack兼容各浏览器是否正常
- 最常用的12种CSS BUG解决方法与
- [分享]我的css hack观点
- CSS实例教程:分号引起页面混乱
- CSS教程：认真学习haslayout
- CSS教程:编写CSS代码时样式命名
- 如何在CSS中设定文本的尺寸
- CSS教程:CSS定位属性
- 新窗口打开超链接的正确方法
- 轻松搞定IE的CSS制作网页技巧3则
阅览排行
CSS入门基础教程：class与ID
www.jz123.cn 2011-07-26 来源: 站长家园 责任编辑(袁袁) 我要投递新闻
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>
上一篇：注意CSS代码中的！important属性 下一篇：CSS技巧：import与link的具体区别