Главная :: Архив рассылки :: Свойства стиля оформления текста в CSS

Свойства стиля оформления текста в CSS

Доброго Вам времени суток, уважаемые подписчики!

Представляю Вашему вниманию двенадцатый выпуск рассылки "Уроки веб-дизайна в примерах". В этом выпуске мы продолжим знакомство с оформлением текста с помощью 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.

Адрес сайта: design.originweb.info.
Предлагаю обмен ссылками с тематическими сайтами.
Для новых подписчиков: архив рассылки.

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").