content

Internet Explorer | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.6 | 10.0 | 10.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Ні | Так | Так | Частк. | Частк. | Частк. | Так | Так | Так | Так | Так | Так | Так | Так

Коротка інформація

CSS | CSS2, CSS2.1
Значення за умовчанням | Порожній рядок
Наслідує | Ні
Застосовується | До псевдоелементів before і after
Аналог HTML | Ні
Посилання на специфікацію | http://www.w 3.org/TR/CSS21/generate.html#content

Опис

Властивість content дозволяє вставляти генерований зміст в текст веб-сторінки, яке первинне в тексті відсутній. Застосовується спільно з псевдоелементами after і before, вони відповідно вказують відображати новий вміст потім або до елементу, до якого додаються.

Синтаксис

content: рядок | attr(параметр) | open - quote | close - quote | no - open - quote | no - close - quote | url | counter | normal | none | inherit

Значення

Рядок Текст, який додається на веб-сторінку, рядок при цьому повинен братися в подвійні або одинарні лапки. Допускається використовувати юникод для вставки спецсимволів. Спецсимволи HTML які починаються з амперсанда (&sect; наприклад), відображатимуться як є, тобто простим текстом (&sect;, а не §).

attr(параметр) Повертає рядок, який є значенням параметра тега вказаного в дужках. Наприклад, IMG: after {content: attr(href)} додасть після зображення його адресу, тобто значення параметра href. Якщо вказаного параметра немає, то повернеться порожній рядок.

open - quote Вставляє відкриваючу лапку, тип якої встановлюється за допомогою стильової властивості quotes.

close – quote Вставляє закриваючу лапку.

no - open - quotes Відміняє додавання відкриваючої лапки.

no - close - quote Відміняє додавання закриваючої лапки.

url Абсолютна або відносна адреса об'єкту, що вставляється. Якщо вказаний файл браузер не може відобразити, то значення ігнорується.

counter Виводить значення лічильника, заданого властивістю counter, - reset.

none Не додає ніякого змісту.

normal Задається як none для псевдоелементів before і after.

inherit Наслідує значення батька.

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>content</title>

<style type="text/css">

SPAN.tag {

color: navy; /* Колір тексту */

font - family: monospace; /* Моношириный шрифт */

quotes: "<" ">"; /* Встановлюємо вид лапок */

}

SPAN.tag: before {

content: open - quote; /* Додаємо перед текстом відкриваючу лапку */

}

SPAN.tag: after {

content: close - quote; /* Додаємо після тексту закриваючу лапку */

}

</style>

</head>

<body>

<p>Тег <span class="tag">DEL</span> використовується

для виділення тексту, який був видалений в новій версії документу.</p>

</body>

</html>

Результат цього прикладу показаний ні мал. 1.

Мал. 1. Застосування властивості content

Браузери

Firefox до другої версії включно і Opera до версії 9.2 включно не підтримують значення none. Safari до версії 3.1 не підтримує значення none і normal.

Браузер Opera починаючи з сьомої версії і Safari 3, не вимагають використання псевдоелементів before і after і допускають застосування content до усіх елементів.