选择器<style>
为了让.html代码更加简洁，这里引入选择器style
本文总共介绍选择器的四种使用方式
一、选择器的四种形式
1.ID选择器
id表示身份，在页面元素中的id不允许重复，因此id选择器只能选择单个元素
2.类别选择器
选择拥有该类别的多个元素
3.标签选择器
根据标签名称，选择对应的所有标签
4.通用选择器
针对页面中的所以标签都生效
二、选择器的使用
这是一段没有使用选择器的html代码：
<!--这是一段未使用选择器的代码-->
<!DOCTYPE html>
<html style="background-color: gainsboro">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 0;">
<div id="banner">
<img src="img1/img2.png" style="width: 100%;" >
</div>
<div id="navigation" style="height: 80px;text-align: center;line-height: 80px;background-color: white;">
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">关于我们</a>
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">我们的故事</a>
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">产品和解决方案</a>
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">新闻和活动</a>
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">联系我们</a>
</div>
<div id="botton" style="height: 40px;text-align: center;line-height: 40px;color: grey;">
运用先进技术积极推动改变，让整个世界更美好。
</div>
</body>
</html>
使用选择器后：
<!--添加完选择器后的代码-->
<!DOCTYPE html>
<html style="background-color: gainsboro">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#navigation{
height: 80px;text-align: center;line-height: 80px;background-color: white;
}
#botton{
height: 40px;text-align: center;line-height: 40px;color: grey;
}
.nav{
text-decoration: none; color: black; margin: 0 15px;
}
#banner img{
width: 100%;
}
</style>
</head>
<body style="margin: 0;">
<div id="banner">
<img src="img1/img2.png">
</div>
<div id="navigation">
<a href="#" class="nav" >关于我们</a>
<a href="#" class="nav">我们的故事</a>
<a href="#" class="nav">产品和解决方案</a>
<a href="#" class="nav">新闻和活动</a>
<a href="#" class="nav">联系我们</a>
</div>
<div id="botton">
运用先进技术积极推动改变，让整个世界更美好。
</div>
</body>
</html>
1. ID选择器：
（先在head中添加<style><style\>标签）
以这段代码为例：<div id="navigation" style="height: 80px;text-align: center;line-height: 80px;background-color: white;">
(1)为标签添加id属性，如：<div id="navigation"><\div>
(2)将为标签属性style中的内容提取出来，移到head标签的style中，格式： #id{} 括号中存放css样式
<style>
#navigation{
height: 80px;text-align: center;line-height: 80px;background-color: white;
}
<\style>
一个简单的id选择器就完成了，为id为navigation的标签添加括号中的样式。
2.类别选择器
与id选择器类似
（1）为标签添加class属性<a href="#" class="nav" >关于我们</a>
（2）head中的格式：.class名{}
.nav{
text-decoration: none; color: black; margin: 0 15px;
}
为所有class类名为nav的标签添加此属性
3.标签选择器
这个是最简单的,标签名加大括号
直接上例子：（为所有<a>标签添加属性）
a{
text-decoration: none; color: black; margin: 0 15px;
}
这里还有个特殊的使用方法
例如这段代码：
<div id="banner">
<img src="img1/img2.png">
</div>
为id为banner的div标签中的所有img标签添加属性：
#banner img{
width: 100%;
}
嗯。。。# id 标签名{}
4.通用选择器
通用选择器这里先不介绍了