CSS – Kaskádní styly
Níže je uveden pouze náhled materiálu. Kliknutím na tlačítko 'Stáhnout soubor' stáhnete kompletní formátovaný materiál ve formátu PDF.
CSS
– Kaskádní styly
Zalo
ženo na přednášce Lukáše Bařinky
Obsah
Základní principy
Syntaxe
Selektory
Dědičnost
Formátovací model
Generovaný obsah
Média, UI
Co se nevešlo...
Základní principy
Dopřená i zpětná kompatibilita
Doplněk ke strukturovanému dokumentu
Nezávislost na platformě/zařízení
Udržovatelnost
Jednoduchost
Síťová šetrnost
Flexibilita
Bohatost jazyka
Návaznost s alternativními jazyky
Přístupnost [accessibility]
Od CSS3 se specifikace dělí na moduly například css3-background,
css3-box, atd.
CSS Historie
Syntaxe I
Styl je skupina pravidel, které určují vzhled
dokumentu.
Pravidlo
selektor
deklarace
vlastnost
hodnota
h1 { color: blue }
Syntaxe II
– Použití v HTML
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css"
href="http://style.com/cool" title="cool">
<style type="text/css">
@import url("http://style.com/basic");
h1 { color: blue }
p.yellow { color: yellow }
#colg { color: green }
</style>
</head>
<body>
<h1>headline is blue</h1>
<p style="color: green">while the paragraph is green.
<p class="yellow">this paragraph is yellow
<p id="colg">while the paragraph is green.
</body>
</html>
Syntaxe III
Case insensitive (
kromě částí mimo CSS – např.
selektor)
Klíčová slova (red) / Řetězce (˝red˝)
Blok
uzavřen do “{“ “}“
Sada pravidel v bloku
oddělená “;“
Pravidla je
možné seskupovat [grouping]
h1 { color: red } h1 { font-size: 12pt }
h2 { color: red } h1 { font-weight: bold }
h1, h2 { color: red } h1 { font-family: ˝Helvetica˝ }
h1 { font: bold 12pt ˝Helvetica˝
}
Komentáře uvnitř “/*“ a “*/“ (povoleny jsou “<!-
-
“ a “-->“, nejsou však CSS komentářem)
Kódování CSS: @charset ˝ISO-8859-2˝
Syntaxe IV - Hodnoty
Délkové:
– RELATIVNÍ
• em – velikost fontu
• ex – velikost písmena x
• px – obrazový bod
• %
– ABSOLUTNÍ
• in – palce
• cm
• mm
• pt – body (1/72 in)
• pc – 12pt