002-css汇总 | 易学教程

css-层叠样式表(Cascading Style Sheets)
- 标记语言；css样式表/级联样式表
- 设置页面文本内容
- HTML: 超文本标记语言，用来制作网页的一门语言。有标签组成
语法规范
- 选择器及N条声明
  - h1{color:red;}
选择器：用于选择标签
- 基础选择器：单个选择器组成
  - 标签选择器：html标签名
  - 类选择器：class属性
  - id选择器：id属性,一般与js搭配
  - 通配符选择符：选取所有元素*
- 复合选择器
  - 后代：包含选择器 element element
  - 子元素 element>element
  - 并集 element,element
  - 伪类
    - 链接-:link,:hover,:visited,:active(LVHA顺序声明)
    - :focus选取获得焦点的表单元素
字体
- font-family字体
- font-size字体大小
- font-weight字体粗细
- font-style文字样式(斜体)
- 复合属性(size与family不可省略)
```
font:font-style font-weight font-size/line-height font-family;
font: 16px/28px 'Microsoft Yahei'
```
文本
- color颜色
- text-align水平对齐
- text-decoration装饰文本(none无下划线underline、删除线line-through、上划线overline)
- text-indent第一行首行文本缩进
- em相对单位，当前元素(font-size)1个文字的大小
- line-height行间距
  - 上间距，文本高度，下间距
样式表
- 内部样式表
- 行内样式表
- 外部样式表
emmet语法
元素显示模式
- 块元素：宽度默认容器100%，可设置高度、宽度、内外边距；文字内元素不能使用块元素，如p、h1-h6内不能放div
- 行内元素：宽高直接设置无效；只能放文本或其他行内元素
- 行内块元素： img input td; 有块、行内元素共同特点
- 显示模式转换：display
单行文字垂直居中： line-height==height
背景
- background-color背景颜色,默认transparent(透明)
- background-image背景图片
- background-repeat背景平铺
- background-position:x y 背景位置(方位/精确)
- background-attachment scroll|fixed背景固定
- background简写颜色-图片-平铺-滚动-位置
- background：背景色半透明rgba(0,0,0,0.3) 0.3为alpha透明度，0-1
三大特性
- 层叠性：样式冲突，就近原则
- 继承性
  - 子元素继承父元素样式(text-,font-,line-,color)
  - 行高继承，未指定具体大小(px)时，为当前元素字体大小的倍数
    - font : 24px/1.5
- 优先级:选择器相同，就近；不同，权重(id>类>元素)
  - 继承的权重是0，如果该元素没有直接选中，子元素权重是0
  - 权重叠加：复合选择器
    - div ul li-> 0,0,0,3;