LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> 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 | Články autora | přečteno 27139×

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ů
Html elementy  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.

  1. Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...".
    Příklady:
    <p style="text-align:center; color:blue"></p>
  2. 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>
    
  3. 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.

em

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

ex

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.

px

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.

mm

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

cm

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

in

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

pt

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

pc

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.

Verze pro tisk

pridej.cz

 

DISKUZE

Chyba 20.7.2004 11:28 Jiří Hnídek
|- Re: Chyba 20.7.2004 11:50 Vasek
L 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.
L 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




Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

13.9.2017 8:00 /František Kučera

Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tentokrát netradičně v pondělí: 18. září od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).


Přidat komentář

3.9.2017 20:45 /Redakce Linuxsoft.cz
PR: Dne 21. září 2017 proběhne v Praze konference "Mobilní řešení pro business". Hlavní tématy konference budou: nejnovější trendy v oblasti mobilních řešení pro firmy, efektivní využití mobilních zařízení, bezpečnostní rizika a řešení pro jejich omezení, správa mobilních zařízení ve firmách a další.
Přidat komentář

15.5.2017 23:50 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

15.4.2017 15:20 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě IoT a radiokomunikace? Přijď na sraz spolku OpenAlt, který se bude konat ve středu 19. dubna od 18:30 v Šenkovně (Sokolská 60, Praha 2).
Přidat komentář

5.3.2017 19:12 /Redakce Linuxsoft.cz
PR: 23. března proběhne v Praze konferenci na téma Cloud computing v praxi. Hlavními tématy jsou: Nejžhavější trendy v oblasti cloudu a cloudových řešení, Moderní cloudové služby, Infrastruktura současných cloudů, Efektivní využití cloudu, Nástrahy cloudových řešení a jak se jim vyhnout.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

18.9.2017 14:37 / Rojas
high security vault

15.9.2017 7:33 / Wilson
new zealand childcare jobs

31.8.2017 12:11 / Jaromir Obr
Re: ukůládání dat ze souboru

30.7.2017 11:12 / Jaromir Obr
Národní znaky

27.7.2017 12:24 / Jaromir Obr
Cteni/zapis

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2017) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze