CSS Cascading style sheet přehled vlastností selektory

Transkript

1 CSS Cascading style sheet přehled vlastností selektory Praha a EU Investujeme do vaší budoucnosti

2 Obsah 1 Přehled některých vlastností a hodnot Formátování textu Barvy a pozadí v dokumentu Kurzor myši Stylování seznamů Ohraničení objektů Vlastnosti objektů Obtékání objektů Vlastní třídy v CSS Selektory Značky Výčet více značek Vnořování značek Vlastní třídy Identifikátory Značky DIV a SPAN... 7 Praha a EU Investujeme do vaší budoucnosti 1

3 1 Přehled některých vlastností a hodnot 1.1 Formátování textu font-family serif cursive arial druhy písma font-style normal normální písmo italic kurzíva font-weight normal normální písmo bold tučné písmo font-size číslo jednotky (12px) velikost písma none normální písmo text-decoration underline podtržené písmo overline nadtržené písmo line-through přeškrtnuté písmo text-align vertical-align vertical-align left center right justify top middle bottom sub super 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 color barva (název; hex; dec) barva textu background-color barva barva pozadí background-image url( obrázek ) obrázek na pozadí background-repeat background-position repeat-x repeat-y no-repeat top bottom left right center 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 Praha a EU Investujeme do vaší budoucnosti 2

4 1.3 Kurzor myši cursor auto default crosshair pointer text wait help Změna kurzoru 1.4 Stylování seznamů list-style-type disc circle square decimal lower-roman druh odrážky lower-alpha upper-alpha none list-style-image url( obrázek ) odrážka tvořená obrázkem list-style-position outside inside odsazení (neodsazení) 1.5 Ohraničení objektů border-width číslo jednotky (1px) šířka ohraničení border-color barva barva ohraničení border-style border-collapse Poznámka dotted dashed solid double separate collapse - 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 styl ohraničení zapíná / vypíná mezery mezi buňkami v tabulce. použití u značky <table> Praha a EU Investujeme do vaší budoucnosti 3

5 1.6 Vlastnosti objektů padding (padding-top ) vnitřní ohraničení margin (margin-top ) vnější ohraničení číslo jednotky (10px) width šířka objektu height výška objektu 1.7 Obtékání objektů float left right Připoutání k dané straně clear left Zrušení obtékání objektu right připoutaného k dané straně both 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. Praha a EU Investujeme do vaší budoucnosti 4

6 2 Vlastní třídy v CSS 2.1 Selektory Obecný zápis stylu: Selektor { vlastnost: hodnota; Příklady zápisu selektorů značky výčet více značek vnořování značek vlastní třídy identifikátory Značky značka { vlastnost: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ě. Praha a EU Investujeme do vaší budoucnosti 5

7 2.1.2 Výčet více značek značka1, značka2 { vlastnost: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 Vnořování značek Značka1 značka2 { vlastnost: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 Vlastní třídy.nazevtřídy { vlastnost: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. Praha a EU Investujeme do vaší budoucnosti 6

8 Příklad: Definice třídy v CSS:.vyrazne {font-weight:bold; text-decoration underline; Použití v HTML: <h1 class= vyrazne >Zvýrazněný nadpis</h1> <p>normální odstavec</p> <p class= vyrazne >Zvýrazněný odstavec</p> Nadpis a druhý odstavec budou psány tučně a podtrženě 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 ) <div class= zahlavi > <h1>nadpis</h1> <img src= logo.jpg alt= logo > </div> <p> Na tomto si dejte <span class= vyrazne >opravdu</span> záležet </p> Praha a EU Investujeme do vaší budoucnosti 7