phpjsJqueryhtmlcssblog

content css/использование/примеры

"content css/использование/примеры" используются в или в . "Content css" добавляет содержание, которое визуально отображается на экране монитора, не добавляясь к дереву документа DOM

Подробно о "content в css"

1. Синтаксис "content"
2. Пример использования content в css

Скопировать ссылку



Синтаксис "content"

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


Пример синтаксиса "content"

Пример синтаксиса "content" возьмем отсюда :

селектор:after {

content: "вставляемый контент";

}

Значения свойства content:




Строка : синтаксис "content"

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




attr(параметр) : синтаксис "content"

Возвращает строку, которая является значением параметра тега указанного в скобках. Например, a:after {content:attr(href)} добавит после ссылки её адрес, т.е. значение атрибута href. Если указанного атрибута нет, вернется пустая строка.




open-quote : синтаксис "content"

Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes.




close-quote : синтаксис "content"

Вставляет закрывающую кавычку.




no-open-quotes : синтаксис "content"

Отменяет добавление открывающей кавычки.




no-close-quote : синтаксис "content"

Отменяет добавление закрывающей кавычки.




url : синтаксис "content"

Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется.




counter : синтаксис "content"

Выводит значение счетчика, заданного свойством counter-reset.




none : синтаксис "content"

Не добавляет никакое содержание.




normal : синтаксис "content"

Задается как none для псевдоэлементов :before и :after.




inherit : синтаксис "content"

Наследует значение родителя.

Скопировать ссылку



Пример использования content в css

Для того, чтобы создать "пример использования content в css" вам потребуется:


Какой-то физический элемент дерева Dom-a? пусть это будет div

Присвоим ему class

<div class=content_example>Тут текст</div>

Пропишем свойства стилей с использованием "content" и положим во внутрь "content" произвольный текст, и покрасим его в красный

<style>
.content_example:after {
content: ' <- Пример использования content в css';
color: red;
}
</style>


Соберем весь код:

Код примера использования content в css/html

Css для примера использования content

<div class=content_example>Тут текст</div>

Css стили для content

<style>

.content_example:after {

content: ' <- Пример использования content в css';

color: red;

}

</style>

Пример использования content в css/html

Разместим выше приведенный "Код примера использования content в css/html" прямо здесь:

Тут текст

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---