CSS学习笔记（一）

一、CSS类型

    在给页面或页面元素应用样式时，CSS提供了三种方式，即CSS的三种类型：类、标签、和高级。

1、类

    为了对网页格式的样式定义更为精确，有必要让相同的选择符（一般情况下为页面标记）也能分类，并能按照不同的类别进行不同的样式设计。类就是这样一种新的样式表示符，一句号（.）开头，并可以任意命名，如.title、.fontstyle等。它使CSS样式应用于选定的区域，若要在整个页面的相关区域应用CSS样式，则需要选择标签和高级方式。

2、标签

    标签是将页面文件中的XHTML标记重定义。用标签定义的CSS样式设置完成后，改CSS样式马上生效。例如，定义段落标记<p>样式，可以使用标签类型。

3、高级

    高级是将此时的CSS样式用于特定的XHTML标记组合或ID名，比如伪类选择符、ID选择符。关于伪类选择符，最常用的标记是锚标记<a>，用于该标记有4种伪类选择符：a:link、a:active、a:hover和a:visited，分别代表超级链接的链接状态、激活状态、鼠标移动到链接上的状态和访问过的状态。

 

二、CSS基础

1、基本语法

    CSS样式表是由若干条样式规则组成的。每条样式规则由三部分构成：选择符(selector)、属性(properties)和属性的取值(value)，基本格式如下：

    selector

    {

        property1:value1;

        property2:value2;

        ...

        property:value

    }

2、选择符组

    有些标记的样式可以是相同的，这时选择符之间用逗号隔开，这样可以减少样式的重复定义。比如：

    p,h3{font-family:隶书;color:green}

3、类选择符

    使用类选择符能够为相同的标记定义不同的样式，也可以应用到不同的标记上。定义类选择符时，需要在自定义类的名称前加一个句号。例如，

    p.red{color:red}

    p.green{color:green}

    应用如下，

    <p class="red">红色</p>

    <p class="green">绿色</p>

    上面定义的类选择符是只适用于一种标记的，当然也可以将定义的类选择符应用于具有相同样式的不同标记。此时，类选择符中句号前就可以将标记名省略，例如：

    .red{color:red}

    <p class="red">段落样式</p>

    <h3 class="red">标题样式</h3>

4、ID选择符

    在很多方面，ID选择符类似于类选择符，但有一个重要的区别就是ID选择符前不是用句点，而是＃号，例如：

    p#fontstyle

    {

        color:red;

        font-weight:hold;     

        font-size:large

    }

    #fontstyle

    {

        color:red;

        font-weight:hold;     

        font-size:large

    }

    ID选择符同样可以为一个或多个标记定义样式，但这些标记不能是相同的。在页面中，只有具有ID属性的标记才能够使用ID选择符定义样式，所以与类选择符相比，使用ID选择符是有一定局限性的。

    <p id="fontstyle">段落样式</p>

    注：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。

5、伪类选择符

    伪类选择符可以看作某种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符。伪类选择符的最大作用就死后可以对链接的不同状态定义不同的样式效果。伪类选择符定义的样式常应用在定义锚标记<a>上，即锚的伪类选择符。

    a:link{color:#FF0000}

    a:visited{color:#00FF00}

    a:hover{color:#0000FF}

    a:active{color:#FF00FF}

    伪类选择符还可以和类选择符组合使用，可以在同一页面中完成几组不同的链接效果。例如：

    a.style1:link{color:#FF0000}

    a.style1:visited{color:#00FF00}

    a.style2:hover{color:#0000FF}

    a.style2:active{color:#FF00FF}

6、继承与层叠

    XHTML中的标记都是包含关系，从而可以形成树结构，所以子标记可以继承父标记的一些样式，也就是说，样式表的继承规则是外部的标记样式会保留继承该元素所包含的其它元素。

    div{color:blue;font-weight:bold}

 

   <div>

      <p>

             继承标记div的样式

      </p>

    </div>

    在有些情况下，子标记出了继承父标记的样式外，还可以拥有自己的样式，例如：

    div{color:blue;font-weight:bold}

    p{font-size:large;color:red}

 

   <div>

      <p>

             继承标记div的样式并拥有自己的样式

      </p>

    </div>

    注：样式继承不用应用于表格标记<table>中

7、注释

    同其它语言一样，在CSS中也可以使用注释标注代码，它是以“/*”开头，以“*/”结尾。