您的位置：首页 > Web前端 > CSS

CSS基础学习6-CSS设置元素的分类与标识（class和id）

2016-10-20 11:14 591 查看

所有CSS基础学习文档下载地址：http://download.csdn.net/detail/rongrong_love_lc/9663463

六、CSS设置元素的分类与标识（class和id）
1.用class对元素进行分类：
value: .classname
html文件如下 :
<html>
<head>
<title>Color例子</title>
<link rel="stylesheet" type="text/css" href="color.css"/>
</head>
<body>
<p>测试信息1</p>
<ul>
<li><a href="https://www.baidu.com" class="green">百度一下1</a></li>
<li><a href="https://www.sogou.com" class="yellow">搜狗1</a></li>
<li><a href="http://translate.google.cn" class ="red">谷歌翻译1</a></li>
<li><a href="http://fanyi.youdao.com" class="black">有道翻译1</a></li>
</ul>
<p>测试信息2</p>
<ul>
<li><a href="https://www.baidu.com">百度一下2</a></li>
<li><a href="https://www.sogou.com">搜狗2</a></li>
<li><a href="http://translate.google.cn">谷歌翻译2</a></li>
<li><a href="http://fanyi.youdao.com">有道翻译2</a></li>
</ul>
</body>
</html>
CSS文件如下:
body {background:white url("image1.jpg") no-repeat fixed center;
}
p {text-align:justify;
letter-spacing:5px;
text-transform:none;}
a {color:blue;}
.green {color:green;
text-decoration:underline;}
.black {color:black;
text-decoration:underline;}
.yellow {color:yellow;
text-decoration:underline;}
.red {color:red;
text-decoration:underline;}

2.利用ID标识元素：
value:#id(注意:每个id都必须是唯一的 html中)
html文件如下:
<html>
<head>
<title>Color例子</title>
<link rel="stylesheet" type="text/css" href="color.css"/>
</head>
<body>
<p>study测试文本信息study</p>
<h1 id="a1">study测试文本信息1study</h1>
<h2 id="a2">study测试文本信息2study</h2>
<h3 id="a3">study测试文本信息3study</h3>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航