CSS Properties Reference...
Computer_IT/Ajax2006. 6. 29. 15:27
반응형
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
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 |
TEXT
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 |
FONT
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 |
BORDER
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 |
MARGIN
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 |
Sets the bottom margin of an element | auto length % | 4 | 1 | 4 | 1 | |
Sets the left margin of an element | auto length % | 3 | 1 | 4 | 1 | |
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 |
PADDING
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 |
Sets the bottom padding of an element | length % | 4 | 1 | 4 | 1 | |
Sets the left padding of an element | length % | 4 | 1 | 4 | 1 | |
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 |
LIST
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 |
Dimension
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 |
Classification
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 |
Positioning
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 |
Pseudo-classes
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
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 |
Different Media Types
Media Type | Description |
---|---|
all | Used for all media type devices |
aural | Used for speech and sound synthesizers |
braille | Used for braille tactile feedback devices |
embossed | Used for paged braille printers |
handheld | Used for small or handheld devices |
Used for printers | |
projection | Used for projected presentations, like slides |
screen | Used for computer screens |
tty | Used for media using a fixed-pitch character grid, like teletypes and terminals |
tv | Used for television-type devices |
반응형
'Computer_IT > Ajax' 카테고리의 다른 글
WEB 개발용 Debugging Tools (0) | 2008.03.18 |
---|---|
JAVASCRIPT 10분 DOM 강좌 (0) | 2008.03.09 |
[JAVASCRIPT] 입력Form ToolTip 샘플 (0) | 2006.10.01 |
[MSDN] XMLHttpRequest (0) | 2006.06.30 |
[DOM] Accesskey를 이용해 Focus설정 (0) | 2006.06.29 |