当前位置: 代码迷 >> Web前端 >> Cascading Style Sheets 资料的引入
  详细解决方案

Cascading Style Sheets 资料的引入

热度:365   发布时间:2012-08-26 16:48:05.0
Cascading Style Sheets 文件的引入

//---------------------------
//---------------------------

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

//---------------------------
//---------------------------

//---------------------------
//---------------------------

  <style type="text/css">
   .....
  </style>

//---------------------------
//---------------------------
  
  //Warning: css pictures path issue
    1.background:url("xxx.jpg") change to background:url(xxx.gif)
      //because some browsers can not understand '"'
    2.if(picture-path == css-file-path){
          background:url(xxx.gif);
      }else{
           background:url(../xxx.gif);
      }
    3. ../ means upper level.上一级

 //tips:
 /*我们通常用link的方法直接引用一个CSS文件到HTML(或其它活动文档)文件中。我们会发现有时候我们的图片无法显示了。此时,请查看你的CSS代码,是不是重复设置有问题,是不是图片的定位有问题。如果这些都没有问题请去掉background的重复与定位属性,还原成默认性。如果图片还是没有出现,那只能是我们今天所说的路径问题了!在一般情况下,我们习惯于这样设置图片路径:
*/
Example Source Code:
background-image:url(logo.jpg);
background-image:url(../logo.jpg);
background-image:url(../images/logo.jpg);

/*
  对于第一种情况“url(logo.jpg)”。我们要看此图片是不是与CSS文件在同一目录。对于第二与第三种情况,我们是极力不推荐使用的,因为我们的网页文件可能存在于多级目录中,不同级目录的文件位置注定了我们的相对路径是不一样的。而这样就让问题复杂化了,很可能图片在这个文件中显示正常,换了一级目标,图片就找不到影子了。

  有一种方法可以轻松解决这一问题,我们可能建立一个公共文件目录,用来存放一些公用的图片文件,JS脚本,CSS文件,例如“common”,我们将CSS文件直接置于该目录中,也可以将图片文件也直接存于该目录中,如果图片文件较多在其内部建立一个目录存放图片文件“common/images”。我们在CSS文件中直接写:url(logo.jpg)或url(images/logo.jpg)就可以搞定上面的问题了。
*/
  相关解决方案