Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника

Псевдо элемент :first-line

Псевдо-элемент :first-line применяет специальный стиль к первой линии параграфа. К примеру, следующий код изменит регистр первой строки параграфа:

  1.P:first-line { text-transform: uppercase }
  2.

Данное правило изменяет первую строку любого параграфа, не только первого найденного.

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

  1.<P>This is a somewhat long HTML
  2.paragraph that will be broken into several
  3.lines. The first line will be identified
  4.by a fictional tag sequence. The other lines
  5.will be treated as ordinary lines in the
  6.paragraph.</P>
  7.
  8.
будет преобразован в:
  1.THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
  2.will be broken into several lines. The first
  3.line will be identified by a fictional tag
  4.sequence. The other lines will be treated as
  5.ordinary lines in the paragraph.

Псевдо-элемент :first-line создаёт вымышленный элемент который встраивается в структуру html:

  1.<P><P:first-line> This is a somewhat long HTML
  2.paragraph that will </P:first-line> be broken into several
  3.lines. The first line will be identified
  4.by a fictional tag sequence. The other lines
  5.will be treated as ordinary lines in the
  6.paragraph.</P>
  7.

Псевдо-элемент :first-line подключается только к блочным элементам(block-inline).

Псевдо элемент :first-letter

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

<rulw> К псевдо-элементу :first-letter применимы следующие свойства: font, color, background, 'text-decoration', 'vertical-align' (если свойство 'float' установлено как 'none'), 'text-transform', 'line-height', margin, padding, border, 'float', 'text-shadow', и 'clear'. </rule>

Псевдо элемент :first-letter применяется только для трансформации частей блочных элементов (block-level).

Ниже проиллюстрирован пример перекрытия и взаимодействия псевдо-элементов:

  1.P { color: red; font-size: 12pt }
  2.P:first-letter { color: green; font-size: 200% }
  3.P:first-line { color: blue }
  4.<P>Some text that ends up on two lines</P>
  5.
Не забывайте, так как языковой псевдо-элемент :first-letter находится внутри псевдо-элемента :first-line, поэтому он наследует свойства последнего и переопределяет их если они установлены в нём.

Псевдо-элементы :before and :after

Псевдо-элементы :before and :after могут быть использованы для создания содержимого до или после содержимого других элементов.

Пример использования псевдо – элемента :before:

  1.P { color: red; font-size: 12pt }
  2.P:first-letter { color: green; font-size: 200% }
  3.P:first-line { color: blue }
  4.P:before {content: "Special! "}
  5.P:first-letter {color: #ffd800}
  6.

Псевдо элемент :selection

Данный элемент применяется для создания свойств в отношении элемента, содержимое которого выделено, например, с помощью курсор мыши:

Пример использования псевдо – элемента :before:

  1.DIV:selection {
  2.font-size:15em;
  3.}
  4.


Александр Ермаков. Хостинг - www.pwstudio.org