Оформление текста
Введение
Первоначальные возможности HTML не устраивали разработчиков веб-браузеров - не было никаких инструментов верстки. Одним из нововведений стал тег <font>, с помощью которого можно было изменить гарнитуру, стиль, цвет шрифта. Казалось бы, уже хорошо, но cтоит только представить себе сайт из сотни-другой страниц, на каждой из которых некоторые участки текста оформлены с помощью <font>. Интересно подсчитать, сколько раз пришлось применять одинаково описанный тег (цвет шрифта, размер, стиль). Наверняка, не один и не два десятка. А теперь представьте, что Вам необходимо сменить дизайн всего сайта, включая цвет и размер шрифта - долгое, нудное и неблагодарное занятие. Можно конечно его автоматизировать, но зачем забивать микроскопом гвозди?
Неужели HTML так неудобен? Совершенно нет. Просто случай, описанный выше, - это пример использования языка не по назначению: оформление стиля документа не входит в задачи разметки гипертекста. Истинный смысл HTML заключается в том, чтобы рассказать как можно больше о структуре документа браузеру: показать, что некоторый участок текста - цитата(тег <blockqoute>), другой - участок кода(тег <code>), третий - заголовок (теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6>), и так далее. Другими словами, HTML отражает семантическое оформление документов.
Таким образом, HTML в чистом виде ничего не говорит (да и не должен) о внешнем виде документа: стиль шрифта, цвет фона и т.д. Браузер сам решает, как отобразить страничку. Если конечно никто явно не расскажет ему, как. Именно этим и занимаются Каскадные Таблицы Стилей - CSS.
Главная задача CSS - визуальное оформление HTML-документа.
Шрифт
Рассмотрим некоторые свойства, позволяющие манипулировать стилем шрифта:
- font-family
-
Это свойство позволяет определить сам шрифт, которым будет отображен текст. В качестве значения выступает имя шрифта (или имя класса шрифтов, например, serif, sans-serif, monospace) или список имен. Используя список шрифтов, есть возможность указать браузеру, что если один из шрифтов в списке отсутствует на компьютере пользователя, то будет использоваться следующий за ним. Также, если в одном из шрифтов в списке отсутствует некоторый символ, используемый в тексте, браузер будет искать этот символ в следующем шрифте. Если в имени шрифта есть пробел, то все название необходимо заключить в двойные кавычки.
Примеры использования:
font-family: Arial;Здесь мы явно указываем, что нужно использовать шрифт с именем Arial. Старайтесь использовать наиболее распространенные шрифты - это даст гарантию того, что сайт будет отображаться так, как задумывалось Вами на большинстве компьютеров.
font-family: "Trebuchet MS", Arial, Verdana, serif;В этом случае браузер каждый символ ищет в указанных шрифтах слева на право и использует тот шрифт, который найдется первым.
- font-style
-
Определяет стиль шрифта: italic - курсив, normal - нормальный вид, oblique - в спецификации обозначен как наклонный, хотя я, честно говоря, никакой разницы с italic не заметил.
font-style: normal;
font-style: italic;
font-style: oblique;
На изображениях выше значения свойства применены к шрифту "Times New Roman"
- font-weight
-
Толщина шрифта. Например, bold - жирный, normal - нормальный вид.
font-weight: normal;
font-weight: bold;
font-weight: bold;
font-style: italic;Существуют и другие значения свойства font-weight, практическое применение которых для меня довольно туманно. Например, толщина (по спецификации - вес) может принимать числовые значения: 100, 200, 300, 400, 500, 600, 700, 800, 900. В частности, 400 равносильно normal, а 700 - bold.
- font-size
-
Размер (высота) шрифта. В основном используются в зависимости от ситуации две единицы измерения - пиксели (px) и размеры относительно родительского элемента (em). О задании размеров было написано ранее.
Таким образом, при использовании вышеописанных свойств полностью отпадает необходимость тега <font>.
Также возникает вопрос, зачем нужны свойства font-style и font-weight, если есть теги <b>(жирный текст), <i>(курсив), <em>(выделительный шрифт, курсив)? А может наоборот, зачем нужны эти теги?
На самом деле нужно и то, и то. Все зависит от конкретной ситуации: если автор в статье на сайте хочет выделить некоторое слово курсивом или жирным шрифтом, было бы нецелесообразно оборачивать это слово в тег-контейнер (например, <span>), а потом с помощью CSS определять шрифт для этого слова. В данном случае удобней использовать теги. А вот если дизайнер решил, что шрифт в заголовках всех статей нужно сделать курсивным, то лучше сделать это с помощью Каскадных Таблиц Стилей.
Текст
Рассмотрим наиболее употребляемые свойства оформления текста:
- text-align
Выравнивание текста внутри блока: left - по левому краю, right - по правому краю, center - по центру, justify - по ширине.
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
- text-indent
Отступ первой строки блока текста в любой единице измерения. С помощью этого свойства можно добиться эффекта красной строки.
text-indent: 20px;
- text-decoration
Декоративное оформление текста: none - никакого оформления не производится, underline - подчеркивание текста, overline - "надчеркивание" текста, если так можно сказать :), над текстом проводится линия, line-through - эффект зачеркнутого текста.
text-decoration: underline;
text-decoration:
line-through;
text-decoration:
overline;Кстати, если пользователь видит подчеркнутый текст, он автоматически ассоциирует его с гиперссылкой, так что не стоит им много злоупотреблять в других целях.
Помимо этого, значения можно комбинировать:
text-decoration: underline overline;
text-decoration: overline line-through;
text-decoration: underline line-through;
text-decoration: underline overline line-through;Правда, где это может потребоваться, я честно говоря не представляю.
Я сознательно упускаю некоторые свойства и некоторые значения перечисленных свойств из-за их нечастого употребления. В любом случае, Вы всегда можете обратиться к официальной спецификации на w3c.org.
Цвет и графика → ← Структура CSS файла