|Web Учебник | Самоучитель по HTML |Самоучитель по PHP + MySql |Основы PhotoShop |Контакты. |

Генерируемое содержимое в Каскадных таблицах стилей.

Часто веб-мастерам необходимо выводить на дисплей какой либо контент не из дерева документа, а просто генерируя его.

Генерируемое содержимое в CSS можно вставить:
1) При помощи свойства display:list-item, т.е. элементам списков;
2)Для звуковых таблиц стилей при помощи свойств: cue, cue-before и cue-after, более подробно позоворим о них когда будем проходить CSS для звуковых браузеров;
3)И при помощи псевдоклассов :before и :after.
На этой странице рассмотрим последний способ.

Псевдоэлементы :before и :after вствляют генерируемое содержимое не из дерева документа, :before перед боксом, а :after после бокса. Например P:before{content: "Начало обзаца: "} P:after{content: "Конец обзаца."}, в данном случае псевдокласс :before перед каждым параграфом выведет текст "Начало обзаца: ", а псевдокласс :after после каждого абзаца выведет текст "Конец обзаца.", пример не яркий, но понятный.

При использовании псевдоклассов :before и :after браузеры должны игнорировать свойства правил position и float, но допускают правило display.

Расмотрим значения для свойства content:
1) {content: "текст"}, можно вставить любой текст помещенный в двойные или одинарные кавычки, за исключением того что внутри двойных кавычен не может быть других двойных кавычек, а в одинарных одинарных, для этого нужно их экранировать обратным сплешем, {content: "не "правильный" вариант "}, {content: " \"правильный\" вариант "}, тоже и с одинарными. Знаки табуляции, перенос строки, возрат каретки в псевдоклассах не используются.
2){content: url("soundtrek.wav")}, при помощи генерированого содержимого можно вывести какой либо объект, наприрмер картинку или музыкальный файл, при этом если тип файла не распознает браузер то последний обязан его проигнорировать. При использовании объектов нужно указывать тип носителя, которые мы рассмотрим немного позже.
3){content: counter} - так-же мы можем вывисти на экран счетчики, о которых поговорим на следующейстарнице.
4){content: open-quote} Выводит открывающую кавычку.
5){content: close-quote } Выводит закрывающую кавычку.
6){content: no-open-quote } Не выводит открывающую кавычку.
7){content: no-close-quote } Не выводит закрывающую кавычку.
8){content: attr(X)}, вообще не возможно получить значение атрибута у другого тега, так-же можно сказать что нельзя задать атрибуты ALT и TITLE для генерируемого содержимого, за исключением этого правила, например мы тегу "P" присваиваем атрибут ALT="описание" и создаем правило: P:before{content: url("image.jpg") attr(alt)}, По идее перед каждым параграфом браузер должен вывести на экран картинку "image.jpg", но если он не поддерживает этот тип носителей, то в данном случае выведет текстовую часть из атрибута ALT.

Еще я вам рекомендую перечитать спецификацию по CSS, о взаимодействии ген.содежимого с элементами display:compact и display:run-in.
И еще я опустил информациию об каквычках, более детальную информацию вы найдете в спецификации.

 

                   Перейти к выбору следующей страницы
 

Добавить в закладки
Добиться абсолютной межбраузерности для механизма добавления в закладки не существует ни на каких языках!!! А для браузера "Chrome" не работают вообще ни какие механизмы!!!
Потому это лучше всего делать в ручную при помощи одновременого нажатия клавиш Ctrl и D , после чего нужно нажать готово(добавить). Такой "механизм работает всегда и везде!!!