CSS (Cascading Style Sheets, каскадні таблиці стилів) – технологія опису зовнішнього вигляду документа, написаного мовою розмітки. Розділення вмісту (написаного на HTML або іншій мові розмітки) і подання (написаного на CSS). Запропоноване Хокон Віум Лі в 1994 році. CSS2 –12 травня 1998 року
Властивості, які визначає CSS: Властивості шрифту; Властивості тексту; Властивості фону; Властивості обрамлення; Властивості позиціонування; Адаптація інтерфейсу; Фільтри; Шари.
Контейнер STYLE служить для визначення таблиці опису стилів. Фактично визначення стилів повинно знаходиться в цьому тегу
Пов'язані таблиці стилів
Пов'язані таблиці стилів використовуються для надання декільком документам одного стилю і зберігаються в окремому файлі. Це дуже привабливо, коли потрібно витримати сайт в однім
стилі, не турбуючи себе упорядкуванням таблиць для кожного документа. ПРИКЛАД: Файл styles.ess
body background:black; font-size:9pt; color:red;
font-family:Arial Black
.basecolor:blue; font-style:italic hi
color:white #bold font-weight:bold
У самих же HTML документах робиться посилання на цей файл за
допомогою тега <LINK>. Виглядає це так:
<LINK rel="STYLESHEET" TYPE="text/css" HREF="ШЛЯХ до
файла">
Структура і правила
Селектори (Selectors): Будь-який елемент HTML - це можливий CSS селектор. Властивості
селектора визначають стиль елемента, для якого він визначений.
Класові селектори (Class Selectors): CLASS - атрибут елемента в HTML, що визначає його клас. У CSS
можна описати власні стилі для різноманітних класів тих самих елементів. Класи можуть так само бути описані без явного прив'язування їх
до визначених елементів. Синтаксис: . клас властивості
ID селектори (ID Selectors): Синтакс: #id властивості
ID - іменований стиль, що уточнює. 3 його допомогою можна створювати стилістичні винятки серед елементів одного класу. Стилі, що уточнюють, використовуються в основному для надання
одному або декільком елементам одного класу індивідуальних властивостей. Скажемо, Ви створили клас blue - синій курсив. Але Вам знадобився жирний підкреслений текст синім курсивом. Звичайно, можна створити новий клас, але простіше описати ID. Наприклад "boldunderline". I всі елементи класу blue із значенням ID "boldunderline" стануть жирним підкресленим синім курсивом. Відбудеться як би синтез властивостей класу blue i ідентифікатора boldunderline.
Контекстуальні селектори
Контекстні селектори - це сполучення декількох звичайних селекторів. Стиль задається тільки елементам у заданій послідовності в залежності від каскадного порядку.
ПРИКЛАД: Р EM color:silver;. У даному прикладі всі елементи ЕМ усередині елементів Р будуть мати заданий стиль.
Приклад та синтаксис:
ПРИКЛАД HTML:
1)<font color="blue" size="3" face="Arial"> Вперед у майбутнє </font>
2) Через контейнер STYLE: <style type="text/css">
p color: blue; font-family: times; font-size: 10pt;
hi color: black; font-size:12pt; font-style:Arial;
text-align: center;
</style>
