Ako pripojiť CSS: od statiky k dynamike

Statické pripojenie štýlov CSS Stránka HTML je jednoduchá úloha. Vytvorené tradície ponúkajú tri hlavné možnosti: priamo na značku, štítok špeciálneho štýlu a pripojenie externého súboru css. Použitie jazyka servera vám umožňuje poskytnúť dynamiku pre tieto metódy, ale pomocou jazyka prehliadača javascript sa otvoria úplne odlišné spôsoby.

Štítky HTML a CSS

Webová stránka je formalizovaný štýl prezentácie. Každý textový alebo grafický prvok je v predvolenom nastavení zobrazený prehliadačom, alebo môže byť opísaný pravidlami CSS a zobrazený ako navrhnutý projektantom a implementovaný programátorom. Každé pravidlo CSS je meno a hodnota. Vývoj kaskádových štýlov vedie k mnohým menám a hodnotám. K dispozícii boli pseudotriedy a pseudoelementy. Použitie tried a identifikátorov CSS bolo úzko prepojené s tagmi HTML. Úloha spájania CSS s konkrétnou značkou získala širokú škálu prípustných rozhodnutí.


V zásade existujú tri možnosti pripojenia pravidla CSS k požadovanej značke:
  • priamo cez značku štýlu atribútov;
  • cez špeciálnu štítkovú značku;
  • pripojením externého súboru štýlov.
  • Akékoľvek nepresnosti alebo chyby v súvislosti s popisom a štýlom budú ignorované. HTML - jazyk pevných konštrukcií, aby sa dynamika pomocou jazyka servera, je povolená len v rámci určitých limitov. Použitie mechanizmu AJAX rozširuje hranice možných. Ale v každomriešením prípadu, ako sa pripojiť CSS-pravidlo tagu, HTML, statické, zvyčajne zaznamenaná a odvolával sa na to, čo to znamená.

    štýly Rám HTML stránky

    Tento príklad ukazuje, ako pripojiť externý súbor štýlov sci-index.css

    , a to prostredníctvom špeciálneho tagu štýlu

    : zmenil farbu pozadia pre telo tag strana tela. Ako je pripojené pravidlo CSS priamo k značke dvakrát (prostredníctvom id, prostredníctvom atribútu štýlu), je opísané v
    . Tu štýl scWelcomeLabel ID (súbor pravidiel) z externého štýlov súborov a atribútov štýlu určuje iba jedno pravidlo: Top - Y súradnicu vrcholu bloku, v ktorom je umiestnená značka.


    , používanie jazyka servera PHP
    na vytvorenie formulára ukladá ďalšiu vrstvu "tuhosti" v štýlov ráme.
    V skutočnosti je úloha vytvoriť webové stránky - postup presne určiť sled značiek, ktoré sú umiestnené obsah (informácie) prostredníctvom príslušných predpisov CSS. Ak je stránka generovaná kódom PHP, potom rigidná štruktúra značiek a ich odkazy na pravidlá CSS "zosilňujú" kód PHP. V skutočnosti je úloha, ako pripojiť CSS HTML pri použití PHP, dvojnásobok úrovne tvrdosti. Ak sa návrh zmení a musíte zmeniť pravidlo CSS, budete musieť vykonať zmeny v kóde CSS /HTML a PHP.

    ľahké dynamické pravidlá CSS

    Žiadny problém nájsť funkčné getElementById () akýkoľvek tag a priradiť nový štýl alebo zmeniť jednotlivé pravidlo štýlu. Nasledujúci príklad zobrazuje hlavičky, obsah a štítky buniek a potom sa ich súradnice zmenili. Táto logika umožňuje napísať funkciu scfChange apriraďte jej udalosti - zmena veľkosti okna prehliadača.
    Výsledok: Návštevník môže zmeniť veľkosť okna prehliadača a stránka sa automaticky prispôsobí pozícii záhlavia, obsahu a pivnice.

    CSS Stylesheet

    HTML úzko súvisí s CSS a nie je problém, aby vytvoril špeciálny štýl štýlu v reálnom čase a použil nové (upravené) pravidlá. Nie je potrebné vyriešiť problém s pripojením súboru CSS: požadovaný obsah môže byť generovaný dynamicky.
    Tu je štýl CSS dynamicky vytvorený a prepojený. Môžete to urobiť niekoľkokrát. Po prvé, vytvorí sa reťazec znakov StyleText, ktorý obsahuje "doslovný" popis požadovanej množiny pravidiel CSS. Pravidlo obrázka pozadia je označené textom požadovaného obrázka: výrobné náklady predstavujú obraz vo vnútri štýlu, ale nevyžaduje to externý súbor tohto obrázka. Po opise požadovanej množiny pravidiel vo forme reťazca znakov sa vytvorí štýlová značka, zadá sa jej typ text /css a obsah štylizovanej značky sa naplní požadovaným obsahom. Úloha, ako sa spojiť CSS v priebehu kurzu, v procese práce s návštevníkmi stránok, vyriešil!
    Pridanie do tela dokumentu novú značku pomocou automatu sprístupní všetky popísané štýly. Pripojte CSS v dynamike - je to jednoduché, praktické a spoľahlivé.

    Súvisiace publikácie