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 27677×

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ů

16.7.2018 1:05 /František Kučera

Červencový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 7. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát bude přednáška na téma: automatizační nástroj Ansible, kterou si připravil Martin Vicián.


Přidat komentář

18.6.2018 0:43 /František Kučera
Červnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 21. 6. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: F-Droid, aneb svobodný software do vašeho mobilu. Kromě toho budou k vidění i vývojové desky HiFive1 se svobodným/otevřeným čipem RISC-V.
Přidat komentář

23.5.2018 20:55 /Ondřej Čečák
Od pátku 25.5. proběhne na Fakultě informačních technologií ČVUT v Praze openSUSE Conference. Můžete se těšit na spostu zajímavých přednášek, workshopů a také na Release Party nového openSUSE leap 15.0. V na stejném místě proběhne v sobotu 26.5. i seminář o bezpečnosti CryptoFest.
Přidat komentář

20.5.2018 17:45 /Redakce Linuxsoft.cz
Ve čtvrtek 31. května 2018 připravuje webový magazín BusinessIT ve spolupráci s Best Online Média s.r.o. pátý ročník odborné konference Firemní informační systémy 2018. Akce proběhne v kongresovém centru Vavruška (palác Charitas), Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00 hod. dopoledne do cca 15 hod. odpoledne. Konference je zaměřena na efektivní využití firemních informačních systémů a na to, jak plně využít jejich potenciál. Podrobnější informace na webových stránkách konfrence.
Přidat komentář

14.5.2018 7:28 /František Kučera
Květnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 17. 5. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: Audio – zvuk v GNU/Linuxu.
Přidat komentář

7.5.2018 16:20 /František Kučera
Na stránkách spolku OpenAlt vyšla fotoreportáž Pražské srazy 2017 dokumentující srazy za uplynulý rok. Květnový pražský sraz na téma audio se bude konat 17. 5. 2018 (místo a čas ještě upřesníme).
Přidat komentář

17.4.2018 0:46 /František Kučera
Dubnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 4. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tématem tohoto srazu bude OpenStreetMap (OSM) aneb svobodné mapy.
Přidat komentář

16.3.2018 22:01 /František Kučera
Kulatý OpenAlt sraz v Praze oslavíme klasicky: u limonády a piva! Přijďte si posedět, dát si dobré jídlo a vybrat z mnoha piv do restaurace Kulový blesk, který najdete v centru Prahy nedaleko metra I. P. Pavlova na adrese Sokolská 13, Praha 2. Sraz se koná ve čtvrtek 22. března a začínáme v 18:00. Heslo: OpenAlt. Vezměte s sebou svoje hračky! Uvítáme, když si s sebou na sraz vezmete svoje oblíbené hračky. Jestli máte nějaký drobný projekt postavený na Arduinu, nějakou zajímavou elektronickou součástku, či třeba i pěkný úlovek z crowdfundingové akce, neváhejte. Oslníte ostatní a o zábavu bude postaráno.
Přidat komentář

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

> Poslední diskuze

20.2.2018 18:48 / Ivan Majer
portal

20.2.2018 15:57 / Jan Havel
Jak využíváte služby cloudu v podnikání?

16.1.2018 1:08 / Ivan Pittner
verejna ip od o2 ubuntu

15.1.2018 17:26 / Mira Harvalik
Re: Jak udělat HTML/Javascript swiping gallery do mobilu?

30.12.2017 20:16 / Michal Knoll
odmocnina

Více ...

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