CSS语句

CSS语句

1. 元数据

   以@开头，;结束的语句

   @import 'style.css';
   

2. 条件(嵌套语句)

   • @media 设备匹配条件
   • @support 浏览器支持条件
   • @document DOM匹配条件

   @media (min-width: 801px) {
     body {
       margin: 0 auto;
       width: 800px;
     }
   }
   

3. CSS规则

   CSS规则= 选择器+声明块

选择器

简单选择器

• 元素选择 p，div等
• 类选择器.class。html中为class="class"，多个Class用空格分开
• id选择器#id
• 通用选择*

属性选择器

对属性进行选择的选择器。

存在和值选择器

• [attr]：选择包含attr属性的所有元素
• [attr=val]：选择attr属性为val的所有元素
• [attr~=val]：选择包含attr属性且属性中含有val的所有元素

伪正则选择器

• [attr^=val]选择包含attr属性且以val开头的所有属性
• [attr$=val]选择包含attr属性且以val结尾的所有属性
• [attr*=val]选择包含attr属性且值中存在子串val的所有属性

伪类和伪元素

伪类

伪类是一个以冒号:作为前缀，被添加到一个选择器末尾的关键字,表示元素的某种状态。例如

• :focus
• :hover
• :invalid

伪元素

伪元素是两个冒号::，表示选择元素中某个部分，比如

• ::after
• ::before
• ::first-letter

组合器和选择器组

写法	选择规则
A,B	A 或 B
A B	A 的后代 B
A > B	A 的直接后代 B
A ~ B	A 的兄弟 B
A + B	A 的直接兄弟 B

都可以嵌套，比如A B + C > D

CSS值和单位

• px

  pixels像素，绝对单位。其他绝对单位：mm, cm等

• em

  相对宽度，1em的宽度与一个大写字母M相等，是最常用的单位。

• 0

  无单位的值，表示0。其他无单位的值：

  • line-height ：倍数

• 动画特殊单位

  • 角度
  • 时间
  • 时间函数
  • 字符串

• 百分比，和父容器相比的大小

• 颜色

  • 字符串red，blue等
  • 16进制值#ff0000
  • rgb函数和rgba函数
  • hsl函数和hsla函数

• 函数

层叠和继承

层叠顺序

1. 重要性（Importance）

   加!important的规则总是胜出

2. 专用性（Specificity）

   元素选择<类选择<ID选择

3. 源代码次序（Source order）

继承

• inherit属性值=父元素 （继承）
• initial属性值为默认 （取消继承）

框模型

• margin 外边距
• border 边框
• padding 内边距
• width,height 宽高

overflow属性

盒模型内容过多放不下的处理

• auto：滚动条
• hidden：隐藏放不下的
• visible：强行显示突破盒模型约束

background-clip属性

盒模型背景图片的处理

• border-box 图片最大到border
• padding-box 图片最大到padding
• content-box 图片最大到content

display属性

盒模型的类型

• block 块框，默认值
• inline 行内框
• inline-box 行内块状框