CSS-text

Fra Holstebro HTX Wiki
Skift til: navigering, søgning

CSS-text Er noget man bruger, til at fortælle, hvad for en type tekst, farve, former, og hvor det skal stå. fx em det skal stå midt i, eller ude i siden.

Tekst udseende

Der er mange måder at ændre udseende på teksten

Farver

Fx farve laver man på denne måde: [1]

body {
color:red;
}

h1 {
color:#00ff00;
}

p {
color:rgb(0,0,255);
}

Hvis man har følgende kode:

<body>
<h1>Dette er overskrift 1</h1>
<ul>
  <li>En liste</li>
  <li>Bliver rød fordi alt i body bliver rødt</li>
  <li>Men <a href="#">link</a> får standard link-farve</li>
</ul>
<p>Dette er en paragraph. Teksten er blå. Standard tekst er rødt, men paragraph er defineret til blåt.</p>
<h2>Overskrift 2 bliver også rødt</h2>

</body>

Så vil det med de viste CSS angivelser give følgende resultat:

Color-eksempel.png

Text-decoration

Her bestemmer du om du skal have en streg under, igennem eller over teksten: [2]

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

Text-transform

Her bestemmer du om, hvordan teksten skal se ud, med "STORT OVER ALT", "Stort For Hvert Ord" eller "småt i alt": [3]

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;} 

Tekst justering

Man kan lave om på indstillingerne for hvordan teksten skal formatteres i et afsnit

Text-align (justering)

Her bestemmer du om teksten skal ligge til højre, midten eller til venstre: [4]

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right} 

Linje-afstand

Her bestemmer du om hvor meget linjeafstand der skal være: [5]

p.small {line-height:90%}
p.big {line-height:200%} 

Indrykning ved nyt afsnit

Her bestemmer du om, hvornår teksten skal begynde på den linje du er: [6]

p
{
text-indent:50px;
} 

Vertikal forskydning/alignment

Her bestemmer du om hvordan teksterne skal stå i forhold til hinanden. fx om den skal stå forskudt: [7]

img
{
vertical-align:text-top;
} 

Afstand mellem bogstaver

Her bestemmer du om hvor meget mellemrum der skal være imellem hvert bogstav/ord: [8]

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px} 

Afstand mellem ord

Her bestemmer du om, hvor meget mellemrum der skal være mellem hvert ord. Det er IKKE den samme som den anden, hvor du bestemmer afstand mellem hvert bogstev/tegn: [9]

p
{ 
word-spacing:30px;
} 

Tekst-retning

her bestemmer du om teksten skal ligge til højre eller venstre: [10]

div
{
direction:rtl;
} 

Tekst ombrydning i afsnit

Her bestemmer du, hvordan teksten skal ombrydes i et afsnit: [11]

p
{
white-space:nowrap;
} 

Yderlig viden

Hvis du vil lærer mere, så kan du læse om det inde på www.w3schools.com [12]