导图2

包含CSS引入方式、Emmet语法、CSS的复合选择器、HTML元素、显示模式的转换、盒模型、背景等等。

Web前端开发

• CSS引入方式
  • 行内样式表（行内样式）单独写在style中
  • 内部样式表（嵌入式）
  • 外部样式表（链接式）单独写在css 中
• Emmet语法
• CSS的复合选择器
  • 后代选择器
    • 元素1 元素2 {样式声明}
  • 子代选择器
    • 只能选择作为某元素的最近一级子元素（亲儿子）
    • 元素1> 元素2 {样式声明}
  • 群组选择器
    • 可以选择多组标签，同时为他们定义相同的样式
    • 元素1， 元素2 {样式声明}
  • 指定选择器
    • 标签名，class类名
  • 伪类选择器
    • 链接伪类选择器
      • 按照L-V-H-A的顺序来写
    • focus伪类选择器
      • 用于选取获得焦点的表单元素
      • input:focus {background-color:yellow}
• HTML元素
  • 块元素
  • 行内元素
  • 行内块元素
• 显示模式的转换
  • 转化为块元素-display:block(把行内元素a转换为块级元素)
  • 转换为行内元素-dispiay：inline(把div块级元素转换为行内元素）
  • 转换为行内块元素-dispiay：inline-block
• 盒模型
  • 边框border
    • 边框宽度border-width
      • soild实现边框
      • dashed虚线边框
      • dotted电线边框
    • 边框样式border-style
    • 边框颜色border-color
    • 边框的复合写法：border:1px soild red;没有顺序
    • 表格的细线边框：border-collapse
      • border-collapse:collapse(相邻边框合并在一起)
  • 内容content
  • 内边距padding（边框和内容之间的距离）
    • padding-left
    • padding-right
    • padding-top
    • padding-bottom
    • 复合写法
  • 外边距margin
• 背景
  • 背景颜色:background-color
  • 背景图片:background-image:none/url
  • 背景重复:background-repeat
    • repeat
    • no-repeat
    • repeat-x
    • repeat-y
  • 背景定位:background-position
  • 背景附着:background-repeat
  • 背景源点:background-origin
  • 背景裁剪:background-clip
  • 背景尺寸:background-size
• CSS三大特性
  • 层叠性（相同选择器设置相同的样式）
    • 就近原则，哪个样式离结构近,就执行哪个样式
  • 继承性
    • 行高的继承性
      • 1.行高可以跟单位也可以不跟单位
      • 2.如果子元素没有设置行高，则会继承父元素的1.5
      • 3.此时子元素的行高是：当前子元素的文字大小*1.5
  • 优先级
    • 选择器相同，则执行层叠性
    • 选择器不同，则根据选择器权重执行
    • 继承的权重是0.如果该元素没有直接选中，不管父元素权重有多高，子元素得到的权重都是0
    • 权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
    • 举例