[翻译]标记语言和样式手册 Chapter 10 应用CSS

作者:zhaozy 来源:3user.com 时间:2008-02-02 18:44:00 

阅读上一章:Chapter 9 精简标签

Part 2: Simplebits Of Style  简短精悍的样式

Chapter 10 应用CSS

第一部分主要的焦点放在标记语法的例子上,也探讨了如何在标签上应用CSS进行设计,指定样式细节.在第二章,我们将讨论几种把CSS应用到一份文档,网站,甚至是单一标签上的做法.除此之外也会讨论怎么对早先版本浏览器隐藏CSS内容,让我们能在使用进阶技巧时不会影响到能让所有浏览器,设备读取的标记结构.

在章节最后的"技巧延伸"单元,会介绍不必编写script就能切换字体,色彩,做出多种主题的做法 -- 替换样式表.

如何将CSS应用到文件上?

现在要来探讨四种把CSS应用到文档上的不同做法,每个方法都有自己的优缺点,根据情况而定,四种方法都有可能是最佳选择.这边示范的每个方法都是用了合法的XHTML 1.0 Transitional 语法结构,<html>标签以及<head>配置.

让我们从方法A开始吧.

方法A:<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" 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[
    ... CSS声明放在这边 ...
    ]]>
  </style>
</head>

这个做法也成为内嵌样式表,让你能将所有CSS声明直接写在(X)HTML文件内,<style>标签位于页面<head>之内,可以放进任何你需要的样式.

为type属性指定的 text/css 能确保浏览器理解我们使用的样式语言,是不能省略的,我们也使用W3C建议的CDATA注解语法,对无法处理样式规则的浏览器隐藏这些内容(http://www.w3.org/TR/xhtml1/#h-4.8).

部分理解

使用方法A的重大缺点之一是:有些老旧浏览器(特别是Internet Expleror 4.X 和 Netscape 4.X)会尽全力显示<style>标签内指定的CSS效果,如果你用了任何只有最新浏览器支持的进阶CSS布局,定位规则,那么就可能造成问题.如果把复杂的CSS规则放在<style>标签中,就可能让旧浏览器的使用者得到一片混乱,难以阅读的排版结果.

无法缓存

另一个内嵌样式表的缺点是:放在页面内,就必须在每次读取页面时一并下载,相对之下,稍后提供的其他方法能够让样式表只需下载一次,往后直接使用浏览器的缓存.

修改多次

由于内嵌式样式表存储在XHTML页面内,如果在网站的许多页面使用相同的样式,就代表这些样式会有许多相同的复本,如果需要变更这些样式的话,就必须修改所有使用了相同样式的页面,记住!一次修改许多文档会是件苦差事.

方便开发

提到好处,我发现最初开始编写,测试CSS时,以方法A把所有规则写在我测试用的页面里十分方便,这让我能把标记,样式放在同一个文档里,方便经常修改,在测试完成后,我会以不同的方法将CSS应用到公开版本上,让我们再来看看几种方法.

标签:样式,标记,css,手册
0
投稿

猜你喜欢

  • 详解MySQL数据类型之数字类型正确使用

    2010-06-20 15:02:00
  • 一行Python3代码实现解析地址信息

    2023-11-02 14:27:30
  • JS画5角星方法介绍

    2024-05-13 09:06:36
  • Vue computed 计算属性代码实例

    2024-05-09 15:14:39
  • Python中的并发编程asyncio库入门使用

    2021-02-13 05:03:52
  • Python中的pack和unpack的使用

    2023-08-20 05:24:33
  • 简单了解django索引的相关知识

    2021-10-01 14:55:43
  • OpenCV3.0+Python3.6实现特定颜色的物体追踪

    2021-05-13 09:01:03
  • JavaScript ParseFloat()方法

    2024-04-29 13:35:48
  • Python面向对象中类(class)的简单理解与用法分析

    2021-01-05 00:07:37
  • python 读取以空格分开的文件操作

    2022-09-08 05:33:21
  • python list数据等间隔抽取并新建list存储的例子

    2023-12-30 13:10:04
  • Python Tkinter之事件处理详解

    2021-06-08 07:19:53
  • MySQL创建、修改和删除表操作指南

    2024-01-19 20:32:59
  • 浏览器是怎样工作的二:渲染引擎 HTML解析

    2012-05-09 20:34:20
  • pandas 实现某一列分组,其他列合并成list

    2022-06-12 13:49:21
  • Python time模块时间获取和转换方法

    2022-06-07 11:14:30
  • Python3网络爬虫中的requests高级用法详解

    2023-02-05 16:54:52
  • python实现电子书翻页小程序

    2022-11-16 11:10:29
  • django views重定向到带参数的url

    2023-08-18 14:56:47
  • asp之家 网络编程 m.aspxhome.com