CSS知识梳理分享

CSS知识梳理分享，包括CSS语法、CSS选择器、CSS常用属性和伪装四部分内容，需要的同学可以看下。

CSS

• *4 伪类
  • 用来给选择器添加一些特殊效果
  • anchor伪类
    • a:link{...}
      • (没有接触过的链接), 用于定义链接的常规状态
    • a:hover{...}
      • (鼠标悬停在链接上的状态), 用于产生视觉效果
    • a:visited{...}
      • (访问过的链接), 用于阅读文章, 能清楚的判断已经访问过的链接
    • a:active{...}
      • (在链接上按下鼠标时的状态), 用于表现鼠标按下时的链接状态
  • before, after伪类
    • e.g.
      • 在 元素之前插入内容
        • p:before{content:"hello"}
      • 在 元素之后插入内容
        • p:after{content:"hello"}
• 3 CSS常用属性
  • 文本属性
    • color
    • font
      • -size
      • -family
      • -style:
        • italic
        • normal
      • -weight:
        • bold
        • normal
      • font: 是否加粗 字号/行高 字体
        • e.g. font: normal 12px/36px 'Microsoft Yahei'
    • line
      • -height
    • text
      • -decoration
        • 常用于a标签去下划线
      • -indent
        • 首行缩进
      • -align:
        • 文字居中
        • center
  • 列表属性
    • list-style:
      • none
      • 子主题 2
      • 子主题 3
      • 子主题 4
  • 背景属性
    • background
      • -color
      • -image: url(...)
      • -repeat:
        • repeat-x
        • repeat-y
        • no-repeat
      • -postion
        • 水平方向
        • 垂直方向
  • display属性
    • inline-block
  • 盒子模型
    • 子主题 1
    • 子主题 2
    • 子主题 3
• 2 CSS选择器
  • 基础选择器
    • 通用选择器
      • *
    • 标签选择器
      • E
    • id选择器
      • #ID
    • class选择器
      • 一个类用于多个元素; 一个元素可用于多个类
      • .Class
  • 组合选择器
    • 多元选择器
      • E1, E2
    • 后代选择器
      • E1 E2
    • 子代选择器
      • E1 > E2
    • 毗邻选择器
      • E1+ E2
  • 属性选择器
    • 属性可自定义
    • E[att]
    • E[att="val"]
    • E[att~="val"]
    • E[att^="val"]
    • E[att$="val"]
    • E[att*="val"]
• 1 CSS语法
  • 行内式
  • 嵌入式
    • 应用于首页
  • 链接式
    • • 将一个.css文件引入到html文件中
  • 导入式
• 自由主题