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
výběr_značky {výčet_vlastností }
výběrové pravidlo
,,CO" se bude formátovat
formátovací pravidla
,,JAK" se bude formátovat
Výběrová pravidlaVýběrová pravidla
­ značky oddělené čárkou
h1, h2, h3 {color:darkblue}
Společné vlastnosti více značek
Výběr vnořených značek
­ značky oddělené mezerou
p sub {font-size: 60%}
Výběr jedné značky
h1 {color: white; font-size: 200%}
Vnitřní stylyVnitřní styly
<style type="text/css">
body {background-color: blue; color: white}
h1, h2 {font-family: Verdana, sans-serif}
h1 {font-size: 150%}
h2 {font-style: italic; font-size: 120%}
table {border-width: 6px; border-color: red}
p {width: 40em; text-align: justify}
</style>
Vložené styly v dokumentu
<značka style="color: white">
Specifické styly
Vybrané vlastnosti textuVybrané vlastnosti textu
color: yellow
background-color: #0033cc
border-color: red
Barvy
font-family: Arial, sans-serif
font-size: 70%
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: 35em
height: 15em
Velikost
padding-bottom: 0.3em
margin-right: 3ex
Odsazení a okraje
šířka bloku
výška bloku
odsazení textu dole
šířka okraje bloku vpravo
border-width: 2px
border-style: outset
Orámování
šířka rámečku
styl rámečku
Jednotky velikostiJednotky velikosti
1pt
1px
Absolutní jednotky
1em
1en
1ex
70%
Relativní jednotky
typografický bod (0,3528 mm)
pixel (obrazovkový bod)
šířka písmene ,,M"
šířka písmene ,,N"
šířka písmene ,,x"
procenta
­ styly pro tisk
­ styly pro zobrazení na obrazovce
Odsazení a rozměryOdsazení a rozměry
Text v elementu
padding-bottom
margin-top border
width
height
padding-top
padding-left
padding-right
Zarovnání textu v blokuZarovnání textu v bloku
Text Text Text
Text Text Text
Text Text Text
text-align:
center rightleft
vertical-align:
top
middle
bottom
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:repeatX;
background-attachment: scroll;
background-position: center;