Форматирование текста

Представляю Вашему вниманию очередной выпуск информационной рассылки сайта "Свободное и бесплатное ПО".

Вам срочно нужно решить задачу, но нет соответствующей программы? Мы собрали основные свободные и открытые программы вместе. Вы можете загрузить обновленный (от 12.04.2009) список всех бесплатных и свободных программ, представленных на нашем сайте.

Хотите получать полезную информацию каждую неделю прямо на почтовый ящик? Посмотрите все наши рассылки. Каждый найдет для себя что-то интересное и полезное. Выпуски выходят раз в неделю в воскресенье.

В текущем выпуске мы поговорим о форматировании текста документа в HTML документе и о том, как мы можем изменить стандартное отображение тегов форматирования с помощью CSS.

В этом выпуске мы рассмотрим виды форматирования текста документа.

Для форматирования текста в HTML существуют два набора тегов: теги физического и логического форматирования. Теги физического форматирования определяли вид выделяемого фрагмента текста (полужирный или курсивный шрифт, начертание, цвет и т.д.). Данный способ является устаревшим и не рекомендуется к использованию, так как противоречит принципу разделения содержания и оформления. Мы не будем подробно останавливаться на этой группе тегов.

В данной статье рассмотрим вторую группу тегов, отвечающих за логическое форматирование HTML документа. Логическое форматирование означает, что фрагменты текста заключаются внутри смысловых элементов. Отображение этих элементов определяется с помощью стилей (т.е. отдельно от самого документа).

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

Каждый элемент может иметь следующие атрибуты:

• Идентификаторы id и class
• Информация об языке lang и направлении текста dir
• Свойство title (текст всплывающей подсказки)
• Подстрочный стиль style
• Внутренние события: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown и onkeyup

Рассмотрим примеры использования тегов логического форматирования.

Ударение em и сильное ударение strong

Для выделения части текста вы можете использовать ударение em либо сильное ударение strong. По умолчанию ударение выделяется курсивом, а сильное ударение полужирным шрифтом. В примере, мы добавили к первым двум ударениям фрагментам текста всплывающие подсказки через свойство title. Последние два ударения мы сделали сильными.

Цитата cite

Цитаты и ссылки на источники указываются внутри элемента cite. По умолчанию выделяется курсивом.

Определение dfn

Элемент dfn используется для выделения определений. По умолчанию выделяется курсивом.

Код программы code

Для отображения кода (например, текст программы) используется элемент code. По умолчанию выделяется машинописным шрифтом.

Пример выполнения программы samp

Тексты примеров выполнения программ заключают внутри элемента samp. По умолчанию выделяется машинописным шрифтом.

Ввод текста kbd

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

Переменная var

Переменные заключают внутри элемента var. По умолчанию выделяется курсивом. В примере использованы символ умножения (точка, ·) и символ неразрываемого пробела ( )

Аббревиатура abbr и акроним acronym

Аббревиатуры (сокращение названий, которые читаются по буквам) и акронимы (сокращения названий, читаемые как слова) заключаются внутри элементов abr и acronym, соответственно. В качества всплывающей подсказки можно указать полное название. По умолчанию выделяется подчеркиванием (в браузере IE6 не выделяется, а для элемента abbr не работает свойство title).

Цитаты blockquote и q

Цитаты могут быть подстрочными (элемент q) и блочными (элемент q). Вы можете указать источник с помощью свойства cite. Элемент q отображается с отступами со всех краев. Элемент q визуализируется в разных браузерах по разному (IE6 никак не выделяет что противоречит спецификации W3C, FF ставит графические кавычки, Opera ставит текстовые кавычки).

Подстрочный sub и надстрочный sup индекс

Подстрочные (например, индекс массива) и надстрочные (например, степени) индексы заключают внутри элементов sub и sup, соответственно.

Примечание. Квадрат и куб числа можно задавать в помощью специальных символов ² и ³, соответственно. В отличии от элемента sup, использование этих символов не изменяет высоту строки (в сторону увеличения).
за комментарий спасибо DiGo.

Вы можете обсудить статью на нашем форуме.

CSS...

Для переопределения стандартного оформления мы можем воспользоваться способом, изложенным в предыдущем выпуске. Но что делать, если мы хотим использовать различные стили отображения для одних и тех же тегов? Ответ - использование классов. Классы - это набор свойств оформления, который можно применить к любому HTML тегу (если он поддерживает эти свойства). Например, напишем два класса, которые содержат красный и синий цвет текста, соответственно.

<style>
.red {color: red;}
.blue {color: blue;}
</style>

Пример использования этих классов:

<p class="red"> Текст красного цвета
<p class="blue"> Текст синего цвета
<p> Обычный текст с <span class="red">цветным</span> выделением

В примере мы использовали определенный нами классы к различным элементам для добавления свойств оформления. В следующем выпуске мы рассмотрим более сложные примеры применения классов.

Остались вопросы по теме выпуска? Задавайте их на нашем форуме. Мы отвечаем на все вопросы.

До новых встречь! Оставайтесь с нами.

• Адрес сайта: Свободное и бесплатное ПО, Веб дизайн в примерах.
• Форум: originweb.net.
• Наука, техника, образование: originweb.info.
• Для новых подписчиков: архив рассылки (другие наши рассылки).