Styly

Zßklady stylu

Jako "styly" jsme vá·vodu trochu neodborn∞ zvali to, co se jinak naz²vß "kaskßdovou definicφ styl∙," anglicky Cascading Style Sheets, CSS. AΦkoliv by se mohlo záprvnφho odstavce zdßt, ₧e styly jsou tu pouze pro legraci, nenφ tomu tak: ·Φelem styl∙ je odd∞lit obsah dokumentu od jeho designu aázp°ehlednit tak nßvrh html strßnek. Pomocφ styl∙ m∙₧eme ovliv≥ovat, jak budou vypadat textovΘ prvky dokumentu.

Pokud jsme bez styl∙ kup°. cht∞li, aby se nadpisy na strßnce vykreslovaly váurΦitΘ barv∞ dan²m fontem oájistΘ velikosti, pravd∞podobn∞ jsme pou₧ili na n∞kolika mφstech p°φkazu <font> sáatributy udßvajφcφmi barvu, druh aávelikost fontu. Jestli₧e jsme cht∞li prvnφ °ßdek n∞jakΘho odstavce odsadit oápßr bod∙, nezbylo, ne₧ pou₧φt n∞kolika pevn²ch mezer ;nbsp.

Se styly m∙₧e b²t cesta nßsledujφcφ: html znaΦce pro nadpis <h1> p°i°adφme vádefinici stylu vlastnosti t²kajφcφ se druhu fontu, barvy fontu, velikosti fontu, ale t°eba iáÜφ°ky fontu anebo barvy pozadφ. Nadpisy pak staΦφ ohraniΦit pomocφ <h1> aávykreslφ se tak, jak je p°edepsßno pro tuto znaΦku. Váp°φpad∞ odstavc∙ prost∞ vádefinici stylu urΦφme prvku pro odstavec <p>, aby se jφm oznaΦenΘ odstavce odsazovaly oánßmi zadan² poΦet bod∙.

Pou₧φvßme-li styly, m∞li bychom vÜechny p°φkazy uzavφrat jejich pßrov²mi druhy s lomφtkem. Je nutnΘ uzavφrat vÜechny p°φkazy, iáty, kde to doposud nebylo povinnostφ: tak₧e t°eba ka₧d² odstavec uvodφme p°φkazem <p> aáuzav°eme ho p°φkazem </p>.

ZaΦφnßme

Nejprve si ukß₧eme, jak urΦφme vlastnosti n∞jakΘho konkrΘtnφho prvku aápak si povφme, jak²m zp∙sobem zakomponujeme definici styl∙ do html dokumentu. UrΦujeme-li vlastnosti jistΘho textovΘho prvku, napφÜeme znaΦku prvku spolu sáp°edpisem pro tuto znaΦku. P°edpis uzav°eme do slo₧en²ch zßvorek. Uvnit° zßvorek definujeme hodnoty jednotliv²ch atribut∙, r∙znΘ atributy od sebe odd∞lφme st°ednφkem. V definici stylu nemusφme m∞nit vlastnosti ·pln∞ ka₧dΘho textovΘho prvku, staΦφ uvΘst pouze ty prvky, kterΘ majφ vypadat odliÜn∞ od normßlu.

Takto definujeme styl nap°. nadpisu:

H1á{color: green;
áááfont-family: Arial, Helvetica, sans-serif;
áááfont-size: 28pt}

Existujφ Φty°i zp∙soby, jak pomocφ styl∙ ovlivnit vzhled dokumentu, vÜechny Φty°i zp∙soby lze pou₧φt zßrove≥. Ka₧d² ze zp∙sob∙ mß urΦitou vßhu, v∞tÜφ vßha p°ebφjφ menÜφ, odtud "kaskßdovΘ styly." Uvedeme si je od menÜφ vßhy po v∞tÜφ:

Odkaz

Styly nadefinujeme vásamostatnΘm dokumentu sáp°φponou .css aáp°φkazem <link>odkß₧eme na tento dokument. To umo₧≥uje pou₧φt jedinou definici styl∙ pro nßvrh celΘho sajtu.

Vlo₧enφ

Definici styl∙ uvedeme p°φmo do dokumentu, pou₧ijeme p°φkazu <style>. Definice je potom platnß pro tuhle jedinou strßnku.

Blok

Na zaΦßtku bloku uvedeme specißlnφ p°φkaz <div> (resp. <span>), blok musφme uzav°φt pomocφ </div> (resp. </span>).

P°φkaz

Do p°φkazu urΦujφcφho vzhled textovΘho prvku - t°eba <font> nebo <h1> - p°idßme nov² atribut style.

<link>=odkaz na definici stilu

P°φklad odkazu:

<head>
<link rel=stylesheet href=styly.css type="text/css">
</head>
Href= URL
URL odkazuje na soubor sádefinicφ styl∙, soubor mß p°φponu .css.

<style>=definice stylu vlo₧enß do dokumentu

P°φklad vlo₧enΘ definice:

<div>definice stylu pro Φßst dokumentu

<span>

P°φkazem <div> ovliv≥ujeme vzhled cel²ch odstavc∙, p°φkazem <span> pouze n∞kolika slov Φi pφsmen. Na zaΦßtku bloku uvedeme <div>, na konci </div>, podobn∞ se pou₧φvß <span>.

P°φklad pou₧itφ viz. na konci kapitoly.

Class= text
Udßvß jmΘno t°φdy, kterß se pou₧ije pro vykreslenφ Φßsti dokumentu

<libovoln² p°φkaz>szyl se uplatnφ jenom uvnit° p°φkladu

Chcete-li vyu₧φt "stylov²ch" mo₧nostφ formßtovßnφ textu pouze v n∞kolika drobn²ch Φßstech dokumentu, umφst∞te dovnit° libovolnΘho p°φkazu nov² atribut Style.

P°φklad sáatributem Style:

<p style="background-color: green; font-family: Arial">Meloun</p>

Style= "text"
Hodnotou atributu je to, co by jinak vádefinici styl∙ bylo zapsßno ve slo₧en²ch zßvorkßch: tedy dalÜφ atributy, odd∞lenΘ st°ednφky. Hodnotu atributu Style uzavφrejte do zßvorek!

T°φdy

Pomocφ t°φd udr₧φme pohromad∞ logickou strukturu dokumentu sájeho vzhledem. P°edstavte si, ₧e mßte FAQ strßnku dotaz∙ aáodpov∞dφ. Aby se vátom vyznal nejen Φert, dotazy jsou formßtovanΘ jinak, ne₧ odpov∞di: vzßjemn∞ se liÜφ barvou, odsazenφm... Ka₧d² dotaz nebo odpov∞∩ je jin² odstavec. Nadefinujeme si tedy dv∞ t°φdy html prvku <p>, jednu nazveme p°ekvapiv∞ "otazka" aádruhou nemΘn∞ p°ekvapiv∞ "odpoved:"

P.otazkaááá{color: red ; font-style: italic}
P.odpovedáá{color: green ; font-weight: light}

Uvnit° html dokumentu otßzky aáodpov∞di oznaΦφme nßsledovn∞:

<p class="otazka">ProΦ?</p>
<p class="odpoved">Pro slepiΦφ kvoΦ.</p>

Html prvek pro link <a> mß navφc n∞kterΘ t°φdy p°eddefinovanΘ, m∙₧ete tak ovliv≥ovat t°eba vzhled navÜtφven²ch aánenavÜtφven²ch link∙ (v nßsledujφcφm p°φkladu jsme link∙m pomocφ "text-decoration: none" odstranili jejich podtr₧enφ). VÜimn∞te si, ₧e jmΘno p°eddefinovanΘ t°φdy je odd∞leno od nßzvu prvku dvojteΦkou!

A:link	{text-decoration:none}	link
A:visted	{text-decoration:none}	navÜtφven² link
A:active	{text-decoration:none}	aktivnφ link

Atributy

Nßzev atributu	Popis atributu	Hodnoty atributu	P°φklad pou₧itφ
font-family	druh pφsma	nßzev pφsma	{font-family: Arial}
font size	v²Üka pφsma	body (pt) palce (in) centimetry (cm) pixely (px)	{font-size: 30px}
font-weight	TlouÜ¥ka pφsma	extra-light light demi-light medium demi-bold bold extra-bold	{font-weight: extra-bold}
line-height	Vzdßlenost mezi °ßdky	body (pt) palce (in) centimetry (cm) pixely (px) procento (%)	{line-height: 30px}
font-style	Italica	Normal Italic	{font-style: italic}
text-decoration	Dekorace	nic: none podtr₧enφ: underline italika: italic proÜkrtnutφ: line-through	{text-decoration: none}
color background-color	Barva textu, pozadφ.	jmΘno barvy RGB hodnota	{background-color: blue} {color: green}
margin-left margin-right margin-top	Vzdßlenost od okraje strßnky.	body (pt) palce (in) centimetry (cm) pixely (px)	{margin-left: -100px}
text-align	Zarovnßnφ textu.	nalevo: left centrovan∞: center napravo: right	{text-align: center}
text-indent	Odsazenφ textu odleva	body (pt) palce (in) centimetry (cm) pixely (px)	{text-indent: 2cm}

P°φklad pou₧itφ styl∙

P°φklad:
<html>
<head>
<title>P°φklad</title>
<style type="text/css">

</style>

</head>
<body>

<h2>Nadpisek</h2>
<p>OdstaveΦek a v n∞m <span class=zluta>₧lutß <span class=modra>modrß </span>
₧lutß </span> <span class=bila>bφlß.</span></p>
<a href=styly_priklad.htm>Velice fikan² odkaz.</a>

</body>
</html>

V²sledek

Finta

P°φklad:

<html>
<head>
<title>p°φklad</title>
<style  type="text/css">
<!--
BODY	{background: white;
	text-align: center;
	font-family: Comic Sans MS}

.stin 	{color: black;
	margin-top: 50px;
	font-weight: bold;
	font-size: 110px}

.abc 	{color: blue;
	margin-top: -160px;
	font-weight: bold;
	font-size: 110px}
-->
</style>
</head>
<body>
<div class=stin> abc</div>
<div class=abc>abc</div>
</body>
</html>
V²sledek

Vyu₧ili jsme d∞diΦnosti: t∞lu dokumentu jsme p°i°adili bφlΘ pozadφ, bezpatkov² font aáp°ikßzali jsme vÜechno centrovat doprost°ed (vÜimn∞te si, jak se znaΦφ komentß°) - tyhle vlastnosti zd∞dφ od t∞la dokumentu vÜechny dalÜφ html prvky. Nadefinovali jsme dv∞ t°φdy pro textovΘ prvky, t°φdy se liÜφ ábarvou pφsma, atribut "margin-top" jsme pou₧ili káefektu vystφnovßnφ. ModrΘ "abc" by se normßln∞ vypsalo na nov² °ßdek, ale proto₧e jsme ho zßporn∞ odsadili od hornφho okraje, posune se sm∞rem nahoru aáp°epφÜe ΦernΘ "abc", kterΘ tvo°φ stφn.