content | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Пятница, 09.12.2016
Главная » Справочник CSS3 » Свойства контента


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


content | Свойство CSS

Свойство content добавляет генерированный контент.




Свойство content добавляет в начало или конец текста заранее установленные текстовые значения.Масса дополнительных значений позволяют точно определить устанавливаемый сценарий генерирования.Дополнительно,можно применять свойство quotes если вы хотите дополнить генерируемый контент вариантами скобок.Обязательно следует применять псевдоэлементы :after и :before по сути именно с их помощью и происходит генерация,в начало или конец контента.Свойство применимо к псевдоэлементам :after и :before,создано в версии CSS2 но проходит валидацию согласно версии CSS3.




Дополнительные свойства content


Свойство
Описание
counter-incrementУстанавливает интервал показания счётчиков
counter-resetСбрасывает установленное количество счётчиков
quotesПри необходимости добавляет вариант скобок в генерированный контент


Дополнительные псевдоэлементы content


:afterГенерирует значения content в конец существующего контента
:beforeГенерирует значения content в начало существующего контента


Дополнительные значения content


Значение
Описание
noneКонтент не генерируется
normalКонтент находится в нормальном состоянии но не генерируется
counterКонтентом выступают показания счётчика
attr(атрибут)Контентом выступают значения атрибутов
URLКонтентом выступает ссылка на элементы типа изображения
open-quoteКонтентом выступает открывающая ковычка,при этом указывается тип кавычки в виде кода свойства quotes
close-quoteКонтентом выступает открывающая ковычка,при этом указывается тип кавычки в виде кода свойства quotes
no-open-quotesОтменяет установку открывающей кавычки
no-close-quotesОтменяет установку закрывающей кавычки
inheritНаследуется значение родителя


Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство content</title>
<meta charset="utf-8">
<style type="text/css">
<! --
div {
background:#636363;
}
div:after {
content:"Эта строка добавлена в конец";
color:red;
text-decoration:blink;
font-size:20px;
}
div:before {
content:"Эта строка добавлена в начало";
color:yellow;
text-decoration:blink;
font-size:20px;
}
p {
font-size:16px;
color:green;
}
-- >
</style>
</head>
<body>
<center>
<div><p>Это текст</p></div>
</center>
</body>
</html>

Пример в действии




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/CSS21/generate.html#content
Категория: Свойства контента | Добавил: IZOTOP (07.04.2012) | Автор: Меренков Михаил W
Просмотров: 813 | Теги: css, свойство, style, content, контента | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]