Formátovanie textu, kurzor, pseudo-triedy
Text a jeho formátovanie
Komplexné nastavenie parametra font:
font: <font-style> ¦¦ <font-variant> ¦¦ <font-weight> ¦¦ <font-size> [ <line-height> ] <font-family>
font-style: normal ¦ italic ¦ oblique – rez písma.
- normal – normálne písmo
- italic – kurzíva
- oblique – sklonené písmo
font-variant: normal ¦ smallcaps -varianta písma, normálne alebo kapitálky
font-weight: bold ¦ bolder ¦ lighter ¦ normal ¦ číslo – tučnosť písma. Číslo musí to byť od 100 až po 900. 400 – je normálne písmo, 700 je tučné písmo.
font-size: číslo ¦ percento ¦ xx-small ¦ x-small ¦ small ¦ medium ¦ large ¦ x-large ¦ xx-large ¦ larger ¦ smaller ¦ veľkosť zadaná v pixeloch(px), v bodoch (pt), v percentách, – veľkosť písma.
line-height: číslo ¦ percento ¦ normal ¦ inherit - definuje výšku riadka.
font-family: font pismen -druh písma, rodina písma
Príklad:
- ak font sa skladá z viacerých názvov musí byt uzavreté v úvodzovkách, napr. “Times New Roman”, ak je definovaných v štýle viac fontov, budú sa postupne brať do úvahy od prvého až k poslednému, kým sa nenájde taký, ktorý je nainštalovaný aj na klientskom počítači (napríklad ak má klient len font “Times New Roman”, tak sa predchádzajúce tri vynechajú a použije sa “Times New Roman”)
letter-spacing: číslo ¦ normal ¦ inherit – definuje veľkosť medzery medzi písmenami. Pri zápornom čísle sa medzery zmenšujú.
word-spacing: číslo ¦ normal ¦ inherit – definuje veľkosť medzery medzi slovami.
text-decoration: blink ¦ line-through ¦ none ¦ overline ¦ underline – definuje dekoráciu textu
- blink – text bude blikať
- line-through – text bude preškrtnutý
- none – bez dekorácii
- overline – nad textom urobí čiaru
- underline – podčiarkne text
text-align: center ¦ justify ¦ left ¦ right – zarovnanie textu .
text-transform: capitalize ¦ uppercase ¦ lowercase ¦ none- prevedie napr. zmenu malých písmen na vežké.
- capitalize – prvé písmeno v každom slove napíše vežkým písmenom
- uppercase – prevedie text na vežké písmena
- lowercase – prevedie text na malé písmena
text-indent: číslo ¦ percento – definuje odsadenie textu od žavého okraja (pri viacriadkovom texte odsadí len prvý riadok ).
white-space: ¦ pre ¦ nowrap ¦ pre-wrap ¦ pre-line ¦ inherit – Tato vlastnosť určuje, ako sa spracuje whitespace (prázdne miesto alebo žubovožný počet znakov medzier v texte.
unicode-bidi: normal¦ embed ¦ bidi-override ¦ inherit – určuje pravidlá na zobrazovanie textu v opačnom smere
- normal – použije štandardné vykreslenie textu
- embed – umožňuje použiť oba spôsoby vykresžovania
- bidi-override – nahradzuje štandartný spôsob vykresžovania a text vypisuje v smere určenom v štýle direction
- inherit – zdedená vlastnosť
- normal – prázdne miesta sa zlúčia do jednej medzery a text sa láme automaticky na konci riadku
- pre – medzery sa nezlučujú a nový riadok je tam kde je znak newline
- nowrap – medzery sa zlučujú ale riadky sa nelámu
color: farba ¦ inherit – farba písma
direction: ltr ¦ rtl ¦ inherit -určuje smer vykresľovania prvkov a textu
Príklad zadania farby v rôznych tvaroch:
| .styl { color: #f00 } | /* #rgb */ |
| .styl { color: #ff0000 } | /* #rrggbb */ |
| .styl { color: rgb(255,0,0) } | /* pomocou čísiel 0 – 255 */ |
| .styl { color: rgb(100%, 0%, 0%) } | /* pomocou percent 0.0% – 100.0% */ |
Kurzor
cursor: – definuje tvar kurzora :
- auto – prehliadač si sám zvolí kurzor podža kontextu
- crosshair – “zameriavací kríž”, typický symbol podobný znaku “+”
- default – implicitný kurzor danej platformy, typicky šípka
- pointer – ukazovatež symbolizujúci odkaz
- move – kurzor symbolizujúci presúvanie niečoho
- e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize – kurzor pro zmenu vežkosti (presun hrany objektu). Počiatočné písmena udávajú pozíciu hrany podža svetových strán (n – sever, s – juh, e- východ, w – západ). Napr. ne-resize zobrazí kurzor pre presun pravej hornej hrany objektu.
- text – kurzor pre výber textu, typicky symbol podobný znaku “I”
- wait – kurzor zobrazovaný pri čakaní, typicky presýpacie hodiny
- help – kurzor pre zobrazenie nápovedy, typicky symbol “?” či “bublina”
- url – prehliadač pre kurzor použije obrázok na danej adrese.
Pseudo-triedy
a:link { ………..} –štýl odkazu
a:active { ……….} – štýl aktívneho(vybratého) odkazu
a:visited { ………..} – štýl navštíveného odkazu
a:hover { …….. .} – štýl ak je kurzor nad odkazom
styl:first-letter {………..} – definuje štýl prvého písmene
styl:first-line {…………} – definuje štýl prvého riadku