Подскажите что это за элементы и как их использовать

:after
:before
:first-child
:first-letter
:first-line

http://www.w3.org/TR/2003/WD-CSS21-20030915/

Вообще-то мне интересно, как это применяется на практике. То есть просил поделиться опытом работы в оформлении, так как я это никогда не пользовался..

И зачем спрашивать у Яндекса если есть специлизированный форум?

Уважаемый К!

Если я спрашиваю, то я или не знаю(!), или мне непонятно(!), или ищу альтернативное решение(!)

А отослать к спецификации - это уже последнее дело. Любой обсуждаемый вопрос на форуме можно найти в той или иной спецификации.

-----------------
прошу прощения за флейм..

Это сообщение отредактировал(а) Red Dragon - 27.5.2004, 21:15

Надеюсь, что Я тебе помог...

Читай.


first-line. Этот псевдоэлемент может быть использован с block-level элементами (p, h1 и т.д.). Он изменяет стиль первой строки этих элементов.



Псевдокласс :first-child соответствует элементу, который является первым ребенком данного элемента. В следующем примере субъектами селектора будут те элементы P, которые являются первым ребенком элемента DIV:

DIV > P:first-child { text-indent: 3em }
В результате первый элемент P внутри DIV в следующем фрагменте будет выводиться с отступом в начале текста

<P>Последний абзац перед примечанием.</P>
<DIV class="note">
<P>Первый абзац внутри примечания.</P>
</DIV>
а такой же элемент P в этом фрагменте отображается без отступа, т. к. не является первым ребенком DIV:

<P>Последний абзац перед примечанием.</P>
<DIV class="note">
<H2>Примечание.</H2>
<P>Первый абзац внутри примечания.</P>
</DIV>
Следующее правило указывает, что элемент EM, содержащийся в элементе P, который является первым ребенком, должен отображаться полужирным шрифтом:

P:first-child EM { font-weight: bold }
Следующие два селектора эквивалентны между собой:

* > A:first-child /* A является первым ребенком любого элемента */
A:first-child /* То же самое */


:first-child -- Не поддерживается Эксплорером и Нэтскейпом



Псевдоэлемент :first-line
Псевдоэлемент :first-line применим к любому блочному элементу и задает стиль отображения его первой строки. Например, следующий фрагмент HTML-документа

<STYLE>
P:first-line { text-transform: uppercase }
</STYLE>

<P>Это длинный абзац, который будет разбит
обозревателем на несколько строк.
При этом первая строка абзаца будет отображаться
прописными буквами, как это задано в
таблице стилей.</P>
будет отображаться так:

ЭТО ДЛИННЫЙ АБЗАЦ, КОТОРЫЙ БУДЕТ РАЗБИТ ОБОЗРЕВАТЕЛЕМ НА НЕСКОЛЬКО СТРОК. ПРИ ЭТОМ
первая строка абзаца будет отображаться прописными буквами, как это задано в таблице стилей.
К данному псевдоэлементу применимы только следующие свойства: свойства шрифтов, свойства цвета, свойства фона, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, text-shadow и clear.

Эксплорер -- Соответствие стандарту (5.5+)
Нэтскейп -- Не поддерживается (4.0+)

Псевдоэлемент :first-letter применим к любому блочному элементу и задает стиль отображения его первой буквы. Например, следующий фрагмент HTML-документа

<STYLE>
P:first-letter { font-size: 200%; font-weight: bold }
</STYLE>

<P>Это абзац, первая буква которого
будет выделена обозревателем.</P>
будет отображаться так:

Это абзац, первая буква которого будет выделена обозревателем.
К данному псевдоэлементу применимы только следующие свойства: свойства шрифтов, свойства цвета, свойства фона, свойства границ, свойства заполнителей, свойства рамок, text-decoration, vertical-align (только если float равно none), text-transform, line-height, float, text-shadow и clear.

Эксплорер -- Соответствие стандарту (5.5+)
Нэтскейп -- Не поддерживается (4.0+)



Псевдоэлементы :before и :after
Псевдоэлементы :before и :after используются для вставки автоматически генерируемого содержимого соответственно перед или после указанного элемента.
Место вставки текста определяется псевдоэлементом в селекторе данного элемента — :before означает вставку перед элементом, а :after после него. Способ вставки (текстовый, блочный или маркер) задается значением свойства display. Например, следующая декларация задает вывод текста "Конец документа" в центре последней строки экрана.

BODY:after {
content: "Конец документа";
display: block;
margin-top: 2em;
text-align: center;
}

Эксплорер -- Не поддерживается
Нэтскейп -- Не поддерживается

Много написал однако...

А, это плохо или хорошо что много написал, или что-то лишнее???

Напротив, - приятно почитать интересные вещи...

Если стало интересно, то могу открыть раздел...

Полное описание CSS level 2 на русском языке можете найти тут: http://loc.stack.ru/projects/CSS2/

IZ@TOP - спасибо огромное...

Цитата(IZ @ 23.6.2004, 21:06)

Полное описание CSS level 2 на русском языке можете найти тут: http://loc.stack.ru/projects/CSS2/

Может там и полный, но искать нужно долго... Не проще ли спросить у людей, которые это знают и с удовольствием помогут...

Но все равно спасибо за ссылочку...

Это сообщение отредактировал(а) Desdichado - 26.8.2004, 13:07

http://ln.com.ua/~openxs/articles/smart-questions-ru.html

Тут и про CSS, и про javascript...

Не совсем то, вот точнее - http://ln.com.ua/~openxs/articles/smart-qu...ns-ru.html#rtfm