Псевдоелементи в CSS

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


Селектор:Псевдоелемент{Опис правил стилю}
Спочатку слідує ім'я селектора, потім пишеться двокрапка, після якого йде ім'я псевдоелемента. Кожен псевдоелемент може застосовуватися тільки до одного селектору, якщо потрібно встановити відразу декілька псевдоелементів для одного селектора, правила стилю повинні додаватися до них окремо, як показано нижче.
.Foo:first-letter {color: red} .Foo:first-line{font-style: italic}
Псевдоелементи не можуть застосовуватися до внутрішніх стилів, тобто - вони застосовуються тільки до таблиці пов'язаних або глобальних стилів.

After


Застосовується для вставки призначеного контенту після елемента. Цей псевдоелемент працює спільно зі стильовою властивістю content, який визначає вміст для вставки. У прикладі показано використання псевдокласа after для додавання тексту в кінець абзацу.


У даному прикладі до вмісту абзацу з класом new додається додаткове слово, яке виступає значенням параметра content.


Before

За своєю дією before аналогічний псевдоелементу after, але вставляє контент до елемента. У прикладі показано додавання маркерів свого типу до елементів списку за допомогою приховування стандартних маркерів і застосування псевдокласа 

Псевдоелемент before

У даному прикладі псевдокласс before встановлюється для селектора LI визначає елементи списку. Додавання бажаних символів відбувається шляхом завдання значення властивості content. В якості аргументу не обов'язково виступає текст, можуть застосовуватися також символи Unicode.

First-letter

Визначає стиль першого символу в тексті елемента, до якого додається. Це дозволяє створювати в тексті буквиці і виступаючий ініціал.
Зауваження:
Буквиця являє собою збільшену першу літеру, базова лінія якої нижче на одну або кілька рядків базової лінії основного тексту. Виступаючий ініціал - збільшена велика буква, базова лінія якої збігається з базовою лінією основного тексту.
Приклад створення виступаючого ініціалу: для цього потрібно додати до селектора P псевдоелемент first-letter і встановити бажаний стиль ініціал. Зокрема, збільшити розмір тексту і поміняти колір тексту

 Псевдоелемент first-letter
У даному прикладі змінюється шрифт, розмір і колір першої літери кожного абзацу тексту.

first-line

Визначає стиль першого рядка блокового тексту. Довжина цього рядка залежить від багатьох факторів, таких як використовуваний шрифт, розмір вікна браузера, ширина блоку, мови і т.д.
Зауваження:
До псевдоелементу first-line можуть застосовуватися не всі стильові властивості. Допустимо використовувати параметри, пов'язані з шрифтом, зміною кольору тексту і фону, а також: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align і word-spacing.


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




Немає коментарів:

Дописати коментар