Druhý díl seriálu o CSS, tentokrát o možnostech definování CSS a syntaktickém zápisu.
V dnešním díle seriálu si ukážeme jak se CSS definují, kam se definují, a jak se vlastně zapisuje CSS.
Kam CSS psát?
Máme tři možnosti kam zapisovat CSS. Podrobně si vysvětlíme všechny tři a nakonec doporučím kam nejlépe zapisovat.
1. CSS můžete zapisovat přímo k danému elementu a to pomocí klíčového slůvka "style". Toto slůvko vymezí, kde začíná definice CSS stylu u daného elementu. CSS vlastnost se poté vztahuje pouze na daný element, ve kterém je styl definován.
A teď jak se to vlastně provádí:
příklad si uvedu elementu odstavce a, kterému nadefinuji zarovnání doprava
<p style="text-align: right;">
podobně můžeme nadefinovat více vlastností, například i barvu textu
<p style="text-align: right; color: white;">
jednotlivé vlastnosti si vysvětlíme dále v seriálu
Jak vidíte na příkladě, tak definování vlastností v klíčovém slůvku "style" je vymezeno uvozovkami. Syntaxi si vysvětlíme v dnešním díle ke konci. Takto lze definovat každý element, respektive takto to můžete zapsat ke každému elementu HTML (XHTML) kódu.
2. Druhý způsob už je o trošku jiný a má hodně společného se třetím způsobem, který bude popsán za okamžik. V hlavičce stránky si vymezíte prostor pro definování stylu párovým elementem "style". Opět raději uvedu na příkladě.
<html>
<head>
<title>strana</title>
<style type="text/css">
p {text-align: justify;}
</style>
</head>
<body>
a zde to bude použito u každého elementu p
</body>
</html>
U elementu "style" nemusíte uvádět "type", ale je to doporučeno (alespoň je na první pohled vidět, co je zde uvedeno). Tímto způsobem si uvedete všechny potřebné CSS vlastnosti do tohoto prostoru, ale pozor: tyto vlastnosti budou platit pouze pro danou stránku.
3. Třetí a poslední možnost je uvádět CSS vlastnosti do externího souboru, který se potom připojí k dané stránce. Tato možnost je nejefektivnější a nejvíce používaná, protože stylopis nemusíte uvádět na každé stránce nebo u každého elementu, jak to bylo použito v předchozích dvou možnostech. Ovšem toto neznamená, že první dvě možnosti se nepoužívají.
Nejprve vám ukáži strukturu externího CSS souboru. Tento soubor bude mít jakýkoliv název s příponou css (takže např. css.css).
Do tohoto souboru bude zapisovat toto:
/* CSS Document */
@charset "iso-8859-2";
p {text-align: justify;}
h2 {text-align: justify;}
První dva řádky nejsou povinné. /* CSS Document */ je zde jako komentář, co v tomto souboru je uvedeno (můžete napsat cokoliv a komentář použít kdekoliv). Definice znakové sady také není nikde přikázána, ale můžu vám z vlastní zkušenosti říci, že se mi také stalo, že se mi nesprávně zobrazovala čeština. Vyřešila to tato definice. A nikomu nic neudělá, když to tam bude psát. Samozřejmě musíte mít stejnou znakovou sadu, jakou máte definovanou na stránce.
A teď jak s tím na html stránku.
jednoduše do hlavičky uvedete toto:
<head>
<title>stranka</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
Tímto způsobem jste připojili k dané stránce CSS styl s názvem css.css . Tento styl takto můžete připojit ke každé stránce a v tom tkví ta výjimečnost kaskádových stylů, a to, že pouhou změnou vlastnosti v tomto dokumentu změníte celý Váš web. Stejně tak můžete mít více stylů, např. kvůli přehlednosti nebo popřípadě z jiných důvodů. Tento další styl připojíte k webové stránce stejně jako css.css jen s jiným názvem.
Syntaxe CSS
Zde jsme si ukázali možnosti, kam CSS vlastnosti definovat, ale pro někoho možná přijde nesrozumitelná syntaxe. Teď zde vysvětlím syntaxi, neboli (pokud to nějak převedu do češtiny) styl zapisování daného kódu (CSS).
Jak jste si již všimli, tak v zápisu jsou uváděny složené závorky {}, středníky ; a také dvojtečky :. A teď co k čemu slouží:
složené závorky: p {text-align: center;} tyto závorky slouží pro uvození začátku a konce definice u daného elementu. Uvnitř jsou uvedeny CSS vlastnosti daného elementu, jedna nebo více. Složené závorky se uvádějí pouze u 2 a 3 možnosti, kam se CSS definují.
Respektive u možnosti definice CSS u daného elementu
<p style="text-align: justify;">text</p>
slouží pro uvození začátku a konce definice, uvozovky.
středníky: p {text-align: center;} středníky slouží pro ukončení definice jedné css vlastnosti. Hned za ní může následovat další CSS vlastnost elementu. Středníky se používají u všech možností kam definovat CSS.
dvojtečky: p {text-align: center;} dvojtečky se používají u CSS vlastností pro oddělení názvu vlastnosti a hodnoty vlastnosti. Také se používají všude jako středníky.
mezery: v zápisu se také používají mezery, ale u těch není nějaké pravidlo, kde je musíte dávat. Já je například vždy umísťuji za dvojtečku, aby to bylo přehlednější.
Možná si říkáte jak umísťovat za sebe css vlastnosti a elementy (selektory), tak tady máte malou ukázku.
body {
background-image: url("../images/back-01.gif");
text-align: center;
padding-top: 2px;}
p {
text-align: justify;
padding-top: 2px;}
Pro přehlednou strukturu je také dobré nechat si váš css styl projet validátorem, jehož adresu jsem vám uváděl v minulém díle, který vám ukáže celý váš CSS soubor v přehledné struktuře. Tuto strukturu si poté zkopírujte k sobě a je hotovo.
Tak a teď uvedu co je lepší používat. Nejlepší je využívat zápis do externího souboru, protože když poté potřebujete změnit např. barvu nadpisu h2, tak to provedete pouze jednou v CSS souboru a ne několikrát, jak by tomu bylo u zbylých dvou případů. Ale stane se také situace, kdy budete potřebovat zrovna na tom jednom místě provést něco jenom jednou, tak poté využijete další možnost deklarace. V tomto případě zde nastává jakási dědičnost, protože na daný element byly použity dva styly, a ten který platí si uvedeme v nějakém následujícím díle, spolu s dalšími případy dědičnosti.
To je pro dnešek vše. Příště se podíváme na elementy div a span, na třídy a identifikátory a záležitosti s tímto spojené. Pokud něčemu nerozumíte, tak svoje otázky můžete napsat do fóra pod tímto článkem.
Autor: in-spyder
2024 ©