CSS样式 选择器
一、CSS概述
1.概念
CSS层叠样式表 cascading Style Sheets，它是一种样式表语言，用来渲染html或者xml文档的样式文件
2.规则和语法
(1)语法
(2)规则
选择器是负责找到元素，可以使用多种选择器来完成，但没选择该元素，css不会报错，只会不渲染样式
样式声明可以是多个，没有声明个数限制，每一个声明后都加一个分号
css的空格，css书写中有些空格是没用的，为了好看方便编写，有些空格是一定要写的，都在属性值上出现的空格是必要的，选择器中的后代空格必须要
css顺序读取，从下向上依次渲染，遇到重复的样式，会覆盖
3.css样式的使用方法
(1)内联样式
把css样式写在标签中的style属性中，多样式用分号隔开
<div style="color:red;background-colcor:blue;">文字</div>\
优点:
针对性较强，优先级高，当前标签更直接
缺点:
影响阅读，显得代码较乱
不利于修改，复用性差
使用js修改的元素css样式都是内联样式
(2)内部样式
内部样式写在head标签中的style标签里
<head>
<meta charset="UTF-8" />
<title>管理员登录</title>
<style>内部样式写在这里！！
选择器{样式声明;}
</style>
</head>
优点：
没有多余css文件向服务器发送请求
只会影响当前html文件的大小
缺点:
只能渲染当前页面元素，复用性也不强(其他html文件无法使用)
一般用于学习和测试，为了减少请求，样式较为单一的使用在某个页面时可以使用内部
优先级低于内联样式
(3)外部样式
单独创建一个css文件后缀名为xxx.css，在head标签中使用link标签引用到当前页面
<head>
<meta charset="UTF-8" />
<title>管理员登录</title>
<link rel="stylesheet" href="css文件路径">
</head>
- rel属性：引入文件和当前html文件的关系，css样式就是stylesheet
- href属性：可以是绝对路径也可以是路径，css文件具体在哪
- link标签可以写多个
优缺点:
复用性高 便于维护 向服务器增加了请求次数\
优先级低于内联样式
二、选择器
选择器的作用就是在html中找到元素并且准备渲染他，利用的是元素的名字
1.基础选择器
(1)通用选择器(通配符)
所有元素都会被它选中 *
优缺点:
所有元素都应用同样的样式，书写效率高了一些，但性能低了，因为所有元素都要渲染一遍
<style>
* {color: red;}
</style>
(2)元素选择器(标签选择器)
通过html中的标签名找到元素，并且渲染样式
优缺点：
好记，好写，直观
所有该标签名的标签全部改变，无法精准定位元素，给与相同标签名不同样式做不到
<style>
div {color: red;}
span {color: blue;}
</style>
标签选择器的权重值：1
(3)id选择器
通过元素的id属性，当选择器，使用#id名作为选择器，该选择器具有唯一性，可以精准定位到一个元素
优缺点：
很精准的定位到一个元素
权重值高，话语权高，不容易被其他选择器覆盖
复用性差
一般情况下，不适用id选择器渲染元素样式
<style>
#l25 {color: green;}
</style>
id选择器的权重值：1
(4)class类选择器
具备相同的class属性值的元素，可以通过类属性给与相同样式，这样复用性较强
哪个元素需要该属性就可以使用相同的类属性值，方便
如果与其他类有不同样式时可以再加一个类进行新样式的渲染
同一个元素可以增加多个类属性值，分别分类渲染
可以提前写一个类名，需要的元素拿来可以使用
注意:点不要忘记写，点和类名之间不能有空格
类选择器权重值10
(5)群组选择器
多个"选择器"，使用共同样式，可以将选择器用逗号相连，使用相同样式
从优化的角度，群组比较好
2.关系型选择器
(1)后代选择器
在一个祖先中，选中其内部的后代元素。可以由多种选择器一起搭配使用
<style>
.item {
width: 238px;
}
/* 后代选择器 */
.item img {
width: 238px;
/* 可以写100% */
}
.item p {
font-size: 14px;
color: gray;
}
/* 发现
1.块级元素div没写高，但有高，内部元素协助撑起了父元素
2.img标签加载时是自己本身大小
3.块级元素宽度是父元素的100%
*/
</style>
<!-- 后代 -->
<div class="item">
<div>
<img src="./img/123.webp" alt="">
</div>
<div>
<h5>万疆 舞蹈北大校园版</h5>
<p>
<span>鹅蛋蛋后妈</span>
<span>7-5</span>
</p>
</div>
</div>
(2)子代选择器
子代选择器和后代选择器基本相同，但是子代更加精准,效率更高
子代选择器，父级>子级{} 对于选择器是什么没有要求，能选到即可
<style>
/* 子代选择器 */
.item>.bg {
background-color: greenyellow;
}
.item>div>div {
color: red;
}
</style>
(3)兄弟选择器
兄弟元素只包含后面兄弟，不含前面的兄弟 性能比较低，因为越后面的元素渲染次数越多
同级选择器~同级兄弟的选择器
/* 兄弟 */
ol>li~li{
color: aqua;
}
(4)相邻兄弟选择器
相邻兄弟选择器与兄弟选择器用法相同，都是后面的兄弟可以被选中。
相邻兄弟必须是紧紧挨着该元素的兄弟，中间不能有其它元素相隔
兄元素+相邻弟元素{}
/* 相邻兄弟 */
ol>li+li{
color: aqua;
}
3.伪类选择器
css的伪类是添加到选择器中的关键字，指的是被选中元素的特殊状态
:active激活的
指的是鼠标“点按住”当前元素范围，元素可以触发状态，改变的样式
.d1:active {color: red;}
:hover悬停的
指的是鼠标“移入到”当前元素范围，元素可以触发状态，改变的样式
hover的优先级高于active
.d2:hover{background-color: blue;}
a标签有"自带"的伪类
a:link 超链接未激活前的
a:visited 超链接激活以后
这就是为什么a标签不能看到继承颜色的样式，因为伪类是a自身的优先级比继承要高
伪类是有顺序的(特指a标签的伪类顺序)
:link>:visited>:hover>:active
4.伪元素选择器
::before在元素前面
::after在元素后面
都不是实际的元素
content: ""; 属性必须写，但值没有需要可以不写
<style>
.d1::before{
content: "￥";
color: red;
}
.d1 {
color: blue;
}
</style>
</head>
<body>
<div class="d1">8000.99</div>
</body>
例子
<style>
.d2::before {
content: "欢迎你,";
}
.d2::after {
content: "光临！";
}
</style>
</head>
<body>
<div class="d2">甜甜野</div>
</body>
5.CSS优先级
| 读取顺序 |
|---|
| 相同选择器，渲染相同属性，但值不同，会按照读取顺序，后声明的样式优先，但不同属性不会受到影响 |
<style>
.d1 {
color: red;
background-color: yellow;
}
.d1 {
color: blue;
}
</style>
</head>
<body>
<div class="d1">甜甜野</div>
</body>
| 指定大于继承 |
|---|
| 在css样式中有一些属性是具有继承性的。如:字体颜色、字体大小、字体样式等 |
| 如果指定了元素样式，那么继承的元素样式会覆盖 |
<style>
.d2 {
color: red;
}
.d2 span {
color: green;
}
</style>
</head>
<body>
<div class="d2">
<p>bking</p>
<span>多多</span>
<a href="#">到贤</a>
</div>
</body>
| 权重值 |
|---|
| id权重100>class权重10>标签权重1 |
| 权重值累加之后再比较 |
例子
<style>
.d2>.viko {
color: fuchsia;
}
.d2 a {
color: black;
}
</style>
</head>
<body>
<div class="d2">
<a href="#" class="viko">到贤</a>
</div>
</body>
| 直接获取最高权限 |
|---|
| !important 最高权限 |
.d2 a {
color: black
!important;
}
</style>
</head>
<body>
<div class="d1">甜甜野</div>
<div class="d2">
<p>bking</p>
<span>多多</span>
<a href="#" class="viko">到贤</a>
</div>
</body>
| 内联样式(1000)大于内部和外部样式 |
|---|
| 有内联样式，就不会出现权重值了 |
三、尺寸和边框
1.宽度高度
元素的尺寸就是其宽度和高度
width：宽度
height：高度
取值：值数字+单位(px、pt、%、rem、em)
px像素：绝对单位
%：相对于父级元素的尺寸
（1）按元素属性分类
| 块级元素 |
|---|
| 宽度高度设置任何的取值均可 |
| 不设置宽度也有默认宽度，是父元素宽度的100% |
| 不设置高度，依靠内容（文字、元素）撑开自身高度 |
<style>
.d2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="d2">Lorem ipsum dolor sit.</div>
<div class="d3"></div>
| 内联元素 |
|---|
| 宽度高度设置都不会有效果，靠内容文字撑开 |
| 内联中的行内块 |
|---|
| 内联中的特殊元素行内块，一般都有自己的默认宽高 |
| 例如：img默认宽高就是自己图片的本身大小（一般设置图片的宽度即可） |
| button和input都有自己的默认宽高，一般需要重改 |
| 行内块的宽度高度均可以设置 |
（2）最大和最小宽度
max-width 最大宽度
max-height 最大高度
min-width 最小宽度
min-height 最小高度
优先级都高于普通设置的宽度高度
附加知识点 1.单位
单位:
px 像素
in 英寸 1in=2.54cm
pt 磅值 1pt=1/72in 多用于设置字体大小
cm厘米
mm毫米
项目中，为了页面可以在pc pad phone 都正常显示
我们一般会使用相对单位
em 以父元素的数值当做基本单位
rem 以html的数值当做基本单位
2.色值
色值应用非常广泛，如：背景色，字体色、边框色、阴影色、渐变色...
（1）英文颜色
在编辑器中提供了一些，如：red、blue、green...
*元素的默认颜色transparent 透明色 *
（2）十六进制色值
#rr gg bb
范围：0-9 a-f
取值：rr红色范围，gg绿色范围，bb蓝色范围
如：#15b452 纯红#ff0000
缩写：三位 #f00 前提每两个色值范围必须都一样
大小写均可
3.溢出处理
当内容较大，元素区域较小的时候，就会发生溢出效果 默认是纵向溢出 overflow
取值:visible 默认值 溢出部分可见的
hidden 溢出部分隐藏
scroll 不管是否溢出，x和y轴方向都添加滚动条
auto 溢出加滚动条 不溢出没有
overflow-x 设置水平轴滚动条
overflow-y 设置垂直轴滚动条
如何设置成横向溢出
内部容器，设置宽度，大于外部容器的宽度
