content / CSS3

content / CSS3

Описание возможного использования свойства content и его значений с редактируемыми демо примерами помогающими лучше понять как оно работает.

Описание значений свойства content CSS3

Все значения могут сгенерированы элементу свойствами :before (в начало) и :after (в конец).

Значение content в виде текста

Элементу могут быть добавлены любые текстовые значения, добавленный текст не конвертируется и отображается как есть. Текстовые значения должны помещаться в кавычки, двойные или одинарные.

Пример использования значения в виде текста

|

<style>
#content--text {
color:blue; 
font-weight:bold; 
font-size:2em;
}
#content--text:before{
content:"перед"
}
#content--text:after{
content:"после"
}
</style>
<div id="content--text"> | </div>

Значение content в виде символа иконки

Символы HTML имеют значения для использования в свойстве content, выбрать подходящий символ можно при помощи генератора символов HTML и CSS. Значения символов должны помещаться в двойные или одинарные кавычки.

Возможны случаи конвертирования символов вместо реального отображения иконки, в такой ситуации стили символов должны быть подключены во внешнем файле, в общей таблице стилей CSS.

Пример использования значения в виде символа иконки

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Значение content с пустыми кавычками для блока

Используя пустые кавычки Вы можете добавить свойств для создания блоков, для примера используется возможность сделать фигуру в виде сердца.

Пример использования пустых кавычек для блоков

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Значение content в виде url

Значение url для добавления адреса в начало или конец элемента. Адресом может быть ссылка на страницу или изображение, а так же Data URI адрес.

Пример использования значения url

Адаптивный сайт
<style>
a#content--url {
text-decoration:none
}
#content--url:before{
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlUlEQVQ4jc3SwQkCQQyF4U8RsRSxG23CumxAb2IDYgdiD+J5ZVfUw+7C6IIZ9yD+EBhI3iSPhH9ihQKPIIqmtsMlQ9zGuRWNkg+WmGMcTFpi84WzzwyS9wxTDAPNDacmXjigEvuvsG9FabdhRvdOXR8L92b8Y0azmHSChXqNk0BzVa9x/Z7odUip3636SCJK7DLqfsQT93w9G2KQozIAAAAASUVORK5CYII=) " aTmpl";
color:#ddd
}
</style>
<a href="http://atmpl.ru/" id="content--url"> Адаптивный сайт</a>

Значение content в виде counter

Значение counter свойства content добавляет счётчик с установленными параметрами и выводимыми данными. Параметры счётчика указываются в свойствах counter-reset и counter-increment самих счётчиков может быть несколько.

Параметры счётчика могут быть переопределены свойством :nth-child / CSS3, свойство может оказывать радикальное влияние на показания счётчиков, разумеется с его помощью можно извлечь дополнительный запас настройки.

Свойство CSS3 counter-reset

Свойство counter-reset идентифицирует счётчик устанавливая ему уникальное имя, актуально при добавлении свойства counter-increment.

counter-reset: none;
Отсутствие счётчика
counter-reset: name;
Устанавливает уникальное имя счётчика для элемента, имён может быть несколько.
counter-reset:inherit;
Уникальное имя будет наследовано из родителького элемента.

Свойство CSS3 counter-increment

Свойство counter-increment инициализирует счётчик по имени указанном в свойстве counter-reset, при добавлении числовых значений отсчёт ведётся от указанного числа с последующей последовательностью геометрической прогрессии. Если установлено 3, следующими значениями счётчика будут 6, 9, 12...

counter-reset: none;
Отсутствие данных счётчика
counter-reset: name 1;
Устанавливает уникальное имя счётчика для элемента, и исходное значение для последующей последовательности вывода значений.
counter-reset:inherit;
Уникальное имя будет наследовано из родителького элемента.

Значения типа данных счётчика

Вы можете использовать значения тип отображаемых данных счётчика в любой комплектации.

decimal
decimal-leading-zero
lower-roman
upper-roman
georgian
armenian
lower-latin
lower-alpha
upper-latin
upper-alpha
lower-greek

Применение свойства counter для <dl>

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Применение свойства counter для 3 заголовков

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Применение свойства counter с :nth-child

Попробуйте испытать воздействие свойства :nth-child на показание счётчиков, предлагается пример со смещёнными значениями.

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Значение content в виде attr

Значение attr генерирует содержимое указанного атрибута.

aTmpl
<style>
a#content--link { font: bold italic 2em serif }
a#content--link:before { content: url(http://atmpl.ru/favicon.ico) " "; }
a#content--link:after { color: #ddd;content: " " attr(data-description) }
</style>
<a id="content--link" href="http://atmpl.ru/" data-description="Адаптивный сайт">aTmpl</a>

Значение content в виде open-quote и close-quote

Значение open-quote генерирует открывающую ковычку или символ элементу, а close-quote. Стиль используемой кавычки или символа устанавливается свойством quotes, код для ковычек и символов можно получить воспользовавшись генератором символов HTML и CSS.

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Значение content в виде no-open-quotes и no-close-quote

Значение no-open-quotes запрещает показ отрывающей кавычки, а no-close-quote отменяет закрывающую ковычку.

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.


Рейтинг: 5.0/5 из 1



Добавлено Автор Ник Источник Просмотров Комментариев Теги
09-10-2015 Михаил Меренков aTmpl © 572 0 CSS3, content