Style Sheets Properties Guide
=Classification Properties=
= Index DOT Html by Brian Wilson
[bloo@blooberry.com] =
Main Index |
Style Sheet Index |
Top Of Tree |
Tag Index |
Tag History
Classification properties control the fundamental nature that is intrinsic
to HTML behavior. Most tags can be considered to be either Block Structuring
elements OR Character Level elements. Multiple spacing and
linebreaking are always collapsed unless within a PRE section. Unordered and
ordered lists always have the same display. All this is always constant.
WRONG!
That has all changed. With these three properties, you can change the intrinsic
HTML characteristics for most tags. This eliminates the need to use a specific
tag to achieve certain display characteristics. Use some of these properties
with caution, as the power these attributes give can easily be abused. The
'list-style' and associated properties will be
very useful for most authors - it allows a wide range of list-markers to be
used in list displays.
- display
[IE | N4B2]
- Applicable Tags: ALL
- HTML Equivalent: NA
- Inherit From Parent: No
- Default Value: Depends on HTML behavior
- What Is It?
- This property controls the fundamental HTML nature of the tag. Default values
for each HTML tag are taken from the HTML specifications. This property
allows an element to be treated as a block element, a list item element or an
inline element. An additional option 'none' turns
off the display of the element including children elements and the surrounding
box structure. This is a very powerful property and should be used with caution.
- Example
- Ext/Doc: p { display:
block }
- In-Line: <p STYLE="display:
block">text</p>
- Browser Notes
- Netscape 4 Beta 2 supports these properties, but produces some
unexpected results. The value 'Block' produces a break before the
element, but not after. 'List-item' creates an indent with no list
markers, and 'None' turns off the element and everything else until
a new block element is reached (the last was not tested extensively.)
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| block |
explicit |
IE | N4B2 |
This setting equates the current element to other block-level elements
such as H1,
BLOCKQUOTE
and P. |
| inline |
explicit |
IE | N4B2 |
This setting equates the current element to other inline elements (also called
Phrase Markup or Character Formatting) such as EM,
B, and FONT. |
| list-item |
explicit |
IE | N4B2 |
This setting equates the current element to other list sub-structures.
This includes elements such as LI,
and DD |
| none |
explicit |
IE | N4B2 |
This value turns off the display of the current element, its
virtual display box as well as its children elements. |
- white-space [IE | N4B2]
- Applicable Tags: Block-Level Elements
- HTML Equivalent: <pre>
| <nobr>
- Inherit From Parent: Yes
- Default Value: Depends on HTML tag
- What Is It?
- This property controls how white space and carriage returns/linefeeds should be
handled in a document. 'Normal' is the inherent value for most HTML
elements, with the exceptions having their own tags to create special behavior.
This is a very powerful property and should be used with caution.
- Example
- Ext/Doc: p { white-space:
normal }
- In-Line: <p STYLE="white-space:
normal">text</p>
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| normal |
explicit |
IE | N4B2 |
This setting is the normal behavior of most HTML tags. Carriage returns,
linefeeds and multiple spaces are treated as a single space. Line wrapping is
controlled by the browser. |
| pre |
explicit |
IE | N4B2 |
This setting makes a section behave like the HTML PRE
tag, where line wrapping control is taken away from the browser and all spaces, carriage returns,
and linefeeds in the document are preserved and displayed "as-is." |
| nowrap |
explicit |
IE | N |
Sections with a property value of 'nowrap' treat carriage returns/linefeeds
and multiple spaces as a single space, but linebreaks are not controlled by the browser.
They are instead controlled only by the HTML BR element. |
- list-style [IE | N4B5]
- Applicable Tags: All elements with a default or
assigned display property value of 'list-item'.
- HTML Equivalent:
<ul TYPE> |
<ol TYPE> |
<li TYPE>
- Inherit From Parent: Yes
- Default Values: [marker-type]: disc,
[position]: outside
- What Is It?
- This compound property is used when the author wishes to change
the default display characteristics of list-markers in HTML list
structures. An author can specify location of the marker, a graphic
to be used and/or a standard set of symbols. Keywords may come in
any order, but using multiple keywords that control the same behavior
is not allowed. If a [URL] is specified for the list marker, it will
be used in place of any [marker-type] also specified. Nevertheless,
a [marker-type] should always be specified in the event the [URL]
can not be loaded.
- Usage:
- Selector { list-style:
[marker-type]
[position]
[URL] }
- Example
- Ext/Doc: ul { list-style:
url(http://www.foo.com/bullet.gif) square inside }
- In-Line: <ul><li STYLE="list-style:
url(http://www.foo.com/bullet.gif) square inside">test
text in the list item</ul>
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| [list-style-type] |
[marker-type] |
IE | N4B5 |
See the individual property for details on syntax and allowed values. |
| [list-style-position] |
[position] |
IE | N |
See the individual property for details on syntax and allowed values. |
| [list-style-image] |
[URL] |
IE | N |
See the individual property for details on syntax and allowed values. |
- list-style-type [IE | N4B5]
- Applicable Tags: All elements
with a default or assigned display
property value of 'list-item'.
- HTML Equivalent:
<ul TYPE> |
<ol TYPE> |
<li TYPE>
- Inherit From Parent: Yes
- Default Values:
disc
- What Is It?
- This property is used when the author wishes to change
the default appearance of list-markers in HTML list structures.
If a 'list-style-image' property is also given and it has a value of
'none' or the URL can not be loaded, the 'list-style-type' property value
will be used in its place. This property should always be specified in the
event the URL pointed to in 'list-style-image' can not be loaded.
- Example
- Ext/Doc: ul { list-style-type:
square }
- In-Line: <ul><li STYLE="list-style-type:
square">test
text in the list item</ul>
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| none |
explicit |
IE | N4B5 |
No list-marker will be displayed for each list item.
|
| disc | circle |
square |
explicit |
IE | N4B5 |
This specifies standard symbols to use as non-ordered list markers. For each
successive list-item, the symbol will remain the same.
- 'disc': Solid bullet (default.)
- 'circle': Hollow bullet.
- 'square': Solid square.
|
| decimal |
lower-roman | upper-roman |
lower-alpha | upper-alpha |
explicit |
IE | N4B5 |
This specifies a standard set of symbol systems to use as ordered list markers.
The values increment with each successive list item using an alpha-numeric sequence.
- 'decimal': 1, 2, 3,4, 5,...
- 'lower-roman': i, ii, iii, iv, v,...
- 'upper-roman': I, II, III, IV, V,...
- 'lower-alpha': a, b, c, d, e,...
- 'upper-alpha': A, B, C, D, E,...
|
- list-style-image [IE | N]
- Applicable Tags: All elements
with a default or assigned display
property value of 'list-item'.
- HTML Equivalent: NA
- Inherit From Parent: Yes
- Default Values:
none
- What Is It?
- This property indicates a graphic to be used for the list markers
in the list structure. This overrides the default appearance of
list-markers in the current HTML list structure. If a
'list-style-image' is given a value of 'none' or the URL
can not be loaded, the 'list-style-type' will be used in its place.
The 'list-style-type' should always be specified in the event
the URL pointed to in 'list-style-image' can not be loaded.
- Example
- Ext/Doc: ul { list-style-image:
url(http://www.foo.com/bullet.gif) }
- In-Line: <ul><li STYLE="list-style-image:
url(http://www.foo.com/bullet.gif)">test
text in the list item</ul>
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| none |
explicit |
IE | N |
No list-marker will be displayed for each list item. |
| [URL] |
explicit |
IE | N |
This value indicates the URL source for the list-marker graphic.
It can be either an absolute or relative URL. Please see the section on
URL Units for details on how to indicate a URL
within a Style Sheet. If the graphic can not be loaded, whatever 'list-style-type'
property is set will be used. |
- list-style-position [IE | N]
- Applicable Tags: All elements
with a default or assigned display
property value of 'list-item'.
- HTML Equivalent: NA
- Inherit From Parent: Yes
- Default Values:
outside
- What Is It?
- This property determines how the list-marker is rendered in
relation to the content of the list item.
- Example
- Ext/Doc: ul { list-style-position:
inside }
- In-Line: <ul><li STYLE="list-style-position:
inside">test
text in the list item</ul>
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| inside |
explicit |
IE | N |
This renders wrapped text at a similar indentation
level to the list-marker. |
| outside |
explicit |
IE | N |
This specifies that all list item content will be
rendered indented from the list-marker. |
Boring Copyright Stuff....