<STYLE>
|
<LINK>
|
<SPAN>
|
tags
|
classes
|
ids
|
STYLE
|
CLASS
|
IDS
|
fontSize
|
fontStyle
|
fontSize
|
lineHeight
|
textTransform
|
|
verticalAlign
|
textAlign
|
|
textDecoration
|
|
|
color
|
backgroundImage
|
backgroundColor
|
display
|
listStyleType
|
whiteSpace
|
Length Units
|
Color Units
|
URL
|
Textual comments in style sheets are defined by JavaScript and are similar to those in the C and C++ programming language. For example:
tags.EM.color = "red"; /* red, really red!! */
tags.B.color = "blue"; // blue, really blue
Comments cannot be nested.
The <STYLE>
and </STYLE>
tags indicate a style sheet. Inside <STYLE>
and </STYLE>
you can specify styles for elements, define classes and IDs and generally establish styles for use within the document.
To specify that the style sheet is JavaScript, specify the TYPE
attribute as "text/javascript".
The default TYPE
is CSS.
Use <STYLE>
between <HEAD>
and </HEAD>
.
For example:
<HEAD>
<STYLE TYPE="text/javascript">
tags.BODY.marginRight=20
ags.BODY.marginLeft=20
tags.P.marginRight=20
classes.class1.align="right"
classes.class1.fontWeight="bold"
</STYLE>
</HEAD>
Use the <LINK>
element to link to an external style sheet to use in a document. For example:
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL=STYLESHEET TYPE="text/JavaScript"
HREF="http://style.com/mystyles1" TITLE="Cool">
</HEAD>
Use the inline <SPAN>
and </SPAN>
tags to indicate the beginning and end of a piece of text to which a style is to be applied.
For example:
<P>Here is some normal paragraph text. It looks OK, but would be much better if it was<SPAN style="color='blue' fontWeight='bold' fontStyle='italic'"> in bright, bold, italic blue. </span>Perhaps you will agree with me?</P>
You can use the <SPAN>
element to achieve effects such as an initial dropped capital letter, for example:
<STYLE TYPE="text/javascript">
classes.initDropCap.fontSize="12pt";
classes.initDropCap.lineHeight = "12pt";
classes.initDropCap.fontSize *= 2; // 200%
classes.initDropCap.align = "left";
</STYLE>
<P><SPAN class="initDropCap">T</SPAN>his is ...</P>
Within the <STYLE>
element, you can set styles by using the tags
property of the JavaScript object document
.
For example, to specify that all paragraphs appear in red:
<STYLE TYPE="text/javascript">
document.tags.P.color = red;
</STYLE>
The tags
property always applies to the document
object for the current document, so you can omit document
from the expression document.tags
. For example, the following two statements both say the same thing:
document.tags.P.color = "red";
tags.P.color = "red";
To set default styles for all elements in a document, you can set the desired style on the BODY
tag, since all other elements inherit from BODY
. For example, to set a universal right margin for the document:
tags.body.marginRight=20
See the CLASS section for a discussion of the classes
JavaScript property.
See the IDS section for a discussion of the ids
JavaScript property.
Note: The STYLE attribute is not implemented in pre-release 2.
The STYLE
attribute determines a style for a specific element, for example:
<P STYLE="lineHeight='24'">
The CLASSES
JavaScript property allows you to define classes of styles. The CLASS
attribute specifies to which class of style an element belongs. For example:
<HEAD>
<STYLE TYPE="text/javascript">
classes.class1.H3.fontStyle="italic";
</STYLE>
</HEAD>
<H3 CLASS="class1">This H3 is in Italic style.</H3>
To specify that a style applies to all classes, use the element selector all.
For example, the code sample below specifies that all members of the class lemon
are yellow.
<HEAD>
<STYLE TYPE="text/javascript">
classes.lemon.all.color="yellow"
</STYLE>
</HEAD>
<H1 class="lemon">A Nice Yellow Heading</P>
<P CLASS=lemon>What a nice shade of yellow this paragraph is.</P>
The IDS
attribute allows particular stylistic exceptions to be expressed. For example, you could have an element that is a member of a class, but has a slight change to the default style for the class, for example, it uses a different color.
The IDS
Javscript object allows you to create a unique style identification. The ID
attribute specifies a unique style for an element.
For example:
<STYLE TYPE="text/javascript">
classes.style1.P.color = "red";
ids.A1.color = "blue";
</STYLE>
<P CLASS="style1">Wide red text</P>
<P CLASS="style1" ID="A1">Wide blue text</P>
Setting font properties will be among the most common uses of style sheets.
|
|
Possible values:
|
absolute-size relative-size length percentage
|
Initial value: |
|
Applies to: |
all elements |
Inherited: |
yes |
Percentage values: |
relative to parent element's font size |
absolute-size
An absolute-size is an index to a table of font sizes computed and kept by the rendering program. Possible values are:
xx-small
x-small
small
medium
large
x-large
xx-large
On a computer screen a scaling factor of 1.5 is suggested between adjacent indexes; if the medium
font is 10pt, the large
font could be 15pt. Different media may need different scaling factors. Also, the rendering program should take the quality and availability of fonts into account when computing the table. The table may be different from one font family to another.
relative-size
A relative-size keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are:
larger
smaller
For example, if the parent element has a font size of medium
, a value of large
' will make the font size of the current element be large
. If the parent element's size is not close to a table entry, the rendering program is free to interpolate between table entries or round off to the closest one. The rendering program may have to extrapolate table values if the numerical value goes beyond the keywords.
If the value is a number, it is interpreted as a relative keyword where a value of 1
is equivalent to bigger
. For example, if the parent element has a font size of medium
, a value of 2
will make the font size of the current element be x-small
.
Note that length and percentage values do not take the font size table into account when calculating the font size of the element.
For most properties, length
values refer to the font size of the current element. On the font-size
property length units (for example, em
and ex
) refer to the font size of the parent element.
An application may reinterpret an explicit size, depending on the context. For example, inside a virtual reality scene, a font may get a different size because of perspective distortion.
Examples:
tags.P.fontSize = "12pt"; /* absolute size: be careful! */
tags.BLOCKQUOTE.fontSize = -1;
tags.EM.fontSize = +1; /* the '+' is optional */
tags.EM.fontSize *= 1.50; /* increase font size by 150% */
tags.EM.fontSize = "1.5em";
|
|
---|---|
Possible values:
|
normal
italic
italic small-caps
oblique
oblique small-caps
small-caps
|
Initial value:
|
normal
|
Applies to:
|
all elements
|
Inherited:
|
yes
|
Percentage values:
|
N/A
|
The possible values are normal
, italic
, oblique
and small-caps
. The values italic
and oblique
can be combined with small-caps
.
If the preferred font style cannot be accomplished, the rendering program makes its best effort to find an acceptable substitution. Often, an oblique
font can be substituted by an italic
font. If small-caps are not available, capital letters of a smaller font size can be used to render small characters if the resolution of the output medium is appropriate for this.
Examples:
tags.H1.fontStyle(small-caps, italic); //uses a helper method
contextual(tags.H1, tags.EM).fontStyle = "italic";
In the example above, emphasized text within <H1>
elements appears in normal lower-case italic.
The use of style sheets allows you to set text properties such as line height and text decoration.
|
|
---|---|
Possible values:
|
number length percentage
|
Initial value:
|
depends on rendering program
|
Applies to:
|
block-level elements
|
Inherited:
|
yes
|
Percentage values:
|
refers to the font size of the element itself
|
This property sets the the distance between two adjacent lines' baselines. It only applies to block-level elements.
number:
When a numerical value is specified, the line height is computed by the font size of the current element multiplied by the numerical value. This differs from a percentage value in the way it inherits: when a numerical value is specified, child elements will inherit the factor itself, not the resultant value (as is the case with percentage and other units).
For example:
fontSize = "10pt";
lineHeight = 1.2; /* lineheight is now 12 pt*/
fontSize = "20pt";/* lineheight is now 24 pt, */
length:
Absolute value of the line height, for example:
tags.DIV.lineHeight = "1.2em";
percentage
Percentage of the parent element's line height.
Negative values are not allowed.
For example:
with(tags.DIV) {
lineHeight = 1.2;
fontSize = "10pt"; /* number */
lineHeight = "1.2em;
fontSize = "10pt"; /* length */
lineHeight *= 1.20; /* 120% */
fontSize = "10pt"; /* percentage */
|
|
---|---|
Possible values:
|
none
underline
overline
line-through
blink
|
Initial value:
|
none
|
Applies to:
|
all elements
|
Inherited:
|
no, but see clarification below
|
Percentage values:
|
N/A
|
This property describes decorations that are added to the text of an element. If the element has no text (for example, the <IMG>
element in HTML) or is an empty element (for example, "<EM></EM>
"), this property has no effect.
This property is not inherited, but children elements should match their ancestor. For example, if an element is underlined, the line should span the child elements. The color of the underlining will remain the same even if descendant elements have different color
values.
For example:
tags.BLOCKQUOTE.textDecoration = "underline";
The text decoration options do not include color options, since the color of text is derived from the color
property value.
This property affects the vertical positioning of the element.
The following values indicate vertical positions relative to the parent:
baseline
Align the baseline of the element with the baseline of the parent.
middle
Align the vertical midpoint of the element (typically an image) with the baseline plus half the x-height of the parent. (X height is the height of the character x.)
sub
Display the element in subscript style.
super
Display the element in superscript style.
text-top
Align the top of the element with the top of the parent element's font.
text-bottom
Align the bottom of the element with the bottom of the parent element's font.
The following values indicate positions relative to the formatted line that the element is a part of:
top
Align the top of the element with the tallest element on the line.
bottom
Align the bottom of the element with the lowest element on the line.
Using the top and bottom alignment, unsolvable situations can occur where element dependencies form a loop.
percentage:
Percentage values refer to the line-height
of the element itself. For example, a value of -50
will lower the element to half way up the line height.
|
|
---|---|
Possible values:
|
capitalize
uppercase
lowercase
none
|
Initial value:
|
none
|
Applies to:
|
all elements
|
Inherited:
|
yes
|
Percentage values:
|
N/A
|
This property indicates text case.
capitalize
Display the first character of each word in upper case.
uppercase
Display all letters of the element in upper case.
lowercase
Display all letters of the element in lower case.
none
Neutralizes inherited value.
For example:
tags.H1.textTransform = "uppercase";
This example would put <H1>
elements in uppercase text.
|
|
---|---|
Possible values:
|
left
right
center
justify
|
Initial value:
|
depends on rendering program
|
Applies to:
|
block-level elements
|
Inherited:
|
yes
|
Percentage values:
|
N/A
|
This property describes how text is aligned within the element.
Example:
tags.P.textAlign = "center"
Note that alignments are relative to the width of the element, not the canvas. If justify
is not supported, the UA will supply a replacement. Typically, this will be left
for western languages.
|
|
---|---|
Possible values:
|
length percentage
|
Initial value:
|
0
|
Applies to:
|
block-level elements
|
Inherited:
|
yes
|
Percentage values:
|
refer to parent element's width
|
The property specifies indentation that appears before the first formatted line. The text-indent
value may be negative, but there may be implementation-specific limits. An indent is not inserted in the middle of an element that was broken by another (such as <BR> in HTML).
length:
Length of the indent as a numerical value with units. For example:
tags.P.textIndent = "3em";
percentage:
Length of the indent as a percentage of the parent element's width. For example:
tags.P.textIndent = 50;
JavaScript style sheets regard block-level elements, such as <H1>
and <P>
as boxes that can have borders, paddings, and margins.
|
|
---|---|
Possible values:
|
length percentage
auto
|
Initial value:
|
0
|
Applies to:
|
all elements
|
Inherited:
|
no
|
Percentage values:
|
refers to parent element's width
|
These properties set the margin of an element. You can set each margin individually by specifying values for marginLeft
, marginRight
, marginTop
and marginBottom
or you can use the margins()
method sets the margins for all four sides at once.
The arguments to the margins()
method are the top, right, bottom and left margins respectively.
tags.BODY.margins("1em", "2em", "3em", "2em");
/* top=1em, right=2em, bottom=3em, left=2em */
The example above is equivalent to the example below:
with(tags.BODY) {
marginTop = "1em";
marginRight = "2em";
marginBottom = "3em";
marginLeft = "2em";
}
The margins express the minimal distance between the borders of two adjacent elements.
When margin properties are applied to replaced elements (such as an <IMG>
tag), they express the minimal distance from the replaced element to any of the content of the parent element.
Negative margin values are allowed, but there may be implementation-specific limits.
|
|
---|---|
Possible values:
|
length percentage
|
Initial value:
|
0
|
Applies to:
|
all elements
|
Inherited:
|
no
|
Percentage values:
|
refer to parent element's width
|
The property describes how much space to insert between the border and the content (such as text or image). You can set the padding on each side individually by specifying values for paddingTop
, paddingRight
, paddingLeft
and paddingBottom
or you can use the paddings()
method sets the margins for all four sides at once.
The arguments to the paddings()
method are the top, right, bottom and left padding widths respectively.
tags.BODY.paddings("1em", "2em", "3em", "2em")
/* top=1em, right=2em, bottom=3em, left=2em */
The example above is equivalent to the example below:
with(tags.BODY) {
paddingTop = "1em";
paddingRight = "2em";
paddingBottom = "3em";
paddingLeft = "2em";
}
The surface of the padding area is set with either backgroundColor
or backgroundImage
properties.
tags.H1.paddings("1em", "2em", "3em", "2em");
/* top=1em, right=2em, bottom=3em, left=2em */
tags.H1.bgColor = "green";
Padding values cannot be negative.
|
|
---|---|
Possible values:
|
number
|
Initial value:
|
none
|
Applies to:
|
all elements
|
Inherited:
|
no
|
Percentage values:
|
N/A
|
These properties set the width of a border around an object in pixels, points or em units.
You can set the border width on each side individually by specifying values for borderTopWidth
, bottomRightWidth
, borderLeftWidth
and borderbottomWidth
or you can use the borderWidths()
method sets the margins for all four sides at once.
The arguments to the borderWidths()
method are the top, right, bottom and left border widths respectively.
tags.BODY.borderWidths("1em", "2em", "3em", "2em");
/* top=1em, right=2em, bottom=3em, left=2em */
The example above is equivalent to the example below:
with(tags.BODY) {
borderTopWidth = "1em";
borderRightWidth = "2em";
borderLeftWidth = "3em";
borderBottomWidth = "2em";
}
|
|
---|---|
Possible values:
|
none
solid
3D
|
Initial value:
|
none
|
Applies to:
|
all elements
|
Inherited:
|
no
|
Percentage values:
|
N/A
|
Sets the existence and style of a border around a block-level element.
To set the width of the border,use the border width attributes as discussed in borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, and borderWidths().
|
|
---|---|
Possible values:
|
length percentage
auto
|
Initial value:
|
auto
|
Applies to:
|
block-level and replaced elements
|
Inherited:
|
no
|
Percentage values:
|
refer to parent element's width
|
Determines the width of the element. This property can be applied to text elements, but it is most useful with inline images and similar insertions. The width is enforced by scaling the image if necessary . When scaling, the aspect ratio of the image should be preserved if the height
property is auto
.
Example:
ids.first-image.width = 100;
See Format Properties for Block-Level Elements for a description of the relationship between this property and the margin and padding.
|
|
---|---|
Possible values:
|
length
auto
|
Initial value:
|
auto
|
Applies to:
|
block-level and replaced elements
|
Inherited:
|
no
|
Percentage values:
|
N/A
|
Determines the height of the element. This property can be applied to text, but it is most useful with inline images and similar insertions. The height is enforcedby scaling the image if necessary. When scaling, the aspect ratio of the image should be preserved if the width
property is auto
.
For example:
ids.first-image.height = 50;
|
|
---|---|
Possible values:
|
left
right
none
|
Initial values:
|
none
|
Applies to:
|
all elements
|
Inherited:
|
no
|
Percentage values:
|
N/A
|
The align
property determines the alignment of the content of an element, such as the element of text or image in a paragraph.
Note: This property corresponds to the CSS float
property. The term float
is a reserved word in JavaScript and cannot be used as a property name.
Using the align
property, you can make an element float to the left or the right and indicate how other content wraps around it. This property is most often used with inline images.
If no value is specified, the default value is none
. If the value is none
, the element is displayed where it appears in the text.
If the value is left
or right
, the element is displayed on the left or the right (after taking margin properties into account). Other content will appear on the right or left side of the floating element. If the value is left
or right
, the element is treated as block-level (so, for example, you can set the text-align
property can be set.)
Using the align
property, elements can be declared to be outside the normal flow of elements. For example, by setting the align
property of an image to left
, the normal flow will wrap around on the right side. The image's position will be taken from the margin properties.
<STYLE TYPE="text/javascript">
with(tags.IMG) {
align = "left";
marginLeft = "2em";
}
</STYLE>
<BODY>
<IMG SRC=star.gif>
<P>This text wraps around the star which floats and twinkles
at the left.
</BODY>
Typically, you would use the align
property with images, but there is nothing that prevents the align
property being used on other elements:
with(tags.H1) {
fontSize = "medium";
align = "left"; /* run-in H1 headers */
}
|
|
---|---|
Possible values:
|
none
left
right
both
|
Initial value:
|
none
|
Applies to:
|
all elements
|
Inherited:
|
no
|
Percentage values:
|
N/A
|
This property specifies if an element allows floating elements on its sides. More specifically, the value of this property lists the sides where floating elements are not accepted. With clear
set to left
, an element will be moved below any floating element on the left side. With 'clear
' set to none
, floating elements are allowed on all sides.
Example:
tags.H1.clear = "left";
Just as you can set color and background properties for a document as a whole, so you can set it for block level elements. These properties are applied to the "box" that contains the element.
|
|
---|---|
Possible values:
|
color
|
Initial value:
|
depends on rendering program
|
Applies to:
|
all elements
|
Inherited:
|
yes
|
Percentage values:
|
N/A
|
This property describes the text color of an element, that is, the "foreground" color.
See Color Units for information about how to specify colors.
There are different ways to specify red:
with(tags.EM) {
color = "red"; /* natural language */
color = rgb(255,0,0); /* RGB rage 0-255 */
}
|
|
---|---|
Possible values:
|
url
|
Initial value:
|
empty
|
Applies to:
|
all elements
|
Inherited:
|
no
|
Percentage values:
|
N/A
|
This property describes the background image of an element, the surface onto which the content (such as text) is rendered.
For example:
tags.BODY.backgroundImage = "http://images.com/background.jpg";
tags.P.backgroundImage = "http://images.com/daisy.gif";
|
|
---|---|
Possible Valuse:
|
color
|
Initial value:
|
empty
|
Applies to:
|
all elements
|
Inherited:
|
no
|
Percentage values:
|
N/A
|
This property describes the background color of an element, the surface onto which the content (such as text) is rendered.
For example:
tags.BODY.backgroundColor = "red";
These properties classify elements into categories more than they set specific visual parameters.
|
|
---|---|
Possible values:
|
block
inline
list-item
none
|
Initial value:
|
according to HTML
|
Applies to:
|
all elements
|
Inherited:
|
no
|
Percentage values:
|
N/A
|
This property indicates if an element is inline (for example. <EM>
in HTML), block-level (for example. <H1>
in HTML), or a block-level list item (for example, <LI>
in HTML). For HTML documents, the initial value will be taken from the HTML specification.
A value of none
turns the display of the element, including children elements and the surrounding box, off. (So if the value is none, the element will not be displayed.)
with(tags) {
P.display = "block";
EM.display = "inline";
LI.display = "list-item";
IMG.display = "none";
}
The listStyleType
property describes how list items (that is,. elements with a display
value of list-item
) are formatted.
This property can be set on any element, and it will inherit normally down the tree. However, the list-style will only be displayed on elements with a display
value of list-item
. In HTML this is typically the case for the <LI> element.
For example:
with (tags) {
UL.listStyleType = "disc"
OL.listStyleType = "decimal" /* 1 2 3 4 5 etc. */
OL.listStyleType = "lower-roman" /* a b c d e etc. */
}
|
|
---|---|
Possible values:
|
normal
pre
|
Initial value:
|
according to HTML
|
Applies to:
|
block-level elements
|
Inherited:
|
yes
|
Percentage values:
|
N/A
|
This property declares how white space inside the element should be handled. the choices are:
normal
way (where white space is collapsed),
pre
(which behaves like the <PRE> element in HTML) .
For example:
tags.PRE.whiteSpace = "pre" /* initial value */
To find the value for an element/property combination, the following algorithm should be followed:
tags.LI
/* a=0 b=0 c=1 -> specificity = 1; */
contextual(tags.UL tags.LI)*
/* a=0 b=0 c=2 -> specificity = 2; */
contextual(tags.UL tags.OL tags.LI)*
/* a=0 b=0 c=3 -> specificity = 3; */
classes.class1.all
/* a=0 b=1 c=0 -> specificity = 10; */
classes.class2.LI /* a=0 b=1 c=1 -> specificity = 11; */
ids.x34y/* a=1 b=0 c=0 -> specificity = 100; */
The search for the property value can be terminated whenever one rule has a higher weight than the other rules that apply to the same element/property combination.
A STYLE
attribute on an element should be considered as if an ID attribute had been specified at the end of the style sheet. For example:
<P style='color = "blue"'>a paragraph of text</p>
The UA may choose to honor other stylistic attributes (e.g. ALIGN
) as if a STYLE
attribute had been used. When in conflict with other stylistic attributes, the STYLE
attribute should win.
The format of a length value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a unit converting function which contains a number as an argument
Some properties allow negative length units, but this may complicate the formatting model and there may be implementation-specific limits. If a negative length value cannot be supported, it should be clipped to the nearest value that can be supported.
There are three types of length units: relative, pixel and absolute. Relative units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (for example. from a computer display to a laser printer). Percentage units and keyword values (such as x-large
) offer similar advantages.
Child elements inherit the computed value, not the relative value. For example:
with (tags.BODY) {
fontSize = "12pt";
textIndent = "3em" /* i.e. 36pt */
}
tags.H1.fontSize = "15pt";
In the example above, the textIndent
value of H1
elements will be 36pt, not 45pt.
These relative units are supported:
with(tags) {
H1.marginTop: "0.5em" /* ems, the height of the element's font */
H1.marginTop: "1ex" /* x-height, the height of the letter 'x' */
P.fontSize: "12px" /* pixels, relative to rendering surface */
Pixel units are relative to the resolution of the rendering surface, which is most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values. The suggested "reference pixel" is the visual angle of one pixel on a device with a pixel density of 90dpi and a distance from the reader of an arm's length.
Absolute length units are useful only when the physical properties of the output medium are known. These absolute units are supported:
with(tags)
H4.fontSize: "2pt" /* points, 1pt = 1/72 in */
H4.fontSize: "1pi" /* picas, 1pc = 12pt */
}
A color value is a either a color name or a numerical RGB specification.
The suggested list of color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are taken from the Windows VGA palette and will also be used in HTML 3.2.
with(tags) {
BODY.color = "black";
backgroundColor = "white";
H1.color = "maroon";
H2.color = "olive";
}
RGB colors are specified in the sRGB color space. You can specify an RGB color by a six digit hexadecimal number where the first two digits indicate the red value, the second two digits indicate the green value, and the last two digits indicate the blue value. For example:
BODY.color = #FF0000; /* red */
BODY.backgroundColor = #333333; /* gray */
A Uniform Resource Locator (URL) is identified with a functional notation:
tags.BODY.backgroundImage = "http://www.bg.com/pinkish.gif";
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document:
tags.BODY.backgroundImage = "yellow";