CSS
引入
CSS 就是用来定义页面各种元素的样式的规则
在页面中使用CSS
一般有三种方式来使用CSS
外链：就是直接写在单独的文件里面，类似Tailwind
嵌入：就是和HTML写在一块，一般vue就是这样的
内联：直接写在当前标签里面，优先级最高 不推荐
例子
CSS是如何工作的
选择器
![image.png](p0-xtjj-private.juejin.cn/tos-cn-i-73…
通配选择器
表示作用于所有样式
标识就是*
id 选择器
作用于特定的id标签
标识是#<id>
需要注意，id是全局唯一的
类选择器
作用于特定class标签
标识是.<class>
class是允许全局有重复的
属性选择器
作用于某个元素的属性值
标识是[<attribute>]
例如input其中一个属性是disabled，表示输入框禁用，此时属性选择器就会对拥有这个属性的元素生效
还可以对特定属性生效
例如^="#"用于指定以#开头的属性，此时选择器就会作用于所有以#开头的元素
$=".jpg"则指定以.jpg结尾的元素
伪类选择器
状态伪类
检测元素处于某一个状态
标识为a:
例如链接可以分为已访问的链接和未访问的链接
这里定义一个链接
我们可以指定在默认的情况下
未被访问的时候为黑色
<style>
a:link {
color: black;
}
访问过后为灰色
a:visited {
color: gray;
}
鼠标移动上去为橙色
a:hover {
color: orange;
}
鼠标点击之后为红色
a:active {
color: red;
}
还有搜索框输入时外框为加粗橙色
:focus {
outline: 2px solid orange;
}
结构伪类
根据DOM节点在DOM树中的位置来决定是否选择
这里定义一个列表的样式
li {
list-style-position: inside;
border-bottom: 1px solid;
padding: 0.5em
}
然后可以直接定义这个列表的第一个子节点和列表的最后一个子节点
li:first-child {
color: coral
}
li:last-child {
border-bottom: none;
}
于是列表就会呈现这个样子
组合选择器
我们将input和span都设置为error类
然后设置error标签为红色，所以输入框和字符都变成红色的了
如果使用input + error
input.error {
border-color: red;
}
就表示指定的元素要同时满足input和error两个标签才能生效
以上的组合方式为直接组合
除此之外还有其他的组合方式
选择器组
使用多个选择器对应相同的样式
颜色-RGB
RGB采用 16 进制的表示方式，红绿蓝每个颜色的强度都用一个两位的 16 进制数来表示，所以每一个值的表示范围就是
0 ~ ff，十进制的上限是 255，这个和 IPv4 的表示是一样的
但是 RGB 这种三色累加的组合表示法不符合直觉，于是就有了 HSL 表示法
还可以调节透明度 alpha
字体
调试
F12
