justify"> В даному випадку текст табличній осередку класу. header буде відображатися жирним накресленням і сірим кольором, а осередки класу. text - звичайним накресленням, чорним кольором і розміром шрифту 11 пікселів;
імпортування. Імпортування стильового шаблону CSS, по суті, є аналогічним вказівкою посилання на зовнішній файл:
lt; STYLE TYPE- text/css gt;
lt ;!-
@ import: url (style. ess);
- gt;
lt;/STYLE gt;
Всі чотири способи визначення стильового шаблону CSS можна використовувати одночасно в межах одного HTML-документа (лістинг 9.1). Така можливість дозволяє задавати основне правило CSS, наприклад, у вигляді зовнішнього файлу шаблонів, а для виняткових або рідкісних HTML-елементів - окремі конструкції або в тезі lt; style gt ;, або в кодових конструкціях самих тегів.
Запис шаблону CSS
Угрупування та успадкування
Будь правило таблиці стилів CSS складається з селектора і визначення шаблону. Селектор виступає в ролі покажчика стильового правила для певного HTML-елемента або внутрішнього класу (ідентифікатора). Визначення шаблону - це опис стильових правил для позначених елементів HTML. Правила чергуються через крапку з комою і полягають у фігурні дужки [16].
НЗ {color: blue; font-family: Tahoma, Verdana, Arial; }
У даному прикладі селектором є елемент заголовка НЗ, для шаблону якого випливає таке визначення: колір - синій, шрифт - Tahoma, або Verdana, або Arial.
Як видно з прикладу, для одного селектора приведено опис, що містить два правила - за кольором заголовка і найменуванню гарнітури. Це говорить про те, що CSS дозволяє групувати кілька стильових правил для одного селектора в рамках єдиного опису шаблону.
Порівнявши запис виду:
Н3 {color: blue; }
Н3 {font-family: Tahoma, Verdana, Arial; }
І
Н3 {color: blue; font-family: Tahoma, Verdana, Arial; }
можна зробити висновок про те, що угруповання правил по селектору дозволяє, по-перше, економити розмір CSS-файлу, по-друге - сис?? ематізіровать структуру опису шаблону.
Іншою особливістю таблиць стилів CSS є властивість спадкування стильових правил для декількох селекторів одночасно, наприклад:
TD, ТН, Р, DIV {text-align: justify; color: gray: font-size: 10рх; }
Такий запис призначає єдиний стиль відображення текстової інформації для елементів комірки таблиці ( lt; то gt ;, lt; тн gt;), а також параграфів ( lt; p gt;) і блоків ( lt; div gt;), а саме: вирівнювання - по ширині, колір - сірий, розмір шрифту - 10 пікселів.
Селектори. В якості селектора CSS можуть виступати:
І елементи HTML. Перевизначення стилю для конкретного елементу сторінки:
BODY {color: orange; }
У цьому випадку весь текст у межах розділу body буде помаранчевим. При додаванні, наприклад, таблиці призначення стильового шаблону пропаде для тексту всередині осередків;
класи. Використання класів дозволяє перевизначати стиль, як для конкретного елемента, так і для будь-якого елементу, якому присвоєно даний клас. Найменування класу починається з точки і зазвичай пишеться малими літерами (допускається використання латинських букв і цифр, але наявність спеціальних символів, нижніх підкреслень та інших нестандартних елементів не рекомендується). [17]
. red {color: red; }
У цьому випадку будь-який елемент HTML, що дозволяє змінювати колір, буде відображатися червоним, якщо йому привласнити клас. red:
lt; FONT CLASS= red gt; текст червоним кольором lt;/FONT gt;
АБО
lt; HR CLASS= red gt;
Якщо ми доповнимо селектор класу найменуванням конкретного HTML-елемента, то дія стильового правила буде поширюватися тільки на даний елемент:
HR. red {color: red; }
При вказівці класів стильового шаблону слід уважно стежити за тим, чи підтримує HTML-елемент присвоюються тіпереопределенія стилю. Наприклад, запис виду:
HR {text-align: justify; }
буде безглуздою, тому горизонтальний роздільник відноситься до області структурного форматування і не може містити текст, який, згідно стильовому правилом, слід розтягнути по ширині;
ідентифікатори. Зап...