CSS

CSS

1. "be kind to netscape 4"，由于旧浏览器无法继承，所以使用沉余法则来处理旧式浏览器无法理解继承的问题

   body {
       font-family: Verdana, sans-serif;
   }
   p, td, ul, ol, li, dl, dt, dd {
       font-family: Verdana, sans-serif;
   }

选择器

• 元素选择器
• 派生选择器
• 类选择器、多类选择器
• ID选择器

• 属性选择器

  1. 元素选择器：
     p {color: red;}

  2. 派生选择器
     由其上下文关系来应用或者避免某项规则，即通过上下文来确定某元素

     • 后代选择器：后代选择器可以选择作为某元素后代的元素
     • 子元素选择器：只能选择作为某元素子元素的元素
     • 相邻兄弟选择器：选择紧接在另一元素后的元素，且二者有相同父元素

  /* HTML 代码 */
  <h1>This is a <em>important</em> heading</h1>
  <p>This is a <em>important</em> paragraph.</p>
  /* CSS 后代选择器 */
  ul em {
      color: red;
  }
  // 包含 em 的所有 ul 会把以下样式应用到该 em
  /* HTML 代码 */
  <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
  <h1>This is <em>really <strong>very</strong></em> important.</h1>
  /* CSS 子元素选择器 */
  h1 > strong {
      color:red;
  }
  // 只有 strong直接为h1子元素的才会变，即第一个h1当中的两个strong当中的字体都会变为红色
  /* CSS 相邻兄弟选择器 */
  h1 + p {
      margin-top: 50px;
  }
  // 紧跟在h1后面的P才会起作用
  /* elem1 后面的所有elem2 都起作用*/
  p ~ ul {
      background-color: #f00;
  }

  1. 类选择器、多类选择器

  .important {}
  .important.warning {}  //  多类选择器

  1. ID选择器
     #impo {}

  2. 属性选择器
     [attribute] 用于选取带有指定属性的元素。
     [attribute=value] 用于选取带有指定属性和值的元素。
     [attribute~=value] 用于选取属性值中包含指定词汇的元素。
     [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
     [attribute^=value] 匹配属性值以指定值开头的每个元素。
     [attribute$=value] 匹配属性值以指定值结尾的每个元素。
     [attribute*=value] 匹配属性值中包含指定值的每个元素。

样式

• 背景
• 字体
• 链接
• 表格
• 轮廓

框架
盒子模型：content、padding、border、margin

外边距合并

即不需要上一个元素设置了margin-bottom之后，下面的元素设置的margin-top < margin-bottom时，则不需要设置了，会被覆盖，除非 > margin-bottom

定位
定位机制：普通流、浮动和绝对定位

position: static、absolute、relative、fixed
overflow: hidden、scroll、auto
float: left、right
clear: left、right、both

使用absolute之后，元素会脱离于**文档流**，所以会经常出现用position:absolute的时候，外面方框直接没了，因为没有内容了，内层元素已经脱离了文档流，原本所占空间 关闭。

其实，float的原理和absolute的原理差不多，都是会将框脱离于文本流

伪类

常见伪类：link、visited、hover、active、first-child(该伪类修饰该元素作为第一个子元素时)、focus

伪元素
first-letter | first-line
:before | :after

h1:before {
    content: url(logo.gif)
}
h1:after {
    content: "请你滚";
}

媒介类型：允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等

常用媒介类型：
all | aural | braille | embossed | handheld | print | projection | screen | tty | tv
各类型对应描述详见：http://www.w3school.com.cn/css/css_mediatypes.asp

@media 规则

@media screen {
    p.test {
        font-family: verdana;
        font-size: 14px;
    }
}

关于CSS更多特性的参考手册：http://www.w3school.com.cn/cssref/index.asp