`

WEB2.0标准教程:第四天 调用样式表

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

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

外部调用样式表

在以前,我们通常采用2种方法使用样式表:
页面内嵌法:就是将样式表直接写在页面代码的head区。类似这样:

程序代码 程序代码
<styletype="text/css"><!--body{background:white;color:black;}--></style>


外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。

程序代码 程序代码
<linkrel="stylesheet"rev="stylesheet"href="css/style.css"type="text/css"media="all"/>


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

双表法调用样式表

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

程序代码 程序代码
<linkrel="stylesheet"rev="stylesheet"href="css/style.css"type="text/css"media="all"/>
<styletype="text/css"media="all">@importurl(css/style01.css);</style>


为什么要写两次呢?

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

相关推荐

    2.ASP.NET.2.0.高级编程(第4版) [1/7]

    第4章 ASP.NET服务器控件和客户端脚本 81 4.1 ASP.NET服务器控件 81 4.1.1 服务器控件的类型 82 4.1.2 用服务器控件建立页面 83 4.1.3 处理服务器控件的事件 84 4.2 给服务器控件应用样式 87 4.2.1 控件的常见...

    3.ASP.NET 2.0 入门经典(第4版) [压缩包1/10]

    第4章 成员关系和身份验证 97 4.1 安全基础知识 97 4.1.1 身份——我是谁 97 4.1.2 身份验证——这就是我 98 4.1.3 授权——这是我能做的 98 4.1.4 登录站点 98 4.2 ASP.NET安全性 99 4.2.1 Login控件 99 ...

    ASP.NET2.0高级编程(第4版)1/6

    第4章 ASP.NET服务器控件  和客户端脚本81 4.1 ASP.NET服务器控件81 4.1.1 服务器控件的类型82 4.1.2 用服务器控件建立页面83 4.1.3 处理服务器控件的事件84 4.2 给服务器控件应用样式87 4.2.1 控件的常见属性87 ...

    PHP和MySQL WEB开发(第4版)

    第4章 字符串操作与正则表达式 4.1 创建一个示例应用程序:智能表单邮件 4.2 字符串的格式化 4.2.1 字符串的整理:chop()、ltrim()和trim() 4.2.2 格式化字符串以便显示 4.2.3 格式化字符串以便存储:addslashes()和...

    PHP和MySQL Web开发第4版pdf以及源码

    第4章 字符串操作与正则表达式 4.1 创建一个示例应用程序:智能表单邮件 4.2 字符串的格式化 4.2.1 字符串的整理:chop()、ltrim()和trim() 4.2.2 格式化字符串以便显示 4.2.3 格式化字符串以便存储:...

    PageNavigater 2.0(含ASP.NET DEMO)

    第一个参数,如上例中的20, 表示一页有多少条数据 第二个参数,如上例中的255,表示总共有多少条数据 第三个参数,如上例中的1,表示当前页为第1页 第四个参数,如上例中的...

    asp.net知识库

    Web2.0时代,RSS你会用了吗?(技术实现总结) 知识集锦:三分钟全面了解 Blog 和 RSS C#+ASP.NET开发基于Web的RSS阅读器 ASP.NET RSS Toolkit(RSS工具) Serialize Your Deck with Positron [XML Serialization, XSD, ...

    WebSphere快速入门

    第4部分 其它考虑 83 附录Ⅱ IBM WebSphere Studio实验指导 84 Lab1A(Fusion 1):创建JKToys网站 84 第一部分:创建一个新的NetObjects Fusion站点叫做JKToys 84 第二部分:为JKToys站点创建一个新的站点风格 84 第...

    PHP和MySQL Web开发第4版

    第4章 字符串操作与正则表达式 4.1 创建一个示例应用程序:智能表单邮件 4.2 字符串的格式化 4.2.1 字符串的整理:chop()、ltrim()和trim() 4.2.2 格式化字符串以便显示 4.2.3 格式化字符串以便存储:...

    《CSS全程指南》随书光盘

    2.2 调用样式表 23 2.2.1 内嵌样式 23 2.2.2 内部样式表 23 2.2.3 外部样式表 25 2.3 CSS的单位 27 2.3.1 长度单位 27 2.3.2 百分比单位 28 2.3.3 颜色单位 28 2.3.4 URL单位 29 2.4 基本语法 29 2.5 选择器 30 ...

    动易内容管理系统WAP2.0适配程序

     ●前台页面设计(样式)和程序基本分离,可以通过外置样式表(style.css)进行样式设置。  ●栏目支持二三级分类,二三级栏目可以混用,每一级支持无限个子栏目。支持无限个专题。  ●支持中文一键切换功能,方便...

    动易SiteWeaver内容管理系统WAP2.0适配程序 V1.0.rar

     ●前台页面设计(样式)和程序基本分离,可以通过外置样式表(style.css)进行样式设置。  ●栏目支持二三级分类,二三级栏目可以混用,每一级支持无限个子栏目。支持无限个专题。  ●支持中文一键切换功能,...

    ASP.NET4高级程序设计(第4版) 3/3

    第4章 服务器控件 97 4.1 服务器控件的类型 97 4.2 HTML服务器控件 99 4.2.1 HtmlControl类 100 4.2.2 HtmlContainerControl类 100 4.2.3 HtmlInputControl类 100 4.2.4 HTML服务器控件类 101 4.2.5 ...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    第4章 服务器控件 4.1 服务器控件的类型 4.2 HTML服务器控件 4.2.1 HtmlControl类 4.2.2 HtmlContainerControl类 4.2.3 HtmlInputControl类 4.2.4 HTML服务器控件类 4.2.5 设置Style特性和其他属性 ...

    div+css有实例,易学易懂

    4.5.1 调用样式表的几种方法 4.5.2 应用样式的优先级 4.6 网页头部实例 第 5 章 CSS 基本布局属性 第50 页 5.1 页面的制作流程和整体分析 5.2 元素定位基础知识 5.2.1 块元素的默认排列 5.2.2 内联元素的默认排列 ...

    JavaScript王者归来part.1 总数2

     第4章 语言结构  4.1 JavaScript的基本文法   4.2 常量和变量   4.3 表达式和运算符符   4.4 控制语句 句   4.5 总结   第5章 数据类型  5.1 基本数据类型   5.2 数组和对象   5.2.1 数组   ...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    第4章(/C04/) 4.1.htm 简单表达式的例子 4.2.htm 两个字符串进行加操作的实例 4.3.htm 减号的取反功能 4.4.htm 变量赋值的例子 4.5.htm 把表达式赋值给一个变量的方法 ...

    给力论坛源码 标注:用iis访问就会有样式

    DotBBS V2.1 介绍 DotBBS是一个Asp.Net开源论坛,轻量、安全、易扩展。...3 对使用DotBBS免费版用户,DotBBS中所集成的第三方控件、组件等所涉及版权问题,由用户自己按第三方控件、组件提供商规定的版权授权方式使用。

Global site tag (gtag.js) - Google Analytics