2.1、基本选择器
2.1.1、元素选择器
HTML标签名HTML元素
元素选择器：即以又HTML标签名作为选择器名称 例如：span{ } div{ }
作用：选择css样式代码作用于对应标签名的标签上
- 格式：
标签名{
/*css样式代码*/}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
font-size: 200px;
color: red;
border:50px solid blue ;
}
div{
font-size: 200px;
color: red;
border:50px solid purple ;
}
</style>
</head>
<body>
<br/> <br/>
<span>今天只学习了不到一小时</span><br/> <br/><br/> <br/>
<div>每天学习时间必须 要有保证，不然时间不够用</div>
</body>
</html>
2.1.2、类选择器
每个HTML标签上都有一个class属性，class属性值即为类名
类选择器：即以HTML的类名（class属性值）作为选择器名称
作用：选择css样式代码 作用于 对应类名的HTML标签上
格式：
.类名{
/*css样式代码*/
}
使用范围：使用于将样式 一次作用在相同类名的标签上,标签名不同，不影响。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.blueF{
font-size: 80px;
color: red;
border:50px solid blue ;
}
.redF{
font-size: 100px;
color: red;
border:50px solid purple ;
}
</style>
</head>
<body>
<br/> <br/>
<span class="blueF">天空是蓝色的</span><br/> <br/><br/> <br/>
<span class="redF">草莓是红色</span><br/> <br/><br/> <br/>
<div class="blueF">大海是蓝色的</div>
<div class="redF">五星红旗是红色的</div>
</body>
</html>
2.1.3、ID选择器
每个HTML标签都有一个id属性，id的属性值必须在本页面是唯一的
id选择器：即以HTML的id（ID属性值）作为选择器名称。
作用：选择css样式代码 作用于 某个规定id值得HTML标签上
格式：
#id值{
#id值 /*css样式代码*/
}
适用范围：使用于将样式 作用于某个标签上（比元素、类选择器更具针对性）
注意：必须手动保证id值在本页面是唯一的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#s0{
font-size: 50px;
color: red;
border: 10px solid black;
}
#d1{
font-size: 50px;
border: 20px solid green;
}
</style>
</head>
<body>
<br/><br/><br/><br/>
<a href="../img/我和狗狗.jpg" id="s0"/>拉拉</a><br/><br/>
<br/><br/><br/><br/><br/><br/>
<span id="s1">span1：我是黑色</span>
<span id="s2">span2：我是黑色</span>
<br/><br/>
<div id="s3">div1：我是黑色</div>
<div id="d1">div2：我是红色</div>
</body>
</html>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
