Ako funguje CSS. Dynamický štýl – ovládanie CSS pomocou JavaScriptu

Dobrý deň, milí odberatelia!

V html existuje možnosť urobiť objekt viditeľným alebo neviditeľným a existuje rôzne možnosti a obsah vykresľujú inak.

Takže, začnime.

Predstavte si situáciu: do bloku s rozmermi 200 x 300 pixelov potrebujeme vložiť dostatočne veľký kus textu (v princípe to môže byť čokoľvek).

Ak štylizujeme blok so šírkou 200 a výškou 300 pixelov, potom sa výška bloku natiahne rovnako ako obsah v bloku. Ale potrebujeme striktne 300 pixelov na výšku! V tomto prípade robíme nasledovné:

Pre náš blok nastavte vlastnosť pretečeniu so zmyslom rolovať. Blok nadobudne veľkosť, ktorú potrebujeme, všetok obsah sa doň zmestí a objavia sa posuvníky.

Hodnoty majetku pretečeniu sú uvedené nižšie:

pretečeniu– kontrola veľkosti objektu, ak sa jeho obsah nedá zobraziť celý.

Hodnoty:

auto- určuje prehliadač.

viditeľné- veľkosť je natiahnutá do takej miery, že je viditeľný celý obsah.

skryté- to, čo presahuje hranice prvku, sa jednoducho nezobrazuje.

rolovať– zobrazí sa všetok obsah a zobrazia sa posúvače.

Pre naše konkrétny prípad príklad:

XHTML

Existuje vlastnosť, ktorá vám umožňuje ovládať viditeľnosť obsahu prvku.

viditeľnosť – v CSS riadi viditeľnosť obsahu prvku.

Hodnoty:

XHTML

obsah tejto hlavičky sa nezobrazí

Ďalšou vlastnosťou, ktorá vám umožňuje ovládať viditeľnosť bloku, je displej.

displej- určuje, ako bude prvok zobrazený

Hodnoty:

žiadny- prvok sa nezobrazuje

blokovať- rozdeľuje riadok pred a za prvkom (t. j. prvok nemôže byť na rovnakom riadku s inými prvkami)

v rade- neprerušuje čiaru

Ako využiť túto nehnuteľnosť?

Povedzme, že máme text, medzi týmto textom je značka alebo to môže byť odkaz a my potrebujeme, aby sa obsah tohto tagu alebo odkazu zobrazoval na samostatnom riadku, potom im nastavíme vlastnosť displej so zmyslom blokovať. A naopak, ak treba, povedzme, že tag

nebol v samostatnom dátume, ale v rovnakom ako text, potom sme nastavili vlastnosť displej so zmyslom v rade.

XHTML

bude na rovnakom riadku ako text

sa objaví na samostatnom riadku

osobitnú pozornosť si zaslúži hodnotu žiadny. Ak nastavíme akýkoľvek prvok, vlastnosť displej s hodnotou none, potom sa tento prvok nezobrazí. Navyše na rozdiel od majetku viditeľnosť so zmyslom skryté, tento prvok sa nezobrazí celý (vlastnosti viditeľnosť so zmyslom skryté nebude zobrazovať obsah prvku, ale prvok sám zaujme svoje miesto na stránke).

A v ten istý deň vedci zakolísali gravitáciu. Náhoda? Inak nie.

Vzor z predchádzajúceho článku pokrýval 90 % viacstupňového načítania CSS a jeho jednoduchosť je celkom zrejmá. Chceli by ste však počuť o vzore, ktorý sa hodí ~ 100% času a je smiešne zložitý? Potom vás pozývam, aby ste so mnou prešli na ďalší odsek...

Chýba 10 %

Počas načítavania CSS v blokuje analyzátor, čo znamená, že vykresľovanie je zablokované pre všetok nasledujúci obsah. Podľa ukážkovej stránky z vyššie uvedeného článku je rendering rozdelený do nasledujúcich krokov.

mobilné telefóny

Počítače

To je skvelé na mobilných zariadeniach, kde každý CSS pre sekciu blokuje sám seba a všetky nasledujúce sekcie, ale na počítači CSS pre hlavné a komentáre v ľavom stĺpci blokuje vykresľovanie o mne v pravom stĺpci, aj keď CSS pre približne -ja sa načíta ako prvý. Je to preto, že poradie zámkov je určené poradím v zdrojový kód, ale pre tento dizajn by bolo pekné, keby sa pravý stĺpec objavil pred ľavým.

Musíme vytvoriť strom závislostí, kde je vykresľovanie každého prvku zablokované až do vykresľovania určitých iných prvkov. Závislosti by sa tiež mali dať zmeniť, keď sa zmení šírka výrezu. Znie to lákavo, však?

Dá sa to urobiť pomocou vlastných vlastností CSS…

Vlastné vlastnosti CSS

Ale pre našu dnešnú diskusiu stačí vedieť toto...

Html ( pozadie: var(--gloop, red); )

Tu nastavíme pozadie stránky na hodnotu z vlastnosti používateľa --gloop , a ak nie, červené ako záložné. V dôsledku toho bude pozadie červené. Ale ak pridáme:

:root ( --gloop: zelená; )

…vlastnú vlastnosť --gloop sme nastavili na zelenú , takže stránka je teraz zelená. Ale ak pridáme:

:root ( --gloop: inicialne; )

S počiatočnou hodnotou sa tu zaobchádza špeciálnym spôsobom. V skutočnosti prepíše --gloop , takže pozadie stránky je teraz opäť červené.

Vytvorenie stromu závislostí vykresľovania s vlastnými vlastnosťami CSS

Keď som dokončil tento titul, už som sa tešil, aký som šikovný.

HTML

Takže je možné načítať /initial.css pomocou alebo ho vložiť, pretože aj tak blokuje vykresľovanie. Všetky ostatné štýly však načítavame asynchrónne.

inicialne.css

main, .comments, .about-me, footer ( display: none; ) :root ( --main-blocker: none; --comments-blocker: none; --about-me-blocker: none; --footer- blocker: none; ) /* Iné počiatočné štýly... */

Skryjeme sekcie, ktoré ešte nie sme pripravení zobraziť, a potom pre každú sekciu vytvoríme vlastnú vlastnosť „blokovača“.

main.css

:root ( --main-blocker: initial; ) main ( display: var(--main-blocker, block); ) /* Iné hlavné štýly obsahu... */

Hlavný obsah nemá žiadne závislosti zobrazenia. Po načítaní CSS sa jeho blokátor zruší (s iniciálou) a vykreslí sa.

komentáre.css

:root ( --comments-blocker: var(--main-blocker); ) .comments ( display: var(--comments-blocker, block); ) /* Iné štýly komentárov... */

Komentáre by sa nemali zobrazovať pred hlavným obsahom, takže blokovanie komentárov je prepojené s --main-blocker . Blok .comments sa zobrazí hneď po načítaní tohto CSS a zrušení --main-blocker

o-mne.css

:root ( --about-me-blocker: var(--comments-blocker); ) .about-me ( display: var(--about-me-blocker, block); )

Podobne ako vyššie uvedený kód, .about-me závisí od svojho CSS a komentárov. Ale keď je stránka širšia, vykresľuje sa v dvoch stĺpcoch, takže už nepotrebujeme, aby sa .about-me spoliehalo na komentáre na zobrazenie:

@media (min-width: 600px) ( :root ( --about-me-blocker: initial; ) ) /* Iné štýly pre about-me... */

Pripravený! Keď je šírka zobrazovanej oblasti väčšia ako 600 pixelov, .about-me sa vykreslí ihneď po načítaní CSS.

footer.css

:root ( --footer-blocker: var(--main-blocker, var(--about-me-blocker)); ) footer ( display: var(--footer-blocker, block); ) /* Iné štýly … */

Päta by sa mala zobraziť po zobrazení hlavného obsahu a sekcií o mne. Za týmto účelom --footer-blocker prevezme svoju hodnotu z --main-blocker , ale ihneď po zrušení --main-blocker sa --footer-blocker vráti späť na hodnotu prevzatú z --about-me-blocker .

Demo

Vyžaduje prehliadač Chrome Canary alebo Firefox.

V tejto ukážke sa CSS načítava asynchrónne, pričom načítanie každého súboru trvá približne 0-5 sekúnd. Napriek tomu sa stránka nikdy nevykreslí mimo prevádzky a každá sekcia sa vykreslí čo najskôr v závislosti od šírky prehliadača.

Ale...je to praktické?

Tento spôsob je oveľa komplikovanejší, s minimálnymi výhodami a obrovskými problémami so spätnou kompatibilitou. Ale demonštruje silu vlastných vlastností CSS, neprístupné riešeniam ako premenné Sass použité v čase kompilácie.

Ak dnes naozaj chcete urobiť niečo podobné, môžete väčšinu práce položiť na plecia načítania CSS asynchrónne s loadCSS a pridať triedy do , akonáhle sa načítajú určité štýly (), hoci to povedie k mnohým špecifickým problémom vyriešeným pomocou hackov.

Myslím si, že tento článok by sa dal považovať za „zábavný príklad“, ale sotva sme začali objavovať silu vlastných vlastností CSS.

Ďakujem Remy Sharpe za opravy. Budem mať niekedy článok bez pravopisných chýb? Nidokga.

Anotácia: Prístup k šablónam štýlov. Vlastnosti šablóny štýlov. Pridávanie a odstraňovanie pravidiel. Zmena štýlov prvkov. Názvy tried prvkov.

Poďme sa pozrieť (v tento moment) teoretický príklad - nech existuje webová stránka, na ktorej je prezentovaná séria technických článkov. Na niektoré z týchto článkov chceme upozorniť zábavným animovaným kolotočom, ale čo používatelia, ktorí z nejakého dôvodu nemajú povolený JavaScript? Pamätajúc na to, čo sme sa naučili o nenápadnom JavaScripte, chceme, aby funkcie webovej stránky fungovali aj pre týchto používateľov, ale možno budeme chcieť pre týchto používateľov upraviť štýl stránky, aby ju mohli pohodlne používať aj bez kolotoča.

Ak chcete toto pravidlo vymazať, môžete zavolať funkciu stylesheet.deleteRule(index), kde index bude index pravidla, ktoré sa má vymazať.

V ukážkovom príklade článku môžete vytvoriť pravidlo, ktoré áno vlastnosť zobrazenia nastavte na none pre všetky články HTML a JavaScript – pozrite si príklad karuselu (http://dev.opera.com/articles/view/dynamic-style-css-javascript/carousel.html), aby ste to videli v akcii.

Poznámka: IE neimplementuje pravidlá podľa štandardov. Namiesto atribútu cssRules používa pravidlá . IE tiež používa removeRule namiesto deleteRule a addRule( selektor , pravidlo , index) namiesto insertRule .

Zmena štýlov prvkov

Teraz by ste mali pochopiť, ako upravovať predlohy štýlov prepojené so stránkou a vytvárať a upravovať v nich pravidlá CSS. Čo ak chcete zmeniť určitý prvok v DOM? Pomocou DOM API môžete pristupovať k určitým prvkom stránky. Ak sa vrátime k príkladu kolotoča, môžete vidieť, že funkcie sú definované tak, že keď kliknete na článok, daný článok sa zvýrazní, zatiaľ čo telo článku sa zobrazí nižšie.

OD pomocou DOM pristupujeme k objektu štýlu, ktorý popisuje štýl dokumentu. Tento objekt štýlu je definovaný ako CSSStyleDeclaration ; podrobné vysvetlenie Toto možno nájsť v dokumentácii W3C na rozhraní CSSStyleDeclaration (http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration). Objekt štýlu funguje inak ako niektoré iné vlastnosti definované v elemente HTML. Na rozdiel od element.href alebo element.id , ktoré vracajú reťazce, element.style vracia . To znamená, že nie je možné nastaviť štýl priradením reťazca element.style .

Objekt štýlu má atribúty, ktoré zodpovedajú rôznym nastaveným vlastnostiam CSS. Napríklad style.color vráti farbu nastavenú na prvku. Urobením element.style.color = "červená"; môžete dynamicky meniť štýl. Nižšie je uvedená funkcia, ktorá zmení farbu prvku na červenú, keď dostane id prvku.

funkcia colorElementRed(id) ( var el = document.getElementById(id); el.style.color = "red"; )

Na úpravu štýlu prvku môžete použiť aj setAttribute(kľúč, hodnota). Zavolaním prvku napríklad nastavte farbu prvku na červenú element.setAttribute("style", "color: red");, ale buďte opatrní, pretože tým odstránite všetky zmeny vykonané v objekte štýlu.

Keď je štýl prvku nastavený týmto spôsobom, je to rovnaké, ako keby sme ho nastavili ako deklaráciu atribútu štýlu html prvok. Tento štýl sa použije len vtedy, keď je dôležitosť a špecifickosť pravidla väčšia ako iné pravidlá aplikované na prvok (špecifickosť je vysvetlená v kapitole 28 o dedičnosti a kaskádovaní CSS).

Niektorí z vás sa možno pýtajú, čo sa stane pri danej nehnuteľnosti

Interakcia JavaScriptu a CSS

Kaskádové stolyštýly (Cascading Style Sheets – CSS) je štandard vizuálna prezentácia HTML dokumenty. Kaskádové štýly sú navrhnuté tak, aby ich mohli používať dizajnéri: umožňujú presne definovať písma, farby, okraje, zarovnanie, nastavenie okrajov a dokonca aj súradnice prvkov v dokumente.

Ale sú zaujímavé aj pre programátorov píšucich na strane klienta. JavaScript, pretože umožňujú prehrávať animačné efekty, ako napríklad plynulý vzhľad obsahu dokumentu spoza pravého okraja alebo zbalenie a rozšírenie zoznamov, takže používateľ má možnosť kontrolovať množstvo zobrazené informácie.

Správa vložených štýlov

Najjednoduchší spôsob ovládania štýlov CSS je manipulácia s atribútom štýlu jednotlivé prvky dokument. Ako pri väčšine atribútov HTML, atribút štýlu zodpovedá vlastnosti objektu Element s rovnakým názvom a možno s ním manipulovať v skriptoch JavaScript. Avšak štýlová vlastnosť má jeden rozlišovacia črta: jeho hodnotou nie je reťazec, ale objekt CSSStyleDeclaration. Vlastnosti tohto objektu predstavujú vlastnosti CSS definované v atribúte štýlu HTML.

Napríklad na zobrazenie obsahu textového prvku e veľkým, tučným písmom modrej farby, môžete vykonať nasledujúce operácie na zápis požadovaných hodnôt do vlastností, ktoré zodpovedajú vlastnostiam font-size , font-weight a color style:

E.style.fontSize = "24px"; e.style.fontWeight = "tučné"; e.style.color = "modrá";

Pri práci s vlastnosťami štýlu objektu CSSStyleDeclaration nezabudnite, že všetky hodnoty musia byť špecifikované ako reťazce. Do šablóny so štýlmi alebo atribútu štýlu môžete napísať:

pozícia: absolútna; font-family: sans-serif; farba pozadia: #ffffff;

Ak chcete urobiť to isté pre prvok e v JavaScripte, musíte všetky hodnoty uzavrieť do úvodzoviek:

e.style.position = "absolútne"; e.style.fontFamily = "sans serif"; e.style.backgroundColor = "#ffffff";

Všimnite si, že v hodnotách reťazca nie sú zahrnuté bodkočiarky. Toto sú bodkočiarky používané v syntaxi jazyka JavaScript. Bodkočiarky používané v šablónach štýlov CSS nie sú potrebné v hodnotách reťazcov nastavených pomocou JavaScriptu.

Pamätajte tiež, že všetky vlastnosti polohovania musia špecifikovať jednotky merania. To je:

e.style.left = 300; // Nesprávne: toto je číslo, nie reťazec e.style.left = "300"; // Nesprávne: chýbajúce jednotky e.style.left = "300px"; // Správne

Pri nastavovaní vlastností štýlu v JavaScripte sa vyžadujú merné jednotky, rovnako ako pri nastavovaní vlastností štýlu v šablónach so štýlmi.

Mnohé vlastnosti štýlu CSS, ako napríklad veľkosť písma, obsahujú vo svojich názvoch spojovníky. V JavaScripte sa spojovník interpretuje ako znamienko mínus, takže nižšie uvedený výraz nemožno zapísať:

e.style.font-size = "24px"; // Chyba syntaxe!

Názvy vlastností objektu CSSStyleDeclaration sa teda mierne líšia od názvov skutočných vlastností CSS. Ak názov vlastnosti CSS obsahuje spojovníky, názov vlastnosti objektu CSSStyleDeclaration sa vygeneruje odstránením spojovníkov a preložením do veľké písmená list bezprostredne nasledujúci za každým. Inými slovami, k vlastnosti CSS border-left-width je možné pristupovať prostredníctvom vlastnosti borderLeftWidth a k vlastnosti CSS font-family je možné pristupovať prostredníctvom vlastnosti fontFamily.

Ak má vlastnosť CSS, ako napríklad float, názov, ktorý sa zhoduje s rezervovaným slovom JavaScript, predponou tohto názvu je „css“, aby sa vytvoril platný názov vlastnosti pre objekt CSSStyleDeclaration. To znamená, že chcete prečítať alebo zmeniť hodnotu vlastnosti CSS plavák prvku, mali by ste použiť vlastnosť cssFloat objektu CSSStyleDeclaration.

Atribút štýlu prvku HTML je jeho vložený štýl a prepíše všetky pravidlá štýlu v CSS tabuľka. Vložené štýly sú vo všeobecnosti užitočné na nastavenie hodnôt štýlu a toto je prístup použitý vo všetkých vyššie uvedených príkladoch. Skripty dokážu čítať vlastnosti objektu CSSStyleDeclaration, ktorý predstavuje vložené štýly, ale zmysluplné hodnoty vrátia iba vtedy, ak boli predtým nastavené skriptom JavaScript alebo ak má prvok HTML atribút štýlu vnorenia, ktorý nastavuje požadované vlastnosti.

Dokument môže napríklad obsahovať predlohu, ktorá nastavuje ľavý okraj pre všetky odseky na 30 pixelov, ale ak si prečítate vlastnosť leftMargin jedného z týchto prvkov, dostanete prázdny riadok, pokiaľ tento odsek nemá atribút štýlu, ktorý hodnotu prepíše, prestretý stôlštýlov.

Čítanie vloženého štýlu prvku je obzvlášť zložité, keď čítate vlastnosti štýlu, ktoré majú jednotky, ako aj vlastnosti skratky: skript musí obsahovať ďaleko od jednoduchej implementácie analýzy reťazcov v štýle CSS, aby bolo možné hodnoty získať a použiť neskôr. . Vo všeobecnosti je štýl vloženého prvku užitočný iba na nastavenie štýlov.

Niekedy je jednoduchšie prečítať alebo zapísať jeden riadok do štýlu vloženého prvku ako pristupovať k objektu CSSStyleDeclaration. Ak to chcete urobiť, môžete použiť metódy getAttribute() a setAttribute() Prvok objekt alebo vlastnosť csstext Objekt CSSStyleDeclaration:

// Oba nižšie uvedené príkazy nastavujú atribút style // prvku e na reťazec s: e.setAttribute("style", s); e.style.cssText = s; // Obidva nižšie uvedené príkazy získajú hodnotu atribútu štýlu prvku e // ako reťazec: s = e.getAttribute("style"); s = e.style.cssText;

Vytváranie animačných efektov pomocou CSS

Jedna z najtypickejších oblastí CSS aplikácie je reprodukovať efekty vizuálnej animácie. Môžete ich implementovať pomocou metód setTimeout() alebo setInterval() a použiť ich na organizovanie viacerých volaní funkcie, ktorá mení vložený štýl prvku.

// Umiestňuje prvok e do relatívnej polohy a posúva ho doľava a doprava. // Prvým argumentom môže byť objekt prvku alebo hodnota atribútu id // požadovaného prvku. Ak zadáte funkciu ako druhý argument, po skončení prehrávania animácie sa zavolá s prvkom e // ako argumentom. Tretí argument určuje // hodnotu posunu prvku e. Predvolená hodnota je 5 pixelov. // Štvrtý argument určuje, ako dlho má efekt pôsobiť. // Štandardne efekt trvá 500 ms. function shake(e, oncomplete, distance, time) ( // Spracovanie argumentov if (typeof e === "string") e = document.getElementByld(e); if (!time) time = 500; if (!vzdialenost) vzdialenosť = 5; var origin Pamätajte si, kedy animácia začala animate(); // Spustenie animácie // Táto funkcia kontroluje uplynutý čas a mení súradnice e. // Ak je čas ukončiť animáciu, obnoví počiatočný stav // prvku e. V opačnom prípade zmení súradnice e a naplánuje jeho ďalšie volanie. function animate() ( var now = (new Date()).getTime(); // Získanie aktuálneho času var elapsed = now-start; // Koľko času uplynulo od začiatku? var zlomok = uplynutý čas / čas; // zlomok od požadovaného času? if (zlomok

Obe funkcie, shake() a fadeOut(), akceptujú voliteľná funkcia spätné volanie v druhom argumente. Ak je to zadané, táto funkcia sa zavolá po dokončení prehrávania animačného efektu. Prvok, na ktorý bol aplikovaný efekt animácie, bude odovzdaný ako argument funkcii spätného volania. Ďalšie HTML značky vytvorí tlačidlo, ktoré po kliknutí prehrá efekt trasenia a potom efekt rozpustenia:

Klikni na mňa!

Všimnite si, aké podobné sú funkcie shake() a fadeOut(). Obidve môžu slúžiť ako šablóny na implementáciu podobných animačných efektov pomocou vlastností CSS.

Vypočítané štýly

Vlastnosť štýlu prvku definuje vložený štýl prvku. Má prednosť pred všetkými šablónami štýlov a dá sa úspešne použiť na nastavenie vlastností CSS na zmenu vizuálneho vzhľadu prvku. Avšak v všeobecný prípad nemá zmysel sa naň odvolávať, keď chcete poznať štýly skutočne použité na prvok. To, čo sa v tomto prípade vyžaduje, sa nazýva vypočítaný štýl.

Vypočítaný štýl prvku je množina hodnôt vlastností, ktoré prehliadač odvodil (alebo vypočítal) z vloženého štýlu a všetkých pravidiel zo všetkých hárkov štýlov, ktoré sa vzťahujú na prvok: je to množina vlastností skutočne použitých pri vykreslení prvku. . Podobne ako vložené štýly, aj vypočítané štýly sú reprezentované objektom CSSStyleDeclaration. Na rozdiel od vložených štýlov sú však vypočítané štýly iba na čítanie. Tieto štýly sa nedajú zmeniť, ale vypočítaný objekt CSSStyleDeclaration vám umožňuje presne poznať hodnoty vlastností štýlu, ktoré prehliadač použil pri vykresľovaní príslušného prvku.

Pomocou tejto metódy môžete získať vypočítaný štýl prvku getComputedStyle() okenný objekt. Prvým argumentom tejto metódy je prvok, ktorého vypočítaný štýl chcete vrátiť. Druhý argument je povinný a zvyčajne je schválený nulový alebo prázdny reťazec, ale môže tiež odovzdať reťazec s názvom pseudoprvku CSS, ako napríklad "::before", "::after", ":first-line" alebo ":first-letter":

Var title = document.getElementById("section1title"); var titlestyles = window.getComputedStyle(prvok, null);

Návratová hodnota metódy getComputedStyle() je objekt CSSStyleDeclaration predstavujúci všetky štýly aplikované na zadaný prvok (alebo pseudoprvok). Medzi objektmi CSSStyleDeclaration, ktoré predstavujú vložené štýly a vypočítanými štýlmi, je veľa významných rozdielov:

Vypočítané vlastnosti štýlu sú len na čítanie.

Vypočítané vlastnosti štýlu majú absolútne hodnoty: relatívne jednotky merania, ako sú percentá a body, sa prevedú na absolútne hodnoty. Každá vlastnosť, ktorá určuje veľkosť (napríklad šírka poľa alebo veľkosť písma), bude mať hodnotu vyjadrenú v pixeloch. To znamená, že jeho hodnota bude reťazec s príponou „px“, takže budete musieť implementovať jeho analýzu, ale nebudete sa musieť starať o definovanie a konverziu jednotiek. Hodnoty vlastností farieb budú vrátené vo formáte „rgb(#,#,#)“ alebo „rgba(#,#,#,#)“.

Nehodnotia sa stenografické vlastnosti, len základné vlastnosti, na ktorých sú založené. Napríklad by ste sa nemali snažiť získať hodnotu vlastnosti okrajov, musíte namiesto toho získať prístup k vlastnostiam marginLeft , marginTop atď.

Vlastnosť cssText vypočítaného štýlu nie je definovaná.

Práca s vypočítanými štýlmi môže byť náročná a prístup k nim nie vždy vráti informácie, ktoré očakávate. Zvážte vlastnosť font-family ako príklad: kvôli kompatibilite akceptuje zoznam názvov rodín fontov oddelených čiarkami. Pri čítaní vlastnosti fontFamily vypočítaného štýlu čakáte na hodnotu najšpecifickejšieho štýlu font-family aplikovaného na prvok. V tomto prípade sa môže vrátiť hodnota ako "arial,helvetica,sans-serif", ktorá nehovorí nič o type písma, ktoré sa v skutočnosti používa.

Správa šablóny štýlov

Doteraz sme videli, ako nastaviť a získať hodnoty vlastností štýlu CSS a jednotlivé triedy prvkov. Stále však existuje možnosť ovládania samotných šablón CSS štýlov. Zvyčajne to nie je potrebné, ale niekedy je to užitočné a táto časť stručne predstaví možné techniky.

Pri práci so samotnými štýlmi sa stretnete s dvomi typmi objektov. Prvým typom sú objekty Element reprezentujúce elementy

Čo je presah disku a ako jeho veľkosť ovplyvňuje výkon stroja Čo ovplyvňuje presah disku?

Pneumatiky a kolesá pre Ford Explorer, rozmer kolies pre Ford Explorer

Pneumatiky a kolesá pre Ford Explorer, rozmer kolies pre Ford Explorer Aký tlak vzduchu v pneumatikách

Vŕtacie kotúče bmw e60

Inštalácia najnovších aktualizácií programu Microsoft Word

Tablet sa zapne, ale nespustí sa