2.3 CSS样式表

视频讲解：光盘\TM\lx\2\03 CSS样式表．mp4

CSS是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式，增加了一些新概念，如类、层等，可以对文字重叠、定位等。在CSS还没有引入到页面设计之前，传统的HTML语言要实现页面美化在设计上是十分麻烦的，例如要设计页面中文字的样式，如果使用传统的HTML语句来设计页面就不得不在每个需要设计的文字上都定义样式。CSS的出现改变了这一传统模式。

2.3.1 CSS规则

在CSS样式表中包括3部分内容：选择符、属性和属性值。语法格式如下：

        选择符{属性：属性值；}

参数说明：

选择符：又称选择器，是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。

图2.17 CSS语法

属性：主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。其中一些属性只有部分浏览器支持，因此应用起来有些复杂。

属性值：为某属性的有效值。属性与属性值之间以“:”分隔。当有多个属性时，使用“; ”分隔。图2.17为大家标注了CSS语法中的选择符、属性与属性值。

2.3.2 CSS选择器

CSS选择器常用的是标记选择器、类别选择器、id选择器等。使用选择器可对不同的HTML标签进行控制，从而实现各种效果。下面对各种选择器进行详细介绍。

1．标记选择器

HTML页面是由很多标记组成的，例如图像标记<img>、超链接标记<a>、表格标记<table>等。CSS标记选择器就用于声明页面中哪些标记采用了哪些CSS样式。例如a选择器，就声明了页面中所有<a>标记的样式风格。

【例2.15】定义a标记选择器，在该标记选择器中定义超链接的字体与颜色。代码如下：

        <style>
            a{
                font-size:9px;
                color:#F93;
            }
        </style>

2．类别选择器

使用标记选择器非常快捷，但却有一定的局限性。声明一个标记选择器后，页面中所有该标记的内容都会有相应的变化。假如页面中有3个<h2>标记，如果想要每个<h2>的显示效果都不一样，使用标记选择器就无法实现了，这时就需要引入类别选择器。

类别选择器的名称由用户自己定义，并以“.”开头，定义的属性与属性值也要遵循CSS规范。要应用类别选择器的HTML标记，只需使用class属性来声明即可。

【例2.16】使用类别选择器控制页面中字体的样式。（实例位置：光盘\TM\sl\2\10）

关键代码如下：

        //以下为定义的CSS样式
        <style>
          .one{                                       //定义类名为one的类别选择器
                font-family：宋体；                   //设置字体
                font-size:24px;                       //设置字体大小
                color:red;                            //设置字体颜色
              }
            .two{
                font-family：宋体；
                font-size:16px;
                color:red;
              }
            .three{
                font-family：宋体；
                font-size:12px;
                color:red;
              }
        </style>
        </head>
        <body>
          <h2 class="one"> 应用了选择器one</h2>      //定义样式后页面会自动加载样式
          <p> 正文内容1  </p>
            <h2 class="two">应用了选择器two</h2>
          <p>正文内容2 </p>
          <h2 class="three">应用了选择器three</h2>
          <p>正文内容3 </p>
        </body>

图2.18 类别选择器控制页面文字样式

在上面的代码中，页面中的第一个<h2>标记应用了one选择器，第二个<h2>标记应用了two选项器，第三个<h2>标记应用了three选择器。运行结果如图2.18所示。

说明

在HTML标记中，不仅可以应用一种类别选择器，也可以应用多种类别选择器，这样可使HTML标记同时加载多个类别选择器的样式。在多种类别选择器之间，用空格进行分隔，例如“<h2 class="size color">”。

3.id选择器

id选择器是通过HTML页面中的id属性来选择增添样式，与类别选择器基本相同。但需要注意的是，由于HTML页面中不能包含两个相同的id标记，因此定义的id选择器也就只能被使用一次。

命名id选择器要以“#”开始，后加HTML标记中的id属性值。

【例2.17】使用id选择器控制页面中字体的样式。关键代码如下：

        <style>                                   //定义id选择器
          #frist{
              font-size:18px
            }
          #second{
              font-size:24px
            }
          #three{
              font-size:36px
            }
        </style>
        <body>
            <p id="frist">id选择器</p>          //在页面中定义标记，则自动应用样式
            <p id="second">id选择器2</p>
            <p id="three">id选择器3</p>
        </body>

图2.19 使用id选择器控制页面文字大小

运行本实例，结果如图2.19所示。

2.3.3 在页面中包含CSS

在对CSS有了一定的了解后，下面介绍在页面中包含CSS样式的几种方式，其中包括行内样式、内嵌式和链接式。

1．行内样式

行内样式是比较直接的一种样式，直接定义在HTML标记之内，通过style属性来实现。这种方式比较容易令初学者接受，但是灵活性不强。

【例2.18】通过行内定义样式的形式，实现控制页面文字的颜色和大小。（实例位置：光盘\TM\sl\2\11）

关键代码如下：

        <table width="200"border="1"align="center">     //在页面中定义表格
         <tr>
         <td><p style="color:#F00; font-size:36px; ">行内样式一</p></td><! --在页面文字中定义CSS样式-->
         </tr>
         <tr>
          <td><p style="color:#F00; font-size:24px; ">行内样式二</p></td>
         </tr>
         <tr>
          <td><p style="color:#F00; font-size:18px; ">行内样式三</p></td>
         </tr>
         <tr>
          <td><p style="color:#F00; font-size:14px; ">行内样式四</p></td>
         </tr>
        </table>

图2.20 定义行内样式

运行本实例，结果如图2.20所示。

2．内嵌式

内嵌式样式表就是在页面中使用<style></style>标记将CSS样式包含在页面中。例2.16就是使用这种内嵌样式表的模式。内嵌式样式表的形式没有行内标记表现的直接，但是能够使页面更加规整。

与行内样式相比，内嵌式样式表更加便于维护。但是每个网站都不可能由一个页面构成，而每个页面中相同的HTML标记又都要求有相同的样式，此时使用内嵌式样式表就显得比较笨重，而使用链接式样式表即可轻松解决这一问题。

3．链接式

链接外部CSS样式表是最常用的一种引用样式表的方式，将CSS样式定义在一个单独的文件中，然后在HTML页面中通过<link>标记引用，是一种最为有效的使用CSS样式的方式。

<link>标记的语法结构如下：

        <link rel='stylesheet' href='path' type='text/css'>

参数说明：

rel：定义外部文档和调用文档间的关系。

href:CSS文档的绝对或相对路径。

type：指的是外部文件的MIME类型。

【例2.19】通过链接式样式表的形式在页面中引入CSS样式。（实例位置：光盘\TM\sl\2\12）

（1）创建名称为css.css的样式表，在该样式表中定义页面中<h1>、<h2>、<h3>、<p>标记的样式。关键代码如下：

        h1, h2, h3{                             //定义CSS样式
            color:#6CFw;
            font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        }
        p{
            color:#F0Cs;                        //定义颜色
            font-weight:200;
            font-size:24px;                     //设置字体大小
        }

（2）在页面中通过<link>标记将CSS样式表引入到页面中，此时CSS样式表定义的内容将自动加载到页面中。关键代码如下：

        <title>通过链接形式引入CSS样式</title>
        <link href="css.css"/>                    //在页面中引入CSS样式表
        </head>
        <body>
            <h2>页面文字一</h2>                   //在页面中添加文字
            <p>页面文字二</p>
        </body>

运行程序，结果如图2.21所示。

图2.21 通过链接形式引入CSS样式

上一章目录下一章