Связь и интернет Архив Программирование
   
Сделать стартовойСделать закладку            
   ПОИСК  
   
Главная / CSS / Каскадные таблицы стилей, уровень 1. /
8  Perl
8  PHP
8  JavaScript
8  HTML
8  DHTML
8  XML
8  CSS
8  C / C++
8  Pascal и Delphi
8  Турбо Ассемблер
8  MySQL
8  CASE-технологии
8  Алгоритмы
8  Python
8  Обратная связь
8  Гостевая книга
Новости о мире


Псевдо-классы и псевдо-элементы - Программирование от RIN.RU
Псевдо-классы и псевдо-элементы



Типографские псевдо-элементы           Назад


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


Ядро CSS1: UA могут игнорировать все правила с ":first-line" или ":first-letter" в селекторе, или поддерживать только подмножество свойств псевдо-элементов. (см. этот раздел )


Псевдо-элемент "first-line"           Назад


Псевдо-элемент "first-line" используется для применения особых стилей к первой строке элемента в соответствии с форматированием на холсте:


<STYLE TYPE="text/css">
P:first-line { font-style: small-caps }
</STYLE>
<P>The first line of an article in Newsweek.


В текстовом UA это могло бы быть отформатировано так:


THE FIRST LINE OF AN
article in Newsweek.


Фиктивная последовательность тэгов в этом случае такова:


<P>
<P:first-line>
The first line of an
</P:first-line>
article in Newsweek.
</P>


Концевой тэг "first-line" вставляется в конец первой строки в соответствии с тем, как документ форматируется на холсте.


Псевдо-элемент "first-line" может применяться только к блочным элементам.


Псевдо-элемент "first-line" соответствует строчным элементам за некоторыми исключениями. Только следующие свойства могут быть применены к элементу "first-line": свойства шрифтов, свойства цвета и фона, "word-spacing", "letter-spacing", "text-decoration", "vertical-align, "text-transform" "line-height" и "clear" .


Псевдо-элемент "first-letter"           Назад


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


Следующий пример позволяет создать эффект буквицы, когда высота первой буквы равна высоте двух строк:


<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
</BODY>
</HTML>


Если некий текстовый UA поддерживает псевдо-элемент "first-letter" (что скорее всего не так), предыдущий пример мог бы быть отформатирован следующим образом:


___
  |   HE FIRST few
  |   words of an
article in the
Economist.


Фиктивная последовательность тэгов в этом случае выглядит так:


<P>
<SPAN>
<P:first-letter>
T
</P:first-letter>he first
</SPAN>
few words of an article in the Economist.
</P>


Обратите внимание, что тэг псевдо-элемента "first-letter" заключает контент (т.е. первую букву), в то время как начальный тэг псевдо-элемента "first-line" вставляется сразу после тэга элемента, к которому он применяется.


UA сам определяет, какие символы включаются в элемент "first-letter". Обычно кавычки, предшествующие первой букве, должны включаться:


||      /\        bird in
       /   \       the hand
      /----\      is worth
     /       \      two in
the bush," says an
old proverb.


Когда параграф начинается с другого знака пунктуации (например скобка) или других символов, которые не являются буквами (например цифры или математические знаки), псевдо-элементы "first-letter" обычно игнорируются.


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


Псевдо-элемент "first-letter" может применяться только к блочным элементам.


<<<  НазадВперед  >>>
 1  2  3 


 8  Комментарии к статье  8 8  Обсудить в чате

8  В тему

Терминология

Базовые понятия

Каскадирование

Модель форматирования

Свойства CSS1

Единицы измерения значений

Совместимость с CSS1

 
  
  
    Copyright ©  RIN 2003 - 2004      * Обратная связь