CSS选择器的常见用法
目录
1、CSS编写方式
2.CSS选择器
1.标签选择器
2.类选择器
3.id选择器
4.后代选择器
3.CSS属性
CSS叫做"层叠样式表",作用就是装饰网页.类似于我们平时所说的化妆。
字体、大小、间距、颜色、位置、边框、背景等等统称为样式，用来描述一个网页。
针对一个html的元素/标签，同时可以有很多组CSS样式，一个字体是一个样式，描述一个颜色也是一个样式。
1、CSS编写方式
CSS在进行编写的时候有三种引入方式：
1.内部样式，把CSS嵌入到HTML中，通过style标签
2.外部样式,把CSS写成一个单独的文件，通过HTML的link标签引入
创建一个CSS文件：
通过link标签引入
3.内联样式：把CSS属性写到元素的style属性内
（一般来说，内联样式的优先级比较高，也比较方便）
2.CSS选择器
举个例子：
div:就是一个选择器，针对选择的内容进行属性设置
{}内：就是一些具体的CSS属性，描述各种样式。
好了，我们接下来详细说明一下CSS的几种常用选择器：
1.标签选择器
使用标签名，把页面中所有同名标签的元素全选中。
此时，我们选中了所有标签为div的元素，设置样式：
<body><div>陈宇</div><div>顾魏</div><div>琑儿</div><style>div{font-size: 23px;color: red;}</style>
</body>效果：
但是我们发现，这种选择器是有缺点的，无法针对某一个元素进行个性化设置。因此，我们引入了其他的选择器---类选择器以及id选择器。
2.类选择器
通过创建一个类，实现很多属性。设置元素样式时，就可以直接使用这个类，达到想要的效果。
比如，我们创建了一个类one，在里面实现了设置颜色为绿色。元素陈宇调用这个类，将字体颜色设置成了绿色。
<!-- s调用class时,去掉. --><div class="one">陈宇</div><div>顾魏</div><div>琑儿</div><style>/* CSS类使用.开头 */.one{color: green;}div{color: red;font-size: 23px;}</style>
我们还可以创建多个类，实现不一样的样式。
<!-- s调用class时,去掉. --><div class="one">陈宇</div><div class="two">顾魏</div><div class="three">琑儿</div><style>/* CSS类使用.开头 */.one{color: green;}.two{color: red;}.three{color:yellow;}div{color: red;font-size: 23px;}效果：
在一个标签中，使用不同类：
<div><span class="one">王</span><span class="two">一博</span></div>效果：
3.id选择器
id是这个元素的身份标识，我们使用id选择器可以将对应的元素设置样式
<div id="xiaozhan">肖战</div>
<style>/* id选择器使用#开头 */#xiaozhan{color: pink;}
}
效果：
以上都为基础选择器
4.后代选择器
是多种基础选择器的综合，
<div class="one"><h3>王一博</h3><h2>琑儿</h2></div><div class="two"><h3>肖战</h3></div><style>.one h3 {color: green;}.two h3{color:red;}</style>效果：
此时，先找实现的类的所有元素，再从这个类的后代（子标签/...）里查找指定的标签。
举例：
此时，我们的第一步就是找所有实现one这个类的元素，然后再从这些元素中查找标签为h3的元素，设置样式
3.CSS属性
常见的属性我们都可以在下面推荐的这个网站中找到：
CSS 参考手册 (w3school.com.cn)
我们简单实现几个属性：
<div class="one">哈哈哈</div>
<div class="two">嘻嘻嘻</div>
<style>.one {/* 设置字体家族*/font-family: '宋体';/* 设置字体大小 */font-size: 28px;/* 设置字体粗细 (100-900)数字越大,字体越粗*/font-weight: 300;/* 设置文字样式 倾斜 */font-style:italic;}.two {color:red;/* 水平对齐 */text-align: center;/* 文本装饰 */text-decoration: line-through;}
</style>效果
- RGB
光学三原色：Red Green Blue.
每个颜色，一个字节，8个比特位（0-255）
三种参数比例不同，展现的颜色也不同。
例如：（255,0,0)代表红色。
除此之外，我们还可以通过十六进制来表示rgb:
一个十六进制的数字站4个比特位，一个字节就是两个十六进制的数字。所以位面可以用6个十六进制的数字来表示rgb。（每两个十六进制是一个分量）
转换成二进制就是1111 1111，0000 0000， 0000 0000，转换成十进制就是255 ，0，0.
注：如果每个分类的十六进制一样，就可以简写。比如：#AABBCC==>#ABC
- 背景设置
1.设置背景颜色
background-color:
<div class="three">哭唧唧</div><style>.three{font-size: 50px;text-align: center;width: 400px;height: 600px;color: white;background-color:green;}</style>效果：
2.设置背景图片：
background-image：
background-image: url(cy.png);效果：
效果与我们想象的不同，这是由于，在默认情况下，图片是平铺的。就像我们的地砖一样。所以，为了美观，可以使用background-repeat禁止平铺。
只需添加一行代码即可：background-repeat: no-repeat;
效果：
3.设置背景大小：
background-size
如果发现图片不够背景大小，则使用background-size的cover，覆盖整个背景。
关于CSS的属性还有非常多，可以看上面给的链接，很全！！！
总结
CSS作为“层叠样式表”，可以通过实现多种样式，装饰一个网页，让网页变得更好看！！！