CSS | ifretea

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