[ Forrige | Indhold | Næste]

Lektion 5: Tekst

I denne lektion vil vi kigge nærmere på mulighederne for at tilføje layout til tekst. I den forbindelse vil følgende egenskaber blive gennemgået:

• Tekst indrykning [text-indent]
• Tekst justering [text-align]
• Tekst dekoration [text-decoration]
• Bogstav afstand [letter-spacing]
• Tekst transformation [text-transform]

Tekst indrykning [text-indent]

Med egenskaben text-indent kan man give sine tekstafsnit et mere elegant udtryk ved at definere et indryk for den første linie af afsnittet. I nedenstående eksempel defineres således et indryk på 30px for alle tekstafsnit markeret med <p>:

p {
	text-indent: 30px;
}

 Vis som eksempel

Tekst justering [text-align]

text-align angiver, hvordan en tekst skal justeres. text-align svarer således til atributten align i HTML. En tekst kan i udgangspunktet justeres til højre, venstre eller centreres. Herudover kan et tekst afsnit opstilles med lige marginer med værdien justify.

Nedenstående eksempel viser hvordan teksten i tabeloverskrifter ( <th> ) justeres til højre, mens datacellerne ( <td> ) centreres. Hertil kommer at tekstafsnit ( <p> ) justeres med lige marginer:

th {
	text-align: right;
}
td {
	text-align: center;
}
p {
	text-align: justify;
}

 Vis som eksempel

Tekst dekoration [text-decoration]

Med egenskaben text-decoration er det muligt at tilføje forskellige "dekorationer" til tekst. Med "dekorationer" menes, at man kan understrege, overstrege eller gennemstrege teksten.

I det følgende eksempel er <h1>-overskrifter understregede, <h2>-overskrifter overstregede og <h3>-overskrifter gennemstregede:

h1 {
	text-decoration:underline;
}
h2 {
	text-decoration:overline;
}
h3 {
	text-decoration:line-through;
}

 Vis som eksempel

Bogstav afstand [letter-spacing]

Afstanden mellem bogstaver kan defineres med egenskaben letter-spacing - værdien er simpelthen blot angivelsen af den ønskede længede.

Det vil sige at for at opnå en afstand på 3px mellem bogstaverne i tekstafsnit ( <p> ) og 6px mellem bogstaverne i overskrifter ( <h1> ), skal vores CSS indeholde følgende linier:

h1 {
	letter-spacing: 6px;
}
p {
	letter-spacing: 3px;
}

 Vis som eksempel

Tekst transformation [text-transform]

Med begrebet text-transform kan der transformeres mellem STORE eller små bogstaver (uppercase og lowercase). Dette kan man gøre uanset, hvordan selve teksten er skrevet i HTML koden.

Noget som i HTML koden står som "overskrift", kan altså med text-transform blive til "OVERSKRIFT" eller "Overskrift". Der findes 4 mulige værdier:

capitalize

Skriver det første bogstav i hvert ord med uppercase (STORT) - f.eks. bliver "jens hansen" til "Jens Hansen".

uppercase

Skriver alle bogstaver i hvert ord med uppercase (STORT) - f.eks. bliver "jens hansen" til "JENS HANSEN".

lowercase

Skriver alle bogstaver i hvert ord med lowercase (små) - f.eks. bliver "JENS HANSEN" til "jens hansen".

none

Ingen ændringer - teksten skrives som den står i HTML koden.

Som et eksempel kan vi kigge på en liste med navne. Navnene er opmarkeret med <li>, som er et punkt i en liste. Vi ønsker, at alle navnene skal starte med store bogstaver, endvidere ønsker vi at alle vores overskrifter skal stå med STORE bogstaver.

Prøv at kigge i HTML koden når du ser eksemplet - så vil du se, at teksten egentlig står med små bogstaver:

h1 {
	text-transform: uppercase;;
}
li {
	text-transform: capitalize;;
}

 Vis som eksempel

Browser-kompatibelitet

Stort set alle browsere understøtter det, du lige har lært. Hvis du er i tvivl kan prøve dig frem, eller referere til nedenstående tabel:

Tabellen viser fra og med hvilken version browseren understøtter den pågældende egenskab.

Du har i de sidste 3 lektioner lært en masse nye egenskaber - CSS indeholder mange flere egenskaber.

I den næste lektion kigger vi nærmere på links.

[ Forrige | Indhold | Næste]