前端学习笔记_css(1)

如何理解css呢？

css是层叠样式表（Cascading Style Sheet）。

如何使用？

• 行内样式：

  <div style="color:red">hello world</div>

• 嵌入样式：

  <style>
        *{margin: 0;border: 0;}
        body,html{height:100%;}
  </style>

• 外联样式

  <link rel="stylesheet" href="text.css">

css基础语法

选择器｛属性：值；属性：值｝

 p{font-size:15px;color:red;}

css常用选择器

ID选择器（#）
类选择器( . )
标签名选择器（ p{} ）
群组选择器（h1,div,p{}）
后代选择器（div p{}）

选择器的优先级

!important
行内：1000
ID：100
class，伪类，属性：10
元素：1
* ： 0

css3新增的选择器

• 同级元素通用选择器：
  E ~ F

• 属性选择器：
  E[att=" val "]
  E[att^=" val "]
  E[att$=" val "]
  E[att*=" val "]

• 与用户界面相关的伪类
  E:enabled
  E:enabled
  E:checked
  E:selection

• 结构性伪类
  E:root
  E:nth-child(n)
  E:nth-last-child(n)
  E:last-child
  E:nth-of-type(n)
  E:nth-last-of-type(n)
  E:first-of-type
  E:last-of-type
  E:only-child
  E:only-of-type
  E:empty
  E:not(s)

ie的条件测试

<!--[if lte ie 9]>
    <style>
        body{
            background:deeppink;
        }
    </style>
<![endif]-->

hack

div{
    color: deeppink;  
    *color: blue;  /* ie6 7 */
    _color: red;   /* ie6 */
}

@media screen and (-webkit-min-device-pixel-ratio:0){    //争对chrome
    div{
        color: lime;
    }
}