css思维导图

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS

• 书写位置
  • 内联式(行内式)
    • 直接写在标签后
  • 内嵌式
    • style标签
  • 外联式
    • link标签
  • 导入式
    • @import url(路径);
• 语法规则
  • 选择器
    • 基础选择器
      • 标签选择器
      • id选择器
      • 类选择器
        • 原子类
      • 通配符选择器
    • 高级选择器
      • 后代选择器
      • 交集选择器
      • 并集选择器
  • 样式属性(声明)
• 文字属性
  • color
  • font-family
  • font-size
    • 相对长度单位(推荐)
      • px
      • em(倍数)
      • %
    • 绝对长度单位
      • in/cm/mm/pt
  • font-weight
    • 单词类型
      • normal
      • bold
    • 数字类型
      • 100-900(细->粗) 400=normal, 700=bold
  • font-style
    • normal
    • italic
    • oblique
  • line-height
    • px像素值
    • %百分比
  • font (2-多个属性)
    • 字号 字体 font: 14px "consolas"
    • 字号/行高 字体 font: 14px/28px "consolas"
    • 加粗 斜体 字号/行高 字体 font: bold italic14px/28px "consolas"
• 文本属性
  • 水平对齐text-align
    • left
    • center
    • right
  • 文本修饰text-decoration
    • none 无修饰
    • overline 上划线
    • line-through 中划线/删除线<del>
    • underline 下划线<a>
  • 首行缩进text-indent (正负数)
    • px
    • em单位 (首行缩进几个中文字符的位置)
    • %
• 盒子实体化三属性
  • width
  • height
  • background-color
• 盒模型(框模型)属性
  • width
    • auto 默认值
    • px
    • %
  • height
    • auto
    • px
    • %
  • padding
    • 属性值单位: px
    • 单一属性 (顺时针)
      • padding-top
    • 多属性值简写
      • 四值法
        • 子主题
• 层叠式
  • 继承性
    • 只有文本和字体样式才会被继承
  • 层叠性
    • 选中目标标签
      • 权重高的层叠权重低的(选择器范围越大,权重越低)
        • 基础选择器权重: *<标签<类<id
        • 高级选择器依次比较id,类,标签的个数, 个数多的权重高(并集需要拆分再看)
      • 权重相同时,比较书写顺序: 后写的层叠先写的
    • 选中目标标签的祖先级
      • 就近原则
      • 距离相同时, 比较选择器权重
      • 权重相同时, 比较书写顺序
    • !important
      • 将某条属性的权重提升到最大
    • 行内式
      • 权重最高, 仅次于!important