Kaskádové styly ­ CSSKaskádové styly ­ CSS
Cascade Style Sheets
­ definice vzhledu dokumentu pomocí parametrů DTP
Kaskády stylů
­ vnější styly
­ vnitřní styly
­ styly specifické pro element

Syntaxe CSSSyntaxe CSS
značka {vlastnost1: hodnota1; vlastnost2: hodnota2 }
h1 {color: white; font-size: 20pt}
­ značky oddělené čárkou
h1, h2, h3 {color:darkblue}
Výběr více elementů
Výběr vnořených elementů
­ značky oddělené mezerou
p sub {font-size: 60%}

Třídy v CSSTřídy v CSS
­ označení skupiny stejně formátovaných elementů
<znacka class="jmeno_tridy">
<p class="prvni"> ... </p>
<style>
p.prvni {padding-left:20pt; color:darkblue}
</style>
Definice v hlavičce:

Vnější stylyVnější styly
<link rel="StyleSheet" type="text/css" href="soubor_se_styly" />
doc1.html doc2.html doc3.html
styly.css
­ stejné formátování více dokumentů

Vnitřní stylyVnitřní styly
<style>
body {background-color: blue; color: white}
h1, h2 {font-weight:bold; font-size: 20}
table {border-width: 6; border-color: red}
p {width: 450; text-align: justify}
</style>
Vložené styly v dokumentu
<prvek style="color: white">
Styl jednoho prvku

Vybrané vlastnosti textuVybrané vlastnosti textu
color: yellow
background-color: #0033cc
border-color: black
Barvy
font-family: arial
font-size: 16
font-weight: bold
text-decoration: underline
text-align: left|right|center|justify
Vlastnosti písma
barva písma
barva pozadí
barva okraje
rodina písma
velikost písma
tloušťka písma
podtržený text
zarovnání textu

Vybrané vlastnosti blokůVybrané vlastnosti bloků
width: 600
height: 45
Velikost
padding-bottom: 30
margin-right: 20
Odsazení a okraje
šířka bloku
výška bloku
odsazení textu dole
šířka okraje bloku vpravo
border-width: 2
border-style: outset
Orámování
šířka rámečku
styl rámečku

Metriky blokůMetriky bloků
Text v elementu
padding-bottom
margin-top border
width
height
padding-top
padding-left
padding-right

Vlastnosti pozadíVlastnosti pozadí
background-color
background-image
background-repeat
background-attachment
background-position
barva pozadí
obrázek na pozadí
opakování obrázku na pozadí
posun obrázku při posuvu stránky
pozice obrázku na pozadí
background-color:darkred;
background-image:url(obrazky/pozadi.jpg);
background-repeat:repeat;
background-attachment: scroll;
background-position: center;

Styly pro seznamyStyly pro seznamy
list-style-type:
disc 
circle 
square 
decimal 1, 2, 3, ...
lower-alpha a, b, c, ...
upper-alpha A, B, C, ...
lower-roman i, ii, iii, ...
upper-roman I, II, III, ...
list-style-image:
url(cesta/obrazek)
url(http://images/bullets/odrazka.gif)
použití v elementech li

Styly pro tabulkyStyly pro tabulky
border-style styl rámečku
dotted, inset, dashed, outset, double,
solid, groove, ridge, none
border-width šířka rámečku
border-color barva rámečku
použití pro elementy table, td, th

Styly pro odkazyStyly pro odkazy
a:link {color: #FF0000; text-decoration:none}
a:visited {color: #00FF00; font-weight:bold}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
a:link dosud nenavštívené odkazy
a:visited již navštívené odkazy
a:hover odkazy, nad nimiž přejíždí ukazatel
a:active pro vybíraný odkaz.
Pseudotřídy
Pořadí a:link a/nebo a:visited, a:hover, a:active.