Linux Software

CSS (2.) - Dědičnost a připojení CSS k dokumentu

V dnešním díle se podíváme na dědičnost vlastností v CSS, způsoby připojení kaskádových stylů k dokumentu a povíme si o délkových jednotkách používaných v CSS.

19.7.2004 13:00 | Vasek | czytane 30974×

RELATED ARTICLES KOMENTARZE

Dědičnost

Hodnoty některých vlastností se dědí na obsažené elementy.

Dědičné CSS vlastnosti:

většina vlastností písma (font-*)
barva, horiz. zarovnání textu (text-align)
odsazení první řádky odstavce (text-indent)
způsob práce s mezerami (white-space)

Nedědičné CSS vlastnosti:

vlastnosti pozadí (background-*)
velikost elementu, velikost okraje, vlastnosti ohraničení (vlastnosti boxu)
plovoucí vlastnosti (float, clear)
podtržení resp. přeškrtnutí textu (text-decoration)
vertikální zarovnání textu (vertical-align)

Vztahy mezi selektory

Mezi jednotlivými elementy je možné vytvářet vztahy, způsob jakým se vztahy nastavují a druh jednotlivých vztahů jsou zřejmé z následujících řádků.

Mezi selektory není mezera - tzv. rozšířený typ selektoru
Mezi selektory je mezera - tzv. vztah následníka
Mezi selektory je znak > - tzv. vztah rodič a potomek
Mezi selektory je znaménko + - tzv. vztah sourozenců

div p {…}
ul > li {…}
div + p {…}

Připojení CSS k dokumentu

Styly lze k dokumentu připojit třemi níže popsanými způsoby.

Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...".
Příklady:
```
<p style="text-align:center; color:blue">
   … 
</p>
```

Na úrovni dokumentu mezi počátečním tagem <head> a koncovým tagem </head> tzv. "stylopisem" (angl. "stylesheet"). Stylopis je seznam stylů.

Příklady:

<head>
<title>......</title>
<style  type="text/css" >
<!--
  h1, h2, h3, p { text-align: left;} 
  h1.zeleny { color: #00FF00;} 
-->
</style>
</head>

Použitím externího souboru s definicemi stylu. Název souboru musí být ve tvaru *.css, tento soubor se na stránku připojuje tagem <link> v hlavičce dokumentu.
Příklady:
soubor "styl.css"
```
h1, h2, h3, p { 
  text-align: left;
} 
/* specialni nadpis  */  
h1.zeleny { 
  color: #00FF00;
} 
```
dokument s připojeným externím stylem
```
<head>
<title>......</title>
<link rel="stylesheet" type="text/css" 
 href="styl.css">
</head>
```

Je jedno, který ze způsobů se naučíte a budete používat. Všechny způsoby jsou si rovnocenné. Velkou výhodu má používání stylu v externím dokumentu, protože jeden takový soubor se dá nalinkovat na více stránek, takže pak všechny vypadají stejně. A je zjednodušena změna jejich vzhledu, stačí vše upravit na jednom místě.

Jednotky délky pro CSS

Relativní jednotky
- em
- ex
- px

Absolutní jednotky
- mm
- cm
- in
- pt
- pc

Výše uvedené jednotky je možné používat pro udávání rozměrů (velikosti) jednotlivých prvků v kaskádových stylech . Délkové údaje se zapisují jako celá nebo desetinná čísla s nebo bez znaménka. Dvojice písmen identifikující jednotky musí být připojena ihned za číslem.

Tato jednotka se jmenuje "eM" nebo "čtverčík" její rozměr je relativní a vychází z výšky velkého písmena M.

Tato jednotka se jmenuje "eX" její rozměr je relativní a vychází z výšky malého písmena x.

Jednotky em a ex mění svou velikost v závislosti na aktuální velikosti písma. Aktuální velikost písma je ovlivněna jednak formátovacími značkami (<big> a pod.), jednak volbou uživatele. Většina prohlížečů totiž umožňuje nastavit velikost zobrazovaného písma (zobrazit / velikost textu). To je i základní význam těchto jednotek - umožnit vytvořit design, který se při změně velikosti písma v prohlížeči nerozsype.

Jednotka se jmenuje "pixel" a odpovídá velikosti jednoho obrazového bodu monitoru. Jedná se o základní jednotku používanou v CSS. Pokud tedy zapomenete někde v definici rozměrů CSS napsat jednotku, většina prohlížečů si tam dosadí právě pixel.

Následující délkové jednotky jsou známé z běžného života. Jelikož jejich rozměr je přesně znám, hodí se hlavně pro udávání velikostí u designu vytvářeného pro médium s přesně známými rozměry, tedy nejčastěji pro tisková média.

Jméno jednotky je milimetr. 1mm≈3,78px

Jméno jednotky je centimetr. 1cm=10mm; 1cm≈37,8px

Jméno jednotky je inch (palec). 1in=25,4mm; 1in≈96px

Jméno jednotky je typografický bod. 72pt = 1in; 3pt≈4px

Jméno jednotky je pica nebo také cicero. 1pc = 12pt ; 6pc = 1in; 1pc≈16px

Procenta

Přesto, že jsem je v úvodním výčtu jednotek neuvedl, patří procenta k délkovým jednotkám používaným v CSS. U procent ale vyvstává jeden problém, z čeho se má procentní velikost odvozovat. Existují tři možné interpretace procentních hodnot (ve většině případů shodné):

z přirozených rozměrů elementu (použitelné pouze u písma)
z rozměrů rodičovského elementu (použitelné kupříkladu u buňky v tabulce)
ze šířky stránky a výšky okna

Doporučil bych vám zvyknout si používat jednu z relativních jednotek (em, ex, px), a v ní uvádět všechny rozměry v kaskádových stylech.

Příklad nastavení stejné šířky objektu pomocí různých jednotek.

width: 192px    width: 50.8mm 
width: 10em     width: 2in 
width: 20ex     width: 144pt  
width: 5cm      width: 12pc

Závěr

V tomto díle jsme si ukázali jakým způsobem připojit kaskádové styly k dokumentu. A jaké jednotky lze použít pro definici rozměrů. V příštím díle se podíváme na definici barev.

KOMENTARZE

Chyba

20.7.2004 11:28

Jiří Hnídek

Re: Chyba

20.7.2004 11:50

Vasek

Re: Chyba

20.7.2004 13:11

Vasek

Dotaz nejen na tento clanek

20.7.2004 20:43

Tom

Re: Dotaz nejen na tento clanek

22.7.2004 16:56

o.k.

Re: Dotaz nejen na tento clanek

10.8.2004 08:05

Dušan Lovecký

Chyby a nepřesnosti – vložení stylu do dokumentu

17.2.2005 12:20

Ritchie

Chyby a nepřesnosti

17.2.2005 12:51

Ritchie

Chybí obrázek

29.9.2005 10:37

Martin Štrobl

Tylko zarejestrowani użytkownicy mogą dopisywać komentarze.

Szukanie oprogramowania

Latest aktual Distributions

1.	Pacman linux Download: 4873x
2.	FreeBSD Download: 9063x
3.	PCLinuxOS-2010 Download: 8561x
4.	alcolix Download: 10943x
5.	Onebase Linux Download: 9658x
6.	Novell Linux Desktop Download: 0x
7.	KateOS Download: 6240x

Latest aktual Software

1.	xinetd Download: 2411x
2.	RDGS Download: 937x
3.	spkg Download: 4753x
4.	LinPacker Download: 9961x
5.	VFU File Manager Download: 3196x
6.	LeftHand Mała Księgowość Download: 7200x
7.	MISU pyFotoResize Download: 2805x
8.	Lefthand CRM Download: 3561x
9.	MetadataExtractor Download: 0x
10.	RCP100 Download: 3117x
11.	Predaj softveru Download: 0x
12.	MSH Free Autoresponder Download: 0x

linuxsoft.cz | Design: www.megadesign.cz