CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

1.选择器

• id选择器
• 类选择器
• 标签选择器
• 后代选择器

后代选择器选择某元素的所有后代元素，不分层级，也就是说子级的子级等也会被选择。
子选择器缩小选择范围，只选择子级元素，对子级之后的层级不会被选择。

• 子选择器

• 兄弟选择器

• 相邻兄弟选择器

• 属性选择器

• 伪类选择器

  • 动态伪类选择器

  注意

  • :hover 必须放在 :link 和 :visited后面才能完全生效；
  • :active 必须放在 :hover 后面才能完全生效；
  • 编写顺序是 :link、:visited、:hover、:active

  属性	描述
  :link	选择地址没有被访问过的超链接元素
  :visited	选择地址被访问过的超链接元素
  :hover	选择鼠标悬停在上面的元素
  :active	选择鼠标在上面并且按键按下不松手的元素
  :focus	选择获取焦点的元素

  • 目标伪类选择器

  属性	描述
  :target	选择当前锚点指向的元素

  • 语言伪类选择器

  属性	描述
  :lang()	根据语言选择元素（lang 属性的值）

  • UI元素伪类选择器

  属性	描述
  :enabled	选择可以使用的表单控件（没有设置disabled 属性）
  :disabled	选择不可以使用的表单控件（设置了disabled属性）
  :checked	选择到被选中的单选按钮、复选框、下拉选项（option）

  • 结构伪类选择器

  属性	描述
  :root	选择到根元素
  :empty	选择到既不能有文本内容也没有后代元素的元素
  :first-child	所有兄弟元素中的第一个
  :last-child	所有兄弟元素中的最后一个
  :nth-child(n)	所有兄弟元素中的第n个，n是个数字
  :nth-last-child(n)	所有兄弟元素中的倒数第n个，n是个数字
  :only-child	没有兄弟元素的元素
  :first-of-type	所有兄弟元素中同类型的第一个
  :last-of-type	所有兄弟元素中同类型的最后一个
  :nth-of-type(n)	所有兄弟元素中同类型的第n个
  :nth-last-of-type(n)	所有兄弟元素中同类型的倒数第n个，n是数字 属性）
  :only-of-type	没有同类型兄弟元素

  • 否定伪类选择器

  属性	描述
  :not(选择器)	排除满足小括号中选择器的元素

  • 伪元素选择器

  属性	描述
  ::first-letter	选择元素中第一字母
  ::first-line	选择元素中第一行
  ::after	给元素动态创建最后一个子元素
  ::before	给元素动态创建第一个子元素
  ::placeholder	用于设置输入框或文本域中placeholder属性设置的文字的样式
  ::selection	用于设置被鼠标选中的文字的样式

  • 选择器的优先级

  ID选择器 > 类名选择器、伪类选择器、属性选择器 > 标签名选择器、伪元素选择器 > 全局选择器

• 通配符选择器

#box {}  /* id选择器 */
.box {}  /* 类选择器 */
p,h1 {}  /* 标签选择器 */
div span {}   /* 后代选择器 */
div>span {} /* 子选择器 */
ul~h1 {}  /* 兄弟选择器(所有的兄弟) */
ul+h1 {}  /* 相邻兄弟选择器 */
li[name='lis'] {} /* 属性选择器 */
h1:hover {}  /* 伪类选择器 */ 

2.排版

单位

属性	描述
rem	相对于根元素的字体大小(html元素)的font-size属性值
em	相对于元素的字体大小
ex	相对于当前字体的 x-height(极少使用)
ch	相对于 "0"（零）的宽度
vw	相对于视口*宽度的 1%
vh	相对于视口*高度的 1%
vmin	相对于视口*较小尺寸的 1％
vmax	相对于视口*较大尺寸的 1％
%	相对于父元素

视口（Viewport）= 浏览器窗口的尺寸

/* 移动端rem布局 */
html{
  /**
      100vw = 375px
      1px = 0.2666667vw
      100px = 26.66667vw

      1rem = 100px
  */
  font-size: 26.66667vw;
}

文本

属性	描述	值
color	文本颜色	颜色值
background-color	文本背景色	颜色值
text-align	文本对齐	left center right
text-decoration	文本修饰线	overline 上划线 underline 下划线 line-through 中划线 none 去掉修饰符
text-transform	更改元素文本大小写	uppercase将所有字母转换为大写 lowercase将所有字母转换为小写 capitalize 首字母转换为大写
text-indent	文字缩进	100px 可以是具体的px 2em(首行缩进2个汉字) 1em为一个汉字的大小
letter-spacing	汉字间距	px
word-spacing	英文间距	px
text-shadow	文本阴影	/水平阴影 垂直阴影 模糊度 颜色/ text-shadow: 1px 1px 10px red;
word-break	文本换行规则	normal break-all keep-all break-word

文本效果

/*文本溢出省略号显示*/
/* 一行 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/*********************/
/* 多行 */
overflow: hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp: 2; 

/* 书写模式 (水平horizontal-tb/垂直vertical-rl)*/
writing-mode: vertical-rl; 

word-break

属性	描述
normal	默认的换行规则
break-all	允许在单词内任意位置截断换行
keep-all	强制不截断单词换行所有单词都保持完整

字体

属性	描述	值
font-family	设置字体	宋体
font-style	字体类型	normal正常显示 italic斜体显示 oblique倾斜显示
font-size	字体大小	px
font-weight	字体粗细	blod...
font-variant	小写字母的显示形式	normal 常规显示 small-caps 将小写字母替换为缩小过的大写字母
font-display	字体显示时间轴	auto block swap fallback optional

简写

font: font-style font-weight font-size/line-height font-family

注意

1. 必须按照上面的格式进行书写，不能变更顺序
2. 不需要的属性可以不写，但必须要有font-size和font-family这两个属性

@font-face规则

格式	扩展名	MIME Type	说明
Web Open Font Format	.woff	font/woff	Web字体加载首选
Web Open Font Format2	.woff2	font/woff2	Web字体加载首选
TrueType	.ttf	font/ttf	没有在Web中使用的理由，请转换成woff2字体
OpenType	.otf	font/otf	缺乏包含的中文字体
Embedded OpenType	.eot	application.vnd.ms-fontobject	只有需要兼容IE6～IE8时候用掉

@font-face {
    font-family: 'MyFont';
    src: url('./fonts/myfont.woff2') format('woff2'),
         url('./fonts/myfont.woff') format('woff'),
         url('./fonts/myfont.ttf') format('truetype'),
         url('./fonts/myfont.svg#MyFont') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

列表

属性	描述	值
list-style-type	列表样式	如下表
list-style-image	列表的项目符号设置成图像	url()
list-style-position	控制列表项目符号的位置	inside列表项目标记放置在文本以内 outside(默认) inherit从父元素继承 list-style-position 属性的值

• list-style-type

属性	描述	属性	描述
disc	实心圆	none	不使用项目符号
circle	空心圆	cjk-ideographic	简单的表意数字
square	实心方块	georgian	传统的乔治亚编号
lower-roman	小写罗马数字	upper-roman	大写罗马数字

简写

list-style:列表项目符号 列表项目符号位置 列表项目图像

表格

<table>
  <thead>
      <tr class="head">
          <th>城市</th>
          <th>建筑</th>
          <th>景点热榜</th>
      </tr>
  </thead>
  <tbody>
      <tr class="tr-item">
          <!-- rowspan 合并行 -->
          <td rowspan="2">北京</td>
          <!-- 合并列 -->
          <td colspan="2">故宫</td>
      </tr>
      <tr class="tr-item">
          <td>长城</td>
          <td>长城</td>
      </tr>
      <tr class="tr-item">
          <td>上海</td>
          <td>外滩</td>
          <td>田子坊</td>
      </tr>
  </tbody>
</table>

table{
    border-collapse:collapse;  /*将表格边框折叠为单一边框*/
}
.head th{
    width: 100px;
    height: 26px;
    font-size: 14px;
}
.tr-item td{
    text-align: center;
    height: 26px;
    font-size: 14px;
}
table, th, td {
    /*水平分割线*/
    /* border-bottom: 1px solid #ddd;   */
    border: 1px solid #ddd;
}
table th{
    background-color: #3f3f3f;
    color: white;
}
table tr:hover{
    background: #f5f5f5;;
}
table .tr-item:nth-child(odd){
    background-color: #f2f2f2;
}

3.布局

盒模型

组成: content(内容) margin(外边距) padding(内边距) border(边框)

宽度/高度

属性用于设置元素的高度和宽度

属性	描述
auto	自动
max-width	最大宽度
min-width	最小宽度
fit-content	元素会根据内容进行宽度调整
min-content	根据最小内容宽度设定
max-content	根据最大内容宽度设定
inherit	继承父元素的宽度
initial	使用属性的默认值
unset	将属性重置为继承或初始值

height

height属性同width

外边距

margin

属性用于在任何定义的边框之外，为元素周围创建空间

• 一个值 上下左右
• 两个值 上下 左右
• 三个值 上 左右 下
• 四个值 上 右 下 左

警告

margin垂直塌陷
上边盒子使用margin-bottom 下边盒子使用margin-top，哪边的值大，取哪边

内边距

padding

属性用于在任何定义的边界内的元素内容周围生成空间 属性使用同margin一样

box-sizing: border-box 元素保持其宽度，如果增加内边距，则可用的内容空间会减少。

display

属性规定是否/如何显示元素。

• block 块级元素
• inline 行内元素
• inline-block 行内块元素
• none 元素隐藏

隐藏元素

• display (none block) 指定应如何显示元素。
• visibility(hidden visible) 指定元素是否应该可见

区别

display隐藏的元素不占位置 visibility隐藏的元素占位置

定位

position 属性规定应用于元素的定位方法的类型

属性	作用	参照物
static	静态定位	默认就是静态定位
relative	相对定位	参照元素原来的位置
absolute	绝对定位	选取其最近的父级relative定位元素， 当没有的时候，将以body坐标原点，进行定位
fixed	固定定位	始终以body为参照物
sticky	粘性定位	参照物为浏览器视口

利用sticky实现粘性标题效果

Overflow 溢出

属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条

属性	描述
visible	默认。溢出没有被剪裁
hidden	溢出被剪裁，其余内容将不可见
scroll	溢出被剪裁，同时添加滚动条以查看其余内容
auto	但仅在必要时添加滚动条

注意

overflow 属性仅适用于具有指定高度的块元素。

• overflow-x 横轴
• overflow-y 纵轴

浮动

• float

属性用于定位和格式化内容,浮动元素会脱离文档的普通流
浮动最开始是来实现文字环绕图片

属性	描述
left	元素浮动到其容器的左侧
right	元素浮动到其容器的右侧
none	元素不会浮动(默认)
inherit	元素继承其父级的 float 值

• 清除浮动

  • clear

  给浮动下放方的元素添加

  属性	描述
  none	允许两侧都有浮动元素(默认)
  left	左侧不允许浮动元素
  right	右侧不允许浮动元素
  none	左侧或右侧均不允许浮动元素
  inherit	元素继承其父级的 clear 值

  • overflow:auto

  如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外
  解决 向父元素 添加overflow: auto

  • 伪元素清除

    /*清除浮动几种方法*/
    .clearfix:after{
        content: "";
        display: block;
        height: 0;
        line-height: 0;
        clear:both;
        visibility: hidden;
    }
  
    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
  

表单

标签	描述
input	输入框
textarea	文本域
select	菜单
button	按钮

/* 消除浏览器默认行为（获取焦点时蓝色边框） */
outline: none;
/* 禁止对textarea调整大小 */
resize: none; 
/* button格式化 */
/* 去掉边框 */
border: none;
/* 去掉文本修饰线 */ 
text-decoration: none;

4.视觉

颜色

类型	值
颜色名	red
RGB	rgb(108,146,140)
RGBA	rgba(108,146,140,1)
HEX	#6c928c
HSL	hsl(171,15%,50%)
ARGB	#ff6c928c

渐变

显示两种或多种指定颜色之间的平滑过渡

• 类型
  • 线性渐变 向下/向上/向左/向右/对角线
  • 径向渐变 由其中心定义

1. 线性渐变默认从上到下

/* 表示从右边渐变到左边 */
background-image: linear-gradient(to left, blue,green,yellow,pink)
/* 对角线 表示从右上渐变到左下 */
background-image: linear-gradient(to bottom left, blue,green,yellow,pink)
/* 角度 0deg 等于向上（to top）90deg 等于向右（to right）180deg 等于向下（to bottom） */
background-image: linear-gradient(90deg, red, yellow)
/* 透明渐变 */
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))
/* 重复渐变 */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%)

2. 径向渐变

/* 语法 */
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
background-image: radial-gradient(red, yellow, green);
/* 不同间距的色标 */
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
/* 形状  shape参数。circle 或 ellipse。默认值为ellipse（椭圆） */ 
background-image: radial-gradient(circle, red, yellow, green);
/**
size 渐变的大小
closest-side  farthest-side  closest-corner  farthest-corner  
*/
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
/* 重复渐变 */
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

背景

属性	描述	值
background-color	背景色	颜色值
background-image	背景图像	url()
background-repeat	背景重复	repeat默认平铺 no-repeat不平铺 repeat-xx轴方向重复 repeat-yy轴方向重复
background-position	位置	left bottom关键字取值 0% 60%百分比取值 100px 80px像素值取值
background-size	背景尺寸	contain 缩小图片来适应尺寸 cover扩展图片来填满元素 100px 100px指定大小 50% 100%百分比
background-attachment	背景附着	scroll随着内容会滚动 fixed 固定在当前位置上

简写

div { background: color url repeat attachment position / size }

阴影

• 文字阴影

/* 
  horizontal-offset：水平偏移量。正值表示向右偏移，负值表示向左偏移
  vertical-offset：垂直偏移量。正值表示向下偏移，负值表示向上偏移
  blur-radius（可选）：模糊半径。值越大，阴影越模糊。默认为 0（即不模糊）
  color（可选）：阴影的颜色。如果未指定，默认使用元素的文本颜色
*/
text-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [color];
/* 可添加多个阴影 */
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

• 元素阴影

/*
  inset (可选)：将外部阴影(默认) (outset) 改为内部阴影。
  horizontal-offset:水平偏移量。正值表示向右偏移，负值表示向左偏移
  vertical-offset:垂直偏移量。正值表示向下偏移，负值表示向上偏移
  blur-radius（可选）:模糊半径。值越大，阴影越模糊。默认为 0（即不模糊）
  spread-radius（可选）:扩展半径。正值使阴影增大，负值使阴影缩小
  color (可选) : 阴影的颜色。如果未指定，默认使用元素的文本颜色
*/
box-shadow: [inset] [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color];

边框

属性	描述	值
border-style	边框样式(可单独设置各边框)	如下图
border-width	边框宽度	px
border-radius	圆角边框	百分比 或 px
border-image	设置图像用作围绕元素的边框	url()

简写

div { border: border-width border-style（必需）border-color }

透明度

属性	描述	值
opacity	元素的透明度(子元素继承)	0 ~ 1
RGBA	背景色透明度(子元素不继承)	rgba(red, green, blue, alpha)

轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

属性	描述	值
outline-style	轮廓样式	同border-style属性一样
outline-color	轮廓颜色	颜色值
outline-width	轮廓宽度	px
outline-offset	轮廓偏移	px

属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

简写

outline:outline-width outline-style（必需）outline-color

object-fit

值	描述
fill	调整替换后的内容大小，以填充元素的内容框(默认值)
contain	缩放替换后的内容以保持其纵横比
cover	在填充元素的整个内容框时保持其长宽比
none	不对替换的内容调整大小
scale-down	调整内容大小就像没有指定内容或包含内容一样

filter与backdrop-filter

• filter：应用于元素本身。
• backdrop-filter：应用于元素背后的内容，通常用于背景模糊、磨砂玻璃效果等

值	描述
blur()	用于模糊效果，单位为px
brightness()	调整亮度，值为百分比或小数
contrast()	调整对比度，值为百分比或小数
grayscale()	将图像转为灰度，值为 0 到 1
invert()	反色效果，值为 0 到 1
opacity()	调整透明度，与 opacity 属性相似，值为 0 到 1
saturate()	调整饱和度，值为百分比或小数
sepia()	添加棕褐色（复古风格）效果，值为 0 到 1
drop-shadow()	添加阴影效果，语法类似于 box-shadow

5.交互

2D、3D转换

transform

• 属性

属性	描述	参数
translate()	当前位置移动元素	translateX() 元素从 X 轴移动 translateY() 元素从 Y 轴移动 translateZ() 元素从 Z 轴移动
rotate()	旋转元素	rotateX() 元素绕其 X 轴旋转 rotateY() 元素绕其 Y 轴旋转 rotateZ()元素绕其 Z 轴旋转
scale()	增加或减少元素的大小	scaleX()增加或减少元素的宽度 scaleY()增加或减少元素的高度
skew()	元素沿 X 和 Y 轴倾斜给定角度	skewX()使元素沿 X 轴倾斜给定角度 skewY()使元素沿 Y 轴倾斜给定角度
matrix()	把所有 2D 变换方法组合为一个	matrix() 方法可接受六个参数，其中包括数学函数， 这些参数使您可以旋转、缩放、移动（平移）和倾斜元素

过渡

允许您在给定的时间内平滑地改变属性值

属性	描述
transition	transition: property duration timing-function delay
transition-delay	规定过渡效果的延迟（以秒计)
transition-duration	过渡效果要持续多少秒或毫秒
transition-property	过渡效果所针对的 CSS 属性的名称
transition-timing-function	指定过渡的速度曲线

• transition-timing-function

  属性	描述
  ease	先缓慢地开始，然后加速，然后缓慢地结束
  linear	开始到结束具有相同速度的过渡效果
  ease-in	缓慢开始的过渡效果
  ease-out	缓慢结束的过渡效果
  ease-in-out	开始和结束较慢的过渡效果
  cubic-bezier(n,n,n,n)	在三次贝塞尔函数中定义自己的值

动画

动画使元素逐渐从一种样式变为另一种样式。

属性	描述	属性
@keyframes	定义动画模式	0-100%或 from、to
animation-name	动画名字	animationname
animation-duration	动画时长	默认0s
animation-delay	动画延迟时间	默认0，也可以是负数
animation-iteration-count	动画次数	n(次数) infinite无限播放
animation-direction	动画向前播放、向后播放还是交替播放动画	下方表格
animation-timing-function	动画速度曲线	下方表格
animation-fill-mode	动画的填充模式	下方表格
animation	简写属性	animation: name duration timing-function delay iteration-count direction fill-mode

• animation-direction

  值	描述
  normal	动画正常播放（向前）
  reverse	动画以反方向播放（向后）
  alternate	动画先向前播放，然后向后
  alternate-reverse	动画先向后播放，然后向前

• animation-timing-function

  值	描述
  ease	指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
  linear	规定从开始到结束的速度相同的动画
  ease-in	规定慢速开始的动画
  ease-out	规定慢速结束的动画
  ease-in-out	指定开始和结束较慢的动画
  cubic-bezier(n,n,n,n)	贝塞尔函数中定义自己的值

• animation-fill-mode

  值	描述
  none	动画在执行之前或之后不会对元素应用任何样式(默认)
  forwards	元素将保留由最后一个关键帧设置的样式值
  backwards	元素将获取由第一个关键帧设置的样式值
  both	动画会同时遵循向前和向后的规则

6.响应式设计

多列布局

值	描述
column-count	规定元素应被划分的列数
column-gap	列之间的间隔
column-rule-style	列之间的规则样式
column-rule-width	列之间的规则宽度
column-rule-color	列之间的规则的颜色
column-rule	column-rule-* 属性的简写属性(同border)
column-span	规定元素应跨越多少列
column-width	列指定建议的最佳宽度

Flex布局

值	描述
flex-direction	哪个方向上堆叠 flex 项目
flex-wrap	是否换行
flex-flow	同时设置 flex-direction 和 flex-wrap 属性的简写属性
justify-content	水平对齐方式(x轴)
align-items	垂直对齐方式(y轴)
align-content	用于对齐弹性线

• flex-direction

值	描述
column	垂直堆叠(由上到下)
column-reverse	垂直堆叠(由下到上)
row	水平堆叠(由左到右)
row-reverse	水平堆叠(由右到左)

• flex-wrap

值	描述
nowrap	不换行(默认)
wrap	必要时换行
wrap-reverse	以相反的顺序换行
row-reverse	水平堆叠(由右到左)

• justify-content

值	描述
center	在容器的中心对齐
flex-start	在容器的开头对齐(默认)
flex-end	在容器的末端对齐
space-around	空间平分
space-between	两端对齐，剩余空间平分

• align-items

值	描述
center	在容器的中心对齐
flex-start	在容器的开头对齐
flex-end	在容器的末端对齐
stretch	拉伸 flex 项目以填充容器（默认
baseline	使 flex 项目基线对齐

• align-content

值	描述
space-between	两端对齐，剩余空间平分
space-around	空间平分
stretch	占据剩余空间
center	值在容器中间显示弹性线
flex-start	值在容器开头显示弹性线
flex-end	值在容器的末尾显示弹性线

flex子元素属性

值	描述	值
order	子元素的顺序 (没有添加的则会排到前面， 后面依次根据order值进行排序)	默认为0
flex-grow	某个 flex 项目相对于其余 flex 项目将增长多少	默认值是 0
flex-shrink	规定某个 flex 项目相对于其余 flex 项目将收缩多少	默认值是 0
flex-basis	规定 flex 项目的初始长度	0px
flex	flex-grow``flex-shrink flex-basis 的简写属性	flex: 0 0 200px
align-self	弹性容器内所选项目的对齐方式	flex-start flex-end center

网格布局

当 HTML 元素的 display 属性设置为 grid 或 inline-grid 时，它就会成为网格容器。

属性	描述	值
column-gap	列之间的间隙	0px
row-gap	列之间的间隙	0px
gap	row-gap和row-gap简写	grid-gap: 50px 100px
grid-template-columns	定义网格布局中的列数	auto
grid-template-rows	定义每列的高度	80px 200px
justify-content	水平对齐容器内的整个网格	space-evenly space-around...
align-content	垂直对齐容器内的整个网格	start end center...

网格行

子属性添加

• 列之间的线称为列线（column lines）
• 行之间的线称为行线（row lines）

属性	描述	值
grid-column-start	网格从哪个列线开始	0
grid-column-end	网格从哪个列线结束	0
grid-column	grid-column-start和grid-column-end简写	grid-column: 1 / 5
grid-row-start	网格从哪个行线开始	0
grid-row-end	网格从哪个列线结束	0
grid-row	grid-row-start 和 grid-row-end简写	grid-row: 1 / 4
grid-area	上方四个属性简写	grid-area: 1/2/5/6

/* 把网格项目放在行线 1，并在行线 3 结束它 */
.item1 {
  grid-column-start: 1;
  grid-column-end: 3;

}

媒体查询

语法

@media not|only mediatype and (expressions) {
  CSS-Code;
}
/* 超小型设备（电话，600px 及以下） */
@media only screen and (max-width: 600px) {...} 

/* 小型设备（纵向平板电脑和大型手机，600 像素及以上） */
@media only screen and (min-width: 600px) {...} 

/* 中型设备（横向平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {...} 

/* 大型设备（笔记本电脑/台式机，992px 及以上） */
@media only screen and (min-width: 992px) {...} 

/* 超大型设备（大型笔记本电脑和台式机，1200px 及以上） */
@media only screen and (min-width: 1200px) {...}
@media screen and (max-width: 900px) and (min-width: 600px) {}

媒体类型

值	描述
all	用于所有媒体类型设备
print	用于打印机
screen	用于计算机屏幕、平板电脑、智能手机等等
speech	用于大声“读出”页面的屏幕阅读器

7.其他

变量

:root{
  --bg:blue;
}
/* 
  name 变量名
  value 在未找到变量时使用
*/
var(name, value)

在局部变量中覆盖全局变量

button{
  --bg:green;
}
button::before{
  /* attr(返回所选元素的属性值) */
  content: attr(data-count);
}

更改变量

var r = document.querySelector(':root')
var rs = getComputedStyle(r);
// 获取--color变量属性
rs.getPropertyValue('--color')
var bu1 = document.getElementById('bu1');
bu1.onclick = function(){
  // 设置--color变量属性
  r.style.setProperty('--color', 'red');
}