Лекція 20. Каскадні таблиці стилів
CSS (Cascading Style Sheets - каскадні таблиці стилів) - формальна мова опису зовнішнього вигляду документа, написаного з використанням мови розмітки.
Переважно використовується як засіб опису, оформлення зовнішнього вигляду веб-сторінок, написаних за допомогою мов розмітки HTML і XHTML, але може також застосовуватися до будь-яких XML-документів, наприклад, до SVG або XUL.
CSS використовується розробниками веб-сторінок для задання кольорів, шрифтів, розташування окремих блоків і інших аспектів представлення зовнішнього вигляду цих веб-сторінок. Основною метою розробки CSS було розділення опису логічної структури веб-сторінки (яке проводиться за допомогою HTML або інших мов розмітки) від опису зовнішнього вигляду цієї веб-сторінки (яке тепер проводиться за допомогою формальної мови CSS). Такий поділ може збільшити доступність документа, надати велику гнучкість і можливість керування його поданням, а також зменшити складність і повторюваність в структурному вмісті. Крім того, CSS дозволяє представляти один і той же документ в різних стилях або методах виведення, таких як екранне представлення, друковане представлення, читання голосом (спеціальним голосовим браузером або програмою читання з екрану), або при виведенні пристроями, що використовують шрифт Брайля.
Правила CSS пишуться на формальній мові CSS і розташовуються в таблицях стилів, тобто таблиці стилів містять в собі правила CSS. Ці таблиці стилів можуть розташовуватися як в самому веб-документі, зовнішній вигляд якого вони описують, так і в окремих файлах, що мають формат CSS. (По суті, формат CSS - це звичайний текстовий файл. У файлі .css не міститься нічого, крім переліку правил CSS і коментарів до них.)
Ці таблиці стилів можуть бути підключені в описуваний ними веб-документ чотирма різними способами:
- коли таблиця стилів знаходиться в окремому файлі, вона може бути підключена до веб-документу за допомогою тега <link>, розташованого в цьому документі між тегами <head> і </head>. (Тег <link> матиме атрибут href, що має значенням адреси цієї таблиці стилів). Всі правила цієї таблиці діють протягом усього документа;
- коли таблиця стилів знаходиться в окремому файлі, вона може бути підключена до веб-документу за допомогою директиви @import, що розташовується в цьому документі між тегами <style> </style> (які, в свою чергу, розташовуються в цьому документі між тегами <head> </head>) відразу після тега <style>, яка також вказує (в своїх дужках, після слова url) на адресу цієї таблиці стилів. Всі правила цієї таблиці діють протягом усього документа;
- коли таблиця стилів описана в самому документі, вона може розташовуватися в ньому між тегами <style> і </style> (які, в свою чергу, розташовуються в цьому документі між тегами <head> і </head>). Всі правила цієї таблиці діють протягом усього документа;
- коли таблиця стилів описана в самому документі, вона може розташовуватися в ньому в тілі якогось окремого тега (за допомогою його атрибута style) цього документа. Всі правила цієї таблиці діють тільки на вміст цього тега.
У перших двох випадках кажуть, що до документа застосовані зовнішні таблиці стилів, а по-друге двох випадках - внутрішні таблиці стилів.
У перших трьох випадках підключення таблиці CSS до документа кожне правило CSS з таблиці стилів має дві основні частини - селектор і блок оголошень. Селектор, розташований в лівій частині правила, визначає, на які частини документа поширюється правило. Блок оголошень розташовується в правій частині правила. Він міститься в фігурних дужках, і, в свою чергу, складається з одного або більше оголошень, розділених знаком «;». Кожне оголошення є поєднанням властивості CSS і значення, розділених знаком ":". Селектори можуть групуватися в одному рядку через кому. В такому випадку властивість застосовується до кожного з них.
Основні види селекторів:
- Універсальний селектор
- Селектор тегів
- Селектор класів
- Селектор ідентифікаторів
Sass (Syntactically Awesome Stylesheets) - це метамова на основі CSS, призначена для збільшення рівня абстракції CSS коду та спрощення файлів каскадних таблиць стилів.
Мова Sass має два синтаксису:
- sass - відрізняється відсутністю фігурних дужок, в ньому вкладені елементи реалізовані за допомогою відступів;
- SCSS (Sassy CSS) - використовує фігурні дужки, як і CSS.
Sass додає до CSS константи і мікси. Це полегшує підтримку цілісності даних всередині великого набору стилів. Константи дозволяють встановити значення і використовувати його всередині стилів, за допомогою міксів те ж саме можна зробити з блоком атрибутів стилю.
LESS - це динамічна мова стилів. Вона створена під впливом мови стилів Sass, і, в свою чергу, вплинула на її новий синтаксис «SCSS», в якому також використаний синтаксис, який є розширенням СSS.
LESS - це продукт з відкритим вихідним кодом. Його перша версія була написана на Ruby, однак в наступних версіях було вирішено відмовитися від використання цієї мови програмування на користь JavaScript.
LESS забезпечує наступні розширення CSS: змінні, вкладені блоки, мікси, оператори і функції.
LESS може працювати на стороні клієнта (Internet Explorer 6 +, WebKit, Firefox) або на стороні сервера під керуванням Node.js або Rhino.
Less
дозволяє використовувати змінні. Імені змінній передує символом @. В якості
знака присвоювання використовується двокрапка (.