Newsgroup: it.comp.www.html
Titolo: IE-Netscape

Ciao a tutti
Ho un problemino: sto sviluppando un sito e utilizzo asp e l'object model di
IE.
Per esempio, cambio il nome della classe di un oggetto <SPAN> utilizzando
oggetto.classname=nuova_classe, oppure il contenuto di un altro <SPAN>
utilizzando la proprietą innerHTML
Per fare in modo che funzioni anche con Netscape come faccio?
Dove posso trovare i corrispettivi metodi/proprietą/etc etc?
Grazie a chi vorrą aiutarmi
___________________________________________
Per rispondere togliere 'YUK'
To reply please remove 'YUK'
___________________________________________
Mouse not found. Press mouse button to continue.
(Win95)

Ti posto la guida di Netscape su l'HTML, spero ti sia d'aiuto:
---
Dynamic HTML in Netscape Communicator
Part 1. Style Sheets
Chapter 5
Style Sheet Reference
This section includes reference information for both CSS syntax and
JavaScript syntax. It covers style sheet functionality that is implemented
in Netscape Navigator 4.0.
This reference does not include style sheet properties that can be used to
specify positions for blocks of HTML content. These properties are discussed
in Part 2. Positioning HTML Content.
This chapter is organized in the following sections:
Comments in Style Sheets
New HTML Tags
<STYLE>
<LINK>
<SPAN>
New Attributes for Existing HTML Tags
STYLE
CLASS
ID
New JavaScript Object Properties
tags
classes
ids
Style Sheet Properties
Font Properties
Font Size
Font Style
Font Family
Font Weight
Text Properties
Line Height
Text Decoration
Text Transform
Text Alignment
Text Indent
Block-Level Formatting Properties
Margins
Padding
Border Widths
Border Style
Border Color
Width
Alignment
Clear
Color and Background Properties
Color
Background Image
Background Color
Classification Properties
Display
List Style Type
White Space
Units
Length Units
Color Units
----------------------------------------------------------------------------
----
Comments in Style Sheets
Comments in style sheets are similar to those in the C programming language.
For example:
B {color:blue;} /* bold text will be blue */
tags.B.color = "blue"; /* bold text will be blue */
JavaScript style sheet syntax also supports comments in the C++ style, for
example:
tags.B.color = "blue"; // bold text will be blue
Comments cannot be nested.
----------------------------------------------------------------------------
----
New HTML Tags
This section lists the HTML tags that are useful for working with styles.
----------------------------------------------------------------------------
----
<STYLE>
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 uses JavaScript syntax, set the TYPE
attribute to "text/javascript". To specify that the style sheet uses CSS
syntax, set the TYPE attribute to "text/css". The default value for TYPE is
"text/CSS".
For example:
<STYLE TYPE="text/css">
  BODY {margin-right: 20%; margin-left:20%;}
  PRE {color:green;}
  all.CLASS1 {float:right; font-weight: bold;}
</STYLE>
----------------------------------------------------------------------------
----
<LINK>
Use the <LINK> element to link to an external style sheet for use in a
document. For example:
CSS Syntax
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
  HREF="
http://style.com/mystyles1.htm
">
</HEAD>
JavaScript Syntax
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL=STYLESHEET TYPE="text/javascript"
  HREF="
http://style.com/mystyles1.htm
">
</HEAD>
----------------------------------------------------------------------------
----
<SPAN>
Use the inline <SPAN> and </SPAN> elements to indicate the beginning and end
of a piece of text to which a style is to be applied.
The following example applies an individual style to a piece of text.
<P>Here is some normal paragraph text. It looks OK, but would be much
better if it was<SPAN style="color:blue; font-weight:bold; font-
style:italic"> in bright, bold, italic blue. </SPAN>The blue text stands
out much more.</P>
This example works in Netscape Navigator 4.0+. Example results:
----------------------------------------------------------------------------
----
Here is some normal paragraph text. It looks OK, but would be much better if
it was in bright, bold, italic blue. The blue text stands out much more.
----------------------------------------------------------------------------
----
You can use the <SPAN> element to achieve effects such as a large initial
letter, for example:
<STYLE TYPE="text/css">
  init-letter.all {font-size:400%; font-weight:bold;}
</STYLE>
<P><SPAN class="init-letter">T</SPAN>his is...</P>
This example works in Netscape Navigator 4.0+. Example results:
----------------------------------------------------------------------------
----
This is...
----------------------------------------------------------------------------
----
New Attributes for Existing HTML Tags
This section lists the new attributes for existing HTML tags that are useful
for working with styles. These attributes can be used with any HTML tag to
specify the style for that tag.
----------------------------------------------------------------------------
----
STYLE
The STYLE attribute determines the style of a specific element. For example:
CSS Syntax
<H3 STYLE="line-height:24pt; font-weight:bold; color:cyan;">
Cyan Heading</H3>
JavaScript Syntax
<H3 STYLE="lineHeight='24pt'; fontWeight='bold'; color='cyan'">
Cyan Heading</H3>
This example works in Netscape Navigator 4.0+. Example results:
----------------------------------------------------------------------------
----
Cyan Heading
----------------------------------------------------------------------------
----
CLASS
The CLASSES JavaScript property allows you to define classes of styles in a
style sheet. The CLASS attribute specifies a style class to apply to an
element.
Although CSS syntax and JavaScript syntax use slightly different syntax to
define classes of styles, the use of the CLASS attribute is the same in both
syntaxes. For example:
CSS Syntax Example
<STYLE TYPE="text/css">
  H3.class1 {font-style:italic; color:red;}
</STYLE>
JavaScript Syntax Example
<STYLE TYPE="text/javascript">
classes.class1.H3.fontStyle="italic";
classes.class1.H3.color="red";
</STYLE>
Style Sheet Use
<H3 CLASS="class1">This H3 is in red italic letters.</H3>
Class names are case-sensitive.
Each HTML element can use only one style class.
To specify that a class can apply to all elements, use the element selector
all when you set the properties for the class. For example, the code sample
below specifies that the class LEMON can be applied to any element, and all
elements that use the style class LEMON are yellow.
CSS Syntax
<STYLE TYPE="text/css">
  all.LEMON {color:yellow;}
</STYLE>
JavaScript Syntax
<STYLE TYPE="text/javascript">
  classes.LEMON.all.color="yellow";
</STYLE>
Style Sheet Use
<H1 class="LEMON">A Nice Yellow Heading</P>
<P CLASS="LEMON">What a nice shade of yellow this paragraph is.</P>
For more information about creating classes of style and for more examples,
see the section Defining Classes of Styles in Chapter 3, "Creating Style
Sheets and Assigning Styles."
----------------------------------------------------------------------------
----
ID
When defining style sheets, you can create individual named styles.
An element can use a style class and also use a named style. This allows you
to use named styles to express individual stylistic exceptions to a style
class.
To define an individual names style in CSS syntax, you use the # sign to
indicate a name for an individual style, while In JavaScript syntax, you use
the ID selector.
In both CSS syntax and JavaScript syntax, you use the ID attribute in an
HTML element to specify the style for that element.
ID names are case-sensitive.
ID styles are particularly useful for working with layers of precisely
positioned HTML content, as discussed in Part 2. Positioning HTML Content.
The following code shows an example of the use of individual named styles.
In this example, the STYLE1 class defines a style with several
characteristics. The named style A1 specifies that the color is blue. This
style can be used to specify that a paragraph has all the style
characteristics of STYLE1, except that its color is blue instead of red.
CSS Syntax
<STYLE TYPE="text/css">
  P.STYLE1 {
  color:red; font-size:24pt; line-height:26pt;
  font-style:italic; font-weight:bold;
  }
  #A1 {color: blue;}
</STYLE>
JavaScript Syntax
<STYLE TYPE="text/javascript">
  with (classes.STYLE1.P) {
    color="red";
    fontSize="24pt";
    lineHeight="26pt";
    fontStyle="italic";
    fontWeight="bold";
  }
  ids.A1.color= "blue";
</STYLE>
Style Sheet Use
<P CLASS="STYLE1">Big red text</P>
<P CLASS="STYLE1" ID="A1">Big blue text</P>
This example works in Netscape Navigator 4.0+. Example results:
----------------------------------------------------------------------------
----
Big red text
Big blue text
----------------------------------------------------------------------------
----
New JavaScript Object Properties
This section discusses the new JavaScript object properties that are useful
for defining style sheets using JavaScript syntax.
----------------------------------------------------------------------------
----
tags
When using JavaScript syntax within the <STYLE> element, you can set styles
by using the tags property of the JavaScript object document.
The following example uses JavaScript syntax to specify that all paragraphs
appear in red:
<STYLE TYPE="text/javascript">
  tags.P.color = red;
</STYLE>
In CSS syntax, this would be:
<STYLE TYPE="text/css">
  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> element, since all other elements inherit from
<BODY>. For example, to set a universal right margin for the document:
tags.body.marginRight="20pt"; /*JavaScript syntax */
BODY {margin-right:20pt;} /* CSS syntax */
----------------------------------------------------------------------------
----
classes
See the CLASS section for a discussion of the classes JavaScript property.
----------------------------------------------------------------------------
----
ids
See the ID section for a discussion of the ids JavaScript property.
----------------------------------------------------------------------------
----
Style Sheet Properties
Font Properties
Using styles, you can specify font size, font family, font style, and font
weight for any element.
----------------------------------------------------------------------------
----
Font Size
CSS syntax name: font-size
JavaScript syntax name: fontSize
Possible values:
 absolute-size, relative-size, length, percentage
Initial value:
 medium
Applies to:
 all elements
Inherited:
 yes
Percentage values:
 relative to parent element's font size
absolute-size
An absolute-size is a keyword such as:
xx-small
x-small
small
medium
large
x-large
xx-large
relative-size
A relative-size keyword is interpreted relative to the font size of the
parent element. Note that relative values only equate to actual values when
the element whose font size is a relative value has a parent element that
has a font size. (A relative size has to have something to be relative to.)
Possible values are:
larger
smaller
For example, if the parent element has a font size of medium, a value of
larger will make the font size of the current element be large.
length
A length is a number followed by a unit of measurement, such as 24pt.
percentage
A percentage keyword sets the font size to a percentage of the parent
element's font size.
CSS Syntax
P {font-size:12pt;}
EM {font-size:120%};
BLOCKQUOTE {font-size:medium;}
B {font-size:larger;}
JavaScript Syntax
tags.P.fontSize = "12pt";
tags.EM.fontSize = 120%;
tags.BLOCKQUOTE.fontSize = "medium";
tags.B.fontSize="larger";
----------------------------------------------------------------------------
----
Font Family
CSS syntax name: font-family
JavaScript syntax name: fontFamily
Possible values:
 fontFamily
Initial value:
 the default font, which comes from user preferences.
Applies to:
 all elements
Inherited:
 yes
Percentage values:
 NA
fontFamily
The fontFamily indicates the font family to use, such as Helvetica or Arial.
If a list of font names is given, the browser tries each named font in turn
until it finds one that exists on the user's system. If none of the
specified font families are available on the user's system, the default font
is used instead.
If you link a font definition file to your web page, the font definition
file will be downloaded with the page, thus guaranteeing that all the fonts
in the definition file are available on the user's system while the user is
viewing that page. For more information about linking fonts to a document,
see Part 3. Downloadable Fonts.
There is a set of generic family names that are guaranteed to indicate a
font on every system, but that exact font is system-dependent. The five
generic font families are:
serif
sans-serif
cursive
monospace
fantasy
CSS Syntax Example
<STYLE TYPE="text/css">
  H1 {fontFamily:Helvetica, Arial, sans-serif;}
</STYLE>
JavaScript Syntax Example
<STYLE TYPE="text/javascript">
  tags.H1.fontFamily="Helvetica, Arial, sans-serif";
</STYLE>
----------------------------------------------------------------------------
----
Font Weight
CSS syntax name: font-weight
JavaScript syntax name: fontWeight
Possible values:
 normal, bold, bolder, lighter, 100 - 900
Initial value:
 normal
Applies to:
 all elements
Inherited:
 yes
Percentage values:
 N/A
The font weight indicates the weight of the font. For example:
CSS Syntax Example
<STYLE>
BLOCKQUOTE {font-weight: bold;}
</STYLE>
JavaScript Syntax Example
<STYLE>
tags.BLOCKQUOTE.fontWeight="bold";
</STYLE>
The possible values are normal, bold, bolder, and lighter. You can also
specify weight as a numerical value from 100 to 900, where 100 is the
lightest and 900 is the heaviest.
----------------------------------------------------------------------------
----
Font Style
CSS syntax name: font-style
JavaScript syntax name: fontStyle
Possible values:
 normal, italic
Initial value:
 normal
Applies to:
 all elements
Inherited:
 yes
Percentage values:
 N/A
This property determines the style of the font.
The following example specifies that emphasized text within <H1> elements
appears in italic.
CSS Syntax Example
<STYLE>
H1 EM {font-style: italic;}
</STYLE>
JavaScript Syntax Example
<STYLE>
contextual(tags.H1, tags.EM).fontStyle = "italic";
</STYLE>
----------------------------------------------------------------------------
----
Text Properties
The use of style sheets allows you to set text properties such as line
height and text decoration.
----------------------------------------------------------------------------
----
Line Height
CSS syntax name: line-height
JavaScript syntax name: lineHeight
Possible values
 number, length, percentage, normal
Initial value:
 normal for the font
Applies to:
 block-level elements
Inherited:
 yes
Percentage values:
 refers to the font size of the element itself
This property sets the distance between the baselines of two adjacent lines.
It applies only to block-level elements.
number:
If you specify a numerical value without a unit of measurement, the line
height is 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 inherit the factor itself, not
the resultant value (as is the case with percentage and other units).
For example:
fontSize:10pt;
line-height:1.2; /* line height is now 120%, ie 12pt */
font-size:20pt;  /* line height is now 24 pt, */
length:
An expression of line height as a measurement, for example:
line-height:0.4in;
line-height:18pt;
percentage
Percentage of the element's font size, for example:
line-height:150%;
Negative values are not allowed.
----------------------------------------------------------------------------
----
Text Decoration
CSS syntax name: text-decoration
JavaScript syntax name: textDecoration
Possible values:
 none, underline, 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 will match their
parent. 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
child elements have different color values.
For example:
BLOCKQUOTE {text-decoration: underline;}
The text decoration options do not include color options, since the color of
text is derived from the color property value.
.
----------------------------------------------------------------------------
----
Text Transform
CSS syntax name: text-transform
JavaScript syntax name: textTransform
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 uppercase.
uppercase
Display all letters of the element in uppercase.
lowercase
Display all letters of the element in lowercase.
none
Neutralizes inherited value.
For example:
CSS Syntax Example
<STYLE TYPE="text/css">
H1 {text-transform:capitalize;}
H1.CAPH1 {text-transform: uppercase;}
</STYLE>
JavaScript Syntax Example
<STYLE>
tags.H1.textTransform = "capitalize";
classes.CAPH1.H1.textTransform = "uppercase";
</STYLE>
Style Sheet Use
<H1>This is a regular level-one heading</H1>
<H1 CLASS=CAPH1>important heading</H1>
This example works in Netscape Navigator 4.0+. Example results:
----------------------------------------------------------------------------
----
This Is A Regular Level-One Heading
IMPORTANT HEADING
----------------------------------------------------------------------------
----
Text Alignment
CSS syntax name: text-align
JavaScript syntax name: textAlign
Possible values:
 left, right, center, justify
Initial value:
 left
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"
CSS Syntax Example
<STYLE TYPE="text/css">
all.RIGHTHEAD {text-align:right; color:blue;}
P.LEFTP {text-align:left; color:red;}
</STYLE>
JavaScript Syntax
<STYLE TYPE="text/javascript">
classes.RIGHTHEAD.all.textAlign="right";
classes.LEFTP.P.textAlign="left";
classes.RIGHTHEAD.all.color="blue";
classes.JUSTP.P.color="red";
</STYLE>
Style Sheet Use
<H3>A Normal Heading</H3>
<H3 CLASS=RIGHTHEAD>A Right-Aligned Heading</H3>
<P>This is a normal paragraph. This is what paragraphs usually look
like, when they are left to their own devices, and you do not use style
sheets to control their text alignment.</P>
<P CLASS = LEFTP>This paragraph is left-justified, which means it has a
ragged right edge. Whenever paragraphs contain excessively, perhaps
unnecessarily, long words, the raggedness of the justification becomes
more manifestly apparent than in the case where all the words in the
sentence are short.</P>
This example works in Netscape Navigator 4.0+. Example results:
----------------------------------------------------------------------------
----
A Normal Heading
A Right-Aligned Heading
This is a normal paragraph. This is what paragraphs usually look like, when
they are left to their own devices, and you do not use style sheets to
control their text alignment.
This paragraph is left-justified, which means it has a ragged right edge.
Whenever paragraphs contain excessively, perhaps unnecessarily, long words,
the raggedness of the justification becomes more manifestly apparent than in
the case where all the words in the sentence are short.
----------------------------------------------------------------------------
----
Text Indent
CSS syntax name: text-indent
JavaScript syntax name: textIndent
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. An indent is not inserted in
the middle of an element that was broken by another element (such as <BR> in
HTML).
length
Length of the indent as a numerical value with units, for example:
P {text-indent:3em;}
percentage
Length of the indent as a percentage of the parent element's width, for
example:
P {text-indent:25%;}
CSS Syntax Example
<STYLE TYPE="text/css">
P.INDENTED {text-indent:25%;}
</STYLE>
JavaScript Syntax Example
<STYLE TYPE="text/css">
classes.INDENTED.P.textIndent="25%";
</STYLE>
Style Sheet Use
<P CLASS=INDENTED>
The first line is indented 25 percent of the width of the parent
element, which in this case happens to be the BODY tag, since this
element is not embedded in anything else.</P>
<BLOCKQUOTE>
<P CLASS=INDENTED>
This time the first line is indented 25 percent from the blockquote that
surrounds this element. A blockquote automatically indents its contents.
</P>
</BLOCKQUOTE>
This example works in Netscape Navigator 4.0+. Example results:
----------------------------------------------------------------------------
----
The first line is indented 25 percent of the width of the parent element,
which in this case happens to be the BODY tag, since this element is not
embedded in anything else.
This time the first line is indented 25 percent from the blockquote that
surrounds this element. A blockquote automatically indents its contents.
----------------------------------------------------------------------------
----
Block-Level Formatting Properties
Style sheets treat each block-level element as if it is surrounded by a box.
Block-level elements start on a new line, for example, <H1> and <P> are
block-level elements, but <EM> is not.
Each box can have padding, border, and margins.You can set values for top,
bottom, left and right paddings, border widths, and margins.
For a more detailed overview discussion of block-level formatting, see
Chapter 4, "Format Properties for Block-Level Elements."
----------------------------------------------------------------------------
----
Margins
CSS syntax names: margin-left, margin-right, margin-top, margin-bottom,
margin
JavaScript syntax names: marginLeft, marginRight, marginTop, marginBottom
and margins()
Possible values
 length, percentage, auto
Initial value:
 0
Applies to:
 all elements
Inherited:
 no
Percentage values:
 refer to parent element's width
These properties set the margin of an element. The margins express the
minimal distance between the borders of two adjacent elements.
You can set each margin individually by specifying values for
margin-left/marginLeft, margin-right/marginRight, margin-top/marginTop and
margin-bottom/marginBottom.
In CSS syntax you can set all margins to the same value at one time by
setting the margin property (note that the property name is singular). In
JavaScript syntax you can use the margins() method sets the margins for all
four sides at once. (Note that the function name is plural.)
The arguments to the margin property and margins() method are top, right,
bottom and left margins respectively. For example:
CSS Syntax
/* top=10pt, right=20pt, bottom=30pt, left=40pt */
P {margin:10pt 20pt 30pt 40pt;}
/* set all P margins to 40 pt */
P {margin:40pt;}
JavaScript Syntax
/* top=10pt, right=20pt, bottom=30pt, left=40pt */
tags.BODY.margins("10pt", "20pt", "30pt", "40pt");
/* set all P margins to 40 pt */
tags.P.margins("40pt");
Adjoining margins of adjacent elements are added together, unless one of the
elements has no content, in which case its margins are ignored. For example,
if an <H1> element with a bottom margin of 40 points, is followed by a <P>
element with a top margin of 30 points, then the separation between the two
elements is 70 points. However, if the <H1> element has content, but the <P>
element is empty, then the margin between them is 40 points.
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.
The use of negative margins is not recommended because it may have
unpredictable results.
For a working example of setting margins, see the section Block-level
Formatting Overview and Example.
----------------------------------------------------------------------------
----
Padding
CSS syntax names: padding-top, padding-right, padding-bottom, padding-left,
paddings
JavaScript syntax names: paddingTop, paddingRight, paddingBottom,
paddingLeft, and paddings()
Possible values:
 length, percentage
Initial value:
 0
Applies to:
 all elements
Inherited:
 no
Percentage values:
 refer to parent element's width
These properties describe how much space to insert between the border of an
element and the content (such as text or image). You can set the padding on
each side individually by specifying values for padding-top/paddingTop,
padding-right/paddingRight, padding-left/paddingLeft and
padding-bottom/paddingBottom.
In CSS syntax you can use the padding property (note that it is padding
singular) to set the padding for all four sides at once. In JavaScript
syntax you can use the paddings() method to set the margins for all four
sides at once.
The arguments to the padding property (CSS syntax) and the paddings() method
(JavaScript syntax) are the top, right, bottom and left padding values
respectively.
CSS Syntax
/* top=10pt, right=20pt, bottom=30pt, left=40pt */
P {padding:10pt 20pt 30pt 40pt;}
/* set the padding on all sides of P to 40 pt */
P {padding:40pt;}
JavaScript Syntax
/* top=10pt, right=20pt, bottom=30pt, left=40pt */
tags.P.paddings("10pt", "20pt", "30pt", "40pt")
/* set the padding on all sides of P to 40 pt */
tags.P.paddings("40pt");
Padding values cannot be negative.
To specify the color or image that appears in the padding area, you can set
the background color or background image of the element. For information
about setting background color, see the section Background Color. For
information about setting a background image, see the section Background
Image.
For a working example of setting paddings, see the section Block-level
Formatting Overview and Example.
----------------------------------------------------------------------------
----
Border Widths
CSS syntax names: border-top-width, border-bottom-width, border-left-width,
border-right-width, border-width
JavaScript syntax names: borderTopWidth, borderBottomWidth, borderLeftWidth,
borderRightWidth, and borderWidths()
Possible values:
 length
Initial value:
 none
Applies to:
 all elements
Inherited:
 no
Percentage values:
 N/A
These properties set the width of a border around an element.
You can set the width of the top border by specifying a value for
border-top-width/borderTopWidth. You can set the width of the right border
by specifying a value for border-right-width/borderRightWidth. You can set
the width of the bottom border by specifying a value for
border-bottom-width/borderBottomWidth. You can set the width of the bottom
border by specifying a value for border-left-width/ borderLeftWidth.
In CSS syntax, you can set all four borders at once by setting the
border-width property. In JavaScript syntax you can set all four borders at
once by using the borderWidths() function.
The arguments to the border-width property (CSS syntax) and the
borderWidths() function (JavaScript syntax) are the top, right, bottom and
left border widths respectively.
/* top=1pt, right=2pt, bottom=3pt, left=4pt */
P {border-width:1pt 2pt 3pt 4pt;} /* CSS */
tags.P.borderWidths("1pt", "2pt", "3pt", "4pt"); /* JavaScript syntax */
/* set the border width to 2 pt on all sides */
P {border-width:40pt;} /* CSS */
tags.P.borderWidths("40pt"); /* JavaScript syntax */
For a working example of setting border widths, see the section Block-level
Formatting Overview and Example.
----------------------------------------------------------------------------
----
Border Style
CSS syntax name: border-style
JavaScript syntax name: borderStyle
Possible values:,
 none, solid, double, inset, outset, groove, ridge
Initial value:
 none
Applies to:
 all elements
Inherited:
 no
Percentage values:
 N/A
This property sets the style of a border around a block-level element.
For the border to be visible however, you must also specify the border
width. For details of setting the border width see the section Setting
Border Widths, Color, and Style or the section Border Widths.
For an example of each of the border values, see:
borders.htm
----------------------------------------------------------------------------
----
Border Color
CSS name: border-color
JavaScript syntax name:borderColor
Possible values:
 none, colorvalue
Initial value:
 none
Applies to:
 all elements
Inherited:
 no
Percentage values:
 N/A
This property sets the color of the border. The color can either be a named
color or a 6-digit hexadecimal value indicating a color or an rgb color
value.
For a list of the named colors, see the section Color Units.
For example:
CSS Syntax
P {border-color:blue;}
BLOCKQUOTE {border-color:#0000FF;}
H1 {border-color:rgb(0%, 0%, 100%);}
JavaScript Syntax
tags.P.borderColor="blue";
tags.BLOCKQUOTE.borderColor="#0000FF";
tags.H1.borderColor="rgb(0%, 0%, 100%);
For a working example of setting border color, see the section Block-level
Formatting Overview and Example.
----------------------------------------------------------------------------
----
Width
CSS syntax name: width
JavaScript syntax name: width
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
This property determines the width of an element.
Note that if you set the left and right margins, and also the width of a
property, the margin settings take precedence over the width setting. For
example, if the left margin setting is 25%, the right margin setting is 10%,
and the width setting is 100%, the width setting is ignored. (The width will
end up being 65% total.)
CSS Syntax Example
all.NARROW {width:50%;}
all.INDENTEDNARROW {margin-left:20%; width:60%;}
JavaScript Syntax Example
classes.NARROW.all.width = "50%";
classes.INDENTEDNARROW.all.width = "60%";
classes.INDENTEDNARROW.all.marginLeft = "20%";
For a working example of setting the width of an element, see the section
Block-level Formatting Overview and Example.
----------------------------------------------------------------------------
----
Alignment
CSS syntax name: float
JavaScript syntax name: align
Possible values:
 left, right, none
Initial values:
 none
Applies to:
 all elements
Inherited:
 no
Percentage values:
 N/A
The float property (CSS syntax) and align property (JavaScript syntax)
determine the alignment of an element within its parent. (Note that the
text-align/textAlign property determines the alignment of the content of
text elements.)
The term float is a reserved word in JavaScript, which is why the JavaScript
syntax uses the name align instead of float for this property.
Using the float/align property, you can make an element float to the left or
the right and indicate how other content wraps around it.
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 appears
on the right or left side of the floating element. If the value is left or
right, the element is treated as a block-level element.
Using the float/align property, you can declare elements to be outside the
normal flow of elements. For example, if the float/align property of an
element is left, the normal flow wraps around on the right side.
If you set an element's float/align property set, do not also specify
margins for it. If you do, the wrapping effect will not work properly.
However, if you want a floating element to have a left or right margin, you
can put it inside another element, such as a <DIV> block, that has the
desired margins.
CSS Syntax Example
<STYLE TYPE="text/css">
H4 {
  width:70%;
  border-style:outset;
  border-width:2pt;
  border-color:green;
  background-color:rgb(70%, 90%, 80%);
  padding:5%;
  font-weight:bold;
}
H4.TEXTRIGHT {text-align:right; margin-right:30%;}
H4.TEXTRIGHT_FLOATLEFT {text-align:right; float:left;}
H4.FLOATRIGHT {float:right;}
H4.FIXED_RIGHT_MARGIN {float:right; margin-right:30%;}
</STYLE>
JavaScript Syntax Example
<STYLE TYPE="text/javascript">
with (tags.H4) {
  width="70%";
  borderStyle="outset";
  borderWidth="2pt";
  borderColor="green";
  backgroundColor = "rgb(70%, 90%, 80%)";
  paddings("5%");
  fontWeight="bold";
}
classes.TEXTRIGHT.H4.textAlign="right";
classes.TEXTRIGHT.H4.marginRight="30%;"
classes.TEXTRIGHT_FLOATLEFT.H4.textAlign="right";
classes.TEXTRIGHT_FLOATLEFT.H4.align="left";}
classes.FLOATRIGHT.H4.align="right";
classes.FIXED_RIGHT_MARGIN.H4.align="right";
classes.FIXED_RIGHT_MARGIN.H4.marginRight="30%";
</STYLE>
Style Sheet Use
<BODY>
<H4>Level-Four Heading</H4>
<P>I am a plain paragraph, positioned below a non-floating level-four
heading.
</P>
<H4 CLASS=TEXTRIGHT>H4 - My Text On Right, No Float</H4>
<P>I am also a plain paragraph, positioned below a non-floating level-
four heading. It just happens that the heading above me has its text
alignment set to right.
</P>
<H4 CLASS = FLOATRIGHT>H4 - Float = Right</H4>
<P>I am a regular paragraph. There's not much more you can say about me.
I am positioned after a level-four heading that is floating to the
right, so I come out positioned to the left of it.</P>
<BR CLEAR>
<H4 CLASS=TEXTRIGHT_FLOATLEFT>H4 - My Text on Right, Float = Left </H4>
<P>I'm also just a plain old paragraph going wherever the flow takes me.
</P>
<BR CLEAR>
<H4 CLASS=FIXED_RIGHT_MARGIN>H4 - Float = Right, Fixed Right Margin</H4>
<P>Hello? Hello!! I am wrapping round an H4 that is floating to the right
and has a fixed right margin. When I try to satisfy all these requirements,
you see what happens! For best results, do not set the left and/or right
margin when you set the float (CSS syntax) or align (JavaScript syntax)
property. Use an enclosing element with margins instead.
</P>
<BR CLEAR>
<DIV STYLE="margin-left:30%;">
<H4 CLASS = FLOATRIGHT>H4 - Float = Right</H4>
<P>Notice how the heading next to me seems to have a right margin.
That's because we are both inside a DIV block that has a right margin.</
P>
<BR CLEAR>
</DIV>
</BODY>
This example works in Netscape Navigator 4.0+. Example results:
----------------------------------------------------------------------------
----
Level-Four Heading
I am a plain paragraph, positioned below a non-floating level-four heading.
H4 - My Text On Right, No Float
I am also a plain paragraph, positioned below a non-floating level-four
heading. It just happens that the heading above me has its text alignment
set to right.
H4 - Float = Right
I am a regular paragraph. There's not much more you can say about me. I am
positioned after a level-four heading that is floating to the right, so I
come out positioned to the left of it.
H4 - My Text on Right, Float = Left
I'm also just a plain old paragraph going wherever the flow takes me.
H4 - Float = Right, Fixed Right Margin
Hello? Hello!! I am wrapping round an H4 that is floating to the right and
has a fixed right margin. When I try to satisfy all these requirements, you
see what happens! For best results, do not set the left and/or right margin
when you set the float (CSS syntax) or align (JavaScript syntax) property.
Use an enclosing element with margins instead.
H4 - Float = Right
Notice how the heading next to me seems to have a right margin. That's
because we are both inside a DIV block that has a right margin.
----------------------------------------------------------------------------
----
Clear
CSS syntax name: clear
JavaScript syntax name: clear
Possible values:
 none, left, right, both
Initial value:
 none
Applies to:
 all elements
Inherited:
 no
Percentage values:
 N/A
This property specifies whether 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:
P {clear:left;}
tags.H1.clear = "left";
----------------------------------------------------------------------------
----
Color and Background Properties
Just as you can set color and background properties for a document as a
whole, you can set them for block-level elements too. These properties are
applied to the "box" that contains the element.
----------------------------------------------------------------------------
----
Color
CSS syntax name: color
JavaScript syntax name: color
Possible values:
 color
Initial value:
 black
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 the section Color Units for information about how to specify colors.
The following examples illustrate the ways to set the color to red.
CSS Syntax Example
<STYLE TYPE="text/css">
EM {color:red;}
B {color:rgb(255, 0, 0);}
I {color:rgb(100%, 0%, 0%);}
CODE {color:#FF0000;}
</STYLE>
JavaScript Syntax Example
<STYLE TYPE="text/javascript">
tags.EM.color="red";
tags.B.color="rgb(255, 0, 0)";
tags.I.color="rgb(100%, 0%, 0%)";
tags.CODE.color="#FF0000";
</STYLE>
----------------------------------------------------------------------------
----
Background Image
CSS syntax name: background-image
JavaScript syntax name: backgroundImage
Possible values:
 url
Initial value:
 empty
Applies to:
 all elements
Inherited:
 no
Percentage values:
 N/A
This property specifies the background image of an element.
Partial URLs are interpreted relative to the source of the style sheet, not
relative to the document.
CSS Syntax Example
<STYLE TYPE="text/css">
  H1.SPECIAL {
  background-image:url(images/glass2.gif);
  padding:20pt;
  color:yellow;
}
H2.SPECIAL {
  padding:20pt;
  background-color:#FFFF33;
  border-style:solid;
  border-width:1pt;
  border-color:black;
}
P.SPECIAL B {background-image:url(images/tile1a.gif); }
P.SPECIAL I {background-color:cyan;}
</STYLE>
JavaScript Syntax Example
<STYLE TYPE="text/javascript">
classes.SPECIAL.H1.backgroundImage = "images/glass2.gif";
classes.SPECIAL.H1.paddings("20pt");
classes.SPECIAL.H1.color="yellow";
classes.SPECIAL.H2.paddings("20pt");
classes.SPECIAL.H2.backgroundColor="FFFF33";
classes.SPECIAL.H2.borderStyle="solid";
classes.SPECIAL.H2.borderWidth="1pt";
classes.SPECIAL.H2.borderColor="black";
contextual(classes.SPECIAL.P, tags.B).backgroundImage=
    "images/tile1a.gif";
contextual(classes.SPECIAL.P, tags.I).backgroundColor="cyan";
</STYLE>
Style Sheet Use
<H1 CLASS=SPECIAL>Heading One with Image Background</H1>
<P CLASS=SPECIAL>
Hello. Notice how the portion of this paragraph that has an <B>image
background</B> is promoted to being a block-level element on its own
line.</P>
<H2 CLASS=SPECIAL>Heading Two with Solid Color Background</H2>
<P CLASS=SPECIAL>Hello, here is some <I>very interesting</I>
information. Notice that each <I>colored portion</I> of this paragraph
just continues right along in its normal place.
</P>
This example works in Netscape Navigator 4.0+. Example results:
----------------------------------------------------------------------------
----
Heading One with Image Background
Hello. Notice how the portion of this paragraph that has an image background
is promoted to being a block-level element on its own line.
Heading Two with Solid Color Background
Hello, here is some very interesting information. Notice that each colored
portion of this paragraph just continues right along in its normal place.
----------------------------------------------------------------------------
----
Background Color
CSS syntax name: background-color
JavaScript syntax name: backgroundColor
Possible Values:
 color
Initial value:
 empty
Applies to:
 all elements
Inherited:
 no
Percentage values:
 N/A
This property specifies a solid background color for an element.
See the previous section, Background Image, for a working example.
----------------------------------------------------------------------------
----
Classification Properties
These properties classify elements into categories more than they set
specific visual parameters.
----------------------------------------------------------------------------
----
Display
CSS syntax name: display
JavaScript syntax name: display
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 whether an element is inline (for example, <EM> in
HTML), block-level element (for example. <H1> in HTML), or a block-level
list item (for example, <LI> in HTML). For HTML documents, the initial value
is taken from the HTML specification.
A value of none turns off the display of the element, including children
elements and the surrounding box. (Thus if the value is set to none, the
element is not be displayed.)
Note that block-level elements do not seem to respond to having their
display property set to inline.
CSS Syntax Example
EM.LISTEM {display:list-item;}
JavaScript Syntax Example
classes.LISTEM.EM.display="list-item";
----------------------------------------------------------------------------
----
List Style Type
CSS syntax name: list-style-type
JavaScript syntax name: listStyleType
Possible values:
 disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha,
upper-alpha, none
Initial value:
 disc
Applies to:
 elements with display property value of list-item
Inherited:
 yes
Percentage values:
 N/A
This 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 its children will inherit the
value. However, the list style is only displayed on elements that have a
display value of list-item. In HTML this is typically the case for the <LI>
element.
CSS Syntax Example
<STYLE TYPE="text/css">
UL.BLUELIST {color:blue;}
UL.BLUELIST LI {color:aqua;list-style-type:square;}
OL.REDLIST {color:red;}
OL.REDLIST LI {color:magenta; list-style-type:upper-roman;}
</STYLE>
JavaScript Syntax Example
<STYLE TYPE="text/javascript">
classes.BLUELIST.UL.color="blue";
contextual(classes.BLUELIST.UL, tags.LI).color="aqua";
contextual(classes.BLUELIST.UL, tags.LI).listStyleType="square";
classes.REDLIST.OL.color="red";
contextual(classes.REDLIST.OL, tags.LI).color="magenta";
contextual(classes.REDLIST.OL, tags.LI).listStyleType="upper-roman";
</STYLE>
Style Sheet Use
<UL CLASS=BLUELIST> <!-- LI elements inherit from UL -->
<LI>Consulting
<LI>Development
<LI>Technology integration
</UL>
<OL CLASS=REDLIST> <!-- LI elements inherit from OL -->
<LI>Start the program.
<LI>Enter your user name and password.
<LI>From the File menu, choose the Magic command.
</OL>
This example works in Netscape Navigator 4.0+. Example results:
----------------------------------------------------------------------------
----
Consulting
Development
Technology integration
Start the program.
Enter your user name and password.
From the File menu, choose the Magic command.
----------------------------------------------------------------------------
----
White Space
CSS syntax name: white-space
JavaScript syntax name: whiteSpace
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 (white space is collapsed),
pre (behaves like the <PRE> element in HTML) .
For example:
  P.KEEPSPACES {white-space:pre;} /* CSS syntax */
  classes.KEEPSPACES.P.whiteSpace = "pre"; /* JavaScript syntax */
----------------------------------------------------------------------------
----
Units
This section discusses units of measurement.
Length Units
The format of a length value is an optional sign character ('+' or '-', with
'+' being the default) immediately followed by a number followed by a unit
of measurement. For example, 12pt, 2em, 3mm.
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 scale more easily 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:
BODY {font-size:12pt; text-indent:3em;}
H1 {font-size:15pt;}
In the example above, the text indent value of H1 elements will be 36pt, not
45pt.
The following relative units are supported:
em -- the height of the element's font, typically the width or height of the
capital letter M
ex -- half the height of the element's font, which is typically the height
of the letter 'x'
px -- pixels, relative to rendering surface
The following absolute units are supported:
pt -- points
pc -- picas
px -- pixels
in -- inches
mm -- millimeters
cm -- centimeters
Color Units
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.
tags.BODY.color = "black";
tags.backgroundColor = "white";
tags.H1.color = "maroon";
tags.H2.color = "olive";
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 {background-color:#333333";} /* gray */
You can also specify an RGB color by using the rgb() function which takes
three arguments, for the red, green, and blue values. Each color value can
either be an integer from 0 to 255 inclusive, or a percentage, as in this
example:
P {color: rgb(200, 20, 240);) /* bright purple */
BLOCKQUOTE {background-color: rgb(100%, 100%, 20%); /* bright yellow */
----------------------------------------------------------------------------
----
[Contents] [Prev page] [Next page] [Index]
Last Updated: 08/07/97 15:21:45
----------------------------------------------------------------------------
----
Copyright © 1997 Netscape Communications Corporation

Grazie !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
adesso mi aziono...
:-)
Tessy