Vytváříme webové stránky – Úvod do CSS (část 9.)

Napsal
Petr Fořt
– 12.7.2010Publikováno v: Vytváříme webové stránky, Webdesign, XHTML a CSS

Kaskádové styly, Cascading Style Sheets, CSS, … již dlouho omílaná a připomínaná věc. Slouží k oddělení obsahu dokumentu od jeho formátování (stylu). Dnes se používá nejvíce verze 2.0 a nové prohlížeče podporují i verzi 3.0, která umožňuje například i zaoblení hran. Od klasických tagů a nastavování atributů má CSS ve formátování širší možnosti. Navíc by se i stránka měla načítat rychleji s CSS.

Již jsme si v některých dílech ukázali, že chceme-li vybrat nějakou oblast (třeba s textem), použijeme buď tag SPAN nebo DIV. Nejvíce se liší tím, že u SPAN se jenom vybere a u DIV rovnou oddělí řádek (chová se to jako odstavec). Ještě jsem narazil také na tag EM, který je téměř totožný se SPAN. Co jsme si ale neukázali, nebo přinejmenším nezdůraznili, že styly můžou mít vlastní název (třídu) nebo identifikátor. Název přiřadíme atributem CLASS a identifikátor vlastností ID. Toho, že dávám celý obsah definice stylu do komentáře, se nelekejte. Je to kvůli zpětné kompatibilitě u opravdu hodně starých prohlížečů. Pokud to do komentáře <<-- a --> obalovat nebudete, nic se nestane.

1
2

<div id="vyber1" style="color: red;">Nastylovaný text 1</div><br />
<span class="vyber2" style="color: blue;">Nastylovaný text 2</span>

To, že jsme nastavili název a identifikátor se hodí v následujícím příkladě:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="content-language" content="cs" />
<style type="text/css">
<!--
#vyber1 {
color: red;
}
 
.vyber2 {
color: blue;
}
-->
</style>
</head>
 
<body>
<div id="vyber1" >Nastylovaný text 1</div><br />
<span class="vyber2">Nastylovaný text 2</span>
</body>
 
</html>

V prvním příkladu můžeme zápisu stylu říkat přímý styl, v druhém třeba hlavičková styl (někdy též stylopisem) a v posledním následujícím příkladě externí styl. Soubor styly.css se dá vytvořit v nějakém textovém editoru, třeba PSPadu, ale klidně i Poznámkovém bloku. Jeho obsah je to, co je obvykle (třeba v minulém příkladě) obsahem párového tagu STYLE v hlavičce. Výhoda externího stylu je ta, že pokud v hlavičce stovky souborů odkážete na jeden CSS soubor a pak si rozmyslíte, že byste chtěli malinko u něčeho pozměnit barvy, stačí udělat změnu pouze v jediném souboru.

1
2
3
4
5
6
7
8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="content-language" content="cs" />
<link rel="stylesheet" type="text/css" href="styly.css" />
</head>

První trochu delší projekt
Vytvořme si spolu nyní do stejného adresáře dva soubory, jeden stranka.html a druhý styly.css. Požadavky:

  • Vytvořit oba soubory, nastavit kódování iso-8859-2 a uložit v něm oba soubory
  • Držet se standardu xHTML 1.1
  • HTML stránku odkázat na externí styl, soubor styly.css
  • Stránce nastavit bílé pozadí, černý text velikosti 14 pixelů
  • Na stránce vytvořit nadpis H1 psaný šedivým písmem, H2 fialovým písmem a odstavec P stříbrným písmem
  • Označit na stránce kus textu pomocí identifikátoru vyber1 a přiřadit mu oranžovou barvu
  • Označit na stránce kus textu pomocí názvu (třídy) vyber2 a přiřadit mu žlutou barvu
  • Obarvit nenavštívený i navštívený odkaz modře, odkaz, na němž se právě stojí myší tmavě modře a aktivní odkaz tyrkisově
  • Zrušit podržení u nenavštíveného a navšíveného odkazu (vyjma aktivního a právě vybraného odkazu)

A tady je výsledek. Zde je obsah souboru stranka.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="content-language" content="cs" />
<link rel="stylesheet" type="text/css" href="styly.css" />
</head>
 
<body>
<h1>Nadpis úrovně 1</h1>
<h2>Nadpis úrovně 2</h2>
<p>Text odstavce</p>
<div id="vyber1" >Nastylovaný text 1</div><br />
<span class="vyber2">Nastylovaný text 2</span>
Obyčejný text na stránce.
</body>
 
</html>

A zde je obsah souboru styly.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

body {
color: black;
text-size: 14px;
background-color: white;
}
 
a:link {
color: blue;
text-decoration: none;
}
 
a:visited {
color: blue;
text-decoration: none;
}
 
a:active {
color: aqua;
}
 
a:hover {
color: navy;
}
 
h1 {
text-size: 36px;
color: grey;
}
 
h2 {
text-size: 26px;
color: fuchsia;
}
 
p {
text-site: 20px;
color: silver
}
 
#vyber1 {
text-color: orange;
}
 
.vyber2 {
text-color: yellow;
}

Myslím, že tento příklad hovoří za vše a je dostatečně srozumitelný. Výběr BODY znamená pro celé tělo dokumentu. H1 změní všechny nadpisy H1 v dokumentu najednou, obdobně jako H2 i všechny odstavce. V přístím díle budeme v CSS pokračovat, ještě si přesně promyslím, co bude ohledně stylů potřeba vysvětlit nejdřív.

Tagy: , ,

O Petr Fořt

Student ČVUT FJFI KSE SOFE (Softwarové inženýrství v ekonomii). Zajímám se o počítače, především o programování, tvorbu webových stránek nebo o hardware. Dále se zajímám o hudbu a mám rád grilování a posezení s přáteli.