- Font Properties
Property | Valid Values | Example | Inherited? |
font-family | [font name or type] | font-family: Verdana, Arial; | Y |
font-style | normal | italic | font-style:italic; | Y |
font-variant | normal | small-caps | font-variant:small-caps; | Y |
font-weight | normal | bold | font-weight:bold; | Y |
font-size | [ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | percentage | length | font-size:12pt; | Y |
font | [ font-style || font-variant || font-weight ] ? font-size [ / line-height ] ? font-family | font: bold 12pt Arial; | Y |
- Color and Background Properties
Property | Valid Values | Example | Inherited? |
color | color | color: red | Y |
background-color | color | transparent | background-color: yellow | N* |
background-image | url | none | background-image: url(house.jpg) | N* |
background-repeat | repeat | repeat-x | repeat-y | no-repeat | background-repeat: no-repeat | N* |
background-attachment | scroll | fixed | background-attachment: fixed | N* |
background-position | [ position | length ] | {1,2} | [ top | center | bottom ] || [ left | center | right ] | background-position: top center | N* |
background | transparent | color || url || repeat || scroll || position | background: silver url(house.jpg) repeat-y | N* |
* Starting in CSS2, the properties indicated above are inherited.
- Text Properties
Property | Valid Values | Example | Inherited? |
letter-spacing | normal | length | letter-spacing:5pt | Y |
text-decoration | none | underline | overline | line-through | text-decoration:underline | N |
vertical-align | sub | super | | vertical-align:sub | N |
text-transform | capitalize | uppercase | lowercase | none | text-transform:lowercase | N |
text-align | left | right | center | justify | text-align:center | N |
text-indent | length | percentage | text-indent:25px | N |
line-height | normal | number | length | percentage | line-height:15pt | N |
- Box Properties
Property | Valid Values | Example | Inherited? |
margin-top | length | percentage | auto | margin-top:5px | N |
margin-right | length | percentage | auto | margin-right:5px | N |
margin-bottom | length | percentage | auto | margin-bottom:1em | N |
margin-left | length | percentage | auto | margin-left:5pt | N |
margin | length | percentage | auto {1,4} | margin: 10px 5px 10px 5px | N |
padding-top | length | percentage | padding-top:10% | N |
padding-right | length | percentage | padding-right:15px | N |
padding-bottom | length | percentage | padding-bottom:1.2em | N |
padding-left | length | percentage | padding-left:10pt; } | N |
padding | length | percentage {1,4} | padding: 10px 10px 10px 15px | N |
border-top-width | thin | medium | thick | length | border-top-width:thin | N |
border-right-width | thin | medium | thick | length | border-right-width:medium | N |
border-bottom-width | thin | medium | thick | length | border-bottom-width:thick | N |
border-left-width | thin | medium | thick | length | border-left-width:15px | N |
border-width | thin | medium | thick | length {1,4} | border-width: 3px 5px 3px 5px | N |
border-top-color | color | border-top-color:navajowhite | N |
border-right-color | color | border-right-color:whitesmoke | N |
border-bottom-color | color | border-bottom-color:black | N |
border-left-color | color | border-left-color:#C0C0C0 | N |
border-color | color {1,4} | border-color: green red white blue; } | N |
border-top-style | none | solid | double | groove | ridge | inset | outset | border-top-style:solid | N |
border-right-style | none | solid | double | groove | ridge | inset | outset | border-right-style:double | N |
border-bottom-style | none | solid | double | groove | ridge | inset | outset | border-bottom-style:groove | N |
border-left-style | none | solid | double | groove | ridge | inset | outset | border-left-style:none | N |
border-style | none | solid | double | groove | ridge | inset | outset | border-style:ridge; } | N |
border-top | border-width | border-style | border-color | border-top: medium outset red | N |
border-right | border-width | border-style | border-color | border-right: thick inset maroon | N |
border-bottom | border-width | border-style | border-color | border-bottom: 10px ridge gray | N |
border-left | border-width | border-style | border-color | border-left: 1px groove red | N |
border | border-width | border-style | border-color | border: thin solid blue | N |
float | none | left | right | float:none | N |
clear | none | left | right | both | clear:left | N |
- Classification Properties
Property | Valid Values | Example | Inherited? |
display | none | block | inline | list-item | display:none | N |
list-style-type | disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | list-style-type:upper-alpha | Y |
list-style-image | url | none | list-style-image:url(icFile.gif) | Y |
list-style-position | inside | outside | list-style-position:inside | Y |
list-style | keyword || position || url | list-style: square outside url(icFolder.gif) | Y |
- Positioning Properties
Property | Valid Values | Example | Applies to | Inherited? |
clip | shape | auto | clip:rect(0px 200px 200px 0px) | all elements | N |
height | length | auto | height:200px | DIV, SPAN and replaced elements | N |
left | length | percentage | auto | left:0px | absolutely and relatively positioned elements | N |
overflow | visible | hidden | scroll | auto | overflow:scroll | all elements | N |
position | absolute| relative | static | position:absolute | all elements | N |
top | length | percentage | auto | top:0px | absolutely and relatively positioned elements | N |
visibility | visible | hidden | inherit | visibility:visible | all elements | N |
width | length | percentage | auto | width:80% | DIV, SPAN and replaced elements | N |
z-index | auto | integer | z-index:-1 | absolutely and relatively positioned elements | N |
- Printing Properties
Property | Valid Values | Example | Inherited? |
page-break-before | auto | always || left | right | page-break-before:always | N |
page-break-after | auto | always || left | right | page-break-before:auto | N |
- Pseudo Classes
Property | Valid Values | Example | Inherited? |
cursor | auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | { cursor:hand; } | Y |
active, hover, link, visited | n/a | a:hover { color:red; } | Y |
first-letter, first-line | any font manipulating declaration | p:first-letter{ float:left;color:blue} | N |
Specifying Values
Many CSS properties take numerical values for length, width, height and other measurements. Some values can be specified as percentage % values and these are indicated in the Glossary examples. Absolute values can be specified using these codes: e.g.
Many CSS properties take numerical values for length, width, height and other measurements. Some values can be specified as percentage % values and these are indicated in the Glossary examples. Absolute values can be specified using these codes: e.g.
style="line-height:3ex;"style="border-top:2px;"Specifying absolute CSS property values | ||
Code | Unit | Description |
px | Pixel | Taken relative to monitor resolution |
pt | Point | Traditional publishing font measurement |
72 Points is approximately 1 inch (2.5cm). | ||
pc | Pica | Traditional publishing font measurement |
12 Pica = 1 Point, approximately 1 / 6 inch (8mm). | ||
em | Em | Taken relative to the capital M in the current font |
Can be assumed to be equal to the current point size. | ||
ex | Ex | Taken relative to the lower-case x in the current font |
Can be assumed to equal half the current point size. | ||
in | " | Inches |
mm | mm | Millimetres |
cm | cm | Centimetres |
References :
0 komentar:
Posting Komentar