XHTML和样式表

作者: Drew Decker / 翻译:W3POP.COM / 2007-4-5
<script type=text/javascript> </script>
Briefly...
简述

The web is changing. The web is actually changing everyday; different languages, algorithms, concepts, and ideas. It seemed as if, after learning HTML, I started hearing rumors of XHTML.

网络正在改变。事实上,网络每日都在发生变化;不同的语言、运算法则、概念和思维。正如你刚学完了 HTML ,似乎 XHTML 又隐约出现了。

Introduction to XHTML
XHTML
简介

XHTML (eXtensible Hypertext Markup Language) is the redefinition in XML of HTML defined in SGML. XHTML1.0 became a W3C Recommendation on January 26th, 2000 as the redefinition of HTML 4.0/4.01. XHTML has a high affinity with both HTML and XML, and is expected to be the description language of Web contents that can be processed by XML-compliant tools. XHTML 1.1 became a W3C Recommendation on May 31st, 2001. In addition, XHTML Basic became a W3C Recommendation as a subset of XHTML for mobile devices. As of right now, there is a working draft of XHTML 2.0. The new version will include Ruby support and a few other very important new modules that, yet again, make the web more dynamic and well-formed.

XHTML
(扩展超文本标记语言),它是通用标记语言标准下 HTML XML 范畴内的定义。 XHTML1.0 2000 1 26 作为 W3C 的推荐标准,即: HTML 4.0 / 4.01 XHTML HTML XML 关系密切。人们普遍期待着它能够作为遵循 XML 的用于描述网页内容语言的工具。 XHTML 1.1 2001 3 31 编程 W3C 的推荐标准。另外, XHTML Basic 作为 W3C 推荐的关于开发手机设备的 XHTML 语言中的一个子集。到现在为止,已经拥有了 XHTML 2.0 工作草案。新版本将包含珍贵的支持以及非常重要的全新模式,再者,它可以使整个网站看上去更富动态,并且很好地定义了网站的形式。

The Ten Commandments of XHTML
XHTML
的十诫

XHTML, as with anything and everything else in life, has rules. If there weren't any rules, where would the web be? (That's a whole other topic) So there are ten basic rules, as set out by the W3C, for an XHTML document; also known as, the ten commandments of XML:

XHTML
就像生活中的每一种事例一样,有其自己的准则。如果没有规则存在,那么何来网络?(这是另外一个话题了)因此,这里有十条针对 Xhtml 文档的准则,是由 W3C 发布的;与 XML 的十诫雷同:
1.      XHTML/XML shall be straightforwardly usable over the Internet.
XHTML/XML
应该在互联网中正当使用。

2.      XHTML/XML shall support a wide variety of applications.
XHTML/XML
应该支持各种类型的应用程序。

3.      XHTML/XML shall be compatible with SGML.
XHTML/XML
应该符合 SGML [ 通用标记语言标准 ]

4.      It shall be easy to write programs which process XHTML/XML documents.
对于执行 XHTML/XML 文档的程序书写应该非常简便

5.      The number of optional features in XHTML/XML is to be kept to the absolute minimum, ideally zero.
XHTML/XML
的附加功能应该绝对少,甚至没有。

6.      XHTML/XML documents should be human-legible and reasonably clear.
XHTML/XML
文档应该清晰易读。

7.      The XHTML/XML design should be prepared quickly.
使用 XHTML/XML 进行设计应该具备方便快捷的特征。

8.      The design of XHTML/XML shall be formal and concise.
XHTML/XML
的设计应该正规并且简明。

9.      XHTML/XML documents shall be easy to create.
XHTML/XML
文档应该易于创建。

10.  Terseness in XHTML/XML markup is of minimal importance.
是否需要简化 XHTML/XML 标记并不重要
These guidelines must be followed to create a well-formed, validated XHTML document.

创建形式优秀的、有效的 XHTML 文档必须遵循这些准则。

Basics You MUST Know
你必须知道的准则

In an XHTML document, there are a few things that must be a "standard". These are the rules that must be followed to correctly validate an XHTML document.

XHTML 文档内部,有些东西必须符合所谓的“标准”。如果你希望正确地创建有效的 XHTML 文档,那么,你必须遵循这些准则:
1.      XHTML elements must be properly nested
XHTML
元素必须被合理嵌套

2.      XHTML documents must be well-formed
XHTML
文档必须格式精确

3.      Tag names must be in lowercase
小写字母定义标签

4.      All XHTML elements must be closed
所有的 XHTML 元素必须有结束符
1.      Properly nested elements mean that you can't improperly nest within each other like this:

适当得嵌套元素 意味着你不能像下面这样非法嵌套标签:

<i><b>This is bold, italic text</i></b>
Which should actually be this to be properly nested:

应该像下面这样进行嵌套;

<i><b>This is bold, italic text</b></i>
2.      Well-formed documents are a must, and at the same time, can help you maintain a very good structure for not only XHTML, but programming too.

必须定义正确格式的文档,同时,它可以帮助你保持一个很好的结构,这不仅仅是对于 XHTML 来说的,同时也包括整段程序。

XHTML elements must be nested within the <html> root element. While the other elements can have child elements. Child elements must be in pairs and correctly nested within their parent element:

XHTML
元素必须嵌套在 <html> 根元素中。然而,其它元素可以包含子元素。子元素必须成对出现,并且被正确地嵌套在它们的父元素中:

<div>
<p><strong>This is a paragraph!</strong></p>
<p>The turkey ran away from the butcher</p>
</div>
3.      Lowercase is a MUST !!! A lot of people, as I have seen, like to capitalize HTML code; this is a no-no in XHTML:

必须使用小写字母 !!!我看到很多人喜欢用大写字母的形式来书写 HTML 代码,但这对于 XHTML 来说,绝对不行:

<A HREF="page.html">Link Here!</A>
Now with XHTML you must have all code in lowercase, like so:
   
   
现在,只要是关于 XHTML 的代码,你必须全部使用小写字母的形式,就像下面这样:
   
<a href="page.html">Link Here!</a>
4.      All tags must be closed. Yes, even empty tags. Empty tags are the tags that, in HTML 4.0/4.01, that weren't required to be closed; break tag, horizontal rule tag, etc:

所有的标签必须有结束符 。甚至是空标签。在 HTML4.0 / 4.01 中,空标签不要求有对应的结束标签,如:换行符 <br> ,段落标签 <p> 等等:

<p>
This is a paragraph!<br>
And I have some text right below it!
In XHTML, you would find this code written as:

XHTML 中,你会发现上述代码应该以下面的形式书写:

<p>
This is a paragraph!<br />
And I have some text right below it!
</p>
You must follow at least those four basic steps of XHTML in order to correctly validate you XHTML code.

你至少遵循上述的四条 XHTML 的基本准则,目的是为了正确地创建行之有效的 XHTML 代码。

XHTML...XML??
Anyone confused of where XML comes into the picture? Have you heard of XML and XHTML having something in common? Well, partly they do, and partly they don't. HUH?

XHTML…XML
??
很多人都困惑,到底 XML 的那点引起了人们的注意?你听说过 XML XHTML 的共同性吗?是的,它们有些内容类似,但有些却存在不同。嗯哼?

Let's get to the point. XHTML is a markup language written in XML; therefore, it is an XML application. So XML is a part of XHTML; that's why you must have complete, well-formed documents that validate entirely in order to call your document XHTML. The "Ten Commandments of XHTML" are the same as XML. The rules go hand in hand. So, a quick, non-technical description of XHTML is: XHTML is a hybrid between HTML and XML.

让我们切入主题吧。 XHTML 是一种用 XML 写成的标记语言;因此,它是一个 XML 应用程序。所以, XML XHTML 的一部分;这就是为什么你要很好的定义文档格式,是之整体有效的原因,只是为了能够称它为 XHTML 文档。“ XHTML 的十诫”与 XML 相同。规则互通。因此, XHTML 简练而非专业的描述就是: XHTML HTML XML 的混血儿。

XHTML uses three XML namespaces (used to qualify element and attributes names by associating them with namespaces identified by URI references. Namespaces prevent identically custom-named tags that may be used in different XML documents from being read the same way), which is like the three HTML 4.0 DTDs: Strict, Transitional, and Frameset.

XHTML
使用三种 XML 的命名空间(通过将元素和属性名称与 URI 参数确认的命名空间联系起来,从而证明它们的有效性。同样地,命名空间阻止了 可能用于不同的 XML 文档的自定义标签 功能与之类似的原标签 以相同的方式读取的情况),这就像三个 HTML 4.0 DTD[document type definition :文件类型定义 ] :严谨、过渡性和框架。

XHTML markup must conform to the markup standards defined in a HTML DTD. When applied to Net devices, XHTML must go through a modularization process. This enables XHTML pages to be read by many different platforms.

XHTML
标记必须遵循 HTML DTD 内定义的标记标准。当应用于网络设备时, XHTML 必须经历一个模块化过程。这可以使得 XHTML 页面被多个不同的平台读取。

Style Sheets, You're My Hero!
A stylesheet is often used in association with structural markup to apply visual formatting to a document. This means that the content of a document, or a collection of documents, can be separated from the presentation. This has a number of advantages. It means that the author does not have to repeat similar presentational information for every instance of a given feature, such as a book title, in every document. It also means that the document can be output in a different format altogether. This can be especially useful when producing material that is accessible to those for whom display on a screen is not useful, such as blind or partially sighted people. A style sheet could be used to generate a Braille or audio version of a document. Equally, the style sheet might simply add color or size characteristics to text for display. Finally, it could control the order and selection of elements to be displayed, such as is commonly done with XSLT and CSS (Cascading Style Sheets).

样式表,你是我的英雄!
样式表通常与结构化标记语言一起使用,从而定义文档的可视化格式。这就意味着文档和文档集的内容可以从表现形式中分离出来。这样做有很多好处。这表示,作者不需要为每个给定的特征重复书写同样的表示具体表现形式的信息,如每个文档中的书本标题;同样地,这也意味着可以同时以不同的形式输出。对于盲人或弱视群体来说,将资料输出到显示器上对他们来说毫无效果,这种情况下,样式表就非常有用。使用样式表可以产生出盲人专用文档和发生文档。同时,样式表可以非常方便地为所显示的文本内容添加颜色和尺寸特征。最后,它还可以控制元素的现实顺序,或选择特定的元素进行显示,这就如同 XSLT CSS[ 样式表 ] 通常所做的那样。

Since we are covering XHTML, we will talk more about CSS. CSS separates content (XHTML) from presentation (CSS), meaning you can change the whole appearance of the website (or set of documents) with a simple change in the CSS document.

因为我们的重点是 XHTML ,因此,我们将谈论更多关于 CSS 的东西。 CSS 将内容( XHTML )从表现形式( CSS )中分离出来,意味着你可以在 CSS 文档中做出一个简单的改变就可以改变整个网站文档的表现形式。

As with this article, I do not discuss what a stylesheet consists of, that can be covered in a tutorial later on.

当说完这篇文章后,我就不再讨论关于样式表的组成部分了。这些内容可以在后面的教程中加以阐述。

The Stylesheet
The stylesheet (styles.css) is what we will be using to separate the presentation from the content. The examples I will list will be useful for a web-based project and will go into detail what they output, and why you would do it this way.

样式表
样式表( style.css )是用于将内容的表现形式单独从内容中分离出来。我将列举的案例对于以网络为基础的项目非常有用,并且将对他们的输出效果注意叙述,并且解释为什么要这样做的原因。

A stylesheet consists of a selector, property names, and values; what is, when put together, is called a statement (See figure 1).

一张样式表包括选择器、合适的名称和值;如果把这些东西写在一起就叫做语句(见图表 1 )。

图表
1 源自 WestCIV (WestCIV 版权所有 )
Great Examples, Make Great People
Okay, here come the examples of how to code a stylesheet. I stylesheet is fairly easy to read and follow. There is really not that much logic in it, like PHP and other programming languages. When I say logic, I mean you don't really have to think about it; it comes quite natural, but you DO have to think about it.

伟大的案例,创造伟大的人
ok ,下面我们举几个例子,说明如何来书写样式表代码的方法。这些样式表都相当简单易懂,易于理解。里面并没有像 PHP 和其它程序那样包含过多的逻辑。我的意思是,你不需要过多的考虑它的逻辑方面;它看上去太普通了,但你需要分析它。

Say you want your whole site to have a default font of verdana with a size of 12 pixels, and a color of black. You also want your default background color to be white and the margins to be set to the top left-hand corner of the page so that your site is more formal. The code would be:

可以这样说,你希望你的整个网站的字体是“ verdana ”,并且字体尺寸是 12 像素,颜色是黑色。你希望默认的背景色是白色,并且,你希望将边界设置在页面的左上角,这样可以使你的网站看上去更加正规。具体代码如下:
.body {
"Minion Web", Helvetica, sans-serif;
font-size: 12px;
font-color: #000000;
background-color: #ffffff;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
This code does everything stated at the top, but the reason it does all this is because it states, unless overwritten by a different rule, that any content in the <body> tag will have the font set at verdana with a text size of 12 pixels and black font color. Margins will be set at 0 pixels, and the background is white.

这段代码固定地写在页面顶部,这样做的原因就是因为它已经逐渐变成广大设计师的固定做法了,除非使用一个完全不同的规则重写。如上述代码规定的那样,在 <body> 标签内书写的字体都是“ verdana ”,字体尺寸是“ 12 像素”,字体颜色是黑色,边界为 0 像素,背景色是白色。

Another example would be how to format a paragraph to have a set font, font size, font color and padding:

另外一个例子是:如何定义一个段落,使其拥有固定字体、字体颜色和留白:
p {
"Minion Web", Helvetica, sans-serif;
font-size: 12px;
font-color: #000000;
padding: 7px;
}
Simply, this set of code assigns the font verdana with a 12 pixel font size being the color black and padding of 7 pixels to each paragraph tag. This means that everytime a paragraph tag is opened, this style will take effect.

简单地说,这组代码指定了“ verdana ”字体,“ 12 像素”字体尺寸,“黑色”字体颜色,每个段落标签留白 7 像素。这意味着,每当开打一个段落标签时,这段样式都会发挥作用。

Hold My Hand Comments
Comments, comments, comments. No no, not me. I mean your CSS comments. When you write CSS code, and base your website off of separating content from presentation, your style sheets are going to usually be larger than you XHTML code. Commenting you CSS code is critical for updating a certain style and troubleshooting browser bugs. CSS uses C# style comments.

迟迟不愿意作注释
注释、注释、注释,不,不是在提醒我。我是在提醒你要作 CSS 注释。当你书写 CSS 代码时,以你的网站为基础,将内容和表现形式分离开来。所书写的样式表的篇幅通常比 XHTML 代码的篇幅更大。因此,为你的 CSS 代码作注释对更新特定的样式和解决浏览器漏洞来说至关重要。 CSS 使用的是与 C# 相同的注释格式。

A regular comment:
注释的通俗写法:

// This is a regular CSS comment.
//
这是一个最常见的 CSS 注释。

A block style CSS comments:
CSS
区块注释:
/* This is a block style CSS
Comment. Anything in this comments will not
be outputted by the browser.
*/
A 'Prettier' block style CSS comment:
更漂亮的 CSS 注释风格:
/*
=================================================
Wanna get cute with a CSS comment? Well you can |
By adding other special characters to make your |
Comments stand out a lot better. Try using and |
Equals sign or something. |
=================================================
*/

Remember, comments are you friend. USE THEM. If you don't use comments, you will truly regret it.

请记住,注释是你的朋友。请使用注释。如果你不使用注释,你会后悔的。

Conclusion
结论

Although web standards change daily, as with new technology, separating XHTML from CSS is a major step by far the best thing you could do. Better standards and better results keep more users happy. Still many people are coding in HTML 4.01, but have noticed a lot of people are going the XHTML route. CSS becomes XHTML's arsenal and betters the outlook in the web era to a better, well-formed internet.

尽管网络标准每天都在改变,就像新技术一样,然而,将 XHTML CSS 中分离出来是大势所趋。更好的标准和更好的结果会使用户变得更加乐意。这里仍然有很多人使用 HTML 4.01 编写代码,但是也发现了有很多人开始转向 XHTML 路线了。 CSS 变成了 XHTML 的兵工厂,从而使得网络时代变得越来越好,使整个互联网越来越成形。
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值