XHTML + CSS – 19 lekcia – atribút id

Vždy keď na Vašej stránke potrebujete prispôsobovať pomocou kaskádových štýlov presne určený element a nechcete robiť Vašu stránku zastaralú spôsobom, že budete aplikovať CSS priamo v danom tagu. Presne vtedy je vhodné použiť HTML atribút “id” pomocou, ktorého jednoducho uvediete alternatívne meno pre Váš element, čím umožníte kvalitné prehľadné a rýchle prispôsobenie vzhľadu, funkcionality a pod. Vášho HTML kódu. V návode sa dozviete na jednoduchej ukážke ako správne použiť atribút “id” a uľahčiť si tak prácu s kaskádovými štýlmi. Rovnako je pojednávané o zásadách správneho použitia tohto spôsobu označovania podľa W3C štandardu. Atribút “id” je podporovaný všetkými HTML / xhtml tagmi a tak je môžné touto technikou alternatívne pomenovať akýkoľvek tag. Alternatívne alebo pseudo meno tagu potom už len jednoducho zavoláme v css pomocou  znaku “#” mriežka (hash) a aplikujeme ľubovoľné CSS.

2 thoughts on “XHTML + CSS – 19 lekcia – atribút id

  1. Dobry den.
    V zmysle videonavodu c.19 pokial chcem aby za sebou nasledujuce elementy boli bez oddelujucej medzery je potrebne
    vlozit tag “overflow: hidden” .
    To iste dosiahnem ak vlozim tag “border:1px solid farba”
    Logicky som predpokladal, ze staci nastavit margin na “margin:0px”, ale toto riesenie vytvori medzi elementami medzeru.
    Ako sa da pochopit toto spravanie?

    Dakujem.

    • Pre riesenie danej situacie existuje niekolko vychodisk. Ja som zvolil casovo najmenej namahave, islo mi o podstatu atributu ID=””.
      CSS prikaz overflow:hidden; ma za efekt aby nic z elementov nevycnievalo, aby sa neprekryvali a ma vplyv na celkove zobrazenie elementov. Tymto prikazom som zabezpecil aby sa Navigacia a text z Clanku “nepodliezavali” na videu je to vidno v case 10:42s. Margin, ktory maju h3, h4 a p tagy sposobuje iba opticku bielu medzeru medzi elementami. Background-color: #farba1 nie je na oblasti margin aplikovana (normalne spravanie farby pozadia), elementy sa ale dotykaju, len farba pozadia sa vykresluje inak. Keby sme ale tieto elementy ohranicili tak ako pisete vy border: 1px solid farba videli by ste, ze sa elementy “zacnu dotykat”. Preto lebo sa zmeni sposob vykreslovania backgroud-color. Toto vykreslovanie je rovnake ako pri prikaze overflow. Pri aplikacii border je dobre si uvedomit, ze elementy maju teraz sirku 502px (504px) nie 500px ako sme definovali (1px pravy + 1px lavy okraj). Ano Vas logicky predpoklad redukovat marginy aby sa elementy spojili je spravny, efekt “spojenia” mozete docielit aj tymto sposobom. Ale majte na pamati, ze elementy potom budu prilis natlacene na sebe a medzeru budete musiet suplovat prikazom padding.

Napísať odpoveď pre Lukas Greso Zrušiť odpoveď