📄 intro.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang="en"><HEAD><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><TITLE>Introduction to CSS2</TITLE><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="about.html"><link rel="next" href="conform.html"><link rel="contents" href="cover.html#minitoc"><link rel="CSS-properties" href="propidx.html" title="properties"><link rel="index" href="indexlist.html" title="index"></HEAD><BODY><div class="navbar" align="center"><p><a href="about.html">previous</a> <a href="conform.html">next</a> <a href="cover.html#minitoc">contents</a> <a href="propidx.html">properties</a> <a href="indexlist.html">index</a> </div><hr class="navbar"><H1 align="center">2 Introduction to CSS2</H1> <div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="intro.html#q1" class="tocxref">2.1 A brief CSS2 tutorial for HTML</a> <li class="tocline2"><a href="intro.html#q2" class="tocxref">2.2 A brief CSS2 tutorial for XML</a> <li class="tocline2"><a href="intro.html#processing-model" class="tocxref">2.3 The CSS2 processing model</a> <ul class="toc"> <li class="tocline3"><a href="intro.html#q4" class="tocxref">2.3.1 The canvas</a> <li class="tocline3"><a href="intro.html#q5" class="tocxref">2.3.2 CSS2 addressing model</a> </ul> <li class="tocline2"><a href="intro.html#q6" class="tocxref">2.4 CSS design principles</a> </ul></div><H2><a name="q1">2.1 A brief CSS2 tutorial for HTML</a></H2><P> In this tutorial, we show how easy it can be to design simplestyle sheets. For this tutorial, you will need to know a little HTML(see <a href="refs.html#ref-HTML40" rel="biblioentry" class="noxref"><span class="informref">[HTML40]</span></a>) and some basic desktop publishing terminology.<P>We begin with a small HTML document:</p><PRE class="html-example"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML> <HEAD> <TITLE>Bach's home page</TITLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY></HTML></PRE><P>To set the text color of the H1 elements to blue, you can write thefollowing CSS rule:</P><PRE class="example"> H1 { color: blue }</PRE><P>A CSS rule consists of two main parts: <ahref="selector.html">selector</a> ('H1') and declaration ('color:blue'). The declaration has two parts: property ('color') and value('blue'). While the example above tries to influence only one of theproperties needed for rendering an HTML document, it qualifies as astyle sheet on its own. Combined with other style sheets (onefundamental feature of CSS is that style sheets are combined) it willdetermine the final presentation of the document.<P> The HTML 4.0 specification defines how style sheet rules may bespecified for HTML documents: either within the HTML document, or viaan external style sheet. To put the style sheet into the document, usethe STYLE element:</p><PRE class="html-example"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY></HTML></PRE><P> For maximum flexibility, we recommend that authors specifyexternal style sheets; they may be changed without modifying thesource HTML document, and they may be shared among severaldocuments. To link to an external style sheet, you can use the LINKelement:</p><PRE class="html-example"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML> <HEAD> <TITLE>Bach's home page</TITLE> <LINK rel="stylesheet" href="bach.css" type="text/css"> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY></HTML></PRE><P>The LINK element specifies:</p><ul><li> the type of link: to a "stylesheet".<li> the location of the style sheet via the "ref" attribute. <li>the type of style sheet being linked: "text/css".</ul><P>To show the close relationship between a style sheet and thestructured markup, we continue to use the STYLE element in thistutorial. Let's add more colors:<PRE class="html-example"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> BODY { color: red } H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY></HTML></PRE><P>The style sheet now contains two rules: the first one sets thecolor of the BODY element to 'red', while the second one sets thecolor of the H1 element to 'blue'. Since no color value has beenspecified for the P element, it will inherit the color from its parentelement, namely BODY. The H1 element is also a child element of BODYbut the second rule overrides the inherited value. In CSS there areoften such conflicts between different values, and this specificationdescribes how to resolve them. <P>CSS2 has more than 100 different properties, including <a href="colors.html#propdef-color" class="noxref"><spanclass="propinst-color">'color'</span></a>. Let's look at some of theothers:<PRE class="example"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> BODY { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY></HTML></PRE><P>The first thing to notice is that several declarations are groupedwithin a block enclosed by curly braces ({...}), and separated bysemicolons, though the last declaration may also be followed by asemicolon.<P>The first declaration on the BODY element sets the font family to"Gill Sans". If that font isn't available, the user agent (oftenreferred to as a "browser") will use the 'sans-serif' font familywhich is one of five generic font families which all users agentsknow. Child elements of BODY will inherit the value of the <a href="fonts.html#propdef-font-family" class="noxref"><spanclass="propinst-font-family">'font-family'</span></a> property.<P>The second declaration sets the font size of the BODY element to12 points. The "point" unit is commonly used in print-based typographyto indicate font sizes and other length values. It's an example of anabsolute unit which does not scale relative to the environment. <P>The third declaration uses a relative unit which scales with regardto its surroundings. The "em" unit refers to the font size of theelement. In this case the result is that the margins around the BODYelement are three times wider than the font size.<H2><a name="q2">2.2 A brief CSS2 tutorial for XML</a></H2><P>CSS can be used with any structured document format, for examplewith applications of the eXtensible Markup Language <a href="refs.html#ref-XML10" rel="biblioentry" class="noxref"><span class="informref">[XML10]</span></a>. Infact, XML depends more on style sheets than HTML, since authors canmake up their own elements that user agents don't know how todisplay.<P>Here is a simple XML fragment:<PRE class="xml-example"><ARTICLE> <HEADLINE>Fredrick the Great meets Bach</HEADLINE> <AUTHOR>Johann Nikolaus Forkel</AUTHOR> <PARA> One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT> ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. </PARA></ARTICLE></PRE><P>To display this fragment in a document-like fashion, we must firstdeclare which elements are inline-level (i.e., do not cause line breaks) andwhich are block-level (i.e., cause line breaks). <PRE class="example">INSTRUMENT { display: inline }ARTICLE, HEADLINE, AUTHOR, PARA { display: block }</PRE><P>The first rule declares INSTRUMENT to be inline and the secondrule, with its comma-separated list of selectors, declares all theother elements to be block-level.<P>One proposal for linking a style sheet to an XML document is to usea processing instruction:<PRE class="xml-example"><?XML:stylesheet type="text/css" href="bach.css"?><ARTICLE> <HEADLINE>Fredrick the Great meets Bach</HEADLINE> <AUTHOR>Johann Nikolaus Forkel</AUTHOR> <PARA> One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT> ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. </PARA></ARTICLE></PRE><P>A visual user agent could format the above example as:<div class="figure"><p><img src="images/bach1.gif" alt="Example rendering"><SPAN class="dlink"> <A name="img-bach1" href="images/longdesc/bach1-desc.html" title="Long description for the first Bach/XML formatting example">[D]</A></SPAN></div><P>Notice that the word "flute" remains within the paragraph since itis the content of the inline element INSTRUMENT.<P>Still, the text isn't formatted the way you would expect. Forexample, the headline font size should be larger than then rest of the⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -