Designklyngen: Netmediekursus, Efterår 2000
Netmediekursus -> Vejledninger -> Cascading Style Sheets
Examples
@lmport "http://www.w3.org/pub/WWW/def.style.css";
@import "../gray.css";
/* this is a comment */.
H1 EM, P:first-letter, OL LI.special {
color: yellow;
background: red
}
#pgr321 {
font-size: 8pt;
font-style: normal
}
CSS1 QUICK REFERENCE Pseudo-classes
:link, :visited, :active.
Pseudo_elements
:first-line, :first-letter.
Properties
font-size: <absolute-size> | <relative-size> | <length> | <percentage>
<absolute-size>= xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size> = <number> | larger | smaller
font-family: [<family-name> | <generic-family>] [, [<family-name> | <generic-family>]]*
<generic-family>= serif | sans-serif | cursive | fantasy | monospace
font-weight: normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | lighter | bolder
400 = normal, 700 = bold
font-style: normal | italic | oblique
font-variant: normal | small-caps
line-height: normal | <number> | <length> | <percentage>
font: [<font-weight> || <font-style> || <font-variant ]? <font-size> [ / <line-height ]? <font-family>
color: <color>
background: transparent | [<color> || <ur/> || <repeat> || <scroll> || <position>]
background-color: transparent | <color>
background-image: none | <url>
background-repeat: repeat | repeat-x | repeat-y | no-repeat
background-attachment: scroll | fixed
background-position: <position>
<repeat> = repeat | repeat-x | repeat-y | no-repeat
<scroll> = fixed | scroll
<position> = [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
word-spacing: normal | <length>
letter-spacing: normal | <length>
text-decoration: none | [ underline || overline || line-through || blink ]
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
text-transform: capitalize | uppercase | lowercase | none
text-align: left | right | center | justify
text-indent: <length> | <percentage>
margin-left, margin-right, margin-top, margin-bottom: <length> | <percentage> | auto
margin: [<length> | <percentage> | auto] {1,4}
padding-left, padding-right, padding-top, padding-bottom: <length> | <percentage>
padding: [<length> | <percentage> | auto ] {1,4}
border, border-top, border-right, border-bottom, border-left: <border-width> || <border-style> || <color> border-color: <color>{1,4}
border-style: <border-style> {1,4}
border-width: <border-width>{1,4}
border-top-width, border-right-width, border-bottom-width, border-left-width: <border-width>
<border-width> = thin | medium | thick | <length>
<border-style>= none | dotted | dashed | solid | double | groove | ridge | inset | outset
width: <length> | <percentage> | auto
height: <length> | auto
float: left | right | none
clear: none | left | right | both
display: block | inline | list-item | none
white-space: normal | pre | nowrap
list-style: <keyword> || <position> || <ur/>
list-style-type: <keyword>
list-style-imag: <url>
list-style-position: <position>
<Keyword> = disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
<position>= inside | outside
Units
pt (=l/72in), in (=2.54cm), pc (=12pt), mm, cm, px, em, ex.
Colors
<color> = aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | purple | red | silver | teal | white | yellow | <hex-color> | <rgb-color>
<hex-color> = #RGB | #RRGGBB (where R. G. B taken from 0123456789ABCDEF)
<rgb-color> = rgb(R, G. B) | rgb(r%, g%, b%) (useful range for R. G and B is 0-255)
URL values
url(<URL>)
Index
Program
Praktiske oplysninger
Litteratur
Vejledninger
Lænker
Opdateret 2. august 2000