引用CSS的方式
1. 内联样式
<p style = "color:red;"><p/>
2. 内部样式表
<html>
<head>
<style>
p{
color:red;
}
<style/>
<head/>
<html/>
3. 外部样式表
<link rel="stylesheet" href="style.css">
基本语法结构
选择器{
属性:值
}
选择器
1. 基础选择器
p{}
.class{}
#id{}
2. 组合选择器
div p{} //后代选择器
div > p{} //子代选择器
h1 + p{} //相邻兄弟选择器
3. 伪类和伪元素
伪类
:hover 悬停
:active 激活，按下不放
:focus 获取焦点，完整点击
:link 未访问（链接
:checked 勾选表单
:nth-child(n) // 匹配父元素中的第n个子元素，n可设为2n或odd，还有:first-child :last-child
// 伪类可以链式拼接,后面也可以加一个伪元素，但伪元素不能链式拼接
button:hover:last-child::after {
color: white;
}
伪元素(配合content属性使用,创建虚拟元素)
::before // 在元素之前插入内容或样式
::after // 在元素之后插入内容或样式
h1::before {
content: "🌟 ";
color: gold;
}
属性
1. 文本样式
color font-family font-size line-height text-align
2. 布局样式
display: inline block inline-block flex gird
position: absolute(绝对定位，不占据原有空间，影响其他布局) fixed(固定定位，脱离文档流，固定在页面窗口指定位置) relative(相对定位，占据原空间，不影响其他布局) staitic(默认不定位) sticky（粘性定位，当浏览器窗口滑到阈值时，定住，其他时刻保持原有状态）
// 都是相对已定位的父元素定位，将元素放在任何位置(配合left right top bottom 水平垂直各选一个定位即可)，如果没有任何父元素有定位，就会以浏览器左上角为参照
float：left right 可以使元素环绕起来
3. 边框和背景
border border-radius background-color background-image background:url("xxx.jpg") box-shadow
4. 动画和过渡
过渡transition
动画animation
变换transform:平移translate(水平px，垂直px) 缩放scale(水平倍数，垂直倍数) 旋转控制rotate(xxxdeg旋转角度)
层叠规则
1. 优先级: 内联样式 > ID选择器 > 类选择器 > 元素选择器
2. 来源权重: 用户样式表 > 作者样式表 > 浏览器默认样式表
3. 继承:部分属性如color font会自动继承父元素
媒体查询和响应式
媒体查询（使用条件判断，符合条件的设为该样式）
// 屏幕宽度小于1000和大于500时，使用里面的样式
@media mediatype and (min-width:500px and max-width:1000){
.box{
width:25%
}
}
// mediatype = all(所有设备，默认) screen(屏幕) print(打印机) speech(语音设备，阅读器)
// 媒体查询为实现响应式提供了途径，flex和grid就是实现响应式的方式
// 图片视频可设置max-width:100% + height:auto保证不变形
// 盒子的wigth单位可为vw,heigth单位为vh，可参照当前浏览器窗口的大小保持相应的百分比，不依赖父元素
// 字体使用em(父容器大小的倍数)/rem(根元素html大小倍数，html默认font-size:16px)
盒子模型(每个HTML元素都被看作一个盒子)
content(width+height) + padding + border + margin
div{
margin:10px;(margin-top margin-botton margin-left margin-right)
padding:15px;
border:1px solid black;
box-sizing:content-box/border-box
}
// 指定盒子计算方式，content-box的实际宽度为width+padding+border且内容区=width（默认）, border-box的实际宽度为width且内容区=width-padding-border
// 两个盒子上下相邻，他们的外边距是实际较大的一个
// 父元素没有设置高度，子元素设置了浮动，会导致塌陷，一般父元素要加上overflow:hidden
// 给盒子设置了background-color，padding会上色，border不会
// 给盒子设置了鼠标悬停状态:hover，padding和border均受影响
CSS动画
transform+animation+trasition
过渡 transition
动画 animation:name名称 duration持续时间 timing-function速度曲线 delay延迟
// 其中timing-function可分为：liner匀速 ease缓动默认 ease-in换入 ease-out缓出 ease-in-out缓入缓出 steps(n)跳帧 cubic-bezier(n,n,n,n)自定义贝塞尔曲线cubic-bezier.com
变换 transform:平移translate(水平px，垂直px) 缩放scale(水平倍数，垂直倍数) 旋转控制rotate(xxxdeg旋转角度)
//animation定义在盒子属性下，其name就是@keyframes的name
.box{
animation:name 2s ease 1s;
}
//transform定义在@keyframes下
@keyframes name{
0%(from){
transform:scale(1,1);
background-color:white
}
//自动补帧
100%(to){
transform:scale(2,2);
background-color:red
}
}
flex布局
1. 指定容器
.container{
display: flex
}
2. 两个方向
主轴水平main axis
交叉轴垂直cross axis
左上角为起点
3.容器属性
(1) flex-direction 定义主轴方向
row 水平 默认
column 垂直
row-reverse 水平反向
column-reverse 垂直反向
(2) justify-content 主轴对齐方式
flex-start 前对齐 默认（若主轴为水平，左对齐）
flex-end 后对齐
center 居中
space-between 两端对齐，相邻项目的间隔相等
space-around 两边对齐，前后两侧间隔相等
space-evenly 前后间隔+相邻间隔均相等
(3)align-items 交叉轴对齐方式
flex-start 前对齐 默认
flex-end 后对齐
center 居中
baseline 首行文字对齐
stretch 拉伸
(4)flex--wrap 自动换行
wrap 换行
nowrap 不换行 默认
wrap-reverse 行序反向
(5)align-content 多行项目在交叉轴的对齐方式（行+列）
flex-start 前对齐
flex-end 后对齐
center 居中
space-between 两端对齐，相邻行的间隔相等
space-around 两边对齐，前后两侧间隔相等
stretch 拉伸
4. 项目属性
(1) order 定义项目的排序（主轴）
1 2 3 4 ....
(2)align-self 定义项目自身的交叉轴对齐方式，默认继承container
(3)flex:flex-grow flex-shrink flex-basis = flex:0 1 suto(默认)
flex-grow 按容器剩余空间的比例放大元素填充容器
felx-shrink 按被挤压空间的比例缩小元素
flex-basis 元素初始大小，根据主轴长度分配
CSS预处理器(增强版的CSS, Sass , Less)
LESS为例，基于CSS，加入了动态变量，嵌套，操作符等功能
@primary-color: #333;
body {
color: @primary-color;
font-family: Arial, sans-serif;
h1 {
font-size: 2em;
}
}
使用之前需要安装
pnpm add less -w
