Movatterモバイル変換
[0]ホーム
15 Alignment, font styles, and horizontalrules
This section of the specification discusses some HTML elements andattributes that may be used for visual formatting of elements. Many of them aredeprecated.
15.1 Formatting
Attribute definitions
- bgcolor =color[CI]
- Deprecated. Thisattribute sets the background color for the document body or table cells.
This attribute sets the background color of the canvas for the document body(theBODY element) or for tables (theTABLE,TR,TH, andTD elements). Additional attributes for specifying text color can beused with theBODY element.
This attribute has beendeprecatedin favor of style sheets for specifying background color information.
It is possible to align block elements (tables, images, objects, paragraphs,etc.) on the canvas with thealign attribute. Although thisattribute may be set for many HTML elements, its range of possible valuessometimes differs from element to element. Here we only discuss the meaning ofthe align attribute for text.
Attribute definitions
- align =left|center|right|justify[CI]
- Deprecated. Thisattribute specifies the horizontal alignment of its element with respect to thesurrounding context. Possible values:
- left: text lines are rendered flush left.
- center: text lines are centered.
- right: text lines are rendered flush right.
- justify: text lines are justified to both margins.
The default depends on the base text direction. For left to right text, thedefault isalign=left, while for right to left text, the defaultisalign=right.
DEPRECATED EXAMPLE:
This example centers a heading on the canvas.
<H1 align="center"> How to Carve Wood </H1>
Using CSS, for example, you could achieve the same effect as follows:
<HEAD> <TITLE>How to Carve Wood</TITLE> <STYLE type="text/css"> H1 { text-align: center} </STYLE><BODY> <H1> How to Carve Wood </H1>Note that this would center allH1 declarations. You could reducethe scope of the style by setting theclass attribute on the element:
<HEAD> <TITLE>How to Carve Wood</TITLE> <STYLE type="text/css"> H1.wood {text-align: center} </STYLE><BODY> <H1> How to Carve Wood </H1>DEPRECATED EXAMPLE:
Similarly, to right align a paragraph on the canvas with HTML'salignattribute you could have:
<P align="right">...Lots of paragraph text...
which, with CSS, would be:
<HEAD> <TITLE>How to Carve Wood</TITLE> <STYLE type="text/css"> P.mypar {text-align: right} </STYLE><BODY> <P>...Lots of paragraph text...DEPRECATED EXAMPLE:
To right align a series of paragraphs, group them with theDIV element:
<DIV align="right"> <P>...text in first paragraph... <P>...text in second paragraph... <P>...text in third paragraph...</DIV>
With CSS, the text-align property is inherited from the parent element, youcan therefore use:
<HEAD> <TITLE>How to Carve Wood</TITLE> <STYLE type="text/css"> DIV.mypars {text-align: right} </STYLE><BODY> <DIV> <P>...text in first paragraph... <P>...text in second paragraph... <P>...text in third paragraph... </DIV>To center the entire document with CSS:
<HEAD> <TITLE>How to Carve Wood</TITLE> <STYLE type="text/css"> BODY {text-align: center} </STYLE><BODY>...the body is centered...</BODY>TheCENTER element isexactly equivalent to specifying theDIV element with thealignattribute set to "center".TheCENTER element isdeprecated.
Images and objects may appear directly "in-line" or may be floated to oneside of the page, temporarily altering the margins of text that may flow oneither side of the object.
Thealign attribute for objects, images, tables, frames, etc., causesthe object to float to the left or right margin. Floating objects generallybegin a new line. This attribute takes the following values:
- left: Floats the object to the current left margin. Subsequenttext flows along the image's right side.
- right: Floats the object to the current right margin.Subsequent text flows along the image's left side.
DEPRECATED EXAMPLE:
The following example shows how to float anIMG element to the current left margin of the canvas.
<IMG align="left" src="http://foo.com/animage.gif" alt="my boat">
Some alignment attributes also permit the "center" value, which does notcause floating, but centers the object within the current margins. However, forP andDIV, the value "center" causes the contents of theelement to be centered.
Another attribute, defined for theBR element, controlstext flow around floating objects.
Attribute definitions
- clear =none|left|right|all[CI]
- Deprecated.Specifies where the next line should appear in a visual browser after the linebreak caused by this element. This attribute takes into account floatingobjects (images, tables, etc.). Possible values:
- none: The next line will begin normally. This is the defaultvalue.
- left: The next line will begin at nearest line below anyfloating objects on the left-hand margin.
- right: The next line will begin at nearest line below anyfloating objects on the right-hand margin.
- all: The next line will begin at nearest line below anyfloating objects on either margin.
Consider the following visual scenario, where text flows to the right of animage until a line is broken by aBR:
********* -------| | -------| image | --<BR>| |*********
If theclear attribute is set tonone, the linefollowingBR will begin immediately below it at the right margin ofthe image:
********* -------| | -------| image | --<BR>| | ------*********
DEPRECATED EXAMPLE:
If theclear attribute is set toleft orall, the next line will appear as follows:
********* -------| | -------| image | --<BR clear="left">| | *********-----------------
Using style sheets, you could specify that all line breaks should behavethis way for objects (images, tables, etc.) floating against the left margin.With CSS, you could achieve this as follows:
<STYLE type="text/css">BR { clear: left }</STYLE>To specify this behavior for a specific instance of theBRelement, you could combine style information and theid attribute:
<HEAD>...<STYLE type="text/css">BR#mybr { clear: left }</STYLE></HEAD><BODY><P>...********* -------| | -------| table | --<BR>| | *********-----------------...</BODY>The following HTML elements specify font information. Although they arenot alldeprecated, their use isdiscouraged in favor of style sheets.
Start tag:required, End tag:required
Attributes defined elsewhere
- id,class (document-wide identifiers)
- lang (language information),dir (textdirection)
- title (elementtitle)
- style (inline styleinformation)
- onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydownonkeyup (intrinsic events)
Rendering of font style elements depends on the user agent. The following isan informative description only.
- TT: Renders as teletype or monospaced text.
- I: Renders as italic text style.
- B: Renders as bold text style.
- BIG: Renders text in a "large" font.
- SMALL: Renders text in a "small" font.
- STRIKE andS:Deprecated. Render strike-through style text.
- U:Deprecated. Renders underlined text.
The following sentence shows several types of text:
<P><b>bold</b>,<i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and<big>big</big> and <small>small</small> text.
These words might be rendered as follows:
It is possible to achieve a much richer variety of font effects using stylesheets. To specify blue, italic text in a paragraph with CSS:
<HEAD><STYLE type="text/css">P#mypar {font-style: italic; color: blue}</STYLE></HEAD><P>...Lots of blue italic text...Font style elements must be properly nested. Rendering of nested font styleelements depends on the user agent.
FONT andBASEFONT aredeprecated.
See theTransitional DTD forthe formal definition.
Attribute definitions
- size =cdata[CN]
- Deprecated. Thisattribute sets the size of the font. Possible values:
- An integer between 1 and 7. This sets the font to some fixed size, whoserendering depends on the user agent. Not all user agents may render all sevensizes.
- A relative increase in font size. The value "+1" means one size larger. Thevalue "-3" means three sizes smaller. All sizes belong to the scale of 1 to7.
- color =color[CI]
- Deprecated. Thisattribute sets the text color.
- face =cdata[CI]
- Deprecated. Thisattribute defines a comma-separated list of font names the user agent shouldsearch for in order of preference.
Attributes defined elsewhere
TheFONT element changes the font size and color for text in itscontents.
TheBASEFONT element sets the base font size (using thesize attribute). Font size changes achieved withFONTare relative to the base font size set byBASEFONT. IfBASEFONT is not used, the default base font size is 3.
DEPRECATED EXAMPLE:
The following example will show the difference between the seven font sizesavailable withFONT:
<P><font size=1>size=1</font><font size=2>size=2</font><font size=3>size=3</font><font size=4>size=4</font><font size=5>size=5</font><font size=6>size=6</font><font size=7>size=7</font>
This might be rendered as:
The following shows an example of the effect of relative font sizes using abase font size of 3:
The base font size does not apply to headings, except where these aremodified using theFONT element with a relative font size change.
15.3Rules: theHR element
Start tag:required, End tag:forbidden
Attribute definitions
- align =left|center|right[CI]
- Deprecated. Thisattribute specifies the horizontal alignment of the rule with respect to thesurrounding context. Possible values:
- left: the rule is rendered flush left.
- center: the rule is centered.
- right: the rule is rendered flush right.
The default isalign=center.
- noshade[CI]
- Deprecated. Whenset, this boolean attribute requests that the user agent render the rule in asolid color rather than as the traditional two-color "groove".
- size =pixels[CI]
- Deprecated. Thisattribute specifies the height of the rule. The default value for thisattribute depends on the user agent.
- width =length[CI]
- Deprecated. Thisattribute specifies the width of the rule. The default width is 100%, i.e., therule extends across the entire canvas.
Attributes defined elsewhere
- id,class (document-wide identifiers)
- lang (language information),dir (textdirection)
- title (elementtitle)
- style (inline styleinformation)
- onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup (intrinsic events)
TheHR element causes a horizontal rule to be rendered by visual useragents.
The amount of vertical space inserted between a rule and the content thatsurrounds it depends on the user agent.
DEPRECATED EXAMPLE:
This example centers the rules, sizing them to half the available widthbetween the margins. The top rule has the default thickness while the bottomtwo are set to 5 pixels. The bottom rule should be rendered in a solid colorwithout shading:
<HR width="50%" align="center"><HR size="5" width="50%" align="center"><HR noshade size="5" width="50%" align="center">
These rules might be rendered as follows:
[8]ページ先頭