Smitka development

Obsah generovaný CSS

CSS nemusí být použito striktně pro nastavení vzhledu prvků stránky, ale lze jím částečně upravovat i obsah. Děje se tak pomocí pseudoelementů :before a :after. Tyto elementy se používají v součinnosti s CSS vlastností content, která umožňuje generovat obsah.
:before - vygeneruje obsah před rodičovským prvkem
:after - vygeneruje obsah za rodičovským prvkem
Možnost generování obsahu pomocí CSS poskytují (v různé šíři) prohlížeče Firefox, Opera, Safari (s výjimkou IE).

Možnosti vlastnosti content

Content může nabývat následujících hodnot:

Statické prvky

  • řetězec
  • url()
  • attr()

Počítadla

  • counter()
  • counters()

Uvozovky

  • open-quote
  • close-quote
  • no-open-quote
  • no-close-quote

Statické prvky

Tyto hodnoty přidají prvku existující obsah.
Je-li jako hodnotou contentu řetězec, je přiřazen před/za prvek.
Hodnota url("adresa") přiřadí k prvku externí soubor (nejčastěji obrázek).
Attr(jméno atributu) vypíše hodnotu atributu prvku (tedy např. alt u obrázku či href u odkazu)
#retezec:after {content: "text"; background-color:#F2A372;} #url:before {content: url("/images/a.gif");} #attr:after {content: attr(alt); display:block; background-color:#F2A372; width:128px; text-align:center} #aattr:after {content: attr(href);font-size:9px;vertical-align:top;} Toto je span s id="retezec" a jeho content:
Toto je odkaz s id="url" a před ním obrázek
BOMBA!
Odkaz s id="aattr" ukazující kam vede
Poznámky: generovaný obsah u obrázku nefunguje v Mozille

Počítadla

Vlastnosti counter() a counters() můžeme použít k tvorbě automatického číslování.
Číslování je řízeno 2 vlastnostmi:
counter-increment: "jméno" "o kolik" - zvýší hodnotu pojenovaného počítadla (defaultně o 1)
counter-reset: "jméno" "na kolik" - vynuluje počítadlo (defaultně na 0)
V dokumentu pak počítadlo použijeme jako content - content: counter(jméno)
Pro demonstraci použijeme následující posloupnost prvků: <div class="h1">PC-elektro</div> <div class="h2">Regulace otáček větráčku</div> <div class="h2">Dotykový spínač</div> <div class="h1">Programování</div> <div class="h2">AJAX podruhé</div> <div class="h2">HTA aplikace</div> <div class="h2">Gallery Maker</div> A styl: .h1 {counter-reset: h2;counter-increment: h1; } .h1:before {content: counter(h1) ") "; } .h2:before {counter-increment: h2; content: "- " counter(h1) "." counter(h2) " - ";}
PC-elektro
Regulace otáček větráčku
Dotykový spínač
Programování
AJAX podruhé
HTA aplikace
Gallery Maker
Poznámka: Mozilla špatně spolupracuje s countery jsou-li v pseudoelementu :before/:after, proto je dobré definovat práci s nimi přímo ve stylu prvku. Následující příklad, přestože se zdá logicky správně, bude správně fungovat jen v Opeře. .h1a:before {content: counter(h1a) ") "; counter-reset: h2a;counter-increment: h1a;}
.h2a:before {counter-increment: h2a; content: "- " counter(h1a) "." counter(h2a) " - ";}
PC-elektro
Regulace otáček větráčku
Dotykový spínač
Programování
AJAX podruhé
HTA aplikace
Gallery Maker

Další možnost počítadel, kterou CSS nabízí je vlastnost counters(). Ta je velmi vhodná pro vnořené číslování seznamů, protože automaticky vytváří a resetuje nová počitadla v závislosi na vnoření prvků.
Funkci si ukážeme na vnořeném seznamu struktury webu: <ol> <li class="ha">Home</li> <li class="ha">PC-Elektro  <ol>  <li class="ha">Regulace otáček větráčku</li>  <li class="ha">Dotykový spínač</li>  </ol> </li> <li class="ha">Programování  <ol>  <li class="ha">AJAX podruhé</li>  <li class="ha">Direct animation   <ol>   <li class="ha">Sprite</li>   <li class="ha">Path</li>   </ol>  </li>  <li class="ha">Gallery maker</li>  </ol> </li> </ol> A přidružený styl: ol {counter-reset: ha; list-style-type: none;} li.ha:before {counter-increment: ha; content: counters(ha, ".") " ";} Každý tag <ol> vytvoří nové vnořené počítadlo (ha) a každý tag <li> zvýší hodnotu aktuálníhi počítadla o 1 a vypíše všechna počítadla oddělené tečkou.
  1. Home
  2. PC-Elektro
    1. Regulace otáček větráčku
    2. Dotykový spínač
  3. Programování
    1. AJAX podruhé
    2. Direct animation
      1. Sprite
      2. Path
    3. Gallery maker

Uvozovky

Další věc, kteroou můžeme ovlivňovat je vzhled uvozovek a to i vícenásobných. Je to ovlivňováno vlastností quotes: seznam párů uvozovek.
.quote { quotes: "„" "“" "‚" "‘" } .quote:before {content: open-quote} .quote:after {content: close-quote} A tento styl je aplikován na následující kód: <span class="quote">Hlavní uvozovky a <span class="quote">vnořené uvozovky</span> v jednom řádku.</span> Hlavní uvozovky a vnořené uvozovky v jednom řádku.

Vlastnosti no-open-quote a no-close-quote vytvoří "neviditelné" uvozovky - nejsou sice zobrazeny, ale vnořené uvozovky budou dalšího řádu.

Toto byl výčet možností generování obsahu podle CSS2. V CSS3 přibudou další možnosti, jako je nahrazování obsahu či přesouvání contentu.
linkuj.czjagg.czpošli na vybrali.sme.skdeliciousTopČlánky.cz
Nahoru HOME PC•Elektro Programování Blog Autor Lynt Speciální backlink: Šulislav
© 2006 Smitka development