Egenskaper för text

Det finns en hel del olika egenskaper med vilka man kan omforma text: det går att bestämma avstånd mellan ord, bokstäver och rader. Du kan även dekorera texten på olika sätt. Här nedan följer de egenskaper som finns.

word-spacing

Med denna egenskap kan man bestämma avståndet mellan ord i ett stycke. Det verkar inte att fungera så bra, men det är väl meningen att man ska skriva på följande sätt:

<P STYLE="{ word-spacing: 1em; font-family: Arial}">
Avståndet mellan orden ska här öka med 1em.</P>

Resultatet ska bli:

Avståndet mellan orden ska här öka med 1em.

letter-spacing

Med den här egenskapen ska mna kunna öka avståndet mellan bokstäverna i ett stycke. Ett exempel:

<P STYLE="{ letter-spacing: 1em; font-family: Arial}">
Avståndet mellan bokstäverna ska här öka med 1em.</P>

Det här fungerar bättre än word-spacing och resultatet blir:

Avståndet mellan bokstäverna ska här öka med 1em.

text-decoration

Den här egenskapen gör att man lägga till en dekoration till en text i ett stycke. Egenskapen text-decoration kan ha värdena underline, overline, line-through, blink och none. Exempel på detta:

<P STYLE="{ text-decoration: none; font-family: Arial}">Det här värdet ger ingen
dekoration.<BR><BR>

<SPAN STYLE="{ text-decoration: underline }">
'Underline gör att texten blir understrucken.</SPAN><BR><BR>

<SPAN STYLE="{ text-decoration: overline }">
Overline gör att texten får ett streck ovanför sig.</SPAN><BR><BR>

<SPAN STYLE="{ text-decoration: line-through }">
Line-through åstadkommer ett streck som går igenom texten.</SPAN><BR><BR>

<SPAN STYLE="{ text-decoration: blink }">
Blink ska göra så att texten blinkar,
men stödjer inte webbläsaren denna effekt händer inget.</SPAN></P>

Så här ser det ut:

Det här värdet ger ingen dekoration.

Underline gör att texten blir understrucken.

Overline gör att texten får ett streck ovanför sig.

Line-through åstadkommer ett streck som går igenom texten.

Blink ska göra så att texten blinkar, men stödjer inte webbläsaren denna effekt händer inget.

text-transform

Med den här egenskapen kan man byta skiftläge på en text. Egenskapen kan ha värdena uppercase, lowercase, capitalize, eller none. Exempel:

<P STYLE="{ text-transform: none; font-family: Arial}">
Värdet none påverkar inte texten<BR>
<SPAN STYLE="{ text-transform: uppercase }">
Värdet uppercase gör att alla bokstäver blir versaler.</SPAN><BR>
<SPAN STYLE="{ text-transform: lowercase }">
Värdet lowercase gör att alla bokstäver blir gemener.</SPAN><BR>
<SPAN STYLE="{ text-transform: capitalize }">
Värdet capitalize gör att begynnelsebokstaven i varje ord blir versaler,
resten gemener.</SPAN><BR>
</P>

Så här ser det ut:

Värdet none påverkar inte texten.
Värdet uppercase gör att alla bokstäver blir versaler.
Värdet lowercase gör att alla bokstäver blir gemener.
Värdet capitalize gör att begynnelsebokstaven i varje ord blir versaler, resten gemener.

text-align

Med den här egenskapen kan man justera texten. Dom giltiga värdena är: left, right, center och justify. Exempel på detta:

Exempel:

><P STYLE="{ text-align: left; font-family: Arial;
margin-left=2cm; margin-right=2cm }">
Värdet "left" gör texten vänsterjusterad.</P>
<P STYLE="{ text-align: right; font-family: Arial;
margin-left=2cm; margin-right=2cm }">
Värdet "right" gör texten högerjusterad.</P>
<P STYLE="{ text-align: center; font-family: Arial;
margin-left=2cm; margin-right=2cm }">
Värdet "center" gör texten centrerad.</P>
<P STYLE="{ text-align: justify; font-family: Arial;
margin-left=2cm; margin-right=2cm }">
Värdet "justify" gör texten marginaljusterad. Med detta menas att...</P>

Så här ser det ut i webläsaren:

Värdet "left" gör texten vänsterjusterad.

Värdet "right" gör texten högerjusterad.

Värdet "center" gör texten centrerad.

Värdet "justify" gör texten marginaljusterad. Med detta menas att både vänster- och högermarginalen ska vara raka. Värdet "justify" är nytt för HTML 4.0 och gamla webbläsare som inte förstår värdet, kommer helt enkelt att vänsterjustera texten i stället. I dom flesta böcker är texten marginaljusterad. Det göra att dokumentet ser mer profesinellt ut. Men för att man ska kunna märka att texten är marginaljusterad så måste texten vara ett par rader lång. Då kan man man se att vänster- och högermarginalen är raka. därför har jag här försökt fylla ut med en del text för att man ska märka effekten av värdet "justify". Om texten är väldigt kort så att den inte täcker ett par rader kommer man nog inte att märka effekten, utan texten kommer att se ut som vanlig vänsterjusterad text.

text-indent

Med egenskapen text-indent kan man få första raden i ett textstycke att bli indragen en bit i vänstermarginalen i förhållande till resten av texten. Webbläsare skall återge detta indrag som ett tomt område. Egenskapen kan ha värdena längd och procent.

längd
Indraget är en bestämd längd.

procent
Indraget är en procenttal av textstyckets bredd.

Exempel:

P { text-indent: 40px font-family: arial; margin-left: 1cm }

Så här ser det ut i webläsaren:

Det här är ett exempel som visar hur ett dokument utformas med hjälp av formatmallen i filen stilmall.css.

Styckena har här fått teckensnittet Arial och har en marginal till vänsterkanten på 1 cm. Vidare så har första raden i varje stycke ett indrag på 40 pixlar (bildpunkter). Indraget av första raden styrs av egenskapen text-indent.

Line-height

Den här egenskapen bestämmer avståndet mellan textraderna. Egenskapen kan ha värdet normal, numeriskt värde, ett längdvärde eller ett procentvärde. När ett numeriskt värde är speciefierat, fås radhöjden av teckenstorleken av det innevarande avsnittet multiplicerat med det numeriska värdet. Ett procentvärde är också relativ till teckenstorleken. Negativa värden är inte tillåtna.

De tre reglerna i exemplet nedan ger samma radavstånd.

P { line-height: 1.4; font-size: 12pt }

(nummer)

P { line-height: 1.4em; font-size: 12pt }

(längd)

P { line-height: 140%; font-size: 12pt }

(procent)

Exempel:

P { line-height: 1.4; font-size: 12pt }

Så här ser det ut i webläsaren:

Med hjälp av egenskapen line-heigt kan man bestämma avståndet mellan textraderna. I detta exempel har jag bestämt att textavsnittet ska ha ett radsvstånd av 1,4 gånger teckenstorleken.

Anfang

Det går bra att göra anfang, d.v.s. att göra första bokstaven i en mening större, till textavsnitt med hjälp av stylesheets. Det gör att ett dokument ser snyggt och mer proffesionellt ut.

Exempel:

<P STYLE="{ 12pt; margin-left=2cm; margin-right=2cm }">
<SPAN STYLE="{ font-size: 284%; font-style: normal; font-weight: 900;
               color: #FF0000; float: left }">A</SPAN>
tt skapa ett anfang med hjälp av stylesheets är inte så svårt...</P>

Så här ser det ut i webläsaren:

A tt skapa ett anfang med hjälp av stylesheets är inte så svårt och det ger ett snyggt och proffesionellt resultat. Det här är ett exempel på hur man kan göra. I stylesheetet kan du ange vilka teckensnittegenskaper, färgegenskaper, bakgrundegenskaper, textdekorationegenskaper, marginaler, radavstånd, ramar, m.m.

Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.