Применение каскадных таблиц стилей (CSS)

Текст и списки

Разбить на страницы
Показывать лекцию целиком

Текст

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

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

Рассказывая о шрифтах, мы акцентировали внимание на начертаниях символов как таковых, а не на их соотношении.

Тем не менее в стороне остались такие важные характеристики текстового фрагмента, как:

  • межбуквенные расстояния ;
  • высота строк ;
  • выравнивание ;
  • отступ в первой строке параграфа;
  • преобразования начертания.
    •

    Все эти атрибуты сгруппированы в свойства текстовых фрагментов (Text Properties).

    Межбуквенные расстояния

    Расстояние между буквами автоматически регулируется размером шрифта — кеглем. Чем больше размер шрифта, тем больше расстояние между буквами: (открыть)

    (рис 4.1)

    Присмотревшись внимательно, нетрудно убедиться, что расстояние между буквами в слове "параграф" первого примера и буквами слова "параграфа" второго примера разное. Во втором случае оно больше:

    (рис 4.2)

    Моноширинный шрифт выбран не случайно. На пропорциональном шрифте межбуквенное расстояние зависит от начертания букв и показать его как расстояние между буквами достаточно сложно. У моноширинного шрифта размер символа фиксирован, поэтому и расстояние между буквами прослеживается четко.

    Однако не всегда удобно управлять межбуквенным расстоянием через кегль ( font-size ). Бывают случаи, когда нужно либо уплотнить строку, либо увеличить расстояния между буквами. Это можно сделать с помощью атрибута letter-spacing: (открыть)

    <P STYLE="font-family:monospace;
letter-spacing:5pt;
color:black">
Межбуквенное расстояние 5pt</P>
<P STYLE=
"font-family:monospace;
letter-spacing:10pt;
color:black">
Межбуквенное расстояние 10pt
</P>
    (рис 4.3)

    Правда, в версиях Netscape Navigator 4.x этот параметр не поддерживается.

    Выравнивание

    По умолчанию все слова в параграфе прижаты влево. Левый край параграфа таким образом оказывается выравненным. Точно так же может быть выравнен правый край параграфа или блока текста, и даже оба края вместе.

    В обычной HTML-разметке такой эффект достигается за счет применения атрибута ALIGN, как это сделано на страницах данного пособия:

    <P ALIGN=justify>...</P>

    Аналогичный результат в CSS достигается за счет атрибута text-align: (открыть)

    <P STYLE="text-align:right;color:black;">
Этот параграф выравнен по правому краю. Все 
строки справа кончаются на границе раздела. 
А вот слева они начинаются с различным 
отступом от левого края.</P>
    (рис 4.4) 
    <P STYLE="text-align:justify;color:black;">
Этот параграф выравнен по левому и правому краям. 
Все строки справа кончаются на вертикальной 
границе раздела. Все строки слева теперь 
начинаются также с вертикальной границы 
раздела.</P>

    (открыть)

    (рис 4.5)

    Выравнивать текст можно в любом блочном элементе. Причем можно не только выравнивать текст по краям блочного элемента, но и центрировать его ( <P STYLE="text-align:center;">...</P> ).

    Преобразование шрифта

    Преобразование шрифта подразумевает капитализацию слов, перевод всех "больших" и "маленьких" букв в большие, или, наоборот, получение одних строчных.

    Рассмотрим несколько примеров: (открыть)

    <P STYLE="text-transform:uppercase;">
Сделать заглавными</P>
<P STYLE="text-transform:lowercase;">
Сделать строчными</P>
<P STYLE="text-transform:capitalize;">
Сделать заглавными первые буквы в словах</P>
    (рис 4.6)

    Обратите внимание, что выполнение преобразований зависит от алгоритма преобразования символов. В нелокализованных программах переход от строчных букв к прописным осуществляется путем простого смещения по таблице ASCII, что для русского алфавита неприемлемо.

    Еще один вид преобразования шрифта — это подчеркивание, перечеркивание или надчеркивание слов. Выполняется такое преобразование с помощью атрибута text-decoration: (открыть)

    <P STYLE="text-decoration:line-through;">
Перечеркнем это предложение.</P>
<P STYLE="text-decoration:underline;">
Подчеркнем это предложение.</P>
    (рис 4.7)

    Для того, чтобы преобразование работало, необходимо соответствующее начертание (подчеркнутые или перечеркнутые начертания букв). Очень сложно найти гарнитуру, в которой было бы начертание с надчеркнутыми буквами. Отмена декора происходит, если использовать в text-decoration значение none.

    Первая строка параграфа

    При оформлении параграфов в технологии CSS автор может воспользоваться "красной" строкой, такую возможность предоставляет ему атрибут text-indent.

    Речь идет о горизонтальном отступе в первой строке параграфа относительно его левого края: (открыть)

    <P STYLE="text-indent:20pt;">
Этот параграф мы начнем со строки с 
горизонтальным отступом в двадцать 
типографских пунктов от левого края параграфа.
</P>
<P STYLE="text-indent:-10pt;">
А в этом параграфе мы применим отрицательный
горизонтальный отступ в первой строке 
параграфа.</P>
    (рис 4.8)

    Отрицательные значения атрибутов — это нормальная практика CSS. Там, где применение отрицательного значения оправдано, например, в случае смещения вложенного блока текста относительно охватывающего элемента разметки, можно указывать отрицательные атрибуты смещения.

    Кроме text-indent в CSS для оформления первой строки параграфа зарезервирован модификатор стиля first-line. Он позволяет не только задать горизонтальное смещение, но и определить другие параметры параграфа:

    P:first-line { color:red; }

    Еще один параметр, который влияет на отображение первой строки параграфа — первая буква первой строки. Ее отображением управляет модификатор first-letter:

    P:first-letter { font-size:20pt; }

    К сожалению, оба названных модификатора реализованы не во всех версиях браузеров, поэтому для верности применяют элементы разметки FONT и TABLE.

    Межстрочное расстояние

    В CSS межстрочное расстояние определяется параметром line-height. Он задает расстояние не между строками, а между базовыми линиями строк. Проще говоря, если, например, взять букву "н" и напечатать ее последовательно друг под другом, то line-height будет равно расстоянию между двумя одинаковыми точками букв.

    (рис 4.9)

    Посмотрим, как этот параметр влияет на взаимное расположение строк: (открыть)

    <P STYLE="line-height:12pt;font-size:12pt;
color:black;">
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 12 pt.</p>
<P STYLE="line-height:24pt;font-size:12pt;
color:black;">
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 24 pt.</P>
<P STYLE="line-height:6pt;font-size:12pt;
color:black;">
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 6 pt.</P>
    (рис 4.10)

    Первый пример набран со значением line-height, равным размеру кегля. Во втором примере значение line-height вдвое превышает размер кегля. В третьем примере значение line-height в два раза меньше размера кегля — строки стали "наползать" друг на друга.

    В связи с использованием line-height следует обратить внимание на применение in-line картинок на HTML-страницах. Под in-line картинкой здесь имеется в виду картинка, которая встроена в тело документа при помощи элемента IMG, но не с новой строки и не как элемент таблицы: (открыть)

    <P STYLE="color:white;background-color:black;
font-size:20px;"> 
В эту строку мы встраиваем картинку - <IMG 
SRC="inline.gif" BORDER="0" WIDTH="24" 
HEIGHT="24" ALIGN="top">, 
на которой изображены концентрические круги.
</P>
    (рис 4.11)

    Картинка имеет размеры 24х24 пиксела и выравнена по верхнему краю строки. Ее размер больше размера кегля ( 20 px ), поэтому межстрочное расстояние увеличено браузером автоматически. (открыть)

    <P STYLE="color:white;
background-color:black;font-size:24px;"> 
В эту строку, которая имеет размер кегля 24рх, 
мы встраиваем картинку - <IMG SRC="inline.gif"
BORDER="0" WIDTH="24" HEIGHT="24" ALIGN="top">
, на которой изображены концентрические круги.
</P>
    (рис 4.12)

    Таким образом, можно точно позиционировать текст и графику в строке.

    Списки

    При отображении списков CSS позволяет управлять формой и изображением "пулек" (bullets) списка. "Пулька" (bullet) — это символ, стоящий перед элементом списка. Например, в неупорядоченном списке ( unsorted list ) перед элементом списка ставится "жирная" точка:

  • Первый элемент списка
  • Второй элемент списка
  • Третий элемент списка
    •

    CSS позволяют управлять формой "пулек" и заменять "пульки" картинками.

    Любопытно, что управление отображением элементов списка отнесено к набору свойств, в который входит атрибут display. У этого атрибута может быть только одно значение — none. Если элемент в своем описании имеет атрибут display, и этот атрибут равен none, то он не отображается браузером вообще:

    <UL STYLE="display:none;">
<LI>Первый элемент списка
<LI>Второй элемент списка
<LI>Третий элемент списка
</UL>

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

    Атрибут display управляет отображением документа на дисплее компьютера, но не распространяется на другие среды отображения документа. Например, при печати скрытый список должен быть отображен.

    Однако, на самом деле он не отображается и при печати.

    Форма "пулек"

    Форма "пульки" в виде "жирной" точки несколько непривычна. Обычно в машинописных документах используют черту. С другой стороны, в рекламных материалах часто в качестве "пульки" применяют квадрат или другой символ типографского набора, а также графическую картинку.

    CSS позволяет управлять формой "пульки" через атрибут list-style-type: (открыть)

    <UL STYLE="list-style-type:square;">
<LI>В виде "пульки" используем квадрат
</UL>
<UL STYLE="list-style-type:disc;">
<LI>В виде "пульки" используем диск
</UL> <UL STYLE="list-style-type:circle;">
<LI>В виде "пульки" используем круг
</UL>
    (рис 4.13)

    До сих пор мы обсуждали только неупорядоченные списки   ( UL ), но управлять отображением "пулек" можно и в упорядоченных списках   ( OL ): (открыть)

    <OL STYLE="list-style-type:lower-roman;
color:black;">
<LI>...
...
</OL> 
<OL STYLE="list-style-type:upper-alpha;
color:black;">
<LI>...
...
</OL> 
<OL STYLE="list-style-type:lower-alpha;
color:black;">
<LI>...
...
</OL>
    (рис 4.14)

    CSS позволяют вообще отказаться от "пулек". Для этого нужно указать значение атрибута list-style-type равным none.

    "Пульки"-картинки

    Если стандартные формы "пулек" автора страницы не устраивают, он может использовать нестандартные. Для этого ему придется "пульку" нарисовать самому и в виде графического файла разместить на Web-узле. У такой "пульки" есть URL, который используется в CSS для обращения к ней.

    <UL STYLE="list-style-image:url('bimage.gif');"
> <LI>Элемент списка расположен за чертой 
</UL>

    Картинка может быть и более замысловатой. Это уже зависит от фантазии автора документа. Например, можно создать картинку-стрелочку: (открыть)

    <UL STYLE="list-style-image:url('barrow.gif');"
> <LI>Элемент списка расположен за стрелкой 
</UL>
    (рис 4.15)

    Здесь надо признаться в маленьком обмане. Если вы пользователь Internet Explorer, то все, что здесь написано — верно. Фрагмент кода, представленный перед примером, является его точной копией. Однако перед пользователями Netscape Navigator придется извиниться: Netscape Navigator этот атрибут не поддерживает. В тексте страницы присутствует JavaScript-код, который имитирует применение атрибута list-style-image в случае просмотра страницы браузером от Netscape.

    Страницы:

    Текст

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

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

    Рассказывая о шрифтах, мы акцентировали внимание на начертаниях символов как таковых, а не на их соотношении.

    Тем не менее в стороне остались такие важные характеристики текстового фрагмента, как:

  • межбуквенные расстояния ;
  • высота строк ;
  • выравнивание ;
  • отступ в первой строке параграфа;
  • преобразования начертания.
    •

    Все эти атрибуты сгруппированы в свойства текстовых фрагментов (Text Properties).

    Межбуквенные расстояния

    Расстояние между буквами автоматически регулируется размером шрифта — кеглем. Чем больше размер шрифта, тем больше расстояние между буквами: (открыть)

    (рис 4.1)

    Присмотревшись внимательно, нетрудно убедиться, что расстояние между буквами в слове "параграф" первого примера и буквами слова "параграфа" второго примера разное. Во втором случае оно больше:

    (рис 4.2)

    Моноширинный шрифт выбран не случайно. На пропорциональном шрифте межбуквенное расстояние зависит от начертания букв и показать его как расстояние между буквами достаточно сложно. У моноширинного шрифта размер символа фиксирован, поэтому и расстояние между буквами прослеживается четко.

    Однако не всегда удобно управлять межбуквенным расстоянием через кегль ( font-size ). Бывают случаи, когда нужно либо уплотнить строку, либо увеличить расстояния между буквами. Это можно сделать с помощью атрибута letter-spacing: (открыть)

    <P STYLE="font-family:monospace;
letter-spacing:5pt;
color:black">
Межбуквенное расстояние 5pt</P>
<P STYLE=
"font-family:monospace;
letter-spacing:10pt;
color:black">
Межбуквенное расстояние 10pt
</P>
    (рис 4.3)

    Правда, в версиях Netscape Navigator 4.x этот параметр не поддерживается.

    Выравнивание

    По умолчанию все слова в параграфе прижаты влево. Левый край параграфа таким образом оказывается выравненным. Точно так же может быть выравнен правый край параграфа или блока текста, и даже оба края вместе.

    В обычной HTML-разметке такой эффект достигается за счет применения атрибута ALIGN, как это сделано на страницах данного пособия:

    <P ALIGN=justify>...</P>

    Аналогичный результат в CSS достигается за счет атрибута text-align: (открыть)

    <P STYLE="text-align:right;color:black;">
Этот параграф выравнен по правому краю. Все 
строки справа кончаются на границе раздела. 
А вот слева они начинаются с различным 
отступом от левого края.</P>
    (рис 4.4) 
    <P STYLE="text-align:justify;color:black;">
Этот параграф выравнен по левому и правому краям. 
Все строки справа кончаются на вертикальной 
границе раздела. Все строки слева теперь 
начинаются также с вертикальной границы 
раздела.</P>

    (открыть)

    (рис 4.5)

    Выравнивать текст можно в любом блочном элементе. Причем можно не только выравнивать текст по краям блочного элемента, но и центрировать его ( <P STYLE="text-align:center;">...</P> ).

    Преобразование шрифта

    Преобразование шрифта подразумевает капитализацию слов, перевод всех "больших" и "маленьких" букв в большие, или, наоборот, получение одних строчных.

    Рассмотрим несколько примеров: (открыть)

    <P STYLE="text-transform:uppercase;">
Сделать заглавными</P>
<P STYLE="text-transform:lowercase;">
Сделать строчными</P>
<P STYLE="text-transform:capitalize;">
Сделать заглавными первые буквы в словах</P>
    (рис 4.6)

    Обратите внимание, что выполнение преобразований зависит от алгоритма преобразования символов. В нелокализованных программах переход от строчных букв к прописным осуществляется путем простого смещения по таблице ASCII, что для русского алфавита неприемлемо.

    Еще один вид преобразования шрифта — это подчеркивание, перечеркивание или надчеркивание слов. Выполняется такое преобразование с помощью атрибута text-decoration: (открыть)

    <P STYLE="text-decoration:line-through;">
Перечеркнем это предложение.</P>
<P STYLE="text-decoration:underline;">
Подчеркнем это предложение.</P>
    (рис 4.7)

    Для того, чтобы преобразование работало, необходимо соответствующее начертание (подчеркнутые или перечеркнутые начертания букв). Очень сложно найти гарнитуру, в которой было бы начертание с надчеркнутыми буквами. Отмена декора происходит, если использовать в text-decoration значение none.

    Первая строка параграфа

    При оформлении параграфов в технологии CSS автор может воспользоваться "красной" строкой, такую возможность предоставляет ему атрибут text-indent.

    Речь идет о горизонтальном отступе в первой строке параграфа относительно его левого края: (открыть)

    <P STYLE="text-indent:20pt;">
Этот параграф мы начнем со строки с 
горизонтальным отступом в двадцать 
типографских пунктов от левого края параграфа.
</P>
<P STYLE="text-indent:-10pt;">
А в этом параграфе мы применим отрицательный
горизонтальный отступ в первой строке 
параграфа.</P>
    (рис 4.8)

    Отрицательные значения атрибутов — это нормальная практика CSS. Там, где применение отрицательного значения оправдано, например, в случае смещения вложенного блока текста относительно охватывающего элемента разметки, можно указывать отрицательные атрибуты смещения.

    Кроме text-indent в CSS для оформления первой строки параграфа зарезервирован модификатор стиля first-line. Он позволяет не только задать горизонтальное смещение, но и определить другие параметры параграфа:

    P:first-line { color:red; }

    Еще один параметр, который влияет на отображение первой строки параграфа — первая буква первой строки. Ее отображением управляет модификатор first-letter:

    P:first-letter { font-size:20pt; }

    К сожалению, оба названных модификатора реализованы не во всех версиях браузеров, поэтому для верности применяют элементы разметки FONT и TABLE.

    Межстрочное расстояние

    В CSS межстрочное расстояние определяется параметром line-height. Он задает расстояние не между строками, а между базовыми линиями строк. Проще говоря, если, например, взять букву "н" и напечатать ее последовательно друг под другом, то line-height будет равно расстоянию между двумя одинаковыми точками букв.

    (рис 4.9)

    Посмотрим, как этот параметр влияет на взаимное расположение строк: (открыть)

    <P STYLE="line-height:12pt;font-size:12pt;
color:black;">
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 12 pt.</p>
<P STYLE="line-height:24pt;font-size:12pt;
color:black;">
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 24 pt.</P>
<P STYLE="line-height:6pt;font-size:12pt;
color:black;">
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 6 pt.</P>
    (рис 4.10)

    Первый пример набран со значением line-height, равным размеру кегля. Во втором примере значение line-height вдвое превышает размер кегля. В третьем примере значение line-height в два раза меньше размера кегля — строки стали "наползать" друг на друга.

    В связи с использованием line-height следует обратить внимание на применение in-line картинок на HTML-страницах. Под in-line картинкой здесь имеется в виду картинка, которая встроена в тело документа при помощи элемента IMG, но не с новой строки и не как элемент таблицы: (открыть)

    <P STYLE="color:white;background-color:black;
font-size:20px;"> 
В эту строку мы встраиваем картинку - <IMG 
SRC="inline.gif" BORDER="0" WIDTH="24" 
HEIGHT="24" ALIGN="top">, 
на которой изображены концентрические круги.
</P>
    (рис 4.11)

    Картинка имеет размеры 24х24 пиксела и выравнена по верхнему краю строки. Ее размер больше размера кегля ( 20 px ), поэтому межстрочное расстояние увеличено браузером автоматически. (открыть)

    <P STYLE="color:white;
background-color:black;font-size:24px;"> 
В эту строку, которая имеет размер кегля 24рх, 
мы встраиваем картинку - <IMG SRC="inline.gif"
BORDER="0" WIDTH="24" HEIGHT="24" ALIGN="top">
, на которой изображены концентрические круги.
</P>
    (рис 4.12)

    Таким образом, можно точно позиционировать текст и графику в строке.

    Списки

    При отображении списков CSS позволяет управлять формой и изображением "пулек" (bullets) списка. "Пулька" (bullet) — это символ, стоящий перед элементом списка. Например, в неупорядоченном списке ( unsorted list ) перед элементом списка ставится "жирная" точка:

  • Первый элемент списка
  • Второй элемент списка
  • Третий элемент списка
    •

    CSS позволяют управлять формой "пулек" и заменять "пульки" картинками.

    Любопытно, что управление отображением элементов списка отнесено к набору свойств, в который входит атрибут display. У этого атрибута может быть только одно значение — none. Если элемент в своем описании имеет атрибут display, и этот атрибут равен none, то он не отображается браузером вообще:

    <UL STYLE="display:none;">
<LI>Первый элемент списка
<LI>Второй элемент списка
<LI>Третий элемент списка
</UL>

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

    Атрибут display управляет отображением документа на дисплее компьютера, но не распространяется на другие среды отображения документа. Например, при печати скрытый список должен быть отображен.

    Однако, на самом деле он не отображается и при печати.

    Форма "пулек"

    Форма "пульки" в виде "жирной" точки несколько непривычна. Обычно в машинописных документах используют черту. С другой стороны, в рекламных материалах часто в качестве "пульки" применяют квадрат или другой символ типографского набора, а также графическую картинку.

    CSS позволяет управлять формой "пульки" через атрибут list-style-type: (открыть)

    <UL STYLE="list-style-type:square;">
<LI>В виде "пульки" используем квадрат
</UL>
<UL STYLE="list-style-type:disc;">
<LI>В виде "пульки" используем диск
</UL> <UL STYLE="list-style-type:circle;">
<LI>В виде "пульки" используем круг
</UL>
    (рис 4.13)

    До сих пор мы обсуждали только неупорядоченные списки   ( UL ), но управлять отображением "пулек" можно и в упорядоченных списках   ( OL ): (открыть)

    <OL STYLE="list-style-type:lower-roman;
color:black;">
<LI>...
...
</OL> 
<OL STYLE="list-style-type:upper-alpha;
color:black;">
<LI>...
...
</OL> 
<OL STYLE="list-style-type:lower-alpha;
color:black;">
<LI>...
...
</OL>
    (рис 4.14)

    CSS позволяют вообще отказаться от "пулек". Для этого нужно указать значение атрибута list-style-type равным none.

    "Пульки"-картинки

    Если стандартные формы "пулек" автора страницы не устраивают, он может использовать нестандартные. Для этого ему придется "пульку" нарисовать самому и в виде графического файла разместить на Web-узле. У такой "пульки" есть URL, который используется в CSS для обращения к ней.

    <UL STYLE="list-style-image:url('bimage.gif');"
> <LI>Элемент списка расположен за чертой 
</UL>

    Картинка может быть и более замысловатой. Это уже зависит от фантазии автора документа. Например, можно создать картинку-стрелочку: (открыть)

    <UL STYLE="list-style-image:url('barrow.gif');"
> <LI>Элемент списка расположен за стрелкой 
</UL>
    (рис 4.15)

    Здесь надо признаться в маленьком обмане. Если вы пользователь Internet Explorer, то все, что здесь написано — верно. Фрагмент кода, представленный перед примером, является его точной копией. Однако перед пользователями Netscape Navigator придется извиниться: Netscape Navigator этот атрибут не поддерживает. В тексте страницы присутствует JavaScript-код, который имитирует применение атрибута list-style-image в случае просмотра страницы браузером от Netscape.

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^