Základy CSS

Zápis pravidla

HTML říká, co na stránce je. CSS říká, jak to vypadá: barvy, velikosti, mezery a layout.

Všechno v CSS se zapisuje stejně, pravidlo za pravidlem. V náhledu vidíte, kam se dostaneme.

Výchozí stav

Stránka bez stylů

I stránka bez jediného řádku CSS nějak vypadá. Prohlížeč má vlastní výchozí styly: nadpis je velký a tučný, odstavce mají mezery nad sebou i pod sebou.

Tyhle výchozí styly můžeme svými pravidly změnit.

Zápis

Selektor, vlastnost, hodnota

Pravidlo má dvě části. Selektor vybere, čeho se pravidlo týká. Ve složených závorkách je pak deklarace: vlastnost, dvojtečka a hodnota.

Čteme: „všechny h1 mají barvu textu #d40000“. Selektor h1 vybere každý nadpis první úrovně na stránce.

Zápis

Víc vlastností najednou

Do jednoho pravidla můžeme dát libovolně mnoho deklarací. Každá končí středníkem.

Každou deklaraci píšeme na samostatný řádek. Prohlížeči je to jedno, ale kód se tak lépe čte.

Kam s CSS · 1

Atribut `style`

CSS jde napsat přímo do tagu, do atributu style. Selektor tu nepotřebujeme, styl platí jen pro tento jeden element.

Hodí se na rychlou zkoušku. Na celou stránku ne: druhý odstavec styl nemá a každý bychom museli upravovat zvlášť.

Kam s CSS · 2

Element `<style>`

Lepší je dát pravidla do elementu <style> v hlavičce stránky. Jedno pravidlo pak platí pro všechny odstavce najednou.

Tak to děláme v celé lekci, podívejte se do kódu vpravo. Atribut style jsme z odstavce zase smazali.

Kam s CSS · 3

Samostatný soubor

Web má obvykle víc stránek a všechny mají vypadat stejně. Pravidla proto přesuneme do souboru style.css a každá stránka si ho připojí elementem <link>.

V souboru style.css jsou jen samotná pravidla, bez tagu <style>.

Takhle se to dělá na skutečných webech: změníte jeden soubor a změní se všechny stránky. Náhled v lekci používá <style> jen proto, aby byl celý kód na jednom místě.

Pozor

Chybějící středník

Prohlížeč chyby v CSS nehlásí, jen tiše přeskočí, čemu nerozumí. Stačí zapomenout jeden středník.

Bez středníku prohlížeč čte obě deklarace jako jednu: barvu #3e5c6e font-size: 20px. Takovou barvu nezná, a tak se v odstavcích nepoužije ani barva, ani velikost.

Shrnutí

Opraveno a okomentováno

Středník je zpátky. Komentář mezi /* a */ prohlížeč přeskočí. Hodí se k označení částí stylu.

Ano

selektor vybere, deklarace řekne jak
každá deklarace končí středníkem
pravidla v samostatném souboru přes <link>

Ne

styly v atributu style u každého elementu

Další: Selektory →