033.1 Урок 1

Найпростіший спосіб змінити стиль певного елемента – це записати його безпосередньо до тегу елемента за допомогою атрибута style. Усі видимі елементи HTML допускають атрибут style, значенням якого може бути одне або декілька правил CSS, які також відомі як властивості (properties). Почнемо з простого прикладу, елемента абзацу:

Основним синтаксисом налаштованої властивості CSS є property: value, де property є конкретним аспектом, який ви хочете змінити в елементі, а value визначає заміну параметра за замовчуванням, створеного браузером. Деякі властивості застосовуються до всіх елементів, а деякі властивості застосовуються лише до окремих елементів. Аналогічно, у кожної властивості є відповідні значення.

Наприклад, щоб змінити колір нашого простого абзацу, ми використовуємо властивість color. Властивість color відноситься до кольору переднього плану (foreground), тобто кольору літер в абзаці. Сам колір міститься в частині значення правила, і його можна зазначити в багатьох різних форматах, включаючи прості назви, як-от: red, green, blue, yellow тощо. Таким чином, щоб зробити літеру абзацу фіолетовою, додайте налаштовану властивість color: purple до атрибута style елемента:

Інші налаштовані властивості можуть входити до тієї ж властивості style, але вони повинні бути розділені крапкою з комою. Якщо ви хочете збільшити розмір шрифту, наприклад, додайте font-size: larger до властивості style:

Щоб побачити результат цих змін, збережіть наступний HTML-код у файлі, а потім відкрийте його у браузері (результати показані у Figure 1):

Ви можете уявити кожен елемент на сторінці як прямокутник або блок, геометричними властивостями та прикрасами яких можна керувати за допомогою CSS. Механізм візуалізації використовує дві основні стандартні концепції розміщення елементів: блочне розміщення та вбудоване розміщення. Блочні елементи займають весь горизонтальний простір свого батьківського елемента і розміщуються послідовно, зверху вниз. Їх висота (їх вертикальний розмір, не плутати з верхнім (top) положенням на сторінці) зазвичай залежить від кількості вмісту, який вони мають. Вбудовані елементи дотримуються методу зліва направо, подібного до західних письмових мов: елементи розміщуються горизонтально, зліва направо, доки не залишиться місця в правій частині, після чого елемент продовжується на новому рядку відразу під поточним. Такі елементи, як p, div та section, розміщуються як блоки за замовчуванням, тоді як такі елементи, як span, em, a та окремі літери розміщуються як вбудовані. Ці основні методи розміщення можуть бути докорінно змінені правилами CSS.

Прямокутник, що відповідає елементу p у тілі прикладу HTML-документа, буде помітним, якщо ви додасте властивість background-color до правила(Figure 2):

Після додавання нових налаштованих властивостей CSS до атрибута style ви помітите, що загальний код стає перевантаженим. Використання занадто великої кількості правил CSS в атрибуті style підриває розділення структури (HTML) і презентації (CSS). Більше того, незабаром ви зрозумієте, що багато стилів є спільними між різними елементами, і нерозумно повторювати їх у кожному елементі.

Замість того, щоб стилізувати елементи безпосередньо в їхніх атрибутах style, набагато практичніше розповісти браузеру про всю колекцію елементів, до яких застосовується користувацький стиль. Ми робимо це шляхом додавання селектора до налаштованих властивостей, відповідності елементів за типом, класом, унікальним ідентифікатором, відносним положенням тощо. Комбінація селектора та відповідних налаштованих властивостей, також відома як декларації, називається CSS правилом. Основним синтаксисом правила CSS є selector { property: value }. Як і в атрибуті style властивості, розділені крапкою з комою, можна згрупувати разом, як у p { color: purple; font-size: larger }. Це правило відповідає кожному елементу p на сторінці та застосовує налаштовані властивості color та font-size.

Правило CSS для батьківського елемента автоматично відповідатиме всім його дочірнім елементам. Це означає, що ми можемо застосувати налаштовані властивості до всього тексту на сторінці, незалежно від того, знаходиться він всередині або поза тегом <p>, використовуючи селектор body: body { color: purple; font-size: larger }. Ця стратегія звільняє нас від того, щоб знову писати те саме правило для всіх його дочірніх елементів, але може знадобитися написати додаткові правила для “скасування” або зміни успадкованих правил.

Тег <style> дає змогу нам записати правила CSS всередині HTML-сторінки, яку ми хочемо стилізувати. Це дає змогу браузеру відрізняти код CSS від HTML-коду. Тег <style> знаходиться в розділі head документа:

Атрибут type повідомляє браузеру, який тип контенту міститься в тегу <style>, тобто його MIME тип. Оскільки кожен браузер, який підтримує CSS, передбачає, що типом тегу <style> за замовчуванням є text/css, включно з необов’язковим атрибутом type. Існує також атрибут media, який вказує на медіа (наприклад, екрани комп’ютера або друк), до яких застосовуються правила CSS у тегу <style>. За замовчуванням правила CSS застосовуються до будь-якого носія, на якому відображається документ.

Як і в коді HTML, розриви рядків і відступи коду не змінюють того, як правила CSS інтерпретуються браузером. Напишемо:

отримаємо такий самий результат, якщо напишемо:

Додаткові байти, які використовуються пробілами та розривами рядків, мало впливають на кінцевий розмір документа і не мають значного впливу на час завантаження сторінки, тому вибір макета – справа смаку. Зверніть увагу на крапку з комою після останньої декларації (font-size: larger;) правила CSS. Ця крапка з комою не є обов’язковою, але її наявність полегшує додавання ще однієї декларації в наступному рядку, не турбуючись про відсутність крапки з комою.

Розміщення декларацій в окремих рядках також допомагає, коли вам потрібно прокоментувати декларацію. Якщо ви хочете тимчасово вимкнути декларацію з метою усунення несправностей, наприклад, ви можете тимчасово зробити відповідний рядок коментарем за допомогою /* та */:

або:

Записана в такий спосіб декларація font-size: larger ігноруватиметься браузером. Будьте обережні, щоб правильно відкривати та закривати коментарі, інакше браузер не зможе інтерпретувати правила.

Коментарі також корисні для запису нагадувань про правила:

Нагадування, подібні до наведеного в прикладі, можна використовувати в таблицях стилів, які містять невелику кількість правил, але вони просто необхідні для навігації в таблицях стилів із сотнями (або більше) правил.

Незважаючи на те, що атрибут style і тег <style> є достатніми для тестування користувацьких стилів і корисними для конкретних ситуацій, вони зазвичай не використовуються. Натомість правила CSS зазвичай зберігаються в окремому файлі, на який можна посилатися з документа HTML.

Переважним методом зв’язування CSS декларацій з документом HTML є збереження CSS в окремому файлі. Цей метод має дві основні переваги над попередніми:

Файли CSS мають розширення .css і, як і файли HTML, їх можна редагувати в будь-якому текстовому редакторі. На відміну від файлів HTML, файли CSS не мають структури верхнього рівня, побудованої за допомогою ієрархічних тегів, таких як <head> або <body>. Швидше, файл CSS – це лише список правил, які послідовно обробляються браузером. Ті самі правила, що записані всередині тегу <style>, можуть замість цього входити до файлу CSS.

Зв’язок між HTML-документом і правилами CSS, які зберігаються у файлі, визначається лише в документі HTML. Для файлу CSS не має значення, чи існують елементи, що відповідають його правилам, тому немає необхідності перераховувати у файлі CSS HTML-документи, з якими він пов’язаний. На стороні HTML кожна пов’язана таблиця стилів буде застосована до документа так, ніби правила були записані в тегу <style>.

HTML-тег <link> визначає зовнішню таблицю стилів, яка буде використовуватися в поточному документі, він має бути розташований в розділі head HTML-документа:

Тепер ви можете розмістити правило для елемента p, яке ми використовували раніше, у файлі style.css, і результати, які побачить відвідувач вебсторінки, будуть такими самими. Якщо файл CSS не знаходиться в тому самому каталозі, що й документ HTML, вкажіть його відносний або повний шлях в атрибуті href. Тег <link> може посилатися на різні типи зовнішніх ресурсів, тому важливо встановити, який зв’язок зовнішній ресурс має з поточним документом. Для зовнішніх файлів CSS зв’язок визначається в rel="stylesheet".

Атрибут media можна використовувати так само, як і тег <style>: він вказує на медіафайли, такі як екрани комп’ютера або друк, до яких мають застосовуватися правила зовнішнього файлу.

CSS може повністю змінити елемент, але все одно важливо використовувати відповідний елемент для компонентів сторінки. Інакше допоміжні технології, такі як програми зчитування з екрана, не зможуть визначити правильні розділи сторінки.