CSS3. Работа с текстом и фонами

Работа с текстом

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

За управление текстом в CSS отвечают следующие атрибуты стилей:

• text-align – определяет горизонтальное выравнивание текста элемента (text-align: center). Может принимать следующие значения:
  • center – выравнивание по центру;
  • left – выравнивание по левому краю;
  • right – выравнивание по правому краю;
  • justify– выравнивание по ширине;
  • auto – тип выравнивания не изменяется;
  • start – в случае, если направление текста слева - направо, то выравнивает по левому краю; если направление текста справа - налево – по правому краю;
  • end – в случае, если направление текста слева - направо, то выравнивает по правому краю; если направление текста справа - налево – по левому краю;
• text-align-last – задает тип выравнивания последней строки элемента, при условии что значение атрибута стиля text-align равно justify (text-align-last: left). Принимает значения аналогичные атрибуту text-align;
• text-decoration – добавляет эффекты для текста (text-decoration: none). Может принимать следующие значения:
  • blink – мигающий текст;
  • line-through – зачеркнутый текст;
  • overline – линия над текстом;
  • underline – линия под текстом (подчеркивание);
  • none – эффектов нет.
• text-indent – задает величину отступа для первой строки текста (text-indent: 10%). Могут быть указаны конкретные значения и процентные.
• text-overflow – задание параметра видимости текста (text-overflow: clip). Может принимать два значения: clip – текст обрезается, если выходит за границы элемента; ellipsis – при выходе текста за границы добавляется многоточие;
• text-shadow – добавляет тень тексту и определяет ее параметры (text-shadow: red 5 5). Могут быть заданы следующие параметры тени:
  • none – тени нет;
  • цвет – любой поддерживаемый цвет;
  • сдвиг по горизонтали – положительное значение сдвигает тень вправо, отрицательное – влево;
  • сдвиг по вертикали – положительное значение опускает тень относительно текста, отрицательное – поднимает;
  • радиус размытия – большее значение сглаживает тень, по - умолчанию параметр равен 0.
• text-transform – преобразование текста в заглавные или прописные буквы (text-transform: lowercase). Принимает следующие значения:
  • none – символы не меняются;
  • capitalize – первая литера каждого слова становится заглавной;
  • lowercase – символы текста преобразовываются в нижний регистр;
  • uppercase – символы текста преобразовываются в верхний регистр.

Вертикальное выравнивание фрагмента

При необходимости смещения по вертикали определенного элемента относительно текста применяется атрибут стиля vertical-align, принимающий значения:

• baseline – выравнивание базовой линии по соответствующей линии родительского элемента, в случае с ячейкой таблицы происходит выравнивание по базовой линии первой текстовой строки;
• bottom – выравнивание элемента по нижней части родительского элемента, в случае с ячейкой таблицы происходит выравнивание по нижнему краю;
• middle – выравнивание по центру родительского элемента, в случае с ячейкой таблицы происходит выравнивание по середине;
• sub – выравнивание базовой линии элемента по базовой линии нижнего индекса родительского элемента;
• super – выравнивание базовой линии по базовой линии верхнего индекса родительского элемента;
• text-bottom – выравнивание нижнего края фрагмента по нижнему краю текста родителя;
• text-top – выравнивание верхнего края фрагмента текста по верхнему краю текста родителя;
• top – выравнивание верхнего края фрагмента по верхнему краю текста родителя, в случае с ячейкой таблицы происходит выравнивание по верхнему краю.

Для примера добавим следующую строку к таблице стилей, созданной ранее, задающую параметры выравнивания текста в ячейках секции <tbody>:

tbody tr td { vertical-align:top; text-align: center }

Рис. 7.3. Результат выравнивания текста в ячейках таблицы

Разрыв строк

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

• white-space – задает способ отображения пробелов между словами (white-space: pre). Принимает следующие значения:
  • normal – несколько пробелов преобразуются в один, символы перевода строк также преобразуются в пробелы, браузер самостоятельно разрывает текст и переводит его на новые строки;
  • nowrap – несколько пробелов преобразуются в один, символы перевода строк также преобразуются в пробелы, браузер не осуществляет разрыв и перевод строк;
  • pre – последовательность пробелов сохраняется, символы перевода строк также сохраняются, браузер самостоятельно не выполняет разрыв и перенос строк. Фактически, текст выглядит образом, определенным разработчиком, без каких - либо изменений;
  • pre-line – несколько пробелов преобразуются в один, символы перевода строк сохраняются, браузер самостоятельно разрывает текст и переводит его на новые строки;
  • pre-wrap – последовательность пробелов сохраняется, символы перевода строк также сохраняются, браузер самостоятельно выполняет разрыв и перенос строк;
• word-wrap – указывает места, где браузер может осуществить перевод строки (word-wrap: normal). Может принимать следующие значения:
  • normal – строки разрываются только по пробелам;
  • break-word – браузер может выполнять разрыв строк внутри слов.

Краткие итоги

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

Управление более сложными элементами дизайна веб - страниц будет рассмотрено в рамках следующих лекций, касающихся CSS.

Список материалов для самостоятельного изучения

1. http://htmlbook.ru/css/cat/color
2. http://htmlbook.ru/css/cat/format
3. http://htmlbook.ru/css/cat/font
4. http://www.w3schools.com/css/css_font.asp
5. http://www.indeep76.com/Style/Example007/fonts.html
6. http://htmlbook.ru/css/cat/text
7. http://htmlbook.ru/css/cat/format
8. http://htmlbook.ru/css/margin
9. http://htmlbook.ru/css/padding
10. http://htmlbook.ru/css/border
11. http://htmlbook.ru/css/list-style-image
12. http://htmlbook.ru/css/list-style-position
13. http://htmlbook.ru/css/list-style-type