CSS / 6. Свойства текста

Уверен, многие разработчики веб-страниц занимаются подбором подходящих цветов и стараются сделать свои страницы самыми стильными, но когда доходит до дела, львиная доля времени наверняка поглощается заботами о том, где будет располагаться текст и как он будет выглядеть. Эти вопросы обусловили появление таких тегов HTML, как и
, обеспечивающих определенную степень контроля над представлением и размещением текста.
Статьи раздела '6. Свойства текста':
В середине
Значение middle обычно (но не всегда) применяется к изображениям. Оказываемый им эффект не совсем такой, какого можно ожидать, если судить по его имени. Значение middle выравнивает середину блока строкового элемента по точке, кото...
Вертикальное выравнивание текста
Если вам приходилось иметь дело с элементами sup и sub (элементами верхнего и нижнего индексов) или с изображением с подобной разметкой: , то вы уже производили некоторое простейшее вертикальное выравнивание. В CSS свойство vertic...
Выравнивание по базовой линии
Объявление vertical-align: baseline выравнивает базовую линию элемента по базовой линии его родителя. Броузеры по большей части делают это в любом случае, поскольку скорее всего ожидается, что низ всех текстовых элементов строки б...
Выравнивание по верхнему краю
Применение выражения vertical-align: top имеет эффект, противоположный значению bottom. Аналогично vertical-align: text-top – противоположность text-bottom. Как могла бы быть представлена следующая разметка: .up {vertical-alig...
Выравнивание по заданному расстоянию
Рассмотрим вертикальное выравнивание на заданное расстояние. Свойство vertical-align очень простое: оно перемещает элемент вверх или вниз на указанное расстояние. Таким образом, выражение verti-cal-align: 5px; сдвинет элемент ввер...
Выравнивание по низу
Объявление vertical-align: bottom выравнивает низ строкового блока элемента по низу контейнера строки. Например, результат применения следующей разметки: .feeder {vertical-align: bottom;} This paragraph, as you can see quite c...
Высота строк
Свойство line-height задает расстояние между базовыми линиями строк текста, а не размер шрифта, и определяет величину, на которую увеличивается или уменьшается высота блока каждого элемента. В самых простых случаях задание line-he...
Высота строки и наследование
Если свойство line-height наследуется одним блочным элементом отдругого, все становится еще запутаннее. Свойство line-height наследует вычисленные значения родительского элемента, а не дочернего. Скорее всего, это не то, что имел ...
Горизонтальное выравнивание
Еще более фундаментальным, чем text-indent, является свойство text-align, определяющее, как выравниваются строки текста элемента относительно границ блока. Первые три значения совершенно просты, но с четвертым и пятым связаны неко...
Задаем значение line-height
Теперь рассмотрим возможные значения свойства line-height. Если используется значение по умолчанию normal, то агент пользователя должен вычислить вертикальное расстояние между строками. Значение может варьироваться в зависимости о...
Затенение текста
CSS2 включает свойство для создания отбрасываемой текстом тени, но в CSS2.1 это свойство не перешло, потому что ни один броузер не реализовал полной его поддержки на момент завершения CSS2.1. Отсутствие реализации затенения в спец...
Конструирование строк
Каждый элемент строки текста генерирует область содержимого (content area), которая определяется размером шрифта. Эта область содержимого, в свою очередь, генерирует строковый блок (inline box), который в отсутствие каких-либо дру...
Надстрочные и подстрочные элементы
Объявление vertical-align: sub превращает элемент в подстрочный. Это означает, что его базовая линия (или низ, если это замещаемый элемент) опущена относительно базовой линии его родителя. Спецификация не определяет величину пониж...
Направление написания текста
Текст этой книги следует читать слева направо и сверху вниз, таково направление письма в русском языке. Однако не все языки читаются так. Существует множество языков с написанием справа налево, таких как иврит или арабский, и CSS2...
Обработка пробелов
Рассмотрев различные способы стилевого оформления текста, поговорим о свойстве white-space, которое влияет на то, как агент пользователя обрабатывает пробелы, символы перевода строки и табуляции в документе. Применяя это свойство,...
Отступ
Отступ в первой строке абзаца веб-страницы – один из самых распространенных после форматирования текста эффектов. Некоторые сайты создают иллюзию структурированности текста, помещая перед первой буквой абзаца небольшие прозрачные ...
Оформление текста
Далее мы переходим к свойству text-decoration, которое является замечательным свойством, предлагающим целый ворох интересных возможностей. Как и следовало ожидать, если выбрано значение underline, происходит подчеркивание элемента...
Преобразование текста
Теперь обратимся к способам изменения регистра букв текста с помощью свойства text-transform. Устанавливаемое по умолчанию значение none не оказывает на текст никакого воздействия: регистр, пришедший из исходного документа, не изм...
Процентные значения
Процентные значения не позволяют моделировать align="middle" для изображений. Вместо этого задание процентного значения в vertical-align поднимает или опускает базовую линию элемента (или нижний край замещаемого элемента) относите...
Расстояние между буквами
Многие проблемы, встречающиеся при работе с word-spacing, имеют место в случае применения letter-spacing. Единственное отличие между ними состоит в том, что свойство letter-spacing изменяет расстояния между символами или буквами. ...

Страницы: 1 2