标记语言——应用CSS

创建日期：2008年7月23日来自：蓝色理想浏览：316次作者：匿名

方法C:@import

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<style type="text/css">
    <![CDATA[
      @import "styles.css";
    ]]>
</style>
</head>

与方法B类似,使用@import能以相对路径(像是上面的例子)或绝对路径从外部文件导入CSS定义.

方法C与使用<link>标签有着相同优点,由于样式表放在外部文档中,修改并更新单一文档就能改变整个网站,而且能简单快速地完成.外部样式表会被浏览器缓存下来,为导入相同样式表的所有页面节省下载时间.

捉迷藏

使用方法C的重大好处是:Netscape 4.X以下版本并不支持@import语法,因此会使被引用的CSS内容"藏起来",这肯定是个好用的技巧,因为我们能以此编写进阶CSS语法处理布局之类的设计细节,让能够处理的最新浏览器显示它们,同时也能让老旧浏览器忽视这些语法.

Netscape 4.x的问题在于:它认为它的CSS支持能力与真正支持的浏览器一样好.因此,除了Netscape 4.x之外,我们都能让浏览器自己决定是否显示正确的效果.

这是以标准设计网站时的重点,尽量把结构化标记代码与显示方式分开,并且为支持的浏览器提供布局细节,其他样式.老旧的浏览器则去他们能轻易读取,显示的结构内容,但不会处理为他们隐藏起来的进阶CSS规则.

打开样式,关闭样式

看看图10-1和10-2,并且比较一下,这是我的个人网站使用完整CSS,接着关掉CSS的显示效果(应该十分接近老旧浏览器的显示效果),不使用CSS时的结构仍然十分明显,所有人仍然容易阅读,使用.如果我们没有把显示布局需要的CSS隐藏起来,那么旧版本浏览器的使用者或许就会拿到一团难以阅读的内容.

图10-1 我的个人网站,使用CSS

图10-2 同一个页面,拿掉CSS,古旧浏览器可能把它显示成这样

责编：yezi
相关搜索：标记语言应用CSS

上一篇：Photoshop制作Cute风格图标
下一篇：元素层叠级别及z-index剖析

嗷嗷毙技术网版权申明：大家可以自由转载我站点的文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来链接，自行链接）。文章版权归作者所有。
特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有，文章若有侵犯作者版权，请与我们联系，我们将立即删除修改。

子栏目

搜索

Web

本站

最新热门推荐随机

Photoshop教程：打造长颈鹿的音乐壁纸特效
本文由中国教程网飘零的枫叶编译，转载请保留此信息！在国外网站上看到的效果，感觉蛮不错，

photoshop初级教程：教你制作投影的简单方法
最终效果： 1.打开图片把图呕出来，选中要做投影的图片，然后在图层样式选择投

Flash鼠绘新手入门教程：绘制逼真螳螂的方法
本文由中国教程网 zctmh0336(诚信为人) 原创，转载请保留此信息 “Flash动画鼠

Photoshop合成教程：打造非主流颓废效果
素材来自形色素材图1 素材图2 最终效果图另一种效果图

Photoshop手绘教程：绘制水墨梅花入卷轴效果中国教程网论坛
本文由中国教程网四季轮回原创，转载请保留此信息！　　梅花的枝条表面具有很大的不规则性，

暗夜中的华丽：褪去浮华疯狂的爱上你

极致美胸诱惑——回忆那曾经的汹涌波涛

广告摄影师的把戏：眼球爆炸，视线模糊

惊艳的空中摄影：男人们高高在上的梦想
当摄影遇到飞机，那些由云朵构成的世界，那些被阳光照射着的梦想，顷刻间离生活很近很真实

让世界瞩目！2007洛杉矶车展顶级跑车赏
　　作为北美地区仅次于底特律车展的重要汽车盛会，洛杉矶车展历来都会受到各方的瞩目。不过，限于条件

过季荷花别样红
夏天都过去了，我那卷放了Ｎ久的胶片才冲洗出来，还要感谢老崔帮忙扫描，要不然猴年马月才能跟各位见面

极致美胸诱惑——回忆那曾经的汹涌波涛

洞房花烛夜完美婚房装修设计六大看点
新婚燕尔，前来祝福的亲朋好友络绎不绝，因此客厅的布置不易太过特立独行，应以舒适亲切为主，既要

墨西哥设计师Lourdes Zolezzi海报设计

分离设计! Mac Tablet概念笔记本电脑!
笔记本的概念机型总能让人提起无尽遐想，最近由国外媒体曝光的一款苹果概念机型再一次引起了网友的极大兴趣

巴黎广场设计方案

Mouse Category 精致图标设计

Photoshop打造个性时尚的梦幻壁纸
先看一下最终效果： 1、新建一个壁纸大小的文件。 2、选择渐变工具，颜色设置如图1，绘制图2所示

Julian Lwin灯具设计

2007国际室内设计大奖五位获奖者作品赏
　　　　　　这是2007国际室内设计大奖五位得主的作品。这五位得奖者分别为Wonderwal

系统系	- 操作系统 - 工具软件 - 病毒安全 - Vista专区	WEB2.0	- 奇趣 - 发现分享 - 评论员文章	视　频	- 体育 - 娱乐 - 科技 - 教程
办公系	- Word - Excel - Powerpoint - 网站建设	动画系	- Flash - Ascript - Flex - MsE Design 教程	编程系	- Asp - Asp.Net - Php - Jsp、Java - CGI/perl
艺术系	- 酷赏 - 工业 - 建筑 - 界面 - 平面 - 视觉	网站系	- HTML/Xhtml - Js、Ajax - Css - XML、XSLT	下　载	- 图形图像 - 多媒体 - 系统办公