Avtor: -primož-
19.10.09
| CSS Kode 2 |
| CSS vodiči | |||||||
 Osnovne CSS kode za oblikovanje besedila.V tem vodiču boste spoznali CSS kode, ki bi jih moral poznati vsak, ki se ukvarja s spletnimi stranmi. To je drugi del vodiča in v njem se bom bolj posvetil CSS kodam za oblikovanje besedila. Prvi del vodiča si lahko ogledate tukaj: CSS kode. CSS kode po poglavjih: Barva besedila - colorBarvo besedila določimo s kodo color: ;. Barvo poimenujemo z angleško besedo ali pa vpišemo njeno šest-mestno šestnajstiško kodo. Koda barve se začne s simbolom za število ( # ). CSS koda .rdeca {
color: #FF0000; } .modra { color: blue; } HTML koda <html>
<head> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body> <div class="rdeca">Besedilo bo rdeče barve</div> <table> <tr> <td class="modra">Besedilo bo modre barve</td> </tr> </table> </body> </html> PRIKAZ kode color Velikost besedila – font-sizeZa spreminjanje velikosti besedila uporabimo kodo font-size: ;. Velikost pisave definirajte s slikovnimi pikami oz. piksli ( px ). CSS koda .velikostb {
font-size: 30px; } HTML koda <html>
<head> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body> <div class="velikostb">Velikost pisave je 30px.</div> </body> </html> PRIKAZ kode font-size Pisava – font-familyS CSSjem določite pisavo s pomočjo font-family: ;. Uporabljajte osnovne pisave! Osnovne pisave:
CSS koda .pisava {
font-family: Verdana; } .pisava2 { font-family: Trebuchet MS; } HTML koda <html>
<head> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body> <div class="pisava">Izbrana pisava je Verdana.</div> <br> <div class="pisava2">Izbrana pisava je Trebuchet MS.</div> </body> </html> PRIKAZ kode font-family Text-decorationS text-decoration: ; lahko podčrtamo, nadčrtamo ali prečrtamo besedilo. Ta koda je zelo uporabna pri oblikovanju povezav, saj so povezave avtomatsko podčrtane, kar lahko pokvari izgled strani. Več o oblikovanju povezav: CSS in Povezave. CSS koda a {
text-decoration: none; } .precrtano { text-decoration: line-through; } .podcrtano { text-decoration: underline; } .nadcrtano { text-decoration: overline; } .blinkblink { text-decoration: blink; } HTML koda <html>
<head> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body> <a href="/povezava.htm">Nepodčrtana povezava</a> <br> <div class="precrtano">Besedilo je prečrtano</div> <br> <div class="podcrtano">Besedilo je podčrtano</div> <br> <div class="nadcrtano">Besedilo je nadčrtano</div> <br> <div class="blinkblink">To besedilo utripa.</div> </body> </html> PRIKAZ kode text-decoration Debelina besedila – font-weightDebelino besedila nadziramo s kodo font-weight: ;. Uporabimo pa lahko številčno vrednost, ali pa besedo, ki predstavlja določeno debelino. Lighter, normal, bold, bolder 100, 200, 300, 400, 500, 600, 700, 800, 900 CSS koda .odebeljeno {
font-weight: bold; } .odebeljeno2 { font-weight: 900; } HTML koda <html>
<head> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body> <div class="odebeljeno">Besedilo je odebeljeno</div> <br> <div class="odebeljeno2">Besedilo je odebeljeno</div> </body> </html> PRIKAZ kode font-weight *Namesto font-weight: bold; vam priporočam, da uporabljate HTML oznaki <strong></strong>, zaradi optimizacije. Zaključek: CSS je super zadeva in, če poznate zgornje oznake in pa oznake iz prvega dela vodiča poznate že kar nekaj CSS kod, ki jih lahko uporabljate namesto HTML atributov. S CSSjem je manj dela, kot z atributi, ergo ... prihranite čas, pa še vaša HTML koda je veliko lepša na pogled. |
| Sorodni vodiči | |
Moje-Mesto.com
Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.
