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

9 0 Новини високих технологій

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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