Links ::  | DEV web management system | Katalóg | Webhosting | Recepty
  
 Index | Registrácia | Hľadať | Galéria | BoardNeprihlásený užívateľ  //Piatok, 24. Novembra 2017 
Navigation
Index
Top 10 autorov
Top 20 článkov
Hľadať
Galéria

Zones
Asp.(NET)
C/C++
Flash
Grafika+Design
Hardware
Hry
Html/Css/Xml
Java
Linux
Networks
Operačný systém
Pascal/Delphi
PHP
Security
Software
SQL
Visual Basic
Wap/Wml
Windows
Zóna iné

Links
Script index Interval.cz Pc.sk Regedit.sk TipyaTriky.sk Builder.cz Asp.cz Živě.sk Zoznam.sk Code.box.sk Root.cz Quant&Financial

Odkazy

Sessions
Stránky Developer.sk si práve číta 351 čitateľov, z toho je 0 zaregistrovaných

BackEnd
Odkazy na nové články je možné preberať pomocou backend.php

kuk

    Čo dokáže CLASS v Kaskádových štýloch [6.časť CSS]

Dnes sa budeme podrobnejšie zaoberať atribútom CLASS, ktorý nám veľmi pomáha pri zadefinovávaní CSS a bolo by už veľmi nepohodlné pracovať bez neho. Táto časť je tématicky dosť rozsiahla, takže rozdelíme si ju na dve časti.


Samotné kaskádové štýly využívajú viacero možností, pomocou ktorých je veľmi jednoduché aplikovať rôzne vlastnosti, týkajúce sa textu, nadpisov, tabuliek, obrázkov a ostatných elementov použitých na stránke. Jedným slovomformátovanie stránky sa stáva jednoduchším a prehľadnejším.

A k tomuto prispievajú aj class, teda triedy. Pridávanímna CSS na www stránku pomocou class sa vám otvárajúnové možnosti práce, ktoré vám ulahčia prácu. Samozrejme sa dá pracovať aj bez nich, ale prečo si nezjednodušiť prácu keď je to možné. Ako to celé funguje? Celkom jednoducho. Zoberme si napríklad možnosť že máme na našej stránke viacero nadpisov toho istého druhu, napríklad ich chceme zadefinovať pomocou tagu H1. Ale problém je v tom, že osadenie každého nadpisu chceme realizovať iným typom písma, alebo farby. Taktiež by sme potrebovali aby zarovnanie jednotlivých nadpisov bolo iné. Mohli by sme na to použiť veľmi kvetnatý, čiže nafúknutý HTML kód, ale taktiež by to šlo prostredníctvom CSS. A najlepšie by bolo keby sme pridali CLASS. V tomto prípade zadefinujeme medzi tagmi HEAD nasledovnú sekvenciu STYLE, kde presne určíme nastavenie fontov, farieb, osadení a ďalších charakteristík jednotlivých textových elementov, ktoré pomenujeme nasledovne:
H1.prvy, H1.cislo_dva, P.body, P.cislo2.
Schválne som zvolil rôzne názvy jednotlivých class, proto aby ste videli že názvy si môžete zvoliť ľubovoľne.

Pozrime sa teraz na náš príklad, ako bude zadefinovaná sekcia STYLE v hlavičke stránky.

<style>
BODY {
background-color : }
H1.prvy {
font-size : 14pt;
font-family : Garamond, Times, Serif;
font-weight : bold;
color : }
H1.cislo_dva {
font-size : 14pt;
font-family : Garamond, Times, Serif;
font-weight : bold;
color : }
P.body {
font-size : 11pt;
font-family : Arial, Helvetica, Sans-Serif;
}
P.cislo2 {
font-size : 9pt;
font-family : Arial, Helvetica, Sans-Serif;
}
</style>

Výsledok si môžete prezrieť tu.

Na prvý pohľad je zrejmé o čo tu ide. Každej párovej značke sme priradili jeden názov, ktorý sme následne volali prostredníctvom class=nejake_meno. Tento class nejake_meno mal priradené určité vlastnosti, tak napríklad tag H1.cislo_dva:

{
font-size : 14pt;
font-family : Garamond, Times, Serif;
font-weight : bold;
color : }

A následne v HTML dokumente sme ho volalinasledovne:

<H1 class="cislo_dva"> Toto je nadpis </H1>

Vyskúšajte si to, zistíte že máte väčší poriadok a prehľad vo vašich HTML dokumentoch a ušetrili ste si aj viacej miesta a času. Nabudúce budeme v classoch pokračovať :-)


Autor : Developer, čítané 9477x, komentárov: 0
Hodnotenie :    |  Pondelok, 19. Mája 2003

Pridať nový komentár/Komentáre
Vaše hodnotenie :   horšie  lepšie
Login
Login:
Heslo:

Hľadať
 
v článkoch
v diskusiach
v komentároch

Top read
PHP Coder

Priklady v C. 1.čast.

DEV web management system

Php a bezpečnosť skriptov

Autorun CD

Top discuss
Jednoduchý web formulár (ASP.NET)

Delphi seriál: (1.časť)

Velmi rychla grafika v Pascale

DEV web management system

Naša ikona
Páčia sa Vám naše stránky ? Ak áno, podporte nás prosím a umiestnite si na svoju stránku našu ikonku:





Copyright (c) Developer.sk, All rights reserved.
Powered by DEV web management system