Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31


Чувашия-это моя Россия

Ссылки на каскадные стили CSS - content.

Поддержка Браузеров

Internet Explorer Интернет эксплорер Google Chrome Google Chrome Opera Опера Firefox Firefox Safari Сафари, то есть поддерживается во всех основных браузерах.

Свойство content содержимого поддерживается во всех основных браузерах. Внимание!!! IE8 поддерживает только свойства содержимого, если !DOCTYPE указан.

Определение и использование. С помощью CSS на страницу можно добавить элементы, несуществующие в разметке страницы. Это делается с помощью псевдоэлементов :before и :after, но не менее важную роль в этом играет свойство content. Итак, свойство content используется с псевдо-элементами :before и :after для вставки сгенерированного контента, так же допускается указывать несколько значений.

Свойство content позволяет вставлять генерируемое содержание в текст на страницах Вашего сайта, которое первоначально в тексте отсутствует или Вы просто забыли об этом указать, или просто Вам захотелось как-то улучшить дизайн страницы сайта. Используется свойство content совместно с псевдоэлементами :after и :before, они соответственно задают отображение нового содержимого после или до выбранного элемента, к которому добавляются Ваш контент( текст или любое содержимое).

Свойство content определяет содержимое псевдоэлементов. Псевдоэлементы не будут отображаться, если у них не задано свойство content. Практическое применение - иконки перед ссылкам на профили в соцсетях, иконка для обозначения внешней ссылки, различные варианты буллетов.

Самое мощное и интересное здесь не в том, что производится какое-то изменение какого-то участка( элемента) страницы сайта. Вся интересная и необходимая информация в том, что свойство content, которое действует через стили CSS3 автономно работает даже при отключения JavaScripta в браузере Вашего компьютера. Всегда и при любых обстоятельствах.


Синтаксис:

   content: normal|none|counter|attr|string|open-quote|close-quote|
no-open-quote|no-close-quote|url|initial|inherit;

Описание и Использование

Значение по умолчанию: normal
наследует: нет
анимируемых: нет
Версия: CSS2
JavaScript синтаксис: Нельзя дать элемент псевдо-класса с помощью JavaScript,
но есть и другие способы, чтобы получить тот же результат.


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

Значение Описание
normal Значение по умолчанию. Задает содержимое, если указано, в нормальное состояние, которое по-умолчанию "нет" (ничто)
none Задает содержимое, если указано, ничего нет
counter Задает содержимое счетчика
attr(attribute) Устанавливает в качестве содержимого в качестве одного из селектор атрибута
string Устанавливает в качестве содержимого текст, который вы укажите
open-quote Наборы контента для открытия quote
close-quote Устанавливает содержание для закрытия quote
no-open-quote Удаляет открытие цитаты из контента, если указанны
no-close-quote Удаляет закрывающую кавычку из содержания, если указанные
url(url) Задает содержимое какой-то массовой информации (изображения, звук, видео, и т.д.)
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


Пишем программу:

< !DOCTYPE >
< html>
< head>
< style>
a#rr:after {content: " (" attr(href) ")";}
< /style>

< a id="rr" href="http://seosait21.ru/">< /a> содержит удивительные страницы открытий в понимании сути слов.

< p>< b>Внимание!!!< /b> IE8 поддерживает свойство content, если только !DOCTYPE уточняется.< /p> < /body> < /html>

Результат программы:

иконка содержит удивительные страницы открытий в понимании сути слов.

Внимание!!! IE8 поддерживает свойство content, если только !DOCTYPE уточняется.




seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: