http://htmlbook.ru/samcss/bazovyy-sintaksis-css
Як вже було зазначено раніше, стильові правила записуються в своєму форматі, відмінному від HTML. Основним поняттям виступає селектор - це деяке ім'я стилю, для якого додаються параметри форматування. Як селектори виступають теги, класи і ідентифікатори. Загальний спосіб запису має наступний вигляд.
Спочатку пишеться ім'я селектора, наприклад, TABLE, це означає, що все стильові параметри будуть застосовуватися до тегу <table>, потім йдуть фігурні дужки, в яких записується стильова властивість, а його значення вказується після двокрапки. Стильові властивості поділяються між собою крапкою з комою, в кінці цей символ можна опустити.
CSS не чутливий до регістру, перенесення рядків, пробілів і символів табуляції, тому форма запису залежить від бажання розробника. Так, в прикладі 5.1 показані два різновиди оформлення селектору і їх правил.
Приклад 5.1. Використання стилів
<!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-файлі
/*
Стиль для сайта htmlbook.ru
Сделан для ознакомительных целей
*/
div {
width: 200px; /* Ширина блока */
margin: 10px; /* Поля вокруг элемента */
float: left; /* Обтекание по правому краю */
}Як випливає з даного прикладу, коментарі можна додавати в будь-яке місце CSS-документа, а також писати текст коментаря в кілька рядків. Вкладені коментарі неприпустимі.