《精通CSS与HTML设计模式》学习笔记2

1、CSS的选择符(Selectors)

  1)类型、类和ID选择符

    a. 类型：是指 html元素，用来选择某一类的所有元素

    b. 类 ：用来选择所有相同类名的元素

    c. ID ：用来选择唯一指定ID的元素

     类型不区分大小写，而类和ID是区分大小写，建议都使用小写。    

    模式：

         type  {styles}

         .class  {styles}

     #id   {styles}

  2)定位和群组选择符

    a. 群组：用逗号将多个选择符连起来，可为不同的选择符赋予同一组规则。

        selector1,selector2,etc {styles>

    b. 定位 ：把选择符组合下来缩小选择的范围

      b1.后代选择符 ：把多个选择符用空白连起来，可选择后代元素(可以是子选择符、孙选择符等)。

         selector1 selector2 etc {styles>

      b2.子选择符 ：把多个选择符用'>'连起来，可选择子元素。

         selector1 > selector2 > etc {styles>

      b3.首子选择符 ：把:first-child加在任何选择符后，可选择第一个子选择符。

         selector:first-child {styles>

      b4.兄弟选择符 ：把多个选择符用'+'连起来，把选择范围定位于赋予了前一个选择符的元素的兄弟。

         selector1 + selector2 + etc {styles>

  3)属性选择符

    a.属性存在选择符

    b.属性词汇选择符

    c.属性值选择符

  4)伪类元素选择符

    选择元素的第一个字母和第一行。

    selector:first-letter {styles>

    selector:first-line {styles>

    first-letter和first-line只与终端块状元素相搭配，它们对内联元素与结构化块状元素不起作用

  5)伪类选择符
    为超链接的四种状态赋予样式。

     a:link 未浏览的超链接

     a:visited 已浏览的超链接

     a:hover 鼠标处于悬停时的超链接

     a:focus 在非IE浏览器中获得焦点的超链接

     a:active 在IE浏览器中获得焦点的超链接

    适用范围：伪类选择符只适用超链接(<a>)，hover适用于所有的元素。

  6)子类选择符

    *.class  {styles>    这是基类

    *.class.subclass.etc  {styles>   类链中的类的个数没有限制

    CSS层叠排序确保子类中的规则能覆盖基类中的规则。

2、CSS的继承(Inheritance)

   CSS的许多属性默认是可以被后代元素继承的。

   1) 可以被所有元素继承的属性: visibility

   2) 可以被内联元素继承的属性: 主要是字体的属性

   3) 可以被终端块状元素继承的属性: text-indent text-align

   4) 可以被列表元素继承的属性: list-style属性

   5) 可以被表格元素继承的属性: border-collapse

   6) 不可被继承的属性:
3、CSS的视觉继承(Visual Inheritance)   

  1） CSS自动把元素设置为透明(backbroud-color默认为透明，backbroud-image默认为none)，子元素位于父元素的上层。

    这样无需做什么，子元素的背景与父元素一样。

     当不想让子元素继续父元素的背景，可以为它设置自己的背景色和背景图片。

  2）因为子元素嵌在父元素之中，所以它从视觉继承了父元素的边框和内边距。