<< Typografiark menu

Typografiark

- egenskaber

Her kan du få et overblik over hvad de forskellige egenskaber bruges til, samt et lille eksempel på brug af hver enkelt. Da egenskaberne her er grupperet i emner, kan de godt forekomme mere end én gang i tabellen. F.eks. findes border-color under både "Farve" og "Boks/Vindue".

Alle egenskaberne i tabellen er linket til en udførlig forklaring. Hvis du vil vide mere om end bestemt egenskab kan du derfor bare klikke på den.

Hvis du ikke kender til typografiark, kan du læse her hvordan du kommer i gang.

Bemærk: Brug af typografiark kræver kendskab til HTML

EgenskabBeskrivelseEksempel
Fonte
font-familyHer kan angives én eller flere specifikke fontnavne eller generiske fonteP { font-family: "New Century Schoolbook", Times, serif }
font-styleHer angives hvordan en font skal vises, som f.eks. kursiv (italic)H1 { font-style: italic }
font-variantMed denne egenskab kan man angive at store bogstaver (kapitaler) skal vises med samme højde som almindelige små bogstaver.SPAN { font-variant: small-caps }
font-weightLaver fed skrift, men kan også benyttes til at lave fonten tyndere end normaltH1 { font-weight: bolder }
P { font-weight: lighter }
font-sizeAngiver fontstørrelsen med absolutte størrelser som f.eks. xx-small, medium eller 12pt. Man kan også benytte relative størrelser som larger eller smaller.H1 { font-size: large }
STRONG { font-size: larger }
P { font-size: 14pt }
fontMed denne egenskab kan ovennævnte grupperes i étP {font: italic normal bold larger serif}
Farve
colorMed denne egenskab angives farven på et element, vha. farvens navn eller hexadecimal notation.H1 { color: blue }
H2 { color: #000080 }
border-left-colorSætter farven på et elements venstre kant/ramme. Farven kan angives vha. dens navn eller i hexadecimal notationTABLE {border-color: blue }
border-right-colorSætter farven på et elements højre kant/ramme. Farven kan angives vha. dens navn eller i hexadecimal notationTABLE {border-color: blue }
border-top-colorSætter farven på et elements øverste kant/ramme. Farven kan angives vha. dens navn eller i hexadecimal notationTABLE {border-color: blue }
border-bottom-colorSætter farven på et elements nederste kant/ramme. Farven kan angives vha. dens navn eller i hexadecimal notationTABLE {border-color: blue }
border-colorSætter på én gang farven på alle fire sider af et elements kant/ramme. Farven kan angives vha. dens navn eller i hexadecimal notationTABLE {border-color: blue }
background-colorHvor color angiver forgrundsfarven, kan baggrundsfarven angives med denne egenskab. Farven angives vha. navn eller hexadecimal notation.BODY { background-color: white }
H1 { background-color: #000080 }
Baggrund
background-colorHvor color angiver forgrundsfarven, kan baggrundsfarven angives med denne egenskab. Farven angives vha. navn eller hexadecimal notation.BODY { background-color: white }
H1 { background-color: #000080 }
background-imageAngivelse af et baggrundsbillede. BODY { background-image: url(/billeder/hund.gif) }
background-repeatBenyttes til at fortælle hvordan et baggrundsbillede skal placeres på skærmen
BODY { background-image: white url(hund.gif);
       background-repeat: repeat-x }
background-attachmentAngiver om en baggrund skal følge med eller ej når brugeren bevæger sig nedad/opad på siden.
BODY { background: white url(hund.gif);
       background-attachment: fixed }
background-positionPlacering af baggrund horisontalt og/eller vertikalt.BODY { background-position: top right }
backgroundMed denne egenskab kan ovennævnte grupperes i ét. Det er valgfrit hvilke og hvor mange egenskaber der medtages
BODY       { background: white url(http://www.webtip.dk/billede.gif) }
BLOCKQUOTE { background: #7fffd4 }
P          { background: url(../baggrunde/billede.png) #f0f8ff fixed }
TABLE      { background: #7fffd4 url(billede.jpg) no-repeat bottom right }
Tekst
word-spacingAfstanden mellem ord.P { word-spacing: 0.4em }
BLOCKQUOTE { word-spacing: -0.2em }
letter-spacingAfstand mellem bogstaver.P { letter-spacing: 0.4em }
BLOCKQUOTE { letter-spacing: -0.2em }
text-decorationUnderstreget eller f.eks. gennemstreget tekst.A:link { text-decoration: underline }
vertical-alignVertikal placering af billeder og/eller tekst. Er eksempelvis nyttig når man skal skrive m2 eller H2O.
IMG { vertical-align: middle }
#oppe  { vertical-align: super }
text-transformTil forvandling af tekst fra f.eks. store til små bogstaver eller omvendt. I eksemplet vil alle bogstaver i afsnittet være store, selvom de i HTML dokumentet er skrevet med småt.P {text-transform: uppercase }
text-alignHorisontal placering af tekst.H1 { text-align: center }
P { text-align: justify }
text-indentBruges til at indrykke den første linie i et afsnit.P { text-indent: 5em }
line-heightVed hjælp af denne egenskab kan man bestemme afstanden mellem linier (liniehøjde). I eksemplet forøges den aktuelle liniehøjde med 200%.P { line-height: 200% }
Boks/Vindue
margin-topBestemmer størrelsen af den øverste margen. Vil man undgå en margen kan man ganske enkelt angive værdien 0 (nul).BODY { margin-top: 0 }
P { margin-top: 20px }
margin-rightBestemmer størrelsen af højre margen. Vil man undgå en margin kan man ganske enkelt angive værdien 0 (nul).BODY { margin-right: 0 }
P { margin-right: 20px }
margin-bottomBestemmer størrelsen af den nederste margin. Vil man undgå en margin kan man ganske enkelt angive værdien 0 (nul).BODY { margin-bottom: 0 }
P { margin-bottom: 20px }
margin-leftBestemmer størrelsen af den venstre margin. Vil man undgå en margin kan man ganske enkelt angive værdien 0 (nul).BODY { margin-left: 0 }
P { margin-left: 20px }
marginI stedet for at angive hver enkelt margin vha. de fire ovennævnte, kan de alle formateres på én gang vha. denne egenskab. Du bestemmer selv om du vil angive én, flere eller en værdi til alle marginer.
BODY { margin: 5% }                  /* alle marginer 5% */
P    { margin: 10px 15px }           /* top og bund margin 10px,
                                     venstre og højre margin 15px */
DIV  { margin: 10px 20px 30px 40px } /* top margin 10px,
                                     højre margin 20px,
                                     bund margin 30px,
                                     venstre margin 40px */
padding-topBestemmer afstanden fra øverste kant/ramme til indholdet. Du kan eksempelvis angive afstanden i procent (%) eller antal pixel (px).TD {padding-top: 10px }
padding-rightBestemmer afstanden fra højre kant/ramme til indholdet. Du kan eksempelvis angive afstanden i procent (%) eller antal pixel (px).TD {padding-right: 10px }
padding-bottomBestemmer afstanden fra bundens kant/ramme til indholdet. Du kan eksempelvis angive afstanden i procent (%) eller antal pixel (px).TD {padding-bottom: 10px }
padding-leftBestemmer afstanden fra venstre kant/ramme til indholdet. Du kan eksempelvis angive afstanden i procent (%) eller antal pixel (px).TD {padding-left: 10px }
paddingI stedet for at angive afstanden til hver enkelt (se de fire førnævnte egenskaber) kan hver for sig, kan de samles i én. I følgende eksempel er afstanden sat for henholdsvis top, højre, venstre og bund, i den nævnte rækkefølge.BLOCKQUOTE { padding: 20px 30px 40px 50px }
border-top-widthAngiver tykkelsen på et elements øverste kant (f.eks. en tabel). Mulige værdier er thin, medium, thick eller f.eks. et antal pixel (px).TABEL { border-top-width: 20px }
border-right-widthAngiver tykkelsen på et elements højre kant (f.eks. en tabel).TABEL { border-right-width: 20px }
border-bottom-widthAngiver tykkelsen på et elements nederste kant (f.eks. en tabel).TABEL { border-bottom-width: 20px }
border-left-widthAngiver tykkelsen på et elements venstre kant (f.eks. en tabel).TABEL { border-left-width: 20px }
borderDe fire ovennævnte kan samles i én egenskab hvor værdierne til tykkelsen på den enkelte ramme/kant, angives i denne rækkefølge: top, højre, bund, venstre.TABLE {border: medium thick 5px 10px }
border-left-colorSætter farven på et elements venstre kant/ramme. Farven kan angives vha. dens navn eller i hexadecimal notationTABLE {border-color: blue }
border-right-colorSætter farven på et elements højre kant/ramme. Farven kan angives vha. dens navn eller i hexadecimal notationTABLE {border-color: blue }
border-top-colorSætter farven på et elements øverste kant/ramme. Farven kan angives vha. dens navn eller i hexadecimal notationTABLE {border-color: blue }
border-bottom-colorSætter farven på et elements nederste kant/ramme. Farven kan angives vha. dens navn eller i hexadecimal notationTABLE {border-color: blue }
border-colorSætter farven på et elements kant/ramme. Farven kan angives vha. dens navn eller i hexadecimal notationTABLE {border-color: blue }
border-left-styleBestemmer hvordan rammen/kanten i venstre side af et element ser ud, f.eks. med 3D effekt o.lign.TD {border-style: dashed }
border-right-styleBestemmer hvordan rammen/kanten i højre side af et element ser ud, f.eks. med 3D effekt o.lign.TABLE {border-style: dashed }
border-top-styleBestemmer hvordan rammen/kanten i toppen af et element ser ud, f.eks. med 3D effekt o.lign.H3 {border-style: solid }
border-bottom-styleBestemmer hvordan rammen/kanten i bunden af et element ser ud, f.eks. med 3D effekt o.lign.P {border-bottom-style: dotted }
border-styleMed denne egenskab bestemmes på én gang for alle 4 sider hvordan rammen/kanten på et element ser ud, f.eks. med 3D effekt o.lign.TABLE {border-style: dashed }
border-topMed denne egenskab kan man på én gang angive border-top-width, border-style og color for den øverste kant/ramme.TABLE {border-top: 10px solid blue}
border-rightMed denne egenskab kan man på én gang angive border-right-width, border-style og color for højre kant/ramme.TABLE {border-right: 10px solid blue}
border-bottomMed denne egenskab kan man på én gang angive border-bottom-width, border-style og color for den nederste kant/ramme.TABLE {border-bottom: 10px solid blue}
border-leftMed denne egenskab kan man på én gang angive border-left-width, border-style og color for den venstre kant/ramme.TABLE {border-left: 10px solid blue}
borderMed denne sættes border-width, border-style og color for alle fire kanter/rammer om et element på én gang.H2 { border: thin dotted blue }
widthHer kan angives bredden på et element i f.eks. pixel.IMG { width: 40px }
heightHer kan angives bredden på et element i f.eks. pixel.IMG { width: 40px }
floatBestemmer hvordan tekst skal ombrydes om elementet.OBJECT {float: left}
clearHer angives hvorvidt tekst må ombrydes om et elements side.TABLE {clear: both}
Diverse
displayMed display kan kan skjule elementer eller f.eks. vise et element på >block-niveau som om det var på inline-niveau. I eksemplet, vil den ekstra afstand der normalt opstår før og efter en overskrift ikke have effekt.H1 {display: inline}
white-spaceBestemmer hvordan mellemrum behandles. TD {whitespace: nowrap}
Lister
list-style-typeHer kan angives hvordan et listet element markeres.
LI.firkant { list-style-type: square }
UL.alm  { list-style-type: none }
OL        { list-style-type: upper-alpha }  /* A B C D E osv. */
OL OL     { list-style-type: decimal }      /* 1 2 3 4 5 osv. */
OL OL OL  { list-style-type: lower-roman }  /* i ii iii iv v osv. */

Bemærk at display skal have værdien list-item når list-style-type benyttes
list-style-imageHer kan angives et billede der skal vises ud for hvert listet element.
UL.flueben { list-style-image: url(/billeder/flueben.gif) }
UL LI.x  { list-style-image: url(prik.gif) }

Bemærk at display skal have værdien list-item når list-style-image benyttes
list-style-positionHer angives om markøren/billedet for et listet element skal følge indrykningen eller ej.UL {list-style-position: inside}

Ser således ud: 
 * Liste 1
   anden linie i listen
UL {list-style-position: outside}

Ser således ud: 
   * Liste 1
   anden linie i listen
list-styleDe tre ovennævnte kan grupperes i denne egenskab.
LI.firkant { list-style: square inside }
UL.alm  { list-style: none }
UL.flueben  { list-style: url(/billeder/flueben.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { list-style: lower-roman inside }

CSS Tutorials and resources

Forgotten heroes of CSS Properties CSS Tutorial

General CSS syntax More on Backgrounds in CSS

How does the CSS work? Integration of external files in CSS

More on CSS Fonts