CSS-text
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:
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]
| Webdesign | |
|---|---|
| CSS | Placering - Egenskaber - Class - ID - Height - Width - Centrering - Margin - Border - Padding - Boksmodellen - Position - Text - Font - Farver - Backgruond - Table - List-style - Selectors - CSS3 - Media - Dropdown |
| HTML | <b> - <br> - <em> - <strong> - <i> - <cite> - <q> - <tt> - <code> - <samp> - <kbd> - <var> - <pre> - <sub> - <sup> - <h1> - <h6> - <p> - <br> - <li> - <ol> - <ul> - <a> - <a> på siden - <img> - <map> - <object> - <dd> - <dl> - <dt> - <hr> - <div> - <span> - <html> - HTML5 - <head> - <title> - <body> - <frame> - <frameset> - <iframe> - <style> - <table> - <td> - <tr> - <th> - <tbody> - <thead> - <tfoot> - <form> - <input> - <textarea> - <label> - <select> - <option> - Radio button - Checkbox - Dropdown - Input text - Input password - Submit knap - Billede - Embedding Youtube - Kommentarer - Omdirigere |