4 CSS = kaskádové styly

Nacházíš se zde: rozcestník kroužku → 1. Úvodní lekce → 1. lekce - Teorie klient a server → 2. lekce - Úvod do vývoje webových aplikací → 3. lekce - XHTML (XHTML tahák) → 4. lekce - CSS = kaskádové styly

4. XHTML a CSS

4.1 Opakování z minula

Nevíš si s něčím rady? Navštiv www.jakpsatweb.cz nebo nám napiš na e-mail (tomik@jmx.cz nebo klaxalk@gmail.com).

4.2 Základy kaskádových stylů

To co jsme se doposud učili - XHTML - používáme k tomu, abychom řekli prohlížeči, co na stránce je. Avšak, zatím jsme si neříkali, jak mu říct, když chceme, aby to vypadalo jinak, než standardně. K tomu slouží další jazyk - CSS (Cascade Style Sheet).

4.2.1 Proč CSS?

Umožňují nám jednoduše udělat hromadné úpravy na prvcích stránky. Např. pokud jsem doposud chtěli udělat všechny nadpisy červeně, tak jsem museli u každého nadpisu zvlášť říci, že je červený. Teď, když máme css, tak to stačí pouze jednou.

4.2.2 Možnosti zápisu

Vkládání do XHTML se provádí přímo tím, příkazy napíšeme do speciálního paramtru v prvku. Parametr se jmenuje style. Co se píše do dvojitých uvozovek tohoto parametru se dozvíte v následujících odstavcích.
Externí (vnější) CSS soubor se užívá mnohem více. Všechny css příkazy se píši do vámi zvoleného souboru (např. styly.css). Tento soubor má příponu *.css. Potom je třeba naší XHTML stránce říci, jak se k souboru dostane. Na to se používá zvláštní tag, který se píše do hlavičky stránky.

<link rel="stylesheet" type="text/css" href="soubor.css" />

4.3.3 Definování vlastností základních prvků XHTML

Pro začátek si to představme na externím souboru.
Konrétní zápis se provádí tak, že nejdříve napíšeme název prvku, jehož vlastnost chceme upravovat. Za ním následuje dvojice složených závorek. Za závorkami je vždy středník. Za každým parametrem v závorkách se také píší středníky. Na příklad, pro nadpis 1. kategorie by to vypadalo takto:

h1 {color: red;}

Do závorek se potom píší konkrétní atributy, které chceme, aby ten prvek měl.
A které že prvky takto vlastně můžeme nastavovat? Jsou to tyto:
body, h1, h2, ..., h6, p, ul, ol, li, hr, br, table, tr, td, th, div, span... takto bych mohl pokračovat dále a dále. Tímto způsobem se dají nastavovat, prakticky všechny prvky, které v XHTML jsou.
To, co zde nastavíme pro h1 bude od nynějška fungovat pro všechny nadpisy 1. kateorie, co budou na stránce.

4.3.4 Definování vlastností vkládáním do XHTML

Jak již bylo zmíněno, další možnost je, vložit CSS kód přímo do XHTML kódu. Zapisuje se to uplně stejně, jako do externího souboru. Značný rozdíl je ten, že takto nastavené vlastnosti se projeví pouze u toho prvku stránku, u kterého jsme to nastaviili. To je pro případ, kdybychom například chktěli pouze jeden nadpis udělat červený. Na příkladu to vypadá takto:

<h1 style="color: red;">Nadpis<h1>

4.3.5 Jak se definují parametry?

Jako první se uvádí název vlastnosti. Většinou jsou odvozené z anglických názvů (jak jinak :-)). Poté se uvede dvojtečka. Za dvojtečkou následuje hodnota parametru (je to to, co by se v XHTML uvádí za rovnítko do uvozovek. Za hodnotou následuje samozřejmě středník.
Uvedeno na příkladě: pro barvu textu se používá parametr color. Výsledná barva se může uvést mnohými způsoby. Jedna anglickým názvem. Toutou metodou se dá použít poze jedna ze 16ti základních barev (jen ty mají své názvy). Tabulku s barvamy najdeš na Jakpsatweb.cz. Další možnost je nazvat barvu pomocí hodnot RGB. zápis vypadá např takto:

color: rgb(67, 48, 128);

Další možnost je zápis šestnáctkové soustavy. To se zapisuje hodnotou čísla v šestnáctkové soustavě (6 znaků 0-9, nebo A-F). Před tím se však nachází #
Jak to tedy vypadá?

color: #FFFFFF;

Jak získat správnou barvu, to se dozvíš zase na Jakpsatweb.cz

4.4 Úprava textu pomvocí CSS

Pokud chceme pomocí CSS upravovat nějaký text na stránce, je třeba, aby byl v nějakém prvku, kterému to můžeme nastavit. Tím můžou být např. nadpis, odstavec, odkaz, ale i tabulka.

4.4.1 Barva textu

Toto již zde bylo řečeno. Uvedu to, pro úplnost, ještě jednou.
Název vlastnoti pro barvu texttu je color. Za dvojitečku se uvádí hodnota buť v hexadecimálním (šestnáctkovém) zápisu, nebo v hodnotách škály RGB (Red, Green, Blue), nebo jeden ze 16ti anglických názvů (black, white...). Ve výsledku to vypadá taktto:

h1 { color: red; }

Toto je červený text

4.4.2 Písmo (font)

Tuto vlastnost znáte snad kažý z Wordu. Máme růzzné druhy písem, a na každý text se hodí jiné písmo. I zde můžeme mezi nimi volit.
Vlastnost má název font-family, z anglického "rodina fontů". Zde se za dvojitečku uvádí celý název písma. Např Verdana. Jaká písma je vhodné použít, a jaká ne, o tom si povíme v některé z dalších lekcí.
Zde je možnost uvést za dvojtečku více názvů písme. Ty se pak oddělují čárou. To z důvodu, že není zaručeno, že uživatel, který si stránku prohlíží, má to, či ono, písmo ve svém počétači nainstalované. Když ne, zobrazí se mu písmo, které následuje za čárkou. Může jich tam být více, než 2. A jak to vypadá?

body { font-family: Georgia, Verdana; }

Georgia

Comic sans MS

Fontotéka (seznam písem): http://www.dgx.cz/tools/fonts/

4.4.3 Velikost písma

Tuto možnost využijete snad pokaždé. Jinak bude veliký nadpis, a jinak bude veliký text odstavce. Názec vlastnosti je font-size. Za dvojtečku se uvádí číselná hodnota, a ihned za ná následuje název jednotky, ve které to chceme.
Jednotek je spousta: p - pixely, nebo také obrazové body, in - palce, jeden palec je 2.54 cm), cm - centimetry, % - procentuální velikost z velikosti, jakou by písmo mělo, kdybychom ho nenastavovali. A jak to vypadá?

p { font-size: 16px; }

25px písmo

20px písmo

4.4.4 Tlusté písmo

Toto je alternativa znakčy <strong> v XHTML. Název je font-weight a hodnata může být buť bold nebo normal. Potom je zde možnost uvést to číslem od 100 do 900 - po stovce. Udávají různé stupně tučnosti. Dále jsou zde další dvě možnosti - bolder a lighter. Udávají "o něco tlustší" a "o něco tenčí", než by písmo bylo, kdybychom ho nenastavovali.

p { font-weight: bold; }

p { font-weight: 200; }

Bold

4.4.5 Kurzíva

To samé jako <em> v XHTML. Název vlastnosti v CSS je font-style a hodnta pro zklopené písmo je italic. Pokud ho nechceme zklopené, hodnota je normal.

p { font-style: italic; }

Kurzíva

4.4.6 Podtržený text

To samé jako <u> v XHTML. Název vlastnosti v CSS je text-decoration a hodnta pro podtržené písmo je underline. Pokud ho nechceme podtržené, hodnota je none.

p { text-decoration: underline; }

Podtrženo

4.4.7 Zarovnání textu

p { text-align: center; }

Napravo

Doprostřed

Nalevo

Normální odstavec:

Lorem ipsum dolor sit amet consectetuer wisi justo urna semper est. Semper orci eget dictum Nulla Vestibulum ac Quisque lobortis tortor id. Fringilla tempus enim auctor ac lorem eget mattis nulla tellus magna. Elit congue dignissim vel laoreet pretium cursus et Sed tellus ligula. Semper Morbi orci adipiscing velit pellentesque eget Nam vitae tempor gravida. Curabitur.

Zarovnáno do bloku:

Est egestas Vestibulum id metus vitae Aliquam risus tincidunt suscipit rutrum. Fames velit a quam leo Vestibulum Integer mauris Proin Vivamus Maecenas. Et pede nunc vitae interdum sociis est eu Suspendisse et mi. Vestibulum quam amet feugiat tincidunt gravida arcu ligula pretium ut Sed. Montes eros enim netus leo mollis felis tincidunt sed.

4.5 Stylování odkazů

Pro stylování odkazů je zaveden speciální způsob odlišení odkazů, protože odkaz může být:

nenavštívený
navštívený
odkaz nad který je kurzor myši

4.5.1 Nenavšívený odkaz

Ten se značí normálně jako klasická značka:

a {
  color:blue;
}

4.5.2 Navšívený odkaz

Značí je dodatek :visited k názvu značku (a), tedy takto (přičemž nedefinované vlastnosti dědí od definice nenavštíveného odkazu):

a:visited {
        color:red;
}

4.5.2 Aktivní odkaz (nad kterým je kurzor myši)

Značí je dodatek :hover k názvu značku (a), tedy takto (přičemž nedefinované vlastnosti dědí od definice nenavštíveného odkazu):

a:hover {
        background-color:blue;
        color:white;
}

4.6 Seznam všech důležitých vlastností

Seznam všech důležitých vlastností nalezneš na http://www.jakpsatweb.cz/css/css-vlastnosti-hodnoty-prehled.html.

4.7 Validátor CSS

U (x)HTML jsme si říkali, že existuje validátor a co to je. A tento nástroj existuje i pro CSS, nalezneš jej zde: CSS validator.

Máš chuť na další lekci?

Tak pokračuj dál! 5. lekce - CSS a třídy.
Můžeš se také můžeš vrátit na předchozí 3. lekci - HTML = Hypertext markup language.
Nebo můžeš jít na rozcestník kroužku.