Як вже було зазначено раніше, стильові правила записуються в своєму форматі, відмінному від HTML. Основним поняттям виступає селектор - це деякий ім'я стилю, для якого додаються параметри форматування. Як селектора виступають теги, класи і ідентифікатори. Загальний спосіб запису має наступний вигляд.
Спочатку пишеться ім'я селектора, наприклад, TABLE, це означає, що все стильові параметри будуть застосовуватися до тегу <table> , потім йдуть фігурні дужки, в яких записується стильова властивість, а його значення вказується після двокрапки. Стильові властивості поділяються між собою крапкою з комою, в кінці цей символ можна опустити.
CSS не чутливий до регістру, перенесення рядків, прогалин і символів табуляції, тому форма запису залежить від бажання розробника. Так, в прикладі 5.1 показані два різновиди оформлення селектор і їх правил.
Приклад 5.1. Використання стилів
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Заголовки </title>
<style>
h1 {color:#a6780a; font-weight: normal; } h2 {color: olive; border-bottom: 2px solid black; } </style>
</head>
<body>
<h1>
Заголовок 1 </h1>
<h2>
Заголовок 2 </h2>
</body>
</html>
В даному прикладі властивості селектора h1 записані в один рядок, а для селектора h2 кожне властивість знаходиться на окремому рядку. У другому випадку легше відшукувати потрібні властивості і правити їх за потребою, але при цьому незначно зростає обсяг даних за рахунок активного використання прогалин і переносів рядків. Так що в будь-якому випадку спосіб оформлення стильових параметрів залежить від розробника.
Правила застосування стилів
Можливі такі правила, які необхідно знати при описі стилю.
Форма записи
Для селектора допускається додавати кожне стильове властивість і його значення окремо, як це показано в прикладі 5.2.
Приклад 5.2. Розширена форма запису
td {background: olive; } td {color: white; } td {border: 1px solid black; } Однак такий запис не дуже зручна. Доводиться повторювати кілька разів один і той же селектор, та й легко заплутатися в їх кількості. Тому пишіть все властивості для кожного селектора разом. Зазначений набір записів в такому випадку отримає наступний вигляд (приклад 5.3).
Приклад 5.3. Компактна форма запису
td {background: olive; color: white; border: 1px solid black;} Ця форма запису більш наочна і зручна у використанні.
Має пріоритет значення, вказане в коді нижче
якщо для селектора спочатку задається властивість з одним значенням, а потім той же властивість, але вже з іншим значенням, то застосовуватися буде те значення, яке в коді встановлено нижче (приклад 5.4).
приклад 5.4. Різні значення у одного властивості
p {color: green; } P {color: red; } В даному прикладі для селектора p колір тексту спочатку встановлений зеленим, а потім червоним. Оскільки значення red розташоване нижче, то воно в підсумку і буде застосовуватися до тексту.
Насправді такого запису краще взагалі уникати і видаляти повторювані значення. Але подібне може статися випадково, наприклад, в разі підключення різних стильових файлів, в яких містяться однакові селектори.
Значення
У кожного властивості може бути тільки відповідне його функції значення. Наприклад, для color, який встановлює колір тексту, як значення неприпустимо використовувати числа.
Коментарі
Коментарі потрібні, щоб робити пояснення з приводу використання того чи іншого стильового властивості, виділяти розділи або писати свої нотатки. Коментарі дозволяють легко згадувати логіку і структуру селектор, і підвищують розбірливість коду. Разом з тим, додавання тексту збільшує обсяг документів, що негативно позначається на часі їх завантаження. Тому коментарі зазвичай застосовують в налагоджувальних або навчальних цілях, а при викладанні сайту в мережу їх перуть.
Щоб позначити, що текст є коментарем, застосовують наступну конструкцію /* ... */ (приклад 5.5).
Приклад 5.5. Коментарі в CSS-файлі
/* Стиль для сайту html-css.co.ua Зроблено для ознайомлювальних цілей */ div {width: 200px; /* Ширина блоку */ margin: 10px; /* Поля навколо елемента */ float: left; /* Обтікання по правому краю */ } Як випливає з даного прикладу, коментарі можна додавати в будь-яке місце CSS-документа, а також писати текст коментаря в кілька рядків. Вкладені коментарі неприпустимі.
Питання для перевірки
1. Люба підключила до HTML-документу одночасно два стильових файлу - style1.css і style2.css. Причому в файлі style2.css першим рядком імпортується ще один файл з ім'ям style3.css. У файлі style1.css колір тексту задається червоним, в style2.css - синім, а в style3.css - зеленим. Який колір тексту буде на сторінці?
- червоний.
- синій.
- зелений.
- чорний.
- встановлений в браузері за умовчанням.
2. В якому рядку коду міститься помилка?
- p {text-align: center; color:#000000}
- div {color: red; font-size: 11pt; }
- title {color:#fc0; margin: 10px; }
- p {color: green; color; }
- html {float: left; }
3. Яка помилка міститься в наступному коді?
/* ------------------------- ------- div { color:#fc0; /* Колір теска */ margin: 10px; /* Поля навколо елемента */ float: left /* Обтікання по правому краю */ } ---------------------- ---------- */
- Помилка в тексті коментаря.
- Вкладені коментарі.
- Ні крапки з комою.
- Неприпустимі значення у стильових властивостей.
- Зайві переноси в коді.
4. В якому рядку міститься коректний синтаксис?
- body: color=black
- body {color: black}
- {body; color : black}
- {body: color=black}
- body {color=black}
5. Як правильно вставити коментар в CSS-файл?
- 'коментар
- // коментар
- // коментар //
- /* коментар */
- <! - коментар ->
Відповіді
1. синій.
2. p {color: green; color; }
3. Вкладені коментарі.
4. body {color: black}
5. /* Коментар */