css第一天--基础选择器
css是什么 ？
网页的美容师，CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。 让我们的网页更加丰富多彩
说的形象一点点就是 hmtl就像是毛坯，css是搞装修，让我们的毛坯房更漂亮，js就是装推拉门，智能窗帘，扫地机器人等，这样html、css、js 项目搭配，使我们的房子更漂亮。
专业叫法：
层叠样式表---笔试回答时
作用：
美化网页，布局网页
css的选择器的分类：
基础选择器 和 复合选择器
css选择器的作用：
找到对应的html标签
基础选择器：
是由单个选择器组成的，基础选择器包括，标签选择器、类选择器、id选择器 和 通配符 等
1.标签选择器：是指用 Html 标签名作为选择器， 比如 <p>我是p标签</p>
作用和使用场景：找到标签名一样的元素
标签选择器的写法：
标签名 {
属性1：属性值1；
属性2：属性值2；
...
}
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-oneday</title>
<style>
/* p : 标签名 */
p {
/* color：属性名 */
color: pink;
}
h5 {
color: blue;
}
</style>
</head>
<body>
<p>我是p标签</p>
<h5>我是h1，把我设置成蓝色吧</h5>
</body>
</html>
那如果页面很多一样的标签，可是我只想单独设置一个或者前几个标签呢？怎么办，这个时候标签选择器已经瞒住不了我们的需求了
2. 类选择器----开发最常用，很重要很重要
作用：在页面中有很多一样的标签，如果想要差异化，单独选择一个或某几个标签，可以使用 类选择器
写法如下：
1. 给标签加上 class属性 即： class="one" ，谁要用就给谁加上 class="one"
2. 通过 .类名 的方式选择 即： . one {}
详细代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
.one {
color: red;
}
</style>
</head>
<body>
<ul>
<li class="one">张一鸣</li>
<li>深圳非</li>
<li>深圳马</li>
<li>杭州马</li>
</ul>
</body>
</html>
案例：页面三个div，设置第一个第三个红色，第二个蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三个div</title>
<style>
.red {
width: 100px;
height: 100px;
background-color: red;
}
.green {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="red">红色</div>
<div class="green">绿色</div>
<div class="red">红色</div>
</body>
</html>
多类名：一个标签有多的类名
写法： class="red box"
那你可能会问，为什么要使用多类名？就好比刚才的div 每个div都是100*100px，但是我们在2个类名都写了，如果修改也多要修改，是不是很麻烦呢
作用：把相同的样式写的一个类里，谁要就给谁加上类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多类名</title>
<style>
/* 合并多余的代码，方便修改 */
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.green {
background-color: blue;
}
</style>
</head>
<body>
<div class="red box">红色</div>
<div class="green box">绿色</div>
<div class="red box">红色</div>
</body>
</html>
3. id 选择器
写法：
1. 在 标签中 id =“pink”
2. #pink{}
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
/* 写法和类选择器 基本一致，只是样式是#,结构是id="pink" */
#pink {
color: red;
}
</style>
</head>
<body>
<div id="pink">苗苗</div>
</body>
</html>
那么你可能会问，既然和类选择器基本一致，为什么还要有id选择器呢？ 嗯嗯，问的好，是一个爱思考的学生
那是因为 页面中id 是唯一的，不允许重复使用，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
/* 写法和类选择器 基本一致，只是样式是#,结构是id="pink" */
#pink {
color: red;
}
</style>
</head>
<body>
<div id="pink">苗苗</div>
<!-- 这句代码就不对，因为全世界只有一个苗苗，独一无二，所以你不能再使用了 -->
<!-- <div id="pink">苗苗</div> -->
<div>苗苗</div>
</body>
</html>
类选择器和id选择器的区别：
1.类 可重复 ,id 选择器不行，就像人们的id
2. 实际开发中还是用 类选择器比较多
通配符选择器：
选择页面中所有的元素（标签）
把页面所有标签修改样式，html、body 也修改了
使用： * {} 定义
即：
* {
color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>分享快乐收获双倍快乐</div>
<span>价格：1234</span>
<ul>
<li>我是li</li>
</ul>
<a href="">我是a标签</a>
</body>
</html>
现在我们已经学习了这么多选择器，总结一下，类选择器用的最多，最重要
