【学习DIV+CSS】2. 学习CSS(一)--CSS控制页面样式

1. CSS如何控制页面

  使用XHTML+CSS布局页面,其中有一个很重要的特点就是“结构与表现相分离”(结构指XHTML,表现指CSS)。有人这样描述这种分离的关系,结构XHTML好比一个人,表现CSS好比是衣服,如何让CSS去控制页面,好比是如何让衣服穿在人身上。不同的CSS就可以使页面出现不同的风格适应不同的网站,而不同的衣服,人穿上后就会体现不同的职业。

  1.1 如何让CSS去控制页面?

    CSS控制页面的样式有四种,分别是:行内样式、内嵌样式、链接样式、导入样式。

    1)行内样式: 

      行内样式是4中样式中最直接最简单的一种,直接对html标签使用 style="",例如:

          <span style="color:#ffffff; font-size:15px;">行内样式</span>

         虽然这种方式比较直接,但是过多的style属性代码会导致html页面不够纯净,造成文件体积过大,冗余过多,不利于搜索蜘蛛爬行,同时会造成后期运维成本的提高。   

    2) 内嵌样式:

      内嵌样式是将css代码写在<head></head>之间,并且使用<style type="text/css"></style>进行声明,例如:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

   <title>内嵌样式</title>
  <style type="text/css">

    .class1{color:#ffffff; font-size:15px;}

  </style>
</head>
<body>

  <span class="class1">内嵌样式</span>
</body>

</html>

      如果一个网站或系统的页面不是很多的情况,使用内嵌样式到是个不错的选择,如果有很多页面的话就会造成每个页面的文件都很大,不利于CSS样式共享不说,也会给后期的维护工作带来很大的难度。

    3)链接样式:

      链接样式可以说是使用频率最高,最实用的一种方式了,只需要在<head></head>加上<link href="css文件路径" type="text/css" rel="stylesheet"/>即可,举个示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

   <title>链接样式</title>
  <link href="../Common/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>

  <span class="class1">链接样式</span>
</body>

</html>
.class1{color:#ffffff; font-size:15px;}

      这种方式将HTML文件和CSS文件彻底的分成了两个或多个文件,实现了页面框架HTML代码与表现CSS代码的完全分离,使得前期制作和后期的维护变的方便,并且如要要保持界面风格统一,只需要把这些公共的CSS文件单独保存成一个文件,其他的页面就可以分别调用自身的CSS文件,如果需要改变网站或系统风格,也只需要改动公共的CSS文件即可,这才是我们XHTML+CSS制作页面提倡的方式。

 

    4)导入样式:

     导入样式和链接样式比较相似,采用import方式导入css样式集,在HTML页面初始化时,会被导入到HTML文件中,成为文件的一部分,类此第二种内嵌样式。建议大家采用链接方式。

       注:导入样式和链接样式有什么区别呢?

link
 link就是把外部CSS与网页连接起来。

@import
 import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件。

为什么使用@import
大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.
另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.这样看起来更容易管理.

为什么使用link
使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel="alternate stylesheet"属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.

@import的小毛病
 如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.
04-11更新:  @import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.

到底要用那种方式
就目前看来小型的网站还是使用link比较合适(或者说比较流行),当然如果将来我们需要把CSS进行模块化管理也肯定要用到@import.

 

  1.2 样式的优先级

    如果这上面的四种的两种处于同一页面,就会出现优先级问题,四种样式的优先级是按照“就近原则”:

          行内样式 > 内嵌样式 > 链接样式 > 导入样式

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。