•
•
Kaskádové styly (Cascading Style Sheets, CSS)
•jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML
•navržen standardizační organizací W3C
•dne 7. června 2011 byla dokončena revize CSS 2.1 a pracuje se na verzi CSS3
•hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho struktury a obsahu
Syntaxe CSS
•Definice kaskádových stylů sestává z několika pravidel
•Každé pravidlo obsahuje selektor a blok deklarací
•Každý blok deklarací pak obsahuje seznam deklarací oddělených středníky ;
•každá deklarace sestává z identifikátoru vlastnosti, následuje dvojtečka : a hodnota vlastnosti
Příklad CSS pravidla
•body {
•background-color: grey;
•color: black;
•padding: 15px;
•}
•
selektor
blok deklarací
identifikátor vlastnosti
hodnota
Selektory
•CSS definuje mnoho různých selektorů, které obvykle můžeme kombinovat
•table – Tyto deklarace budou platit pro všechny výskyty elementu table.
•table p – Tyto deklarace budou platit pro všechny elementy p, které se nachází v elementu table, v
jakékoliv hloubce.
•table>div – Tyto deklarace budou platit pro všechny elementy div, které jsou přímými potomky
elementu table.
Selektory 2
•.trida – Tyto deklarace budou platit pro všechny elementy, které mají v HTML nastavenou třídu
trida. To se provádí pomocí HTML atributu class.
•#id – Tyto deklarace budou platit pro všechny elementy, které mají v HTML nastavený identifikátor
id. To se provádí pomocí HTML atributu id.
•sel1, sel2, sel3 – Selektory můžeme seskupovat pomocí čárek. Následující deklarace pak budou
platit pro všechny selektory.
•
•Př:
•http://www.w3schools.com/html/html_classes.asp
•
Připojení kaskádových stylů do HTML stránky
•Přímý inline zápis stylu pomocí atributu style: •
Tento odstavec bude červený a podtržený.
Připojení kaskádových stylů do HTML stránky
•Zápis stylů do elementu style. Takové styly se aplikují na celou stránku podle předepsaných
selektorů.
•
•
Připojení kaskádových stylů do HTML stránky
•Připojení externího souboru pomocí elementu link.
•
•
•
•
Návrh vzhledu stránek pomocí CSS
•
Návrh vzhledu stránek pomocí CSS
•
•
• Stránka s externím stylopisem
•
•
•
•
Obsah s jakkoli divokým kódem a s
patičkou
.
.
.
.
.
.
.
.
.
.
.
.
•
Hlavička
•
Levý sloupec
•
Pravý sloupec
•
•
•
Free šablony a rozvržení
•http://www.freewebtemplates.com/
•http://www.free-css.com/free-css-layouts/page1.php •http://www.layouts4free.com/free-layouts/ -
layouts, grafika, fonty atd.
•http://www.mastertemplates.com/
•http://html5templates.com
•
•
•
Příklady a učebnice
•Jak funguje např. vlastnost „display“?
•
•http://www.w3schools.com/css/css_display_visibility.asp
•
•Background, text, lists, tables
Děkuji za pozornost