Понеділок, 25.11.2024, 10:36
Головна Реєстрація RSS
Вітаю Вас, Гість
Меню сайту
Реклама
Категорії розділу
Архітектура ПК [1]
Архітектура та експлуатація персонального комп'ютера
СПЗ [12]
Системне програмне забезпечення та операційні системи
Комп'ютерна графіка [25]
КСМ [28]
Комп'ютерні системи та мережі
ІСІТО [1]
Інформаційні системи і технології обліку
Бухгалтерський облік [0]
АМтП [10]
Алгоритмічні мови та програмування
Копирайт рерайт [1]
СУБД [18]
Системи управління базами даних
ОКТ практикум [2]
Основи комп'ютерних технологій практикум
Інформатика (практ) [1]
інформатика практикум, практичні заняття
ТіОБВ [61]
Технологія і організація будівельного виробництва
ОСАПр [6]
Основи систем автоматизованого проектування, AutoCAD, ArchiCAD
ТіОБВ (заочники) [1]
Пошук
Статистика
Яндекс.Метрика
Онлайн всього: 2
Гостей: 2
Користувачів: 0
Форма входу
Календар
«  Грудень 2013  »
ПнВтСрЧтПтСбНд
      1
2345678
9101112131415
16171819202122
23242526272829
3031
Архів записів
Головна » 2013 » Грудень » 4 » Псевдоелементи в CSS
15:20
Псевдоелементи в CSS
Псевдоелементи дозволяють задати стиль логічних елементів, що не визначені в дереві елементів документа, а також генерувати вміст, якого немає у вихідному коді тексту. Наприклад, об'єктна модель документа не пропонує зручного механізму для доступу до першого символу тексту, тому псевдоелементи дозволяють змінити стиль недоступного іншим чином елемента. Синтаксис використання псевдоелементів наступний.

Селектор:Псевдоелемент{Опис правил стилю}

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

.Foo:first-letter {color: red} .Foo:first-line{font-style: italic}

Зауваження

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

Далі перераховані всі псевдоелементи, їх опис та властивості.

after

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

Приклад 17.1. Застосування псевдоелемента after

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
 <head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<title>Псевдоелементи</title>
 <style type="text/css">
 P.new:after {
 content: " - Новйо!"; /* Додаємо після тексту параграфа */
 } 
 </style>
 </head>
 <body>
 <p class="new">Ловля лева в пустелі за допомогою методу золотого
 перетину.</p>
 <p>Метод ловлі лева простим перебором.</p> 
</body>
 </html>
Результат прикладу показано на рис. 17.1.

Рис. 17.1. Додавання тексту до параграфу за допомогою after

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

Псевдоелементи after і before, а також стильова властивість content не підтримуються браузером Internet Explorer ні в одній його версії.

before

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

Приклад 17.2. Використання псевдоелемента before

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<title>Псевдоелементи</title>
 <style type="text/css">
 UL {
 padding-left: 0; /* Забираємо відступ зліва */
 list-style-type: none; /* Ховаємо маркери списку */
 } 
LI:before {
 content: "\20aa "; /* Додаємо перед елементом списка символ в юнікоді */ 
} 
</style>
 </head>
 <body>
 <ul>
 <li>Том</li>
 <li>Джері</li>
 <li>Нео</li>
 <li>Малий</li>
 </ul> 
</body> 
</html>
Результат прикладу показаний нижче (рис. 17.2).

Рис. 17.2. Зміна виду маркерів за допомогою before

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

first-letter

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

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

Розглянемо приклад створення виступаючого ініціалу. Для цього потрібно додати до селектора P псевдоелемент first-letter і встановити бажаний стиль ініціал. Зокрема, збільшити розмір тексту і поміняти колір тексту (приклад 17.3).

Приклад 17.3. Використання псевдоелемента first-letter

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Псевдоелементи</title> 
<style type="text/css"> 
P {
 font-family: Arial, Helvetica, sans-serif; 
/* Гарнітура шрифта основного текста */
 font-size: 90%; /* Розмір шрифта */ 
color: black; /* Черний колір тексту */
 }
 P:first-letter {
 font-family: 'Times New Roman', Times, serif;
 /* Гарнітура шрифту першої букви */ 
font-size: 200%; /* Розмір шрифту першого символу */ 
color: red; /* червоний колір тексту */
 }
 </style> 
</head>
 <body>
 <p>Промінь ліхтарика висвітив старі скрипучі східці, якими не далі як п'ять хвилин тому в 
будинок піднявся Паша. Оля обережно прочинила двері і посвітила усередину будинку.
 Промінь світла, немов знехотя, пробивався крізь тугу завісу з мороку й пилу. </p> 
<p>Погляд Олі опустився на підлогу, і вона скрикнула.
У порожньому приміщенні нікого не було, і лише на підлозі валявся порваний 
черевик.</p> 
</body> 
</html>
Результат прикладу показаний нижче (рис. 17.3).

Рис. 17.3. Створення виступаючого ініціал

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

first-line

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

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

У прикладі 17.4 показано використання псевдоелемента first-line стосовно до абзацу тексту.

Приклад 17.4. Виділення першого рядка тексту

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Псевдоелементи</title> 
<style type="text/css">
 P:first-line {
 color: red; /* Червоний колір тексту */
 font-style: italic; /* Курсивний напис */ 
} 
</style>
 </head>
 <body> 
<p>Цікаво, а чи існує спосіб дійсно практичного застосування 
властивості first-line? Ні, немає такого, щоб можна було б показати, що це можливо, а щоб воістину 
захопило дух від краси рішення, загорілися очі від прихованих перспектив, після чого залишається 
тільки сказати собі, що ось це ось, це саме зробити по-іншому, також витончено і ефектно просто
неможливо.</p> 
</body> 
</html>
Результат прикладу показано на рис. 17.4.

Рис. 17.4. Результат застосування псевдоелемента first-line

У даному прикладі перший рядок виділяється червоним кольором і курсивним накресленням. Зверніть увагу, що при зміні ширини вікна браузера, стиль першого рядка залишається постійним, незалежно від числа входять до неї слів.
Категорія: КСМ | Переглядів: 832 | Додав: Gryzley | Рейтинг: 0.0/0
Всього коментарів: 0
Ім`я *:
Email *:
Код *: