Jednoduchosť konceptu pravidiel CSS štýlov vám umožní pripojiť externý súbor s stránky značky prostredníctvom atribútu štýlu na premise alebo pomocou JavaScriptu. Tam je na vypracovanie pravidiel a použitia CSS nie je nič zložité, ale správne použitie je nutné pochopiť svoje miesto a miesto logiky pri navrhovaní webových stránok.

Prvky a tok HTML-dokumentu

Ako webová stránka bola vytvorená nie je dôležitá. Hlavná vec je, že je prijatá zo servera prehliadača návštevníka. Prehliadač vytvára strom objektov stránok (DOM) so zameraním na syntax HTML a CSS. S jazykom javascript môžete vyplniť prvky stránky s funkciami. Ideal - prehliadač obdrží hlavičky a telo stránky spúšťa pripojenia k serveru na technológii AJAX a naplnené požadovaným obsahom, ako je požadované v aktuálnej relácii, a líšia sa v závislosti na užívateľských akcií.


Klasická verzia - Internetový prehliadač HTML, CSS, JS súbory a pracuje, ako je predpísané nimi. Poradie HTML tagy sú dôležité, ale pravidlá CSS môžu zmeniť ich aktuálnu pozíciu v okne prehliadača. Správna kombinácia vstupných poradí HTML tagy a CSS pravidiel umožňuje správne zobrazovanie informácií a poskytnúť nevyhnutnú funkčnosť stránky. Vo všetkých prípadoch existujú jednoduché pravidlá:

existuje tok dát, ktorý je rozpoznaný, ako je predpísané príslušnou syntaxou (HTML, CSS, JS);

počet medzery nezáleží, jeden priestor je dôležitý;

Preklady riadkov, tabuliek a iných podobných znakovnezáleží;

Poznámky, ktoré nie je možné navzájom zapracovať.

Má prioritu syntax pravidiel CSS umiestnený vo štýle štítkov. Štýly zadané v štítkovom štýle a pripojené z externého súboru sú ekvivalentné. Štítky nemôžu ovplyvniť štýl. Kód javascript môže čítať /zapisovať štýly štítkov, vytvárať nové značky a štýly.


Na zlepšenie pohodlia čítania môžete kombinovať veľké a malé písmená. Syntax pravidiel CSS umožňuje používať register, ale nezáleží na tom, kedy sa používa.

Príklad navrhovania štruktúr CSS.

Základné požiadavky na štýly sú jednotné: názov objektu, na ktorý sa pravidlo uplatňuje, a zoznam pravidiel v zákrutách. Objektom môže byť názov značky (body, p, h1 div, img) alebo názov triedy. Názov reťazca objektu môže obsahovať niekoľko mien a každý pseudo-prvok alebo pseudo-trieda môže byť priradený každému z nich. Zoznam pravidiel - postupnosť riadkov cez znak ";". Každé pravidlo obsahuje názov - prvok syntaxe jazyka CSS (prostredníctvom symbolu ":") reťazec hodnôt. Vo väčšine pravidiel je reťazec hodnôt jednou hodnotou, ale ako možno vidieť z tohto príkladu, hodnoty môžu byť nastavené na mnoho.

Verzia pracovného súboru

Syntax CSS neurčuje, či sa má zarovnať alebo nie. Spôsob zápisu - v jednej či niekoľkých - je chuťou programátora. Môžete vytvoriť niekoľko pravidiel pre jednu značku v rade, ale všetky pravidlá môžete vložiť do jedného kontajnera "{" "}". Takáto "kaša" je typická pre moderné systémy riadenia miest (CMS), ktoré tvoria súbory nemennýchštandardné) štýly do jedného nečitateľného súboru, ktorý je prehliadač rýchlejšie prečítaný a zrozumiteľný.
Všetky štýly, ktoré CMS považuje za relevantné pre vývojára, sú napísané v klasickom štýle, ktorý možno ľahko prezerať a upravovať.

Ideálna "syntax" CSS

V ideálnom prípade sa považuje za systém, ktorý neexistuje a jeho funkcia sa vykonáva. Zvyčajne používajú súbory CSS: ľahko sa pripájajú k dokumentu HTML a môžu sa rýchlo zmeniť. Zvýraznenie syntaxe HTML a CSS zabezpečujú všetci moderni editori kódu. Napríklad PhpStorm dokonalú prácu s množstvom formátov. Po prvé, je veľmi výhodné pracovať. Ale hlavná vec - kontroluje kombináciu súboru HTML s popismi CSS. Všetky sú zvýraznené a prepojené. Tento produkt tiež testuje súbory na využiteľnosť a syntax a triedy CSS sú skvelým nástrojom. Pravidlá pre jednoduché popisy zložitých systémov - to platí pre CSS. Počas posledných piatich rokov sa HTML a CSS "navzájom prospešné" vyvinuli a dosiahli "dokonalosť". Ale táto dokonalosť je podivná, pevná a naďalej vyžaduje prácu kvalifikovaného vývojára (často tím) na vytvorenie profesionálneho webového zdroja. V tomto príklade sa vytvorí reťazec popisujúci súbor štýlov. Ako obvykle sa používa syntax CSS, s jednou výnimkou: namiesto odkazov na obrázky sa vloží obsah obrázku. To je cena tejto metódy tvarovania štýlu. Tento problém je vyriešený, v podstate odlišný - štýl sa vytvára za behu.
Pôvodne bol vytvorený popis - reťazec znakov. Potom sa prvok StyleLL vytvorí ako značka štýluUrčuje typ tejto značky a do nej vložuje obsah. A nakoniec, nový objekt sa implantuje do tela tela, ktoré okamžite začne pracovať.

Vytvorenie HTML a CSS "za letu"

Vzácny rozsah a nie každý webový zdroj by sa mal ihneď odraziť v plnom rozsahu. Je to bežné napísať stránky hneď hneď, vytvoriť štýly a vytvoriť spracovanie udalostí. Na stránkach modernej CMS žiadne iné možnosti. Rozvíjanie ručne vyrobenej stránky poskytuje omnoho väčšiu slobodu konania, ale je to masívna ručná práca. CMS už obsahuje sadu šablón a štýlov. Na rozvíjanie novej stránky nie je potrebné urobiť veľa. Príklad vytvorenia štýlu za behu nie je syntax súboru CSS v bežnom slova zmysle, ale výsledok je absolútne ekvivalentný. Tok údajov, ktorý prehliadač získava zo servera, môže byť zostavený inak. Klasická verzia vytvára súbor súborov HTML, CSS a JS. Ak ho nevytvoríte a nevytvoríte logiku tvorby prúdu v pohybe:

vytvorenie sady HTML značiek podľa potreby;

tvoria sadu štýlov CSS pre každý podnik značky;

, ktorý poskytuje mechanizmus na výmenu informácií o technológii AJAX.

V tomto scenári, keď je stránka inicializovaná do prehliadača, sa vzplanú malé množstvo dát, čo iniciuje proces vytvárania stránky a štýlov, ktoré potrebuje. V závislosti od krokov návštevníka bude tok údajov zo servera meniť jeho obsah, ale nie v kontexte prenosu stránok alebo dokončených značiek a údajov - v tom zmysle, kde presne presne a ako presne vytvoriť.

Prechodod tuhosti po mobilitu

Zvyčajným spôsobom všetko staticky alebo dynamicky. Pri formovaní za letu pri vytváraní značiek existujú štýly a logika tvorby sa naprogramuje. Stránka je zvyčajne naprogramovaná na serveri, v prehliadači sa vyvíja kód JS spracúvačov a vytvára sa štruktúrovaná štruktúra vzájomne prepojených pravidiel. Ak potrebujete niečo zmeniť - proces sa zopakuje. Pri programovaní vytvárania stránky za behu nie je vytvorený HTML + CSS, ale proces ich formácie. Proces vytvárania niečoho je príležitosťou predvídať situáciu a rozvíjať sa v závislosti od situácie. Programovanie procesu vytvárania stránky a poskytovania jeho súborov zjednodušuje dynamiku a mobilitu.