css-day2

web前端CSS-结构，有需者自取。CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。

css-day2

• 选择器进阶
  • 后代选择器
    • 语法
      • 选择器1 选择器2 选择器3 { ... }
    • 作用
      • 找的是选择器1里面的(空格)选择器2里面的选择器3
  • 子代选择器
    • 语法
      • 选择器1>选择器2 { .... }
    • 作用
      • 找的是选择器1里面的选择器2(直接的父子关系)
  • 并集选择器
    • 语法
      • 选择器1,选择器2 { ... }
    • 作用
      • 找的是所有(大家)
  • 交集选择器
    • 语法
      • 选择器1选择器2 { ... }
    • 作用
      • 既又原则
        • 找的是既是选择器1又是选择器2的标签
  • hover伪类选择器
    • 语法
      • a:hover { ... }
    • 作用
      • 找的是鼠标悬停在a标签上的状态
• emmet语法
  • 目的提升开发效率
  • 基本掌握
    • .demo
    • ul>li*3
• 背景相关样式
  • 背景颜色
    • 属性名
      • background-color(bgc)
    • 属性值
      • 预定义的颜色值
      • rgb
      • rgba
      • 十六进制
  • 背景图片
    • 属性名
      • background-image(bgi)
    • 属性值
      • url(相对路径)
  • 背景平铺
    • 属性名
      • background-repeat(bgr)
    • 属性值
      • repeat
        • 平铺
      • no-repeat
        • 不平铺
      • repeat-x
        • 沿着x轴平铺
      • repeat-y
        • 沿着y轴平铺
  • 背景位置
    • 属性名
      • background-position(bgp)
    • 属性值
      • 方位名词(9个位置)
        • 水平
          • left
          • center
          • right
        • 垂直
          • top
          • center
          • bottom
      • 精确单位(数值+px)
        • 水平 垂直
      • 混合使用
      • 省略写法
        • 另一个就是center
  • 连写
    • 属性名
      • background(bg)
    • 属性值
      • 各个属性值的合写,以空格隔开
    • 注意点
      • 推荐顺序
        • color image repeat position
      • 省略
        • 如果不需要哪个直接省略
• 元素的显示模式
  • 块级
    • display: block
    • 特点
      • 独占一行
      • 宽度默认是父元素的宽度;高度由内容撑开
      • 可以设置宽高
    • 代表标签
      • p
      • div
      • h系列
  • 行内
    • display: inline
    • 特点
      • 一行显示多个
      • 宽高默认由内容撑开
      • 不可以设置宽高
    • 代表
      • a
      • span
  • 行内块
    • display: inline-block
    • 特点
      • 一行显示多个
      • 可以设置宽高
    • 代表标签
      • input
      • img
  • 转换模式
    • 转行内
      • di
    • 转块
      • db
    • 转行内块
      • dib
• css三大特性
  • 继承性
    • 子元素默认继承父元素的某些样式
    • 哪些可以继承
      • color
      • font-
      • text-
      • line-height
    • 继承失效
      • a链接有自己的默认颜色,所以不会继承父元素的文字颜色
      • h系列有自己文字大小,所以不会继承父元素的文字大小
  • 层叠性
    • 相同的属性会覆盖
      • 写在后面的会生效
    • 不同的属性会叠加
      • 所有的属性会共同作用在该标签上
  • 优先级