Про CSS
Так що це таке – СSS? Cascading Style Sheets (Таблиці Каскадних Стилів). Css – це мова, яка містить набір властивостей для визначення зовнішнього вигляду документа. З її допомогою дизайнер має повний контроль над стилем і розташуванням кожного елемента веб сторінки. Це набагато простіше використання звичайного набору HTML тегів. Наведу приклад: Вам потрібно створити жирний червоний підкреслений текст.
HTML EXAMPLE: <font color="red"><strong><u>Hello World</u></strong></font>
А якщо подібний стиль потрібно використовувати кілька разів? Добре якщо раз 5, а якщо 10-20? Ось тут нам і допоможе СSS. Існує три види таблиць стилів: Внутрішні таблиці стилів, Глобальні таблиці стилів і пов’язані таблиці стилів. Внутрішні таблиці стилів (Inline Style Sheets) мало чим відрізняються від HTML тегів. Глобальні (Global Style Sheets) визначають стиль елементів у всьому документі. Пов’язані (Linked Style Sheets) можуть бути використані для декількох документів і зберігаються в зовнішньому файлі. Детальніше про це написано далі.
Структури і правила
Селектори (Selectors):
Будь-який елемент HTML може мати CSS селектор. Селектор визначає стиль елемента, для якого він створений.
EXAMPLE: H1{color: red; font-size: 20pt;}
Всі елементи H1 в документі будуть червоного кольору, розміром в 20 точок (pt, point).
Класові селектори (Class Selectors):
CLASS – клас стилів в CSS. Для його визначення в CSS використовується знак «.»+ім’я.
Всі селектори можуть мати різні класи. Це дозволяє однаковим елементам мати різні стилі.
EXAMPLE: H1.blue{ color:blue; }
Всі елементи H1 з атрибутом CLASS="blue" стануть синіми.
Класи можуть бути також описані без прив’язування їх до певних елементів.
EXAMPLE: .green { color: green; }
У даному випадку всі елементи з вказаним атрибутом CLASS="green" стануть зеленими.
ID селектори (ID Selectors):
ID – індивідуально іменований стиль. З його допомогою можна створювати стилістичні виключення cеред елементів одного класу. Для визначення в css використовується знак «#»+ім’я.
Індифікатори використовуються в основному для додання одному або декільком елементам одного класу індивідуальних властивостей. Скажімо, Ви створили клас blue – синій курсив. Але вам знадобився жирний, підкреслений текст синім курсивом. Звичайно, можна створити новий клас, але навіщо? Простіше описати ID. Наприклад, «boldunderline». І всі елементи класу blue зі значенням ID «boldunderline» стануть жирним підкресленим синім курсивом. Відбудеться як би синтез властивостей класу blue та індифікатора boldunderline.
EXAMPLE: <html> <head> <title> Example </title> </head> <style> .blue #boldunderline </style> <body> <p class="blue"> Hello! Welcome To My Homepage!</p> <p class="blue" id="boldunderline">Will Be Soon</p> <p id="boldunderline">Under Construction</p> </body> </html>
Як видно з прикладу, ID може бути використаний без вказівки класу (останній параграф прикладу). Тоді параграф буде володіти тільки властивостями ID (у прикладі – жирний, підкреслений текст).
Контекстуальні селектори (Contextual Selectors):
Контекстні селектори – це поєднання декількох звичайних селекторів. Стиль задається тільки елеметнам в заданій послідовності залежно від каскадного порядку.
EXAMPLE: P EM
У даному прикладі всі елементи EM всередині елементів P будуть мати заданий стиль.
Надання декільком елементам однакових властивостей:
Скажімо, Вам потрібно надати декільком елементам Вашої веб сторінки однакові властивості. У цьому випадку, при визначенні елементи перераховуються через кому.
h1, h2, h3, p, strong { color:green;}
Всі елементи h1, h2, h3, p і strong будуть зеленими.
Псевдокласи і Псевдоелементи:
Псевдоклас складається з елементів одного типу, що відповідає певному критерію. Псевдокласи і Псевдоелементи при визначенні відділяються знаком «:».
Список псевдокласів і псевдоелементів:
- Anchor Pseudo Classes – це псевдокласи елемента <a>, що означає посилання. Псевдокласи цього елемента – link (лінк), active (активне посилання), visited (відвіданий раніше URL), hover (при піднесенні курсору, не працює в Netscape).
- First Line Pseudo-element – first-line. Цей псевдоелемент може бути використаний з block-level елементами (p, h1 і т.д.). Він змінює стиль першого рядка цих елементів.
- First Letter Pseudo-element – first-letter. Те ж саме що і first-line, тільки впливає не на весь рядок, а тільки на перший символ.
EXAMPLE: a:link,a:visited { color: blue; text-decoration: underline;}
a:active { color: red; }
a:hover { text-decoration: none; }
У даному прикладі всі елементи Anchor (посилання) будуть синіми. При натисканні (в активному стані) поміняють колір на червоний. І при підведенні курсору мишки зникне підкреслення. Дуже ефектний прийом.
***
Це переклад статті.