1   2   3   4   5   6   7   8
Ім'я файлу: Заняття 5.docx
Розширення: docx
Розмір: 721кб.
Дата: 22.02.2021
скачати

, не зачіпаючи решта абзаців.

h1 p - вибере всі абзаци, які є сестринськими по відношенню до будь-якого заголовку h1 і йдуть після нього.
Селектор Атрибуту. Селектори атрибутів дозволяють форматувати елементи на основі вибірки будь-яких атрибутів, що містяться в них або значень атрибутів, наприклад:

[атрибут] - вибирає всі елементи, для яких задано вказаний атрибут.

img [alt] - вибирає всі картинки, що містять атрибут alt.

img [title = "flower"] - вибирає всі картинки, назва яких містить слово flower.
Псевдокласи

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

a: link – описує стиль невідвідуваного посилання.

a: visited - описує стиль вже відвіданого посилання.

a: hover - описує вигляд елементу, над яким проходить вказівник мишки.

a: focus - описує вигляд елементу, над яким знаходиться (сфокусований) вказівник.

a: active - описує вигляд елементу, який активовано користувачем.

Структурні псевдокласи. Структурні псевдокласи форматують дочірні елементи відповідно до зазначеного параметра в дужках, наприклад:

:nth-child (odd) - вибирає непарні дочірні елементи.

:nth-child (even) - вибирає парні дочірні елементи.

:nth-child (3n) - вибирає кожен третій елемент серед дочірніх.
Структурні псевдокласи типу. Вказують на конкретний тип дочірнього тегу:

:nth-of-type () - вибирає елементи за аналогією з: nth-child (), при цьому бере до уваги тільки тип елемента.

:first-of-type - дозволяє вибрати перший дочірній елемент.

:last-of-type - вибирає останній дочірній елемент конкретного типу.

:nth-last-of-type () - вибирає елемент заданого типу в списку елементів відповідно до зазначеного місцеположенням, починаючи з кінця.

:only-of-type - вибирає єдиний елемент зазначеного типу серед дочірніх елементів батьківського елементу.
Псевдоелементи. Псевдоелементи не є елементами сторінки, їх використовують для додавання вмісту, який генерується за допомогою властивості content, і для зміни зовнішнього вигляду частини елементу:

:before – додає певний вміст перед елементом.

:after - додає певний вміст після елемента.
Комбінації селекторів

Щоб домогтися більш чіткого вибору елементів для форматування, можна не обмежуватися завданням одного типу селектора, а використовувати комбінації селекторів, наприклад:

a [href] [title] - вибере всі посилання, для яких задані атрибути href і title;

img [alt * = css]: nth-of-type (even) - вибере всі парні картинки, альтернативний текст яких містить слово css.
Угруповання селекторів

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

h1, h2, h3, h4 {color: tomato; background: white;}
Принцип каскадування і специфічність правила

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

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

Значення специфічності складається з чотирьох частин: 0, 0, 0, 0. Специфічність селектора визначається наступним чином:

• для id додається 0, 1, 0, 0;

• для class додається 0, 0, 1, 0;

• для кожного елементу і псевдоелемента додається 0, 0, 0, 1;

• для стилю, який доданого безпосередньо до елементу - 1, 0, 0, 0;

• універсальний селектор не має специфічності.
h1 {color: lightblue;} /* специфічність 0, 0, 0, 1 */

em {color: silver;} /* специфічність 0, 0, 0, 1 */

h1 em {color: gold;} /* специфічність: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2 */

#sidebar {color: orange;} /* специфічність 0, 1, 0, 0 */

li # sidebar {color: aqua;} /* специфічність: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1 */
В результаті до елементу застосуються ті правила, специфічність яких більше, наприклад, якщо на елемент діють дві специфічності зі значеннями 0, 0, 0, 2 і 0, 1, 0, 1, то виграє друге правило.

Вагу правила також можна задати за допомогою ключового слова !important;, яке додається після значення властивості, наприклад, font-weight: bold!Important;. Таке оголошення буде мати пріоритет над всіма іншими правилами.
Особливості синтаксису створення таблиць стилів для різних елементів:

    1. Колір і фон документа

Розглянемо використання кольору і фону, а також методи позиціонування і управління фоновим зображенням на сторінках web-сайту. Пояснимо наступні CSS-властивості:

• color

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

• background

Властивість color описує колір переднього плану елемента. Наприклад, ми хочемо зробити все заголовки документа темно-червоними. Всі заголовки позначаються HTML-елементом


1   2   3   4   5   6   7   8

скачати

© Усі права захищені
написати до нас