Jednoduchost konceptu CSS umožňuje připojit pravidla stylu z externího souboru, ze stránky tagu přes atribut stylu na tag nebo přes javascript. V kompilaci a používání pravidel CSS není nic komplikovaného, ​​ale pro správné použití je nutné pochopit její místo, logiku práce a místo v návrhu webových stránek.

Prvky a tok HTML dokumentu

Jak byla vytvořena webová stránka není důležitá. Hlavní věc je, že je přijímána ze serveru prohlížečem návštěvníka. Prohlížeč vytváří strom objektů stránek (DOM) se zaměřením na syntaxi HTML a CSS. Pomocí jazyka javascript můžete vyplnit prvky stránky s funkcemi. Ideální volbou je, že prohlížeč přijímá nadpisy a tělo stránky, spouští připojení k serveru AJAX a požadovaný obsah je vyplněn způsobem, který je v aktuální relaci zapotřebí, a liší se podle akcí uživatele.


Klasická verze je prohlížeč pro soubory HTML, CSS, JS a pracuje podle jejich pokynů. Pořadí průchodu značek HTML je důležité, ale pravidla CSS mohou změnit svou skutečnou pozici v okně prohlížeče. Správná kombinace pořadí záznamu značek HTML a pravidel CSS vám umožňuje správně zobrazit informace a poskytnout potřebné funkce stránky. Ve všech případech existují jednoduchá pravidla:

existuje proud dat, který je rozpoznán, jak je předepsáno příslušnou syntaxí (HTML, CSS, JS);

počet mezery nezáleží, jeden prostor je důležitý;

Překlady řádků, tabulátorů a dalších podobných znakůNezáleží na tom;

Komentáře, které nelze navzájem zapracovat.

Syntaxe pravidlo CSS umístěná ve štítku má přednost. Styly zadané ve štítku stylu a připojené z externího souboru jsou ekvivalentní. Štítky nemohou ovlivnit styl. Kód javascript může číst /psát styly štítků, vytvářet nové značky a styly.


Chcete-li zlepšit pohodlí čtení, můžete kombinovat velká a malá písmena. Syntaxe pravidla CSS umožňuje použití registru, ale nezáleží na tom, kdy je používán.

Příklad návrhu struktur CSS

Základní požadavky na styly jsou jednotné: název objektu, na který se pravidlo vztahuje, a seznam pravidel v křivkových závorkách. Objektem může být název značky (body, p, h1 div, img) nebo název třídy. Řetězec názvu objektu může obsahovat několik názvů a každému z nich lze přiřadit každý pseudo-prvek nebo pseudo-třídu. Seznam pravidel - posloupnost řádků přes znak ";". Každé pravidlo obsahuje název - prvek syntaxe jazyka CSS (pomocí symbolu ":") řetězec hodnot. Ve většině pravidel je řetězec hodnot jednou hodnotou, ale jak je vidět z tohoto příkladu, hodnoty mohou být nastaveny na mnoho.

Verze pracovního souboru

Syntaxe CSS nenastavuje, zda se má zarovnat nebo ne. Způsob psaní - v jedné či několika řádcích - je chutí programátora. Můžete vytvořit několik pravidel pro jednu značku v řadě, ale všechna pravidla můžete vložit do jednoho kontejneru "{" "}". Taková "kaše" je typická pro moderní systémy řízení pozemků (CMS), které tvoří sady nezměnitelných (prostandardní) do jednoho nečitelného souboru, který prohlížeč rychleji čte a rozumí.
Všechny styly, které CMS považuje za relevantní pro vývojáře, jsou napsány v klasickém stylu, který lze snadno prohlížet a upravovat.

Ideální "syntaxe" CSS

V ideálním případě se považuje za systém, který neexistuje a jeho funkce se provádí. Obvykle používají soubory CSS: snadno se připojují k dokumentu HTML a lze je rychle měnit. Zvýraznění syntaxe HTML a CSS zajišťují všichni moderní editoři kódu. Například PhpStorm dokonalou práci s množstvím formátů. V první řadě je velmi výhodné pracovat. Ale hlavní věc - kontroluje kombinaci souboru HTML s popisy CSS. Všechno je zvýrazněno a propojeno. Tento produkt také testuje soubory pro použitelnost a syntaxe a třídy CSS jsou skvělým nástrojem. Pravidla pro jednoduché popisy složitých systémů - to platí pro CSS. Za posledních pět let se HTML a CSS "vzájemně prospěšné" vyvinuly a dosáhly "dokonalosti". Ale tato dokonalost je podivná, pevná a nadále vyžaduje práci kvalifikovaného vývojáře (často týmu) k vytvoření profesionálního webového zdroje. V tomto příkladu je vytvořen řetězec popisující sadu stylů. Jako obvykle se používá syntaxe CSS, s jednou výjimkou: namísto odkazů na obrázky se vloží obsah obrázku. To je cena této metody utváření stylu. Tento problém je vyřešen, v podstatě odlišný - styl se vytváří za letu.
Původně byl vytvořen popis - řetězec znaků. Potom je prvek StyleLL vytvořen jako značka styluUrčuje typ této značky a do ní vkládá obsah. Konečně, nový subjekt je implantován do těla těla, který okamžitě začne pracovat.

Tvorba HTML a CSS "za běhu"

Vzácný rozsah a ne každý webový zdroj by se měl okamžitě promítnout do plného rozsahu. Je běžné psát stránky úplně hned, vytvářet styly a vytvářet manipulace s událostmi. Na místě moderní CMS žádné další možnosti. Rozvíjení ručně vytvořené stránky poskytuje mnohem větší svobodu jednání, ale je to maso ruční práce. CMS již obsahuje sadu šablon a stylů. Není potřeba dělat mnoho pro vývoj nového webu. Příklad vytvoření štýlu za běhu není syntaxe souboru CSS v obvyklém smyslu, ale výsledek je naprosto stejný. Tok dat, který prohlížeč přijímá ze serveru, může být sestaven jiným způsobem. Klasická verze vytvoří sadu souborů HTML, CSS a JS. Pokud jej nevytvoříte a nerozpoznáte logiku vytváření toku za letu:

vytvořením souboru HTML tagů podle potřeby;

tvoří sadu stylů CSS pro každou značku podniku;

poskytující mechanismus výměny informací o technologii AJAX.

V tomto scénáři, když je stránka inicializována do prohlížeče, dojde k vzplanutí malého množství dat, což iniciuje proces vytváření stránky a stylů, které potřebuje. V závislosti na aktivitách návštěvníka bude tok dat ze serveru měnit jeho obsah, nikoliv však v souvislosti s přenosem stránek nebo dokončených značek a dat - v tom smyslu, že přesně tam, kde přesně a jak přesně vytvářet.

Přechodod tuhosti po mobilitu

Obvyklým způsobem je vše staticky nebo dynamicky. Při formování za letu při vytváření štítků existují styly a logika tvorby je naprogramována. Obvykle je stránka naprogramována na serveru, v prohlížeči je vyvíjen kód JS popisovačů a vytváří se strukturovaná struktura vzájemně propojených pravidel. Pokud potřebujete něco změnit - proces se opakuje. Při programování vytváření stránky za běhu není vytvořen HTML + CSS, ale proces jejich formace. Proces vytváření něčeho je příležitostí předpovědět situaci a rozvíjet se v závislosti na situaci. Programování procesu vytváření stránky a zobrazování jeho souborů činí z webu dynamičtější a mobilnější a vyvíjející se vývoj.