| Färger & Bakgrunder | |||||
| Attribut/Egenskap | Värde | Ärvs | Alla element | Beskrivning | Ex. |
|---|---|---|---|---|---|
| color | rgb(RR, GG, BB) ; rgb(RR%, GG%, BB%) ; #RRGGBB ; #RGB ; färgnamn ex. red | Ja | Ja | Bestämmer förgrundsfärgen. | { color:yellow } ; { color:rgb(255, 255, 0) } ; { color:rgb(100%, 100%, 0) } ; { color:#FFFF00 }. |
| background-image | url(image.gif) ; none | Nej | Ja | Bestämmer bakgrundsbilden hos ett element. | { background-image:url(image.gif) } ; { background-image:none } |
| background-color | rgb(RR, GG, BB) ; rgb(RR%, GG%, BB%) ; #RRGGBB ; #RGB ; transparent ; färgnamn ex. red | Nej | Ja | Bestämmer backgrundsfärgen till ett element. | { background-color:yellow } ; { background-color:rgb(255, 255, 0) } ; { background-color:#FFFF00 } |
| background | se: <"background-color"> och <"background-image"> | Nej | Ja | Bestämmer bakgrundsbild + bakgrundsfärg m.m. | { background:yellow } ; { background:#FFFF00 } ; { background:url(image.gif) } |
| Teckensnitt & Text. | |||||
| Attribut/Egenskap | Värde | Ärvs | Alla element | Beskrivning | Ex. |
| font-family | <"Teckensnitt"> ex. Arial, Verdana, sans-serif | Ja | Ja | Bestämmer elementets teckensnittet. | { font-family:Arial, Verdana, sans-serif } |
| font-style | normal ; italic ; oblique | Ja | Ja | Bestämmer elementets teckenstil. | { font-style:italic } |
| font-weight | normal ; bold ; bolder ; lighter ; 100 ; 200 ; 300 ; 400 ; 500 ; 600 ; 700 ; 800 ; 900 | Ja | Ja | Bestämmer hur feta eller magera teckenen ska vara. [ normal = 400 ; bold = 700 ] | { font-weight:bold } |
| font-stretch | normal ; wider ; narrower ; ultra-condensed ; extra-condensed ; condensed ; semi-condensed ; semi-expanded ; expanded ; extra-expanded ; ultra-expanded | Ja | Ja | Bestämmer teckenlängden. | { font-stretch:wider } |
| font-size | xx-small ; x-small ; smaller ; small ; medium ; large ; larger ; x-large ; xx-large ; längd [em] | Ja | Ja | Bestämmer teckenstorleken, smaller och large är relativa värden. | { font-size:x-large } |
| font | Se: <"font-family"> <"font-style"> <"font-weight"> <"font-stretch"> <"font-size"> | Ja | Ja | Se: <"font-family"> <"font-style"> <"font-weight"> <"font-stretch"> <"font-size"> | { font:Arial } |
| text-indent | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; [Procent (%)] | Ja | Nej | Bestämmer indrags längden. | { text-indent:20% } |
| text-align | left ; right ; center ; justify | Ja | Nej | Bestämmer text justering. | { text-align:center } |
| text-decoration | none ; underline ; overline ; line-through ; blink | Nej | Ja | Bestämmer över-, under-, genomstrucken text samt blinkning. | { text-decoration:underline } |
| letter-spacing | normal ; [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] | Ja | Ja | Bestämmer mellanrummet mellan bokstäverna. | { letter-spacing:3pt } |
| word-spacing | normal ; [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] | Ja | Ja | Bestämmer ordens mellanrum. | { word-spacing:5pt } |
| text-fransform | none ; capitalize ; uppercase ; lowercase | Ja | Ja | capitalize = versal först i varje ord ; uppercase = versal ; lowercase = gemen | { text-transform:capitalize } |
| line-height | normal ; [nummervärd ex. 1.2 = 120% anorlunda arv] ; points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; [procent (%)] | Ja | ?? | Text höjd från baslinjen. | { line-height:2pt } |
| Blockformatering. | |||||
| Attribut/Egenskap | Värde | Ärvs | Alla element | Beskrivning | Ex. |
| margin-top | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; [procent (%)] | Nej | Ja | Bestämmer översta marginalens längd. | { margin-top:10pt } |
| margin-bottom | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; [procent (%)] | Nej | Ja | Bestämmer nedersta marginalens längd. | { margin-bottom:10pt } |
| margin-left | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; [procent (%)] | Nej | Ja | Bestämmer vänstermarginalens längd. | { margin-left:15% } |
| margin-right | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; [procent (%)] | Nej | Ja | Bestämmer högermarginalens längd. | { margin-right:25% } |
| margin | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; [procent (%)] | Nej | Ja | Genväg till alla marginaler, skrivs i denna ordning. | { margin: 3pt 2pt 3pt } |
| padding-top | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; [procent (%)] | Nej | Ja | Det översta mellanrummet mellan blockets ram och dess innehåll. | { padding-top:10px } |
| padding-right | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; [procent (%)] | Nej | Ja | Högra mellanrummet mellan blockets ram och dess innehåll. | { padding-right:10px } |
| padding-bottom | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; [procent (%)] | Nej | Ja | Nedersta mellanrummet mellan blockets ram och dess innehåll. | { padding-bottom:10px } |
| padding-left | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; [procent (%)] | Nej | Ja | Vänstra mellanrummet mellan blockets ram och dess innehåll. | { padding-left:10px } |
| padding | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; [procent (%)] | Nej | Ja | Genväg till alla utfyllnads avstånd. Funger som margin vid genvägen. | { padding: 10px 10px } |
| border-top-width | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; thin ; medium ; thick | Nej | Ja | Bestämmer blockets översta rams tjocklek. | { border-top-width:thin } |
| border-right-width | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; thin ; medium ; thick | Nej | Ja | Bestämmer blockets högra rams tjocklek. | { border-right-width:medium } |
| border-bottom-width | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; thin ; medium ; thick | Nej | Ja | Bestämmer blockets nedersta rams tjocklek. | { border-botttom-width:thick } |
| border-left-width | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; thin ; medium ; thick | Nej | Ja | Bestämmer blockets vänstra rams tjocklek. | { border-left-width:medium } |
| border-width | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; thin ; medium ; thick | Nej | Ja | Bestämmer alla ramars tjocklek i samma ordning som margin. | { border-width: thin medium thick } |
| border-top-color | rgb(RR, GG, BB) ; rgb(RR%, GG%, BB%) ; #RRGGBB ; #RGB ; transparent ; färgnamn ex. yellow | Nej | Ja | Bestämmer översta ramens färg. | { border-top-color:yellow } |
| border-right-color | rgb(RR, GG, BB) ; rgb(RR%, GG%, BB%) ; #RRGGBB ; #RGB ; transparent ; färgnamn ex. red | Nej | Ja | Bestämmer högra ramens färg. | { border-right-color:red } |
| border-bottom-color | rgb(RR, GG, BB) ; rgb(RR%, GG%, BB%) ; #RRGGBB ; #RGB ; transparent ; färgnamn ex. blue | Nej | Ja | Bestämmer nedersta ramens färg. | { border-bottom-color:blue } |
| border-left-color | rgb(RR, GG, BB) ; rgb(RR%, GG%, BB%) ; #RRGGBB ; #RGB ; transparent ; färgnamn ex. green | Nej | Ja | Bestämmer vänstra ramens färg. | { border-left-color:green } |
| border-color | rgb(RR, GG, BB) ; rgb(RR%, GG%, BB%) ; #RRGGBB ; #RGB ; transparent ; färgnamn ex. red | Nej | Ja | Bestämmer alla ramars färger i samma ordning som margin. | { border-color:red } |
| border-top-style | none ; hidden ; dotted ; dashed ; solid ; double ; groove ; ridge ; inset ; outset | Nej | Ja | Bestämmer översta ramens utseende. | { border-top-style:double } |
| border-right-style | none ; hidden ; dotted ; dashed ; solid ; double ; groove ; ridge ; inset ; outset | Nej | Ja | Bestämmer högra radens utseende. | { border-right-style:roove } |
| border-bottom-style | none ; hidden ; dotted ; dashed ; solid ; double ; groove ; ridge ; inset ; outset | Nej | Ja | Bestämmer nedersta ramens utseende. | { border-bottom-style:solid } |
| border-left-style | none ; hidden ; dotted ; dashed ; solid ; double ; groove ; ridge ; inset ; outset | Nej | Ja | Bestämmer vänstar ramens utseende. | { border-left-style:inset } |
| border-style | none ; hidden ; dotted ; dashed ; solid ; double ; groove ; ridge ; inset ; outset | Nej | Ja | Bestämmer alla ramars utseende i samma ordning som margin. | { border-style:double } |
| width | [points (pt)] ; [pixels (px)] ; [inches (in)] ; [centimeter (cm)] ; [procent (%)] | Nej | Ja | Bestämmer blocket bredd. | { width:80% } |