flame

又见炊烟

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: :: 管理 ::

公告

The links in the "Property" column point to more useful information about the specific property.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Background

On-line examples

Property Description Values IE F N W3C
background A shorthand property for setting all background properties in one declaration background-color
background-image
background-repeat background-attachment background-position
4 1 6 1
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page scroll
fixed
4 1 6 1
background-color Sets the background color of an element color-rgb
color-hex
color-name
transparent
4 1 4 1
background-image Sets an image as the background url
none
4 1 4 1
background-position Sets the starting position of a background image top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
4 1 6 1
background-repeat Sets if/how a background image will be repeated repeat
repeat-x
repeat-y
no-repeat
4 1 4 1

Border

On-line examples

Property Description Values IE F N W3C
border A shorthand property for setting all of the properties for the four borders in one declaration border-width
border-style
border-color
4 1 4 1
border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration border-bottom-width
border-style
border-color
4 1 6 1
border-bottom-color Sets the color of the bottom border border-color 4 1 6 2
border-bottom-style Sets the style of the bottom border border-style 4 1 6 2
border-bottom-width Sets the width of the bottom border thin
medium
thick
length
4 1 4 1
border-color Sets the color of the four borders, can have from one to four colors color 4 1 6 1
border-left A shorthand property for setting all of the properties for the left border in one declaration border-left-width
border-style
border-color
4 1 6 1
border-left-color Sets the color of the left border border-color 4 1 6 2
border-left-style Sets the style of the left border border-style 4 1 6 2
border-left-width Sets the width of the left border thin
medium
thick
length
4 1 4 1
border-right A shorthand property for setting all of the properties for the right border in one declaration border-right-width
border-style
border-color
4 1 6 1
border-right-color Sets the color of the right border border-color 4 1 6 2
border-right-style Sets the style of the right border border-style 4 1 6 2
border-right-width Sets the width of the right border thin
medium
thick
length
4 1 4 1
border-style Sets the style of the four borders, can have from one to four styles none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
4 1 6 1
border-top A shorthand property for setting all of the properties for the top border in one declaration border-top-width
border-style
border-color
4 1 6 1
border-top-color Sets the color of the top border border-color 4 1 6 2
border-top-style Sets the style of the top border border-style 4 1 6 2
border-top-width Sets the width of the top border thin
medium
thick
length
4 1 4 1
border-width A shorthand property for setting the width of the four borders in one declaration, can have from one to four values thin
medium
thick
length
4 1 4 1

Classification

On-line examples

Property Description Values IE F N W3C
clear Sets the sides of an element where other floating elements are not allowed left
right
both
none
4 1 4 1
cursor Specifies the type of cursor to be displayed url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
4 1 6 2
display Sets how/if an element is displayed none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
4 1 4 1
float Sets where an image or a text will appear in another element left
right
none
4 1 4 1
position Places an element in a static, relative, absolute or fixed position static
relative
absolute
fixed
4 1 4 2
visibility Sets if an element should be visible or invisible visible
hidden
collapse
4 1 6 2

Dimension

On-line examples

Property Description Values IE F N W3C
height Sets the height of an element auto
length
%
4 1 6 1
line-height Sets the distance between lines normal
number
length
%
4 1 4 1
max-height Sets the maximum height of an element none
length
%
- 1 6 2
max-width Sets the maximum width of an element none
length
%
- 1 6 2
min-height Sets the minimum height of an element length
%
- 1 6 2
min-width Sets the minimum width of an element length
%
- 1 6 2
width Sets the width of an element auto
%
length
  
4 1 4 1

Font

On-line examples

Property Description Values IE F N W3C
font
A shorthand property for setting all of the properties for a font in one declaration font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
4 1 4 1
font-family
A prioritized list of font family names and/or generic family names for an element family-name
generic-family
3 1 4 1
font-size
Sets the size of a font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
3 1 4 1
font-size-adjust Specifies an aspect value for an element that will preserve the x-height of the first-choice font none
number
- - - 2
font-stretch Condenses or expands the current font-family normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
- - - 2
font-style
Sets the style of the font normal
italic
oblique
4 1 4 1
font-variant
Displays text in a small-caps font or a normal font normal
small-caps
4 1 6 1
font-weight
Sets the weight of a font normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
4 1 4 1

Generated Content

Property Description Values IE F N W3C
content Generates content in a document. Used with the :before and :after pseudo-elements string
url
counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, list-style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
  1 6 2
counter-increment Sets how much the counter increments on each occurrence of a selector  none
identifier number
      2
counter-reset Sets the value the counter is set to on each occurrence of a selector none
identifier number
      2
quotes Sets the type of quotation marks none
string string
- 1 6 2

List and Marker

On-line examples

Property Description Values IE F N W3C
list-style A shorthand property for setting all of the properties for a list in one declaration list-style-type
list-style-position
list-style-image
4 1 6 1
list-style-image Sets an image as the list-item marker none
url
4 1 6 1
list-style-position Sets where the list-item marker is placed in the list inside
outside
4 1 6 1
list-style-type Sets the type of the list-item marker none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha 
4 1 4 1
marker-offset   auto
length
  1 7 2

Margin

On-line examples

Property Description Values IE F N W3C
margin A shorthand property for setting the margin properties in one declaration margin-top
margin-right
margin-bottom
margin-left
4 1 4 1

margin-bottom

Sets the bottom margin of an element auto
length
%
4 1 4 1

margin-left

Sets the left margin of an element auto
length
%
3 1 4 1

margin-right

Sets the right margin of an element auto
length
%
3 1 4 1
margin-top Sets the top margin of an element auto
length
%
3 1 4 1

Outlines

Property Description Values IE F N W3C
outline A shorthand property for setting all the outline properties in one declaration outline-color
outline-style
outline-width
- 1.5 - 2
outline-color Sets the color of the outline around an element color
invert
- 1.5 - 2
outline-style Sets the style of the outline around an element none
dotted
dashed
solid
double
groove
ridge
inset
outset
- 1.5 - 2
outline-width Sets the width of the outline around an element thin
medium
thick
length
- 1.5 - 2

Padding

On-line examples

Property Description Values IE F N W3C
padding A shorthand property for setting all of  the padding properties in one declaration padding-top
padding-right
padding-bottom
padding-left
4 1 4 1

padding-bottom

Sets the bottom padding of an element length
%
4 1 4 1

padding-left

Sets the left padding of an element length
%
4 1 4 1

padding-right

Sets the right padding of an element length
%
4 1 4 1
padding-top Sets the top padding of an element length
%
4 1 4 1

Positioning

On-line examples

Property Description Values IE F N W3C
bottom Sets how far the bottom edge of an element is above/below the bottom edge of the parent element auto
%
length
5 1 6 2
clip Sets the shape of an element. The element is clipped into this shape, and displayed shape
auto
4 1 6 2
left Sets how far the left edge of an element is to the right/left of the left edge of the parent element auto
%
length
4 1 4 2
overflow
Sets what happens if the content of an element overflow its area visible
hidden
scroll
auto
4 1 6 2
position Places an element in a static, relative, absolute or fixed position static
relative
absolute
fixed
4 1 4 2
right Sets how far the right edge of an element is to the left/right of the right edge of the parent element auto
%
length
5 1 6 2
top Sets how far the top edge of an element is above/below the top edge of the parent element auto
%
length
4 1 4 2
vertical-align Sets the vertical alignment of an element baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
4 1 4 1
z-index Sets the stack order of an element auto
number
4 1 6 2

Table

Property Description Values IE F N W3C
border-collapse Sets the border model of a table collapse
separate
5 1 7 2
border-spacing Sets the distance between the borders of adjacent cells (only for the "separated borders" model) length length - 1 6 2
caption-side Sets the position of the caption according to the table top
bottom
left
right
- 1 6 2
empty-cells Sets whether cells with no visible content should have borders or not (only for the "separated borders" model)  show
hide
- 1 6 2
table-layout Sets the algorithm used to lay out the table auto
fixed
5 1 6 2

Text

On-line examples

Property Description Values IE F N W3C
color Sets the color of a text color 3 1 4 1
direction Sets the text direction ltr
rtl
6 1 6 2
letter-spacing Increase or decrease the space between characters normal
length
4 1 6 1
text-align Aligns the text in an element left
right
center
justify
4 1 4 1
text-decoration Adds decoration to text none
underline
overline
line-through
blink
4 1 4 1
text-indent Indents the first line of text in an element length
%
4 1 4 1
text-shadow   none
color
length
       
text-transform Controls the letters in an element none
capitalize
uppercase
lowercase
4 1 4 1
unicode-bidi   normal
embed
bidi-override
5     2
white-space Sets how white space inside an element is handled normal
pre
nowrap
5 1 4 1
word-spacing Increase or decrease the space between words normal
length
6 1 6 1

Pseudo-classes

On-line examples

Pseudo-class Purpose IE F N W3C
:active Adds special style to an activated element 4 1 8 1
:focus Adds special style to an element while the element has focus - - - 2
:hover Adds special style to an element when you mouse over  it 4 1 7 1
:link Adds special style to an unvisited link 3 1 4 1
:visited Adds special style to a visited link 3 1 4 1
:first-child Adds special style to an element that is the first child of some other element   1 7 2
:lang Allows the author to specify a language to use in a specified element   1 8 2

Pseudo-elements

On-line examples

Pseudo-element Purpose IE F N W3C
:first-letter Adds special style to the first letter of a text 5 1 8 1
:first-line Adds special style to the first line of a text 5 1 8 1
:before Inserts some content before an element   1.5 8 2
:after Inserts some content after an element   1.5 8 2

Print Properties

Printing HTML documents has always been problematic. In CSS2 the print properties are added to make it easier to print from the Web.


The links in the "Property" column point to more useful information about the specific property.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Property Description Values W3C
orphans Sets the minimum number of lines for a paragraph that must be left at the bottom of a page number 2
marks Sets what sort of marks should be rendered outside the page box none
crop
cross
 
page Sets a page type to use when displaying an element auto
identifier
2
page-break-after Sets the page-breaking behavior after an element auto
always
avoid
left
right
2
page-break-before

Sets the page-breaking behavior before an element

auto
always
avoid
left
right
2
page-break-inside Sets the page-breaking behavior inside an element auto
avoid
2
size Sets the orientation and size of a page auto
portrait
landscape
 
widows Sets the minimum number of lines for a paragraph that must be left at the top of a page number 2

Aural Style Sheets

Aural style sheets use a combination of speech synthesis and sound effects to make the user listen to information, instead of reading information.

Aural presentation can be used:

  • by blind people
  • to help users learning to read
  • to help users who have reading problems
  • for home entertainment
  • in the car
  • by print-impaired communities

The aural presentation converts the document to plain text and feed this to a screen reader (a program that reads all the characters on the screen).

An example of an Aural style sheet:

h1, h2, h3, h4
            {
            voice-family: male;
            richness: 80;
            cue-before: url("beep.au")
            }

The example above will make the speech synthesizer play a sound, then speak the headers in a very rich male voice.


CSS2 Aural Reference

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Property Description Values W3C
azimuth Sets where the sound/voices should come from (horizontally) angle
left-side
far-left
left
center-left
center
center-right
right
far-right
right-side
behind
leftwards
rightwards
2
cue A shorthand property for setting the cue-before and cue-after properties in one declaration cue-before
cue-after
2
cue-after Specifies a sound to be played after speaking an element's content to delimit it from other none
url
2
cue-before Specifies a sound to be played before speaking an element's content to delimit it from other none
url
2
elevation Sets where the sound/voices should come from (vertically) angle
below
level
above
higher
lower 
2
pause A shorthand property for setting the pause-before and pause-after properties in one declaration pause-before
pause-after
2
pause-after Specifies a pause after speaking an element's content time
%
2
pause-before Specifies a pause before speaking an element's content time
%
2
pitch Specifies the speaking voice frequency
x-low
low
medium
high
x-high 
2
pitch-range Specifies the variation in the speaking voice. (Monotone voice or animated voice?) number 2
play-during Specifies a sound to be played while speaking an element's content auto
none
url
mix
repeat
2
richness Specifies the richness in the speaking voice. (Rich voice or thin voice?) number 2
speak Specifies whether content will render aurally normal
none
spell-out
2
speak-header Specifies how to handle table headers. Should the headers be spoken before every cell, or only before a cell with a different header than the previous cell always
once
2
speak-numeral Specifies how to speak numbers digits
continuous
2
speak-punctuation Specifies how to speak punctuation characters none
code
2
speech-rate Specifies the speed of the speaking number
x-slow
slow
medium
fast
x-fast
faster
slower 
2
stress Specifies the "stress" in the speaking voice number 2
voice-family A prioritized list of voice family names that contain specific voices specific-voice
generic-voice
2
volume Specifies the volume of the speaking number
%
silent
x-soft
soft
medium
loud
x-loud 
2

Measurements

Unit Description
% percentage
in inch
cm centimeter
mm millimeter
em one em is equal to the current font size of the current element
ex one ex is the x-height of a font (x-height is usually about half the font-size)
pt point (1 pt is the same as 1/72 inch)
pc pica (1 pc is the same as 12 points)
px pixels (a dot on the computer screen)

Colors

Unit Description
color_name A color name (e.g. red)
rgb(x,x,x) An RGB value (e.g. rgb(255,0,0))
rgb(x%, x%, x%) An RGB percentage value (e.g. rgb(70%,0%,0%))
#rrggbb A HEX number (e.g. #ff0000)

Colors are displayed combining  RED, GREEN, and BLUE light sources.


Color Values

CSS colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).

This table shows the result of combining Red, Green, and Blue light sources:.

Color Color HEX Color RGB
  #000000 rgb(0,0,0)
  #FF0000 rgb(255,0,0)
  #00FF00 rgb(0,255,0)
  #0000FF rgb(0,0,255)
  #FFFF00 rgb(255,255,0)
  #00FFFF rgb(0,255,255)
  #FF00FF rgb(255,0,255)
  #C0C0C0 rgb(192,192,192)
  #FFFFFF rgb(255,255,255)


Color Names

A collection of color names is supported by most browsers.

Note: Only 16 color names are supported by the W3C CSS standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). For all other colors you should use the Color HEX value.

Color Color HEX Color Name
  #F0F8FF AliceBlue
  #FAEBD7 AntiqueWhite
  #7FFFD4 Aquamarine
  #000000 Black
  #0000FF Blue
  #8A2BE2 BlueViolet
  #A52A2A Brown
posted on 2006-05-09 13:55 又见炊烟 阅读(...) 评论(...) 编辑 收藏