Простотата на CSS концепцията ви позволява да свържете стилови правила от външен файл, от страницата на етикета, чрез атрибута на стила на етикета или чрез javascript. Няма нищо сложно в съставянето и използването на CSS правилата, но за правилното използване е необходимо да се разбере мястото му, логиката на работа и мястото в дизайна на уеб страниците.

Елементи и поток на HTML-документ

Не е важно как се създава уеб страница. Основното нещо е, че се получава от сървъра от браузъра на посетителя. Браузърът изгражда дърво на обектите на страницата (DOM), като се фокусира върху синтаксиса на HTML и CSS. С езика на javascript, можете да запълните елементите на страницата с функционалност. Идеалният вариант е браузърът да получава заглавия и тяло на страницата, да стартира връзка с AJAX сървъра, а желаното съдържание да се попълва по начина, по който е необходим в текущата сесия, и варира в зависимост от действията на потребителя.


Класическата версия е браузърът за HTML, CSS, JS файлове и работи по указания от тях. Редът за преминаване на HTML тагове е важен, но правилата на CSS могат да променят действителната си позиция в прозореца на браузъра. Правилната комбинация от реда на записване на HTML тагове и CSS правила ви позволява да показвате правилно информацията и да осигурявате необходимата функционалност на страницата. Във всички случаи съществуват прости правила:

има поток от данни, който се разпознава, както е предписано от съответния синтаксис (HTML, CSS, JS);

броят на пропуските няма значение, едно пространство е важно;

Преводи на редове, табове и други подобни символиняма значение;

Коментари, които не могат да бъдат включени един в друг.

Синтаксисът на правилото за CSS, поставен в стила на етикета, има приоритет. Стиловете, посочени в етикета на стила и свързани от външния файл, са еквивалентни. Етикетите не могат да повлияят на стила. JavaScript кодът може да чете /пише стилове на маркери, да създава нови етикети и стилове.


За да се подобри удобството при четене, можете да комбинирате главни и малки букви. Синтаксисът на правилото CSS позволява използването на регистър, но няма значение кога се използва.

Пример за проектиране на CSS структури

Основните изисквания за стиловете са еднакви: името на обекта, към който се прилага правилото, и списък с правила в фигурни скоби. Обектът може да бъде името на идентификатора на етикета (body, p, h1 div, img) или името на класа. Полето за име на обект може да съдържа няколко имена и всеки псевдоелемент или псевдо-клас могат да бъдат присвоени на всеки от тях. Списък на правилата - поредица от линии чрез символа ";". Всяко правило съдържа име - елемент от синтаксиса на езика CSS (чрез символа ":") низ от стойности. В повечето правила низ от стойности е една стойност, но, както може да се види от този пример, стойностите могат да бъдат зададени на много.

Версия на работен файл

Синтаксисът на CSS не се задава дали да се подравнява или не. Начинът да се напише - в един ред или няколко - е вкусът на програмиста. Можете да създадете няколко правила за един маркер в един ред, но можете да поставите всички правила в един контейнер "{" "}". Такова "овесена каша" е типично за съвременните системи за управление на обекти (CMS), които съставляват групи от неизменни (застандартни) стилове в един нечетлив файл, който се чете и разбира по-бързо от браузъра.
Всички стилове, които СУК счита за подходящи за разработчика, са написани в класически стил, който може лесно да се разглежда и променя.

Идеален "синтаксис" на CSS

В идеалния случай се счита система, която не съществува и нейната функция се изпълнява. Обикновено използват CSS файлове: те са лесни за свързване към HTML документ и могат да бъдат бързо променени. Оцветяването на синтаксиса на HTML и CSS се осигурява от всички модерни редактори на кодове. Например, PhpStorm прави перфектна работа с множество формати. На първо място е много удобно да се работи. Но най-важното - той проверява комбинацията от HTML файла с CSS описания. Всички са подчертани и свързани помежду си. Този продукт също тества файлове за използваемост, а CSS синтаксисът и класовете са чудесен инструмент. Правила за прости описания на сложни системи - това се отнася за CSS. През последните пет години HTML и CSS "взаимно изгодни" се развиха и достигнаха "съвършенство". Но това съвършенство е странно, твърдо и продължава да изисква работата на квалифициран разработчик (често екип) за създаване на професионален уеб ресурс. В този пример се създава низ, описващ набор от стилове. Както обикновено, CSS синтаксис се използва, с едно изключение: вместо връзките към картините, съдържанието на изображението се вмъква. Това е цената на този метод за оформяне на стила. Този проблем е решен, по същество различен - стилът се формира в движение.
Първоначално е създадено описание - низ от символи. Тогава елементът StyleLL се създава като стилов тагУказва вида на този маркер и вмъква съдържанието в него. И накрая, в тялото на тялото се имплантира нов обект, който веднага започва да работи.

Формиране на HTML и CSS "в движение"

Редки обхват, а не всеки уеб ресурс трябва да бъдат отразени незабавно изцяло. Това е просто често да пиша страници напълно веднага, изготвяне на стилове и създаване на събития манипулатори. На сайта на модерната CMS няма други опции. Разработването на ръчно изработено място осигурява много по-голяма свобода на действие, но тя е маса от ръчен труд. В CMS вече има набор от шаблони и стилове. Не трябва да се прави много за разработването на нов сайт. Пример за създаване на стил в движение не е синтаксисът на CSS файла в обичайния смисъл, но резултатът е абсолютно еквивалентен. Потокът от данни, който браузърът получава от сървъра, може да бъде изграден по различен начин. Класическата версия създава набор от HTML, CSS и JS файлове. Ако не го създадете, и развийте логиката на формиране на потока в движение:

създаване на набор от HTML тагове, когато е необходимо;

оформяне на набор от CSS стилове за всяко предприятие с тагове;

предоставяне на механизъм за обмен на информация за технологията AJAX.

В този сценарий, когато сайтът е инициализиран в браузъра, ще избухне малко количество данни, което ще инициира процеса на формиране на страницата и стиловете, от които се нуждае. В зависимост от действията на посетителя, потокът от данни от сървъра ще промени съдържанието му, но не и в контекста на прехвърлянето на страници или готови тагове, и данни - в смисъл, че точно къде точно и как точно да се създаде.

Преходот твърдост до мобилност

По обичайния начин всичко е статично или динамично. Когато се формира в движение, при създаването на таговете има стилове и се програмира логиката на създаването. Обикновено страницата се програмира на сървъра, JS-кодът на манипулаторите се разработва в браузъра и се създава структурираната структура на взаимосвързаните правила. Ако трябва да промените нещо - процесът се повтаря. Когато се програмира създаването на страница в движение, не се създава HTML + CSS, а процесът на тяхното създаване. Процесът на създаване на нещо е възможност да се предвиди ситуацията и да се разклони в зависимост от ситуацията. Програмирането на процеса на създаване на страница и обслужването на файловете прави сайта по-динамичен и мобилен, по-еволюиращ.