Синтаксис CSS: приклади використання

Простота концепції CSS дозволяє підключити стильові правила з зовнішнього файлу, з тега сторінки, через атрибут стилю на тезі або через jаvascript. Немає нічого складного в складанні і використанні правил CSS, але для правильного його використання необхідно розуміти його місце, логіку роботи та місце в оформленні веб-сторінок.

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

Як була створена веб-сторінка - неважливо. Головне, що вона отримана від сервера браузером відвідувача. Браузер будує дерево об'єктів сторінки (DOM), орієнтуючись на синтаксис HTML і CSS. За допомогою мови jаvascript можна наповнити елементи сторінки функціональністю. Ідеальний варіант - браузер отримує заголовки і тіло сторінки, запускає зв'язок з сервером по технології AJAX, і потрібний контент наповнюється так, як потрібно в поточному сеансі роботи, і змінюється в залежності від дій користувача.


Класичний варіант - переглядач HTML, CSS, JS файли і працює так, як наказано ними. Порядок проходження HTML-тегів має значення, але правила CSS можуть змінити фактичне їх положення у вікні браузера. Правильне поєднання порядку запису HTML-тегів і правил CSS дозволяє коректно відображати інформацію та забезпечувати необхідну функціональність сторінки. У всіх випадках діють прості правила: є потік даних, який розпізнається, як наказано відповідним синтаксисом (HTML, CSS, JS); кількість прогалин не має значення, важливий один пробіл; переклади рядків, символи табуляції та інші подібні символи не мають значення; коментарі, що не можуть бути вкладені один в одного. Синтаксис CSS-правила, розміщеного в стилі тега, має пріоритет. Стилі, зазначені в тезі style і підключені із зовнішнього файлу, еквівалентні. Теги не можуть впливати на стилі. Код jаvascript може читати/записувати стилі тегів, створювати нові теги і стилі.


Для підвищення зручності читання можна комбінувати рядкові і прописні букви. Синтаксис CSS-правила допускає використання регістра, але при застосуванні це не має значення.

Приклад оформлення конструкцій CSS

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

Робочий варіант файлу

Синтаксис CSS не встановлює, вирівнювати чи ні правила. Те, як писати - в один рядок або декілька - справа смаку програміста. Можна складати поспіль кілька правил для одного тега, а можна всі правила помістити в один контейнер "{" "}". Така «каша» характерна для сучасних систем управління сайтами (CMS), які складають набори незмінних (для стандартних них) стилів в один нечитабельний файл, який швидше читається і розуміється браузером.
Всі стилі, які CMS вважає актуальними для розробника, записуються в класичному стилі, який легко можна переглянути і змінити.

Ідеальний «синтаксис» CSS

Ідеальною вважається система, якої не існує, а її функція виконується. Звично використовувати файли CSS: вони легко підключаються до HTML-документа і їх можна швидко змінити. Підсвічування синтаксису HTML і CSS забезпечується всіма сучасними редакторами коду. Наприклад, PhpStorm робить ідеальним роботу з масою форматів. В першу чергу, в ньому дуже зручно працювати. Але головне - він перевіряє поєднання коду HTML-файлу з CSS-описами. Всі виділено і взаємопов'язано. Даний продукт також тестує файли на профпридатність, а щодо CSS-синтаксису і класів - це чудовий варіант інструменту. Правила простих описів складних систем - це відноситься до CSS. За останні п'ять років HTML і CSS «взаємовигідно» розвивалися і досягли «досконалості». Але це досконалість примарно, жорстко і продовжує вимагати праці кваліфікованого розробника (частіше колективу) для створення професійного веб-ресурсу. У цьому прикладі створюється рядок опису набору стилів. Як зазвичай, використовується синтаксис CSS, за одним винятком: замість посилань на картинки вставлено зміст картинки. Це витрати такого методу формування стилю. Ця проблема вирішується, істотно інше - стиль формується на льоту.
Спочатку створено опис - рядок символів. Потім створений елемент StyleLL як тег style, потім вказаний тип цього тега, і в нього вставити зміст. Нарешті, в тіло документа імплантований новий об'єкт, який відразу починає працювати.

Формування HTML і CSS «на льоту»

Рідкісна область застосування і далеко не кожен веб-ресурс повинен бути відображений відразу в повному обсязі. Просто звично відразу писати сторінки цілком, оформляти стилі і складати обробники подій. На сайті сучасної CMS інших варіантів немає. Розробка сайту ручної роботи надає значно більшу свободу дій, але несе за собою масу ручної праці. CMS має вже готові набори шаблонів і стилів. Не так багато потрібно зробити, щоб розробити новий сайт. Приклад із створенням стилю на льоту - це не синтаксис CSS файлу у звичному значенні, але результат абсолютно еквівалентний. Потік даних, який браузер отримує від сервера, може бути побудований інакше. У класичному варіанті створюється набір HTML, CSS і JS файлів. Якщо не створювати його, а розробити логіку формування потоку на льоту: створення набору HTML-тегів по мірі необхідності; формування набору стилів CSS по кожному підприємству тегу; забезпечення механізму обміну інформацією по технології AJAX. В такому варіанті, при початковій завантаженні сайту в браузер, відлетить малий обсяг даних, який ініціює процес формування сторінки і потрібних їй стилів. Залежно від дій відвідувача потік даних від сервера буде змінювати свій зміст, але не в контексті передачі сторінок або готових тегів, а даних - в тому сенсі, що саме, де саме і як саме потрібно створити.

Перехід від жорсткості до мобільності

У звичайному варіанті все статично або динамічно. При формуванні на льоту, при створенні тегів з'являються стилі, причому логіка створення програмується. У звичайному варіанті програмується сторінка на сервері, розробляється JS-код обробників в браузері, створюється струнка структура взаємопов'язаних правил. Якщо потрібно щось змінити - процес повторюється. При програмуванні процесу створення сторінки «на льоту» створюється не HTML+CSS, а процес їх формування. Процес створення чого-небудь - це можливість передбачити ситуацію і виконати розгалуження в залежності від ситуації. Програмування процесу створення сторінки і обслуговуючих її файлів робить сайт більш динамічним і мобільним, більше розвивається.