Newsgroup: it.comp.www.html
Titolo: CSS e NS4

Sto facendo un sacco di prove con i css ma troppe volte su NS non vanno come
devono,
dove trovo una lista di cio' che NS non supporta dei CSS ????  almeno mi
risparmio tante fatiche......  :-)))
Ciaooooo
Mario
*******************************************
IK1LBL
*Visitate 
http://www.cactus.masterweb.it
 *
*(per rispondermi eliminate _nospamz)*
********************************************

Ecco tutta la documentazione di 
http://developer.netscape.com
[Contents] [Prev page] [Next page] [Index]
----------------------------------------------------------------------------
----
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()