Web - кодинг: CSS:
Так що це таке - СSS?
Так що це таке - СSS? Cascading Style Sheets (Таблиці Каскадних Стилів) - це мова, що містить набір властивостей для опису зовнішнього вигляду будь-яких HTML документів. З його допомогою дизайнер має повний контроль над стилем і розташуванням кожного елемента веб сторінки, що простіше і набагато функціональніша використання звичайного набору HTML тегів. Наведу приклад: Вам потрібно створити жирний червоний підкреслений текст.
Структура і правила
Будь-який елемент HTML - це можливий CSS селектор. Властивості селектора визначають стиль елемента, для якого він визначений.
ПРИКЛАД:
H1
Всі елементи H1 в документі будуть червоного кольору, розміром в 20 точок (pt, point).
Класові селектори (Class Selectors):
CLASS - атрибут елемента в HTML, який визначає його клас. У CSS можна описати власні стилі для різних класів одних і тих же елементів.
Всі елементи H1 з атрибутом CLASS = "blue" стануть синіми.
Класи можуть так само бути описані без явного прив'язування їх до певних елементів.
В даному випадку всі елементи з атрибутом CLASS = "green" стануть зеленими.
ID селектори (ID Selectors):
ID - індивідуально іменований стиль. C його допомогою можна створювати стилістичні виключення cреди елементів одного класу.
Індіфікатор використовуються в основному для додання одному або декількох елементах одного класу індивідуальних властивостей. Скажімо, Ви створили клас blue - синій курсив. Але Вам знадобився жирний підкреслений текст синім курсивом. Звичайно, можна створити новий клас, але навіщо? Простіше описати ID. Наприклад "boldunderline". І все елементи класу blue з значенням ID "boldunderline" стануть жирним підкресленим синім курсивом. Відбудеться як би синтез властивостей класу blue і ідентифікатора boldunderline.
<
Привіт, це моя домашня сторінка.
Поки що в стадії розробки.
. Але скоро відкриється
Як видно з прикладу, атрибут ID може бути використаний без вказівки класу (останній параграф прикладу. Тоді параграф буде володіти тільки властивостями ID "boldunderline" (в прикладі - жирний, підкреслений текст).
Контекстуальні селектори (Contextual Selectors):
Контекстні селектори - це поєднання декількох звичайних селекторів. Стиль задається тільки елеметни в заданій послідовності в залежності від каскадного порядку.
В даному прикладі всі елементи EM всередині елементів P матимуть заданий стиль.
Додання кількох елементів однакових властивостей:
Скажімо Вам потрібно надати кільком елементам Вашої веб сторінки однакових властивостей. В цьому випадку при визначенні селектори перечісляутся через кому перед блоком властивостей.
h1, h2, h3, p, strong
Всі елементи h1, h2, h3, p і strong будуть зеленими.
Псевдокласи і псевдоелементи.
синтаксис:
селектор: псевдоклас <свойства>
селектор.класс: псевдоклас <свойства>
селектор: псевдоелемент <свойства>
селектор.класс: псевдоелемент <свойства>
Псевдокласи і псевдоелементи - це особливі класи і елементи, притаманні CSS і автоматично визначаються поддержівеющімі CSS браузерами. Псевдокласи розрізняють різні типи одного елемента, створюючи при визначенні власні стилі для кожного з них. Псевдоелементи є частинами інших елементів, задаючи цим частинам відмінний від елемента в цілому стиль.
Список псевдокласів і псевдоелементів.
First Line Pseudo-element - first-line. Цей псевдоелемент може бути використаний з block-level елементами (p, h1 і т.д.). Він змінює стиль першого рядка цих елементів.
First Letter Pseudo-element - first-letter. Схожий на first-line, але впливає не на весь рядок, а тільки на перший символ.
В даному прикладі всі елементи Anchor (посилання) будуть синіми. При натисканні (в активному стані) поміняють колір на червоний. І при підведенні курсору мишки зникне підкреслення.
Примітка. опису декількох властивостей для одного селектора, контекстуального селектора, класу, індивідуально іменованого стилю або групи об'єднаних селекторів відокремлюються один від одного крапкою з комою ";".
Внутрішні таблиці стилів
Як вже говорилося, використання Внутрішніх стилів мало чим відрізняється від використання звичайних HTML тегів. Вони задають стиль тільки одному елементу документа за допомогою атрибута STYLE в HTML тезі.
Вперед в майбутнє
ПРИКЛАД INLINE STYLE SHEET:
Вперед в майбутнє
Як можна помітити, код Inline Style Sheet вийшов більше ніж HTML. Тому ISS слід використовувати тільки якщо необхідно задати певному елементу свій індивідуальний стиль, який існує в класифікації CSS і нереалізований в HTML. Або ж при необхідності абсолютно позіціоніровть даний елемент.
Глобальні таблиці стилів