[总结] CSS（一）

CSS总结

从High-level看待CSS结构

• CSS（Cascading Stylesheet）中，样式从CSS文档顶部级联到底部。{}内部属性（property）也存在级联特性。
• 优先级（Specificity）
• 选择器（Selectors）
• 复合选择器（Combining Selectors）
• 样式分层，当两个元素共有一些属性的时候，将这些属性单独提出来。
• 常用的属性值（Color | Length）

图1 CSS知识架构图

一、语言

CSS文档由一系列限定规则构成的，主要有两种规则。一种为qualified rule，用于描述应用于元素样式的CSS属性；一种为at-rule，用于CSS文档的特殊处理。（参考CSS官方文档）

@rule  

图2 几种@rule

qualified rule

选择器 { 属性：值；}

1）优先级

主要有三类基本的选择器，每个选择器都有其优先级权重。

• 类型选择器   0-0-1
• class选择器  0-1-0
• id选择器       1-0-0

权重越大的选择器具有越高的优先级，而无视级联特性。复合选择器的权重即简单相加。

2）选择器

伪类选择器\伪元素选择器

复合选择器： prequalifier+key selector（最右）  |   combinator（空格 > + ~ ||）  |   eg: p.mustard

样式分层：为了使得选择器的权重较低，应整合元素中的共有属性，对选择器进行分层。常用方法是使用多个class选择器。

3）常见属性（property）值

• Color: keyword | hexadecimal notation | RGB | HSL values
• Length: 绝对单位（px） | 相对单位（% em rem）

 

二、功能

盒模型 width height padding margin border display

布局

布局正常流指的是浏览器默认的HTML布局方式。而是用相关CSS布局技术，能够覆盖默认布局。

• position: static（默认）| relative | absolute | fixed
• float: left | right | none | inherit
• display: block | inline | inline-block | none
• CSS表格  （设置display: table | table-row | table-cell | table-caption）
• 弹性盒子（设置display: flex）
• 网格（grid）

绘制

1）形状

• 基础图形：圆、三角形、梯形。基础图形指的是调整盒子border就能绘制的图形。
• 复杂图形：将复杂图形拆分成两个或三个基础图形，通过:after和:before，使用定位（position）和旋转（transform）等方式进行组合。

2）颜色和图片

• background-image: url("图片路径"); 使用CSS把图片嵌入网站，装饰
• 颜色模式  rgba(R,G,B,A)  hsla(H,S,L,A)
• 透明度  opacity: value | inherit
• 渐变  linear-gradient()  radial-gradient()
• 阴影  box-shadow

3）文字相关

• 字体（font）           
• 文本效果（text）  text-shadow
• 排版  text-overflow

图3  Font-based properties

图4  Text-based properties

交互

1）动画  animation  @keyframes

2）变换  transition

三、注意

浏览器兼容性（CSS层面）  caniuse属性前缀

跨终端   响应式设计