HTML与CSS(浅学一下)-----5：
HTML与CSS(浅学一下)：
选择器：
标签名选择器：
格式：
在head标签里面使用style标签。
<!--
需求：
在所有div标签上修改文字字体颜色为蓝色，字体大小为30个像素，边框为1像素黄色实线。
修改span标签的字体颜色为黄色，字体大小为20个像素，边框为5像素蓝色虚线。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS标签名选择器</title>
<style type="text/css">
div{
color: blue;
border: 1px solid yellow;
font-size: 30px;
}
span{
color: yellow;
border: 5px dashed blue ;
font-size: 20px;
}
</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
ID选择器：
格式：
id选择器的格式
#id属性值{
属性：值；
}id选择器可以让我们通过id属性选择性的去使用样式。
<!--
需求 1：分别定义两个 div 标签，
第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色，
字体大小 30 个像素。边框为 1 像素黄色实线。
第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式 修改的字体颜色为红色，
字体大小 20 个像 素。边框为 5 像素蓝色点线。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 20px;
border: 5px blue dashed;
}
</style>
</head>
<body>
<div id="id001">div 标签 1</div>
<div id="id002">div 标签 2</div>
</body>
</html>
class选择器：
格式：
class 类型选择器的格式是：
.class 属性值{
属性：值;
}class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。
<!--
需求 1：修改 class 属性值为 class01 的 span 或 div 标签，
字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
需求 2：修改 class 属性值为 class02 的 div 标签，
字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
.class02{
color: grey;
font-size: 26px;
border: 1px red dashed;
}
</style>
</head>
<body>
<div class="class01">div标签 class01</div>
<div class="class02">div标签 class02</div>
<span class="class01">span标签 class01</span>
<span class="class02">span标签 class02</span>
</body>
</html>
组合选择器：
格式：
组合选择器的格式是：
选择器 1，选择器 2，选择器 n{
属性：值;
}组合选择器可以让多个选择器共用同一个 css 样式代码。
<!--
需求 1：修改 class="class01" 的 div 标签 和 id="id01" 所有的 span 标签，
字体颜色为蓝色，字体大小 20 个像素。 边框为 1 像素黄色实线。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style type="text/css">
.class01,#id01{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
</style>
</head>
<body>
<div class="class01">div 标签 class01</div> <br/>
<div>div 标签</div> <br/>
<span id="id01">span 标签 id01</span> <br/>
<span>span 标签</span> <br/>
</body>
</html>
