CSS3+DIV网页样式与布局从入门到精通（微课精编版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.2　使用CSS

视频讲解

CSS代码可以在任何文本编辑器中打开和编辑，下面介绍CSS的基本语法和用法。

1.2.1　CSS样式

样式是CSS的最小语法单元，每个样式包含两部分内容：选择器和声明，如图1.3所示。

图1.3　CSS样式的基本结构

☑　选择器：选择器告诉浏览器该样式将作用于页面中哪些对象，这些对象可以是一个或多个标签，也可以是某个具体对象等。

☑　声明：声明命令浏览器如何渲染指定的对象。声明由两部分组成，即属性和属性值，并用分号标识一个声明的结束，样式中最后一个声明可以省略分号。样式中可以包含一个或多个声明，所有声明被放置在一对大括号内，紧邻选择器后面。

●　属性：属性是CSS预定义的样式选项。属性名由一个单词或多个单词组成，多个单词之间通过连字符相连。这样能够很直观地表示属性所要设置的样式效果。

●　属性值：定义属性显示效果的参数，包括数值和单位，或者关键字。

【示例1】定义网页字体大小为12像素，字体颜色为深灰色，则设置如下样式。

     body{font-size: 12px; color: #CCCCCC;}

多个样式可以并列在一起，不需要考虑如何进行分隔。

【示例2】定义段落文本的背景色为紫色，则可以在上面样式基础上定义如下样式。

     body{font-size: 12px; color: #CCCCCC;}
     p{background-color: #FF00FF;}

提示：由于CSS语言忽略空格（除了选择器内部的空格外），因此可以利用空格来格式化CSS源代码，则上面代码可以进行如下美化。

     body {
        font-size: 12px;
        color: #CCCCCC;
     }
     p { background-color: #FF00FF; }

这样在阅读CSS源代码时就一目了然了，既方便阅读，也更容易维护。

1.2.2　应用CSS样式

视频讲解

应用CSS样式的方法包括3种：行内样式、内部样式和外部样式，下面分别进行说明。

1. 行内样式

行内样式就是把CSS样式直接放在代码行内的标签中，一般都是放入标签的style属性中，由于行内样式直接插入标签中，故是最直接的一种方式。

【示例1】在本示例中，针对段落、<h2>标签、<em>标签、<strong>标签以及<div>标签分别应用了CSS行内样式，代码如下，页面演示效果如图1.4所示。

   <p style="background-color:#999900">行内元素，控制段落-1</p>
   <h2 style="background-color:#FF6633">行内元素，h2标题元素</h2>
   <p style="background-color:#999900">行内元素，控制段落-2</p>
   <strong style="font-size:30px;">行内元素，strong比em效果要强</strong>
   <div style="background-color:#66CC99; color:#993300;height:30px; line-height: 30px;">行内元素，div块级元
素</div>
   <em style="font-size:2em;">行内元素，em强调</em>

图1.4　行内样式的应用

2. 内部样式

内部样式是将CSS代码写在HTML的<style>标签中，其特点是该样式只能在此页有效。

【示例2】在本示例中，通过内部样式为段落设置显示样式。页面演示效果如图1.5所示。

图1.5　内部样式的应用

注意：<style>标签不仅可以定义CSS样式，还可以定义JavaScript脚本。当<style>标签的type属性值为text/css时，内部代码为CSS样式；当<style>标签的type属性值为text/javascript时，内部代码为JavaScript脚本。

3. 外部样式

外部样式通过HTML的<link>标签，将外部样式表文件链接到HTML文档中，这是最实用的方式。这种方法将HTML文档和CSS文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和CSS样式的可维护性。

【示例3】在本示例中，使用链接式为HTML代码应用样式，书写、更改方便。页面演示效果如图1.6所示。

     <!doctype html>
     <html>
     <head>
     <meta charset="utf-8">
     <link href="lianjie.css" type="text/css" rel="stylesheet" />
     <link href="lianjie-2.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
     <p>我是被lianjie-2.css文件控制的，楼下的你呢？？</p>
     <h3>楼上的,<span>lianjie.css</span>文件给我穿的花衣服。</h3>
     </body>
     </html>

图1.6　外部样式的应用

在上面的示例中，通过link链接两个外部CSS文件，其中将公共样式放入一个CSS文件，当前页面样式放入另一个CSS文件。

☑　lianjie.css文件代码如下。

☑　lianjie-2.css文件代码如下。

CSS文件可以使网站所有页面样式统一，便于管理，减少代码和维护时间。当修改CSS文件时，所有应用此CSS文件的页面样式都将更新。

1.2.3　CSS样式表

视频讲解

一个或多个CSS样式可以组成一个样式表。样式表包括内部样式表和外部样式表，它们没有本质区别，都是由一个或者多个样式组成。

1. 内部样式表

内部样式表包含在<style>标签内，一个<style>标签就表示一个内部样式表。而通过标签的style属性定义的样式属性就不是样式表。如果一个网页文档中包含多个<style>标签，就表示该文档包含多个内部样式表。

2. 外部样式表

如果CSS样式被放置在网页文档外部的文件中，则称为外部样式表，一个CSS样式表文档就表示一个外部样式表。实际上，外部样式表也就是文本文件，扩展名为.css。当把CSS样式代码复制到一个文本文件中后，另存为.css文件，则它就是一个外部样式表。如图1.7所示就是禅意花园的外部样式表（http://www.csszengarden.com/）。

可以在外部样式表文件顶部定义CSS源代码的字符编码。

【示例】下面的代码定义样式表文件的字符编码为中文简体。

     @charset "gb2312";

如果不设置CSS文件的字符编码，可以保留默认设置，则浏览器会根据HTML文件的字符编码来解析CSS代码。

图1.7　禅意花园外部样式表文件

1.2.4　导入外部样式表

视频讲解

外部样式表必须导入网页文档中，才能够被浏览器识别和解析。外部样式表文件可以通过以下两种方法导入HTML文档中。

1. 使用<link>标签导入

使用<link>标签导入外部样式表文件，代码如下。

     <link href="001.css" rel="stylesheet" type="text/css" />

其中href属性设置外部样式表文件的地址，可以是相对地址，也可以是绝对地址。rel属性定义该标签关联的是样式表标签。type属性定义文档的类型，即为CSS文本文件。

一般在定义<link>标签时，应定义3个基本属性，其中href是必须设置属性。具体说明如下。

☑　href：定义样式表文件URL。

☑　type：定义导入文件类型，同style元素一样。

☑　rel：用于定义文档关联，这里表示关联样式表。

也可以在link元素中添加title属性，设置可选样式表的标题，即当一个网页文档导入了多个样式表后，可以通过title属性值选择所要应用的样式表文件。

另外，title属性与rel属性存在联系，按W3C组织的计划，未来的网页文档会使用多个link元素导入不同的外部文件，如样式表文件、脚本文件、主题文件，甚至可以包括个人自定义的其他补充文件。导入这么多不同类型、名称各异的文件后，可以使用title属性进行选择，这时rel属性的作用就显现出来了，它可以指定网页文件初始显示时应用的导入文件类型，目前只能关联CSS样式表类型。

外部样式是CSS应用最佳方案，一个样式表文件可以被多个网页文件引用，同时一个网页文件可以导入多个样式表，方法是重复使用link元素导入不同的样式表文件。

2. 使用@import关键字导入

在<style>标签内使用@import关键字导入外部样式表文件，代码如下。

     <style type="text/css">
     @import url("001.css");
     </style>

在@import关键字后面，利用url()函数包含具体的外部样式表文件的地址。

提示：两种导入样式表的方法比较如下。

●　link属于HTML标签，而@import是CSS提供的。

●　加载页面时，link会同时被加载，而@import引用的CSS会等到页面加载完再加载。

●　@import只在IE 5以上才能识别，而link是HTML标签，无兼容问题。

●　link方式的样式的权重高于@import的权重。

因此，一般推荐link导入样式表的方法，@import可以作为补充方法使用。

1.2.5　CSS注释

视频讲解

在CSS中增加注释很简单，所有被放在“/*”和“*/”分隔符之间的文本信息都被称为注释。

【示例1】整段代码单行注释。

     /* 下面这段代码的作用是建立网页布局 start */
     .head{width:960px;}
     /* 下面这段代码的作用是建立网页布局end */

【示例2】整段代码多行注释。

     /* 下面这段代码的作用是建立网页布局
     它包括头部和尾部宽度设置 start */
     .head{width:960px;}
     .footer{width:960px;}
     /* 下面这段代码的作用是建立网页布局
     它包括头部和尾部宽度设置end */

【示例3】单行代码注释。

上面给出了整段代码单行注释、整段代码多行注释以及单行代码注释，它们的共同点同时也是CSS代码注释的要求：注释语句以“/*”开始，以“*/”结束，中间加入注释内容。下面的例子是进行CSS代码应用并查看浏览器下的效果。

【示例4】在本示例中，将段落和标题分别添加CSS注释。页面演示效果如图1.8所示。

图1.8　CSS代码添加注释

上一章目录下一章