CSS – Cascading style sheet přehled vlastností selektory
Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
Obsah 1 Přehled některých vlastností a hodnot ................................................................................... 2 1.1 Formátování textu ............................................................................................................ 2 1.2 Barvy a pozadí v dokumentu ............................................................................................ 2 1.3 Kurzor myši ....................................................................................................................... 3 1.4 Stylování seznamů ............................................................................................................ 3 1.5 Ohraničení objektů ........................................................................................................... 3 1.6 Vlastnosti objektů............................................................................................................. 4 1.7 Obtékání objektů .............................................................................................................. 4 2 Vlastní třídy v CSS .................................................................................................................... 5 2.1 Selektory ........................................................................................................................... 5 2.1.1 Značky ........................................................................................................................ 5 2.1.2 Výčet více značek ...................................................................................................... 6 2.1.3 Vnořování značek ...................................................................................................... 6 2.1.4 Vlastní třídy ............................................................................................................... 6 2.1.5 Identifikátory ............................................................................................................. 7 2.2 Značky DIV a SPAN............................................................................................................ 7
Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
1
1 Přehled některých vlastností a hodnot 1.1 Formátování textu vlastnost font-family
font-style font-weight font-size text-decoration
text-align
vertical-align vertical-align
hodnoty serif cursive arial … normal italic normal bold číslo jednotky (12px) none underline overline line-through left center right justify top middle bottom sub super
význam druhy písma normální písmo kurzíva normální písmo tučné písmo velikost písma normální písmo podtržené písmo nadtržené písmo přeškrtnuté písmo zarovnání textu – horizontální platí pouze pro blokové značky! zarovnání textu – vertikální platí pouze pro blokové značky! dolní index horní index
1.2 Barvy a pozadí v dokumentu vlastnost color background-color background-image background-repeat
background-position
hodnoty barva (název; hex; dec) barva url(„obrázek“) repeat-x repeat-y no-repeat top bottom left right center
Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
význam barva textu barva pozadí obrázek na pozadí opakování obrázku v ose x opakování obrázku v ose y pouze zobrazení obrázku pozice obrázku možno kombinovat: např. „top left“
2
1.3 Kurzor myši vlastnost
cursor
hodnoty auto default crosshair pointer text wait help
význam
hodnoty disc circle square decimal lower-roman lower-alpha upper-alpha none url(„obrázek“) outside inside
význam
hodnoty číslo jednotky (1px) barva dotted dashed solid double
význam šířka ohraničení barva ohraničení
Změna kurzoru
1.4 Stylování seznamů vlastnost
list-style-type
list-style-image list-style-position
druh odrážky
odrážka tvořená obrázkem odsazení (neodsazení)
1.5 Ohraničení objektů vlastnost border-width border-color border-style
border-collapse
separate collapse
styl ohraničení zapíná / vypíná mezery mezi buňkami v tabulce. použití u značky
Poznámka -
Lze použít i vlastnost border a složenou hodnotu: o Border: 1px solid black; Lze ohraničit pouze jednu stranu: o Border-top: 1px solid black; o Border-left: 1px solid black; o …
Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
3
1.6 Vlastnosti objektů vlastnost padding (padding-top…) margin (margin-top…) width height
hodnoty číslo jednotky (10px)
význam vnitřní ohraničení vnější ohraničení šířka objektu výška objektu
1.7 Obtékání objektů vlastnost float clear
hodnoty left right left right both
význam Připoutání k dané straně Zrušení obtékání objektu připoutaného k dané straně
Vlastnost float se používá k přichycení stylovaného objektu k pravé nebo levé straně. Pokud je objekt přichycen ke straně, je obtékán z druhé strany. Vlastnost clear se použije pro objekt, který již nemá pokračovat v obtékání přichyceného objektu k dané straně. Hodnota both říká, že objekt neobtéká žádný z přichycených objektů a začne pod nimi.
Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
4
2 Vlastní třídy v CSS 2.1 Selektory Obecný zápis stylu: Selektor { vlastnost: hodnota; vlastnost2:hodnota; }
Příklady zápisu selektorů • • • • •
značky výčet více značek vnořování značek vlastní třídy identifikátory
2.1.1 Značky značka { vlastnost:hodnota; vlastnost2:hodnota; } Nejjednodušším způsobem je nastylovat konkrétní značku. Veškeré výskyty značky pak budou formátované podle vytvořeného stylu.
Příklad a { color:green; font-weight:bold; } Všechny odkazy na stránce budou psány zelenou barvou a tučně.
Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
5
2.1.2 Výčet více značek značka1, značka2 { vlastnost:hodnota; vlastnost2:hodnota; } Pokud bude uvedeno více značek oddělených čárkami, styl bude platit pro všechny uvedené značky.
Příklad: h1, h2, h3 {font-style:italic;} Všechny nadpisy první, druhé a třetí úrovně budou psány kurzívou.
2.1.3 Vnořování značek Značka1 značka2 { vlastnost:hodnota; vlastnost2:hodnota; } Pokud budou 2 (případně i více) značky vypsány za sebou, styl bude platit pro každou značku2, která se vyskytuje uvnitř značky1.
Příklad: p a {color:red;} Každý odkaz, který je uvnitř odstavce, bude mít červenou barvu. p a img {border:1px solid black;} Každý obrázek, který je uvnitř odkazu, který je uvnitř odstavce, bude ohraničen.
2.1.4 Vlastní třídy .nazevTřídy { vlastnost:hodnota; vlastnost2:hodnota; } Někdy je vhodné udělat styl, který půjde využít kdekoliv (nezávisle na značce). Například „zvýrazněný text“ bude třeba použít v odstavci, v nadpisu, u odkazu – ale ne u všech výskytů těchto značek. K tomu pomáhají vlastní třídy. V CSS se vlastní třída vytvoří znakem „.“ (tečka) a názvem třídy. V HTML stačí ke značce, která má být nastylována, přidat atribut class a jako hodnotu atributu uvést název třídy vytvořené v CSS. Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
6
Příklad: Definice třídy v CSS: .vyrazne {font-weight:bold; text-decoration underline;} Použití v HTML:
Zvýrazněný nadpis
Normální odstavec
Zvýrazněný odstavec
Nadpis a druhý odstavec budou psány tučně a podtrženě
2.1.5 Identifikátory Identifikátory jsou podobné jako třídy. Rozdíl je v definici (místo . se píše #) a v použití (místo atributu class se použije atribut id). V rámci jedné stránky lze identifikátor použít pouze jednou – třída lze použít vícekrát.
2.2 Značky DIV a SPAN Někdy je vhodné použít vytvořenou třídu pouze na část textu (např. jednu větu nebo jedno slovo v rámci odstavce) nebo naopak na celý blok textu. K tomu slouží v HTML značky SPAN (řádková) a DIV (bloková).
Příklad: (předpoklad existence tříd „zahlavi“ a „vyrazne“)
Nadpis
Na tomto si dejte <span class=“vyrazne“>opravdu záležet
Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
