[笔记] 一起参悟CSS布局之道 第二章（2）

完成网页框架的构建，下一步就该使用CSS来布局和修饰了。

一、CSS基本语法：

1、使用方法：

（1）选择符：表示要定义样式的对象。（元素本身、一类元素、指定名称的元素）

（2）选择属性：表示指定选择符所具有的属性。（CSS2共定义了150多个属性）

（3）定义属性值：包括常见的数值加单位。

         Selector {

                         Property:value;

           }

          Selector表示元素本身，即标签。

          Property表示标签元素的属性。

          Value表示属性值。

2、结构：

（1）选择符：网页元素自身。

（1.1）类型选择符

                 CSS版本：CSS1；IE兼容性：IE4+；语法：e1；说明：以文档对象类型的元素作为选择符，如p、div、span、html、    body、br等。

             使用情况：

                             第一：改变某个元素的默认样式。

                             第二：统一文档某个元素的显示效果时。

                             第三：div、span等通用结构元素，不建议使用类型选择符。

（1.2）id选择符

                 CSS版本：CSS1；IE兼容性：IE4+；语法：#id；说明：以作为元素对象的唯一标识符id属性作为选择符，例如在

，#first选择符可以定义第一个元素p元素的样式，但不会影响最后一个p元素对象。

        特性：

                  唯一性

         使用情况：

                        第一：页面中都是比较唯一、固定的、不会出现一个结构在同一个页面内重复出现的现象。

                        第二：id属性命名规范应遵循约定俗成的习惯。

                        第三：不必为每个元素都定义id属性。

                        第四：对于模块外围结构元素最好使用id属性，内部元素可以定义class属性，因为外围结构是唯一的，而内部元素可能会出现重复。

（1.3）class选择符

                 CSS版本：CSS1；IE兼容性：IE4+；语法：.class；说明：以作为元素对象分类的class属性作为选择符，例如在

结构中，.red选择符可以定义第一个p元素和span元素的样式，但不会影响最后一个p元素对象。

        特性：

                   可重复性；

                   一对多。

         使用情况：

                       第一：用户指定类的样式所应用的元素对象范围。

                       第二：使用之前，需要在XHTML文档中为要应用类样式的元素定义class属性。

                       第三：定义类样式

（1.4）通用选择符

             它用*号来表示，CSS中的通用选择符与通配符*具有相同功能，它可以定义所有元素对象的样式。

（1.5）伪类和伪对象

            伪：诈也

           伪类和伪对象都不是真的类和对象，它看不见，摸不着，也不可预测，是一个预定义的假设。

          CSS 规定伪类和伪对象以冒号开始。

         常用伪类选择符和伪对象选择符：

  :link{/*伪类选择符，定义默认链接样式*/

          ......

        }

  :visited:{/* 伪类选择符，定义已访问的链接样式*/

       .......

      }

 :hover{/*伪类选择符，定义鼠标经过的样式*/

    }

 :active{/*伪类选择符，定义鼠标活动状态下的样式，如鼠标按下、松开等*/

   }

 :first-letter{/*伪对象选择符，定义第一个文字的样式*/

}

:first-line{/*伪对象选择符，定义第一行文字样式*/

}

区分伪类和伪对象：

1、伪类可以应用到不同元素上。

2、伪对象没有伪类应用广泛，它只应用在特定的对象上，如:first-letter只能够对文本段起作用，对图像就无效。

注意：1、使用伪类和伪对象定义样式时，必须 在其前面指定一个对象，以确定其样式作用的范围。

           2、很多浏览器只支持a元素与超链接操作相关的4个伪类，其他的伪类仅被现代标准浏览器支持，如Opera，Firefox等，而IE浏览器暂时还不支持。

（1.6）伪类选择符

（1.7）伪对象选择符

（1.8）分组选择符

（1.9）包含选择符

（1.10）元素指定选择符

（1.11）子对象选择符

（1.12）属性选择符

（1.13）相邻选择符

 

（2）声明：属性 和 属性值 和 分号 组成。