Například: #header strong {color:red} nastaví pro značku STRONG, která je uvnitř selektoru pojmenovaném ID=header červenou barvu písma.
Pravidla
např.:
h1.nadpis {color:navy; font-size:xx-large}
Pro definici ve značce: <H1 style="color:navy;font-size:xx-large">
Seznam pravidel je uvedení takovýchto pravidel za sebou. Obvykle se jednotlivá pravidla píší na nový řádek.
Pro komentář se užívá značek /* komentář.... */ .
Dědičnost
Kromě tabulky stylů, kterou vytvoříme existují další tabulky - povinně má tabulku stylů prohlížeč a podle ní zobrazuje prvky, které nemají žádné styly určeny. (například největší nadpis je 2x větším fontem než základní písmo stránky)Pokud prvek nemá vlastnost definovanou ani v jedné tabulce, nemusí ještě použít výchozí hodnotu. Některé vlastnosti jsou totiž dědičné - převezmou hodnotu od nadřazeného prvku = prvku, uvnitř něhož leží. Proto není třeba nastavovat vlastnosti všem prvkům. Např. nastavíme pro tělo dokumentu body typ písma a tento bude sdílený všemi ostatními použitými značkami.
Pokud se hodnota dědí, dědí se z nejbližšího nadřazeného prvku.
Prohlížeč nejdříve hledá hodnotu vlastností v tabulkách stylů, pokud ji nenajde, může hodnotu převzít z nadřazeného prvku a pokud nelze ani to, je použita výchozí hodnota.
Kaskáda
Prvky mohou mít definovánu stejnou vlastnost na více místech současně. Výběr správné hodnoty zajišťuje kaskáda CSS. Přednost mají přesnější a konkrétnější pravidla před pravidly obecnými (překryjí je).
p {color:red}
p.pozn {color:lightgray}
#pozn1 {color:green}
Pak pro <p class="pozn" id="pozn1"> je použije zelená barva, protože ID je unikátní, a tedy nejkonkrétnější.
Pokud jsou zapsány stejné definice, pak záleží na pořadí! Použije se nejpozději zapsaná
p {color:red}
p {color:navy}
p {color:yellow}
Pak pro prvek P je použita žlutá barva.
Styly uvedene v konkrétní značce ve značce STYLE maji nejvyšší priority
Formátování textu
Pomocí CSS můžeme text naformátovat stejně, jako dříve s použitím značky <font>Typ písma
Je určený vlastností font-family a její hodnotou je seznam názvů písem.Jednotlivé položky se oddělují čárkami. Položky které obsahují mezery, musí být uzavřeny v uvozovkách!
Tento seznam se zpracovává zleva. Pokud má prohlížeč k dispozici první definované písmo, pužije jej, jinak pokračuje procházením definice, dokud nenarazí na nějaké známé písmo. Seznam by tedy měl začínat konkrétním fontem a končit obecným písmem.
CSS definuje pět obecných typů písma
- serif
- patkové písmo (rodina Times...)
- sans-serif
- bezpatkové písmo (Arial, Helvetica)
- cursive
- kurzíva, kaligrafické písmo (Chancery...)
- monospace
- neproporciální písmo (Courier)
- fantasy
- dekorativní písmo
font-family: "Times CE", "Times New Roman CE",'Times New Roman',serif; font-family: "Arial CE","Helvetica CE", Arial, sans-serif; font-family: "Courier CE", "Courier New CE", "Courier New", monospace; font-family: "Poptic One", "Funny Fellow", MerryXmas, fantasy; font-family: cursive;Písmo stačí předepsat pro celou stránku, a všechny ostatní značky jej zdědí. body {font-family:sans-serif}
Velikost písma
Velikost písma je určena vlastností font-size a její hodnotou je klíčové slovo nebo číselná hodnota s jednotkou (10pt, 1.2em...).Za základní velikost lze vzít velikost definovanou pro body. Od ní se budou odvozovat některé prvky. Například nadpisy jsou násobky základní velikosti.
Príklad:
body {font-size: 12pt }
h1 {font-size:14pt}
#koment {font-size:xx-small}
Barva písma
Barva písma je určena vlastností color a její hodnota je název barvy nebo hexadecimální kód.
body {color: #336699}
H1 {color: red}
Odkazy nepřebírájí barvu textu a některé další vlastnosti a musí se nastavit zvlášť!
Řez písma
Řez písma (nebo též styl) je určen vlastností font-style (sklon písma) a font-weight (síla písma).Základní hodnoty pro sklon jsou: italic, normal - skloněné, neskloněné písmo.
Pro sílu písma: bold, normal - tučné, normální.
Príklad:
.vyzazne {font-style:italic; font-weight:bold}
strong {font-style:normal; font-weight:bold}
Dekorace písma
Dekoraci písma určuje vlastnost text-decoration a hodnoty jsou názvy efektů:- underline
- podtržení
- overline
- nadtržení = linka nad textem
- line-through
- přeškrtnutí
- blink
- blikající text
- none
- žádný efekt
Příklad: a {text-decoration:underline}
Zarovnání textu
Obsah blokových prvků lze vodorovně zarovnat pomocí vlastnosti text-align nabývající hodnot: left, center, right, justify = zarovnání doleva, na osu, doprava a do bloku.Příklad:
#header {text-align:center}
Souhrn vlastností pro práci s textem
font-family: sans-serif |serif |cursive |fantasy |monospace font-size: xx-small |x-small |small |medium |large |x-large |xx-large |larger |smaller |<velikost> |<procenta> font-weight: normal |bold |bolder |lighter |100 |200 ....|900 font-style: normal |italic |oblique font-variant: normal |small-caps color:| #<hexa kod> text-decoration: none |underline |overline |blink |line-through text-align: left |right |center |justify |<řetězec>
Formátování bloků stránky
Blok je prvek, který se na stránce zobrazuje jako obdélníková oblast. Například <p>, <div>, <h1>, <ul>, ...Blokové vlastnosti umožnují definovat rozměry bloků, odstupy mezi nimi, rámečky, pozadí, umístění na stránce.
Blokové vlastnosti se nedědí!.
Oblasti bloků
Obsahem bloku je vše uvnitž značky, která blok definuje.Kolem může být rámeček, obsah může být odsazen, aby nebyl nalepený k rámečku, atd. viz obrázek:
- border
- rámeček, ohraničuje blok
- padding
- odstup obsahu od rámečku, výplň mezi rámečkem a obsahem. Umožňuje upravit vzhled, aby rámeček nebyl nalepený přímo na obsahu
- background
- pozadí, zobrazuje se uvnitř celého rámečku
- margin
- průhledný okraj kolem rámečku zvenku, udává odstup mezi bloky.
- width, height
- šířka, výška = rozměry bloku = rozměry pouze obsahu.
Bloky vodorovně zabírají celý možný prostor. Tuto vlastnost lze však předefinovat.
Pokud udáme menší šířku než je volný prostor, zbývající místo se rozdělí do postranních okrajů rovnoměrně!=vycentrování prvku
Pokud zadáme navíc nulový nulový okraj dojde k zarovnání vlevo či vpravo.
Pokud zadáme menší šířku, a oba okraje, pak prvek může zabírat menší šířku než má k dispozici.
Rámečky
Pro rámeček existuje řada vlastností, které lze definovat pro každou stranu zvlášť nebo současně pro celý rámeček:border-style
border-width
border-color
A jednotlivé strany: border-left
border-top
border-right
border-bottom
Tedy například:p {border-left-color:red}
PRo určení všech stran současně slouží vlastnost border, její hodnota je trojice mezerou oddělených hodnot síla styl barva.
Síla (width) Určuje tloušťku čáry, kterou má být rámeček zobrazen. Obvyklá jednotka je px.
Styl (style) Určuje druh použitého rámečku: solid - celá čára, dashed - čárkovaná čára, dotted - tečkovaná čára, none - ber rámečku.
Barva (color) barva rámečku = název barvy nebo hexadecimální kód.
#header {border: 1px solid navy}
body {border:none}
Odstup od rámečku
Pomocí padding se definuje vzdálenost obsahu od rámečku. Vlastnosti určují odstup od jednotlivých stran: padding-left, padding-top, padding-right, padding-bottom nebo sdružená vlastnost padding shruje všechny do jedné definice.Vlastnost padding může mít jednu až čtyři hodnoty po řadě udávající odstup pd horního, pravého, dolního a levého rámu=shora po směru ručiček.
Pokud použijeme méně hodnot, doplní se chybějící hodnota podle protější strany. Jedna hodnota nastavuje odstup od všech čtyř stran.
Výchozí hodnota je 0.
#header {padding: 0.3em 1em}
Okraje
Vlastnost margin: margin-left, margin-top, margin-right, margin-bottom. Sdružená vlastnost margin + až 4 hodnoty od horního okraje ve směru ručiček. (jako u padding)B Okraje sousedících prvků se nesčítají, ale spojí se v jednoho okraje o velikosti většího z nich.
body {margin: 3em 5em}
Styl pozadí
Pozadí mohou mít všechny prvky.Obrázky lze zarovnat vodorovně i svisle, opakování může být nastaveno jen v jednom směru, případně vůbec...
Sdružená vlastnost pro nastavení pozadí je background a její hodnota je barva nebo adresa obrázku nebo obojí.
Adresa se zapisuje pomocí funkce url(), jejímž parametrem je adresa (relativní či absolutní) uzavřená v uvozovkách.
body {background: url("img/pozadi.jpg")}
Pokud není uveden atribut, obrázek se opakuje dlaždicovitě.
Výchozí nastavení pozadí je transparent, tedy průhledné pozadí.
body {background:white url("img/pozadi.jpg") top right no-repeat fixed;}
Souhrn pro pozadí
background-color: <barva> |transparent
background-image: url() |none
background-repeat: repeat |repeat-x |repeat-y |no-repeat
background-position: [<procenta> |<velikost>] |{1,2} |[top |center |bottom] || [left |center |right]
background-attachment: scroll |fixed
background : color |image |repeat |attachment |position
background-repeat - opakování obrázku, výchozí je repeat=dlaždice. Repeat-x = opakování jen vodorovně, repeat-y = jen svisle. No-repeat = bez opakování.background-position - hodnotu tvoří dvojice oddělená mezerou, určující pozici ve vodorovném a svislém směru.
<procenta> <procenta> - 0% 0% = levý horní roh obrázku je v levém horním rohu oblasti výplně, 100% 100% = pravý dolní roh obrázku v pravém dolním rohu oblasti.
<velikost> <velikost> - 10px 20px určuje že levý horní roh obrázku je posunut 10px doprava a 20px dolu od levého horního rohu oblasti
top, top center a center top jako 50% 0%
right top a top right jako 100% 0%
left, left center a center left jako 0% 50%
center a center center jako 50% 50%
right, right center a center right jako 1000% 50%
bottom left a left bottom jako 0% 100%
bottom, bottom center a center bottom jako 5% 100%
bottom right a right bottom jako 100% 100%
background-attachment - uchycení obrázku - scroll = obrázek se bude posouvat společně s obsahem, fixed = obrázek pevně ukotven.