Представляю Вашему вниманию двенадцатый выпуск рассылки "Уроки веб-дизайна в примерах". В этом выпуске мы продолжим знакомство с оформлением текста с помощью CSS.
Свойства оформления текста представлены в таблице:
| Код | Описание |
|---|---|
| text-decoration | Определяет оформление текста. Возможные свойства:
none (по умолчанию, стандартный текст), underline (подчеркивание), line-through (зачеркивание), overline (надчеркивание). |
| text-transform | Определяет оформление регистра букв текста. Возможные свойства:
none (по умолчанию, отменяет изменение регистра букв), capitalize (первая буква каждого слова преобразуется в заглавную), uppercase (все буквы преобразуется в заглавные), lowercase (все буквы преобразуется в строчные). |
| text-align | Определяет оформление регистра букв текста. Возможные свойства:
left (по умолчанию, выравнивание по левому краю), right (выравнивание по правому краю), center (центрирование), justify (выравнивание по ширине колонки). |
| text-indent | Устанавливает величину отступа в первой строке параграфа. |
| line-height | Устанавливает межстрочный интервал. |
| word-spacing | Устанавливает интервал между словами. |
| letter-spacing | Устанавливает интервал между буквами. |
| vertical-align | Устанавливает вертикальное положение базисной линии элемента. Возможные значения: baseline, middle, sub, super, text-top, text-bottom, top, bottom. |
В первом примере определим следующие свойства для оформления параграфа: отступ в 15 пикселей, размер шрифта в 12 пикселей, первая буква будет жирной и красной, а выравнивание в параграфе будет по ширине страницы. Также добавим стиль для выделения текста внутри параграфа (разреженный текст с подчеркиванием). Запишем стиль:
В данном примере стоит пояснить использование класса ":first-letter". Это, так называемый, псевдо-класс. В нашем случае он задает стиль оформления первой буквы параграфа, определенного в классе "par". Для применения нашего стиля пишем текст параграфа внутри элемента <p class="par"> </p>. Выделяемый текст помещаем внутри элемента <span class="spacer"> </span>. Посмотрим результат:
Данный пример демонстрирует использование описанного выше стиля для параграфа. В первой строчке описания стиля определяется стиль для параграфа как целого, во второй строчке определяется стиль начертания первой буквы. В третьей строчке описывается стиль для выделения части текста внутри параграфа.
В следующем выпуске рассмотрим стили оформления графических элементов.
Добавлен новый раздел: Коллекция скриптов. JavaScript.
P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").