第4天:调用样式表

用web标准设计网站，过渡的方法主要是采用XHTML+CSS，css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS，如果你以前不常用，那么现在就开始学习吧。要制作符合web标准的网站，不懂CSS是设计不出漂亮的页面的。

事实上，所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局，现在要改用DIV来定位和布局。这是思维方式的变化，一开始有些不习惯。呵呵，任何变革都会有阻力的，为了享受标准带来的"益处"，放弃一些老的传统做法是值得的。

外部调用样式表

在以前，我们通常采用2种方法使用样式表：
  • 页面内嵌法：就是将样式表直接写在页面代码的head区。类似这样：
<style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>
  • 外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

在符合web标准的设计中，我们使用外部调用法，好处不言而喻，你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

双表法调用样式表

查看某些符合标准站点的原代码，你可能看到，在调用样式表的地方有如下2句：

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /> <style type="text/css" media="all">@import url( css/style01.css );</style>

为什么要写两次呢？

实际上一般情况下用外联法调用(就是第一句)就足够了。我这里使用双表调用只是一种示例。其中的"@import"命令用于输入样式表。而"@import"命令在netscape 4.0版本浏览器是无效的。也就是说，当你希望某些效果在netscape 4.0浏览器中隐藏，在4.0以上或其它浏览器中又显示的时候，你可以采用"@import"命令方法调用样式表。

赞 (0)

相关推荐

  • 第4天:调用样式表

    用web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的.这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧.要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的. 事实上,所有表现的地方都需要用CSS来实现.我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局.这是思维方式的变化,一开始有些不习惯.呵呵,任何变革都会有阻力的,为了享受标准带来的"益处",放弃一些老的传统做法是值得的. 外部调用样式表在

  • 双表法调用样式表

    用web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的.这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧.要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的. 事实上,所有表现的地方都需要用CSS来实现.我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局.这是思维方式的变化,一开始有些不习惯.呵呵,任何变革都会有阻力的,为了享受标准带来的"益处",放弃一些老的传统做法是值得的. 外部调用样式表

  • javascript实现根据iphone屏幕方向调用不同样式表的方法

    本文实例讲述了javascript实现根据iphone屏幕方向调用不同样式表的方法.分享给大家供大家参考.具体如下: 当iphone屏幕旋转式,这段JS代码可以动态调用不同的样式来适应屏幕变换 <script type="text/javascript"> function orient() { switch(window.orientation){ case 0: document.getElementById("orient_css").href =

  • asp.net在后端动态添加样式表调用的方法

    本文实例讲述了asp.net在后端动态添加样式表调用的方法.分享给大家供大家参考.具体实现方法如下: HtmlLink CssControl = new HtmlLink(); CssControl.Href = url; CssControl.Attributes.Add("rel", "stylesheet"); CssControl.Attributes.Add("type", "text/css"); page.Hea

  • Mootools 1.2教程 设置和获取样式表属性

    欢迎开始这一系列的教程的第七讲.今天,我们来看一下如何通过MooTools 1.2和我们以前几讲中的内容来操作样式,这将给你在UI上带来很大的控制权.处理样式非常简单,不过今天我们要做一些调整.例如,我们要介绍键值对(key-value pair)对象.我们也会讲到在domready之外来传递变量,就像我们在关于函数的那一讲中学到的一样.从这里开始,我们会开始慢慢提高难度,介绍一些必要的编程概念.如果你是JavaScript新手或者第一次开始学MooTools,请确保你在明白了前面的教程,你可以

  • JS函数实现动态添加CSS样式表文件

    先给出函数. 复制代码 代码如下: varaddSheet=function(){ vardoc,cssCode; if(arguments.length==1){ doc=document; cssCode=arguments[0] }elseif(arguments.length==2){ doc=arguments[0]; cssCode=arguments[1]; }else{ alert("addSheet函数最多接受两个参数!"); } if(!+"v1"

  • 使用JavaScript创建新样式表和新样式规则

    如今的这个年代,流行在Web页面上使用了大量的JavaScript,我们需要寻找各种方式来优化它们,使它们更快.我们使用事件委托来让事件监听器更有效率,使用降频技术来限定某些方法的使用次数,使用各种JavaScript加载器来动态加载我们需要的资源,等等.另外一种让页面更高效.更敏捷的方法是动态的添加或移除样式表里的样式,而不需要去查询DOM元素,对每个元素做样式调整.下面我们就来看看如何使用这种技术! 捕获样式表 你的页面上可能引用了不只一个的样式文件,你可以选择其中的一个.如果你指定了某个,

  • 发现四种在网页中使用CSS样式表的方法

    如何在网页中插入CSS 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式. 1. 链入外部样式表  链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用< link >标记链接到这个样式表文件,这个标记必须放到页面的< head >区内,如下:  复制代码 代码如下: <head>   --   &l

  • 详谈 CSS样式表使用：链接/嵌入

    在阿捷的w3cn中,他说: 引用内容在以前,我们通常采用2种方法使用样式表:页面内嵌法:就是将样式表直接写在页面代码的head区.类似这样:<style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用.<link rel="styles

  • JavaScript动态加载样式表的方法

    本文实例讲述了JavaScript动态加载样式表的方法.分享给大家供大家参考.具体如下: 如果需要更换皮肤,我们可以通过JS代码动态加载皮肤的样式表,下面的代码就可以做到,非常简单,你只需要把这段代码做成函数动态调用即可. var el = document.createElement('link'); el.rel = 'stylesheet'; el.type = 'text/css'; el.href = 'http://www.jb51.net/...' + 'styles.css';

随机推荐