| 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;. Таке оголошення буде мати пріоритет над всіма іншими правилами. Особливості синтаксису створення таблиць стилів для різних елементів:
Колір і фон документа
Розглянемо використання кольору і фону, а також методи позиціонування і управління фоновим зображенням на сторінках web-сайту. Пояснимо наступні CSS-властивості:
• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background
Властивість color описує колір переднього плану елемента. Наприклад, ми хочемо зробити все заголовки документа темно-червоними. Всі заголовки позначаються HTML-елементом 1 2 3 4 5 6 7 8
скачати
|