CSS
Odporúčané tutoriály:
http://www.jakpsatweb.cz/css/
http://www.w3schools.com/css/
Čo je CSS
Cascading Style Sheet – súbor kaskádnych štýlov definuje, ako sa majú zobrazovať HTML elementy. Zapisujú
sa priamo do elementov, alebo do html súboru alebo do samostatných súborov s príponou .css. Práve zápis
štýlov do samostatných súborov a ich oddelenie od html elementov umožňuje rovnaký obsah html stránky
zobrazovať rozdielnym spôsobom a naopak, viac html súborov zobrazovať v jednotnom formáte. Vzhľad
(css) sa takto oddelil od obsahu (html).
Zapojenie css do html súboru
-
externý .css súbor sa prilinkuje v <head> elemente:
<link rel="stylesheet" type="text/css" href="styles.css">
-
interné štýly sa tiež definujú v <head> elemente:
<head>
...
<style type="text/css">
div.ex { border: 1px solid blue; }
...
</style>
...
</head>
Pojmy
Selektor – označenie elementov, ktorých vzhľad štýl ovplyvňuje. Môže to byť tag, id (vtedy selektor začína
znakom #), trieda (class, selektor začína bodkou), pseudotrieda, prípadne ich kombinácia. Tiež to môže byť
atribút - vtedy je selektor v hranatých zátvorkách.
Vlastnosť (property) – konkrétna vlastnosť, ktorú treba nastaviť,
Hodnota (value) – hodnota, ktorá sa vlastnosti má nastaviť. Väčšina vlastností má vymenovanú množinu
hodnôt (napr. pre vlastnosť text-align sú prípustné hodnoty left, right, center, justify).
Jednotky
Farba – definuje sa:
-
buď slovom (z tzv. color table, príklad je na http://msdn.microsoft.com/enus/library/system.windows.media.colors.aspx ), avšak pozor, W3C štandard obsahuje len 17 farieb:
aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal,
white, and yellow.
-
alebo kombináciou RGB, a to buď v šestástkovom tvare #rrggbb, alebo v desiatkovom tvare rgb (r,
g, b), prípadne v percentuálnom tvare rgb (r%, g%, b%). Upozornenie – ak sa dá, treba použiť web
safe farby (paletu tých farieb ponúka napríklad GIMP), príklad palety je na
http://answers.oreilly.com/topic/721-the-web-palette/
Rozmer – dá sa definovať v rôznych jednotkách. Najpoužívanejšie sú pixel (px), em (1 em je štandardná
výška písma), metrické jednotky, palce (in) a percentá. Jednotky treba písať hneď za číslom, inak to
prehliadače nezvládnu (takže správne je 100px, 70%, nesprávne je 45 pt a podobne).
Syntax
[/* komentar */]
selector [, selector2, ...][:pseudo-class] {
property: value;
[property2: value2;
[/* komentar */]
...]
}
Príklady:
div { background-color: #FF0000; } /*elementy div majú červené pozadie*/
.ram {border: 1px solid blue; } /*elementy s class=’ram’ majú modré orámovanie*/
#prvy { color: rgb (0%, 0%, 100%); } /*element s id=’prvy’
span#kontakt { font-weight: bold; }
má červené písmo*/
/*span s id=’kontakt’ má tučné písmo*/
input[type=text] { height: 25px; } /*textové polia majú výšku 25 pixelov*/
a:link { text-decoration: none; } /*linky nebudú podčiarknuté*/
Kaskádovosť
Vzhľad elementu môže byť ovplyvnený viacerými pravidlami, zvyčajne platí to posledné. Preto záleží na
poradí definovania selektorov a aj na tom, kde je štýl definovaný.
Priorita prebratia štýlov podľa umiestnenia v súboroch je nasledujúca:
1. inline (napr. <span style=‘background-color: red;‘>...</span>),
2. štýl definovaný v <head>...<style>
span { background-color: blue; } ...
</style>...</head>
3. externe definovaný štýl v css súbore: span { background-color: yellow; },
4. prednastavená hodnota prehliadača.
Samozrejme, to by platilo, ak sú externé štýly prilinkované pred definovaním interných (v head elemente)
štýlov. Ale ak sú prilinkované neskôr, majú prednosť. Preto pozor na poradie!
Priorita prebratia štýlov podľa selektora (ešte viac to zamotá):
1. podľa id selektora
2. podľa class selektora
3. podľa elementového selektora
No a navyše platí pravidlo – čím podrobnejšie špecifikovanie, tým vyššia priorita. Ak je podrobnosť
špecifikovania rovnaká, záleží aj na poradí definovania (berie sa posledná hodnota). Keďže takýchto
kombinácií je veľmi veľa, pre prehľadnosť sa odporúča používať kombinácie len v nutných prípadoch
a zároveň sústrediť štýly na jedno miesto. Ak majú byť štýly na viacerých miestach, potom sa treba snažiť
o ich logické rozdelenie (sústrediť rovnaké veci do jedného súboru).
Externý príklad - priklad-kombinacia-selektorov.html
Základné CSS vlastnosti
Vlastností je veľmi veľa, preto sa ich len niektorých dotkneme hlavne s dôrazom na pochopenie podstaty
a nie referenčné vymenovanie. Samozrejme dôraz kladieme na vhodnosť použitia pre AJAX aplikácie.
Mnohé CSS vlastnosti umožňujú skrátené zápisy, príklad bude uvedený pre background:
Pozadie - background
-
background-color definuje farbu pozadia elementu,
-
background-image, background-position a background-repeat umožňujú
definovať obrázok na pozadie (prípadne aj jeho časť), jeho opakovanie a pozíciu, backgroundattachment umožňuje obrázok ukotviť.
background je skrátený zápis. Nasledujúce dve definície znamenajú to isté:
body { background: #ffffff url('obrazok.png') no-repeat right top; }
body {
background-color: #ffffff;
background-image: url('obrazok.png');
background-repeat: no-repeat;
background-position: right top;
}
Text
-
color definuje farbu textu,
-
text-align horozintálne zarovnanie (right, left, center, justify), vertical-align
vertikálne zarovnanie,
-
text-decoration podčiarkuje, prečiarkuje atď. a text-transformation mení malé
písmená na veľké,
-
letter-spacing a word-spacing definujú medzery medzi písmenami a slovami, lineheight výšku riadka,
Font
Písmo rozdeľujeme na skupiny (generic family) - bezpätkové (sans-serif) a pätkové (serif), s pevnou šírkou
písmen (monospace, neproporcionálny font) alebo s písmenami rôznej šírky. Pätkové písmo sa používa na
dlhé texty, pretože pätky vytvárajú linku, ktorej sa môžu čitateľove oči držať. Bezpätkové je vhodné na
nadpisy, krátke texty, linky... Príklady:
serif
sans-serif
monospace, neproporcionálny font
Courier
Lucida Console
proporcionálny font
Times New Roman
Arial
-
font-family definuje konkrétny názov fontu. Zvyčajne sa uvádza viac a na konci aj to, či pätkový
alebo nie. Prehliadač totiž nemusí mať uvedené fonty definované, ak nenájde ani jeden
vymenovaný, použije default serif / sans-serif. Hovorí sa tomu „fallback“ systém, príklad:
p.serif { font-family: "Times New Roman", Times, serif; }
-
font-style, font-variant a font-weight hovoria o kurzíve, kapitálkach a tučnom písme,
-
font-size o veľkosti písma.
Odkazy
Element <a> vyzerá inak, keď odkazovaný dokument bol navštívený a inak, keď je aktívny. Aj toto sa dá
upraviť pomocou CSS a to použitím pseudotried. Ak sú použité, musia nasledovať v tomto poradí (v príklade
je zrušené podčiarknutie odkazov okrem toho, cez ktorý prechádza myš):
a:link
a:visited
a:hover
a:active
{
{
{
{
text-decoration:
text-decoration:
text-decoration:
text-decoration:
none; }
/*
none; }
/*
underline; } /*
none; }
/*
nenavštívený odkaz */
navštívený odkaz */
prechod myšou nad odkazom*/
aktívny odkaz */
Box model – šírka a výška, orámovanie, odsadenie, okraje
Vo všeobecnosti každý element zaberá na ploche prehliadača nejaký obdĺžnik. Koľko miesta zaberá, určujú
vlastnosti margin (okraj), border (rám), padding (odsadenie obsahu), width (šírka obsahu = šírka
elementu) a height.
-
margin je odsadenie elementu od okolitých elementov, je vždy transparentný,
-
outline je zvýraznenie okolo orámovania, je súčasťou marginu, prípadne okolitých elementov,
nezväčšuje rozmer elementu, v skrátenom zápise je dôležité poradie (color, style, width),
-
border (border-width, border-style, border-color) definujú orámovanie. Príklad
skráteného zápisu obraničenia len zhora, poradie je dôležité (width, style, color):
border-top: 1px solid blue;
-
padding je odsadenie obsahu elementu od jeho orámovania.
Vo všetkých troch prípadoch sa dá definovať šírka aj zvlášť pre všetky štyri strany (v prípade skráteného
tvaru je poradie top, right, bottom, left, teda v smere hodinových ručičiek). Celková šírka elementu je teda
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right.
Problém zobrazenia v prehliadačoch
Internet Explorer používa iný box model, v ktorom width zahsňa aj border a padding. Samozrejme je to
potom veľký rozdiel v zobrazení oproti iným prehliadačom. Tento problém sa dá riešiť tým, že sa v html
použije taký DOCTYPE, vďaka ktorému je zobrazený html súbor v štandardnom móde.
Špecialita orámovania v tabuľkách
- border-collapse: vlastnosť border sa dá nastaviť na jednotlivé bunky, to ale znamená, že
každá z nich bude orámovaná a rámček medzi nimi sa zdvojí. Použitím border-collapse: collapse sa
tieto rámčeky zlúčia, separate ich nechá oddelené.
-
cellspacing a cellpadding – pozor, tu nejde o CSS vlastnosti, ale atribúty elementu
table. Prvý hovorí o vzdialenosti medzi bunkami a druhý o odsadení obsahu vnútri buniek, teda
majú CSS správanie, preto sú tu uvedené.
Zobrazenie / skrytie elementu
-
visibility – konkrétne visibility: hidden - skryje element tak, že plocha, ktorú
element zaberá, ostane pre lement vyhradená, len bude prázdna,
-
display – konkrétne display: none – skryje element tak, že sa plocha, ktorú element
zaberá, nahradí inými elementami, teda obsah stránky sa posunie. Display má ešte hodnoty
inline a block, ktorých nastavenie môže zobraziť blokové elementy ako inline a podobne,
inline elementy ako blokové.
-
opacity - čiastočná priehľadnosť – je to vlastnosť CSS 3, ale už teraz ju Firefox, podporuje. Zápis
opacity: x, kde 0 <= x <= 1, kde nepriehľadné je 1. MSIE používa filter: alpha
(opacity=x), kde 0 <= x <= 100.
Poziciovanie
Keď nie je nijako špecifikované, elementy sa zobrazujú v poradí, ako nasledujú (normálny tok stránky).
Z tohto toku sa dajú vyňať elementy, aby sa zobrazili na určitých pozíciách:
-
position + top, right, bottom a left: default hodnota pre position je static, teda
normálny tok. Ak nie je hodnota static, berú sa do úvahy hodnoty vlastností top, right,
bottom a left zobrazí element relatívne k prehliadaču. Hodnota position: absolute
zobrazí element v absolútnej pozícii voči prvému rodičovskému elementu (od elementu), ktorý má
poziciovanie iné ako static. Hodnota position: relative zobrazí element relatívne
k normálnemu toku.
-
z-index – v prípade z porušenia normálneho toku sa môžu niektoré elementy prekrývať, zindexom sa určí, ktorý má byť nad ktorým,
externý príklad – priklad-absolutne-poziciovanie.html
-
overflow, clip – ak sa obsah do elementu nevmestí (pretečie), overflow pomáha vytvoriť
scrollbar, alebo proste prebytočný obsah oreže. Naopak, clip oreže vnútorný obsah elementu,
aby na rodičovskom elemente nenastalo pretečenie.
-
float (right, left), clear (left, right, both) – element s float sa nalepí na pravú /
ľavú stranu rodičovského elementu a ostatný obsah okolo neho obteká (v normálnom toku).
Obtekanie sa dá natvrdo ukončiť elementom, ktorý má nastavenú vlastnosť clear: both.
Zmena kurzoru myši
Vlastnosť cursor umožňuje zobraziť klasickú šípku, ruku, dvojšípky, presýpačky a podobne. Dokonca sa
dajú použiť vlastné obrázky.
Obrázky
Hoci s CSS vôbec nesúvisia, HTML aj CSS ich využívajú, preto pár rád:
-
pre fotky a skeny používame komprimovaný formát (jpg), obrázkom .bmp sa treba úplne vyhnúť,
-
pre ikonky, navigačné obrázky a podobne radšej formát png alebo gif (ten umožňuje
transparentnosť),
-
v prípade, že treba použiť sadu malých obrázkov, CSS umožňuje zobraziť len časť obrázku, preto sa
dá sada vytvoriť ako jeden obrázok – zníži sa tým počet requestov na server.
Záver
Pre potreby seminára a teda AJAX aplikácií budeme využívať:
-
strict DOCTYPE, ktorý prepne prehliadač do štandardného módu,
-
štýly box modelu, pozadia, textu a fontov, čiastočne aj poziciovanie a schovávanie elementov,
-
štýly v .css súboroch s tým, že budú rozdelené na spoločné štýly (poziciovanie, rozmery)
a skinovacie štýly (farby, fonty, orámovanie). Skinovacích štýlov by malo byť viac a malo by sa dať
medzi nimi prepínať,
-
odporúčané tutoriály a testovacie stránky (uvedené na začiatku dokumentu).
Download

Použitie ARIA property vo WebUI