Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
шпора до Web-технологій2003.doc
Скачиваний:
16
Добавлен:
22.12.2018
Размер:
344.58 Кб
Скачать

Id селектори (id Selectors):

Синтакс: #id {властивості}

ID - іменований стиль, що уточнює. 3 його допомогою можна

створювати стилістичні винятки серед елементів одного класу.

Стилі, що уточнюють, використовуються в основному для надання одному або декільком елементам одного класу індивідуальних властивостей. Скажемо, Ви створили клас blue - синій курсив. Але Вам знадобився жирний підкреслений текст синім курсивом. Звичайно, можна створити новий клас, але простіше описати ID.

Контекстуальні селектори

Контекстні селектори - це сполучення декількох звичайних селекторів. Стиль задається тільки елементам у заданій послідовності в залежності від каскадного порядку.

ПРИКЛАД:

Р EM {color:silver;}

У даному прикладі всі елементи ЕМ усередині елементів Р будуть мати заданий стиль.

Надання декільком елементам однакових властивостей:

Скажемо, Вам потрібно додати декільком елементам Вашої веб-сторінки однакових властивостей. У цьому випадку при визначенні селектори перераховуються через кому перед блоком властивостей.

Приклад:

hi,h2,h3,p,strong {color:green; font-style:italic;}

Bci елементи hi, h2, h3, p i strong будуть зеленими.

Псевдокласи і псевдоелементи :

Синтаксис: селектор: псевдоклас { властивості } селектор.

клас:псевдоклас { властивості } селектор:псевдоелемент {

властивості } селектор.клас:псевдоелемент {властивості}

Псевдокласи і псевдоелементи - це особливі класи й елементи, властиві CSS і автоматично обумовлені підтримуючими CSS браузерами. Псевдокласи розрізняють різні типи одного елемента, створюючи при визначенні власні стилі для кожного з них. Псевдоелементи є частинами інших елементів, задаючи цим частинам відмінний від елемента в цілому стиль.

Список псевдокласів і псевдоелементів :

Anchor Pseudo Classes - ці псевдокласи елемента <а href=" ">, що

позначає посилання. Псевдокласи цього елемента: Нпк(посилання), active (активне посилання), visited (відвіданий раніше URL), hover (псевдоклас, що виникає при піднесенні курсору до посилання, не працює в Netscape). First Line Pseudo-element - first-line. Цей псевдоелемент може бути використаний із block-level елементами (р, hi i т.д.). Він змінює стиль першого рядка цих елементів. First Letter Pseudo-element - first-letter. Схожий на first-line, але впливає не на весь рядок, а тільки на перший символ.

Приклад:

a:link, arvisited {colorrblue}

aractive {colorrred}

arhover {text-decoration:none}

У даному прикладі всі елементи Anchor (посилання) будуть синіми. При натисканні (в активному стані) поміняють цвіт на червоний, а при підведенні курсору мишки зникне підкреслення.

Примітка:

Описи декількох властивостей для одного селектора, контекстуального селектора, класу, індивідуально іменованого стилю або групи об'єднаних селекторів відокремлюються друг від друга крапкою з комою.

40.Вбудовані стилі

Вбудовані стилі (Inline Styles) вставляють у теги заголовків <Н1>...

<Нб >, абзацу <Р>, тіла <BODY>, а також у теги <DIV>, <IMG> тощо

за допомогою атрибута STYLE, в якому перелічують властивості

та їх значення. Наприклад:

<Р STYLE="font-size: 48pt; color: yellow">

Визначені у такий спосіб властивості мають найвищий пріоритет

порівняно з іншими, оскільки вони визначені безпосередньо у тегу.

Цей підхід використовують для оформлення невеликої кількості

елементів.

Приклад використання атрибута STYLE для форматування заголовка

другого рівня:

<Н2 STYLE="font-size: 48pt; font-family: Arial">Текст...</Н2>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]