|
|
|
Z uporabo CSS-a lahko tekst preprosto oblikujemo!
Tekstu lahko kontroliramo različne lastnosti, ki jih bom opisal v naslednjih podpoglavjih:
Določa barvo teksta. Vrednosti pa lahko določite kot konstante (red, blue, gold...) ali pa s pomočjo RGB trojčkov, kot je to opisano v poglavju 4.
Določa poravnavo teksta in ima lahko sledeče vrednosti:
Določa dekoracije teksta in ima lahko sledeče vrednosti:
Določa transformacije teksta in ima lahko sledeče vrednosti:
Določa razmik med besedami (word) oz. črkami (letter). Pri dolžini pridejo v poštev predvsem relativne dolžine, čeprav lahko uporabite tudi absolutne, kot je opisano v poglavju 4.
Določa zamik prve vrstice. Pri dolžini pridejo v poštev predvsem relativne dolžine, čeprav lahko uporabite tudi absolutne, kot je opisano v poglavju 4.
 |
Ko si boste ogledali ta primer, ni nujno, da bo vse tako, kot bi moralo biti. Današnji brkljalniki ne poznajo vsega, kar CSS določa! |
| CSS pravila za obliko teksta ([Ogled]) |
<html>
<style>
<!--
na ta CSS pravila se ne ozirajte,
zapisana so samo zato, da se primer
bolje vidi
-->
div {
background-color: silver;
padding : 10px 10px 10px 10px;
margin : 10px 10px 10px 10px;
}
</style>
<!-- prikazati vam želim ta pravila: -->
<body>
<div style=" color : rgb(255, 0, 255);"> color :RGB(255, 0, 255);</div>
<div style=" text-align : center; "> text-align: center; </div>
<div style=" text-align : right; "> text-align: right; </div>
<div style=" text-decoration: overline "> text-decoration: overline </div>
<div style=" text-decoration: underline "> text-decoration: underline </div>
<div style=" text-transform : uppercase "> text-transform : uppercase </div>
<div style=" word-spacing : 10px "> word-spacing : 10px </div>
<div style=" letter-spacing : 4px "> letter-spacing : 4px </div>
</body>
</html>
|
Nabor znakov določa obliko črk. V naših krajih so različni nabori znakov precej bolj znani po popačenki fonti!
Določa nabor znakov. Vrednosti pa so imena naborov znakov. To je malce posebna lastnost, saj lahko sprejme seznam imen. S seznamom določite prioriteto naborov znakov in če brkljalnik na konkretnem sistemu ne najde prvega, pač vzame drugega itd. Določite pa lahko natančno ime nabora znakov ali pa kar splošno ime.
|
Če je ime nabora znakov sestavljeno iz več besed, ga je potrebno zapisati v
narekovajih! Razlog je preprost! Vzamimo recimo nabor 'Times New Roman'. Če
napišete |
Definirana so naslednja splošna imena: serif (nabori z zavihki), sans-serif (nabori brez zavihkov), cursive (nagnjeni nabori), fantasy (dekorativni nabori) in monospace (nabori, kjer so vsi znaki enake širine).
Določa velikost znakov. Vrednosti lahko podate kot konstante ali cela števila. Definirane so sledeče konstante (od najmanjše do največje): xx-small, x-small, small, medium, large, x-large in xx-large. Lahko pa uporabite tudi dve relativni konstanti: smaller in larger, ki pomenita manjšo oz. večjo velikost od normalne.
Lahko uporabite tudi procent, ki določa velikost glede na osnovno velikost tega
elementa. Element za naslove H1 je recimo dokaj velik in če napišete
h1 {font-size: 150%} pomeni to 1.5x velikost naslova,
div {font-size: 150%} pa 1.5x velikost osnovnih črk.
Lahko pa seveda zapišete tudi številko z določeno enoto, kot je zapisano v poglavju 4.
Določa stil (obliko) teksta in ima lahko sledeče vrednosti: normal, italic in oblique.
Določa debelino črk in ima lahko sledeče vrednosti: normal, ali lighter, bold, bolder oz kar številko 100, 200, 300, 400, 500, 600, 700, 800, 900.
Določa vse parametre naborov znakov hkrati! Da pa lahko med lastnostmi loči, morajo biti le-te zapisane v točno določenem zaporedju: font-style, font-weight, font-size in font-family.
|
Ko si boste ogledali ta primer, ni nujno, da bo vse tako, kot bi moralo biti. Današnji brkljalniki ne poznajo vsega kar CSS določa! |
| CSS pravila za nabore znakov ([Ogled]) |
<html>
<style>
<!--
na ta CSS pravila se ne ozirajte,
zapisana so samo zato, da se primer
bolje vidi
-->
div {
background-color: silver;
padding : 10px 10px 10px 10px;
margin : 10px 10px 10px 10px;
}
</style>
<!-- prikazati vam želim ta pravila: -->
<body>
<div style=" font-family : helvetica, arial, sans-serif;">
font-family : helvetica, arial, sans-serif;
</div>
<div style=" font-size : xx-small; "> font-size : xx-small; </div>
<div style=" font-size : xx-large; "> font-size : xx-large; </div>
<div style=" font-size : 200%; "> font-size : 200%; </div>
<div style=" font-size : 3cm; "> font-size : 3cm; </div>
<div style=" font-size : 30px; "> font-size : 30px; </div>
<div style=" font-weight : lighter;"> font-weight : lighter; </div>
<div style=" font-weight : bolder; "> font-weight : bolder; </div>
<div style=" font-weight : 100; "> font-weight : 100; </div>
<div style=" font-weight : 500; "> font-weight : 500; </div>
<div style=" font-weight : 900; "> font-weight : 900; </div>
<div style=" font : italic 800 150% aral, helvetica;">
font : italic 800 150% aral, helvetica;
</div>
</body>
</html>
|
|
|
|