På denna hemsida beskrivs egenskaper för bl.a. justering av text, indrag (inte marginaler! - se Boxar) samt bokstavs- och ordavstånd.
Egenskaper som behandlas på denna webbsida, och exempel på några av dess värden, är:
text-decoration: none | underline | line-throughtext-align: left | center | righttext-indent: ems (2em) | procent (10%)text-transform: capitalize | lowercaseletter-spacing: ems (2em) | procent (10%)word-spacing: ems (2em) | procent (10%)white-space: Textdekorationer, d.v.s. egenskapen text-decoration, innebär främst någon form av tillägg (eller avsaknad) av streck över, genom eller under text. Några av dessa värden fungerar endast i vissa webbläsare. Giltiga värden är:
Värdet "none" är standard, förutom för länkar, och är främst användbart för att ta bort understrykning på länkar i t.ex. menyer. Man bör inte ta bort understrykningen för länkar i löpande text (d.v.s. i stycken). (Se t.ex. sista stycket i detta avsnitt för exempel på hur " omvänt fel" det kan bli.)
Denna text är understruken (underline).
Denna text är genomstruken (line-through).
Denna text är "överstruken" (overline).
Denna text blinkar (blink - om din webbläsare stödjer detta).
Att stryka under text bör
undvikas till förmån för att använda fet
stil (eller kursiv stil).
Understrykning är ett "arv" från skrivmaskinens tid då det
var det enda sättet att betona (eng. emphase) text. Vi bör även
undvika kursiv stil då det är svårt att läsa på olika
operativsystem/webbläsare - återigen bör vi använda fet stil (vilket kan
kombineras med färg för att betona olika saker på olika sätt).
(Observera hur lätt det var, eller hur lätt det skulle kunna vara, att tolka
orden "stryka under" som en länk i första meningen i detta stycke.
Detta är varför man inte bör stryka under, eller ta bort understrykningar på
länkar, i löpande text. Den blinkande, eller eventuellt blinkande, texten
börjar bli lite irriterande nu, eller hur? :-)
Till början på sida
Precis som i ordbehandlare kan text justeras, vilket görs med egenskapen text-align. Giltiga värden visas nedan och standard är left (vänsterställd text).
Värdet justify innebär att element bör ha rak vänster- och högermarginal (s.k. marginaljustering), något som kanske inte fungerar i alla webbläsare.
I exempel nedan har jag försökt fylla ut så att det är minst tre rader för stycken med respektive värde för egenskapen.
Denna text är vänsterställd (vilket är standard). Eftersom jag valt att marginaljustera text i mina sidor måste jag "motverka" det i detta exempel. Tjohej vad jag måste skriva för att få minst tre rader.
Denna text är högerställd. Det är en praktisk egenskap hos text ibland, men liksom för centrerad text bör man kanske undvika den i längre text då vi förväntar oss text med rak vänstermarginal.
Denna text är centrerad. Om det finns flera rader så tenderar detta till att inte se så bra ut, speciellt om jag använder långa ord som marginaljustera/vad_det_nu_heter som gör att det inte ser så bra ut.
Denna text är marginaljusterad, d.v.s. den ska, liksom övriga stycken på dessa webbsidor, ha en rak vänster- och högermarginal. Det ser ganska bra ut men fungerar inte i alla webbläsare.
Till början på sida
Egenskapen text-indent ger ett indrag av första raden i ett element, något som är användbart i webbsidor med flera och längre textstycken (lättare att hitta var stycken börjar). Exempel på måttenheter för egenskapen visas nedan (se även Storlekar och måttenheter).
Detta stycke har ett indrag av 2em. Detta syns på att den första raden är indragen men inte de efterföljande raderna. Återigen måste jag skriva "blaj" för att få minst tre rader.
Detta andra stycke har ett indrag av -2em, d.v.s. ett negativt värde. Detta syns på att den första raden har ett negativt indrag (sticker ut till vänster) men inte de efterföljande raderna. (Besparar er blaj här. :-)
Nej, det är inte en designmiss - stycke ska börja utanför rutan. ;-)
Värde för denna egenskap kan vara negativt, d.v.s. vi kan erhåller ett s.k. hängande indrag som i stycke två ovan (mest intressant i punktlistor). För att erhålla indrag för alla rader i element måste man använda egenskaperna för marginaler (se Boxar).
Till början på sida
Egenskapen text-transform används för att ändra "skiftläge", t.ex. att varje ord börjar med bokstav, endast gemener eller endast versaler. Giltiga värdenvisas nedan och none är standard.
I exempel nedan visas effekten av respektive värde ovan (i nämnd ordning). Exempel visar bl.a. att vi bör undvika värdet capitalize i svensk text (och att jag borde lära mig stava :-).
Detta är ett stycke text som används för att visa på hur värden för denna egenskap påverkar text. Vi använder (X)HTML för att märka upp element med vid använder CSS för att påverka dess utseende.
Detta är ett stycke text som används för att visa på hur värden för denna egenskap påverkar text. Vi använder (X)HTML för att märka upp element med vid använder CSS för att påverka dess utseende.
Detta är ett stycke text som används för att visa på hur värden för denna egenskap påverkar text. Vi använder (X)HTML för att märka upp element med vid använder CSS för att påverka dess utseende.
Detta är ett stycke text som används för att visa på hur värden för denna egenskap påverkar text. Vi använder (X)HTML för att märka upp element med vid använder CSS för att påverka dess utseende.
Till början på sida
Precis som att vi kan använda kursiv stil eller radavstånd för att visa på att ett stycke är en ingress så kan vi ändra på avstånd mellan bokstäver för liknande effekt. För detta används egenskapen letter-spacing och nedan visas exempel på giltiga måttenheter (se även Storlekar och måttenheter).
Detta stycke har ett bokstavsavstånd bestämt av ...
Detta stycke har ett bokstavsavstånd av 0.2em.
Ibland vill man även ha ett längre avstånd mellan ord för att göra texten "luftigare" och för detta används egenskapen word-spacing. Nedan visas exempel på giltiga måttenheter (se även Storlekar och måttenheter).
Detta stycke har ett ordavstånd av ...
Detta stycke har ett ordavstånd av 0.4em.
Till början på sida
Icke synliga tecken (eng. white spaces), bl.a. mellanslag, tabb och retur, ska inte påverka flödet i webbsidor (enligt (X)HTML-standarder - se mer under Boxar). Men vill vi ändra detta beteende kan vi använda egenskapen white-space och giltiga värden för egenskapen visas nedan (där normal är standard :-).
| Värde | Effekt |
|---|---|
| normal | Påverkar inte flöde |
| pre | Mellanslag, tabbar och radbrytningar fungerar som i textfiler och
automatiska radbrytning fungerar inte (prova att minska bredden på fönster när du tittar på exempel nedan) |
| nowrap | Påverkar flödet i den bemärkelse att automatiska radbrytning inte sker |
| pre-wrap | Mellanslag, tabbar och radbrytningar fungerar som i textfiler, men automatiska radbrytning fungerar |
| pre-line | Endast radbrytningar påverkar flödet |
Effekten av dessa värden visas enklast med ett exempel (se även referenser nedan för ytterligare exempel).
Observera att alla webbläsare inte stödjer alla värden, främst pre-line!
Till början på sida
Nedan finns länkar med mer information.