Учебник по веб дизайну
 Свободное программное обеспечение. Доступно. Бесплатно. Легально.
Учебник
HTML
CSS
DHTML
JavaScript
SSI
Раскрутка
Справочник
HTML
JavaScript
SSI
Браузеры
Хостинг
Скрипты
JavaScript
PHP
Статьи
SEO
HTML
Flash
Все об Интернет
Новости Интернет
Утилиты
Конструктор
Информер
А так же...
Наши баннеры
Контакты
Гостевая
Реклама на сайте

Свойства стиля оформления текста в 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 пикселей, первая буква будет жирной и красной, а выравнивание в параграфе будет по ширине страницы. Также добавим стиль для выделения текста внутри параграфа (разреженный текст с подчеркиванием). Запишем стиль:

<STYLE>
<!--
p.par{text-indent: 15px; font-size: 14px; text-align: justify;}
p.par:first-letter {font-weight: bold; color: red;}
.spacer{letter-spacing: 5px; text-decoration: underline;}
-->
</STYLE>

В данном примере стоит пояснить использование класса ":first-letter". Это, так называемый, псевдо-класс. В нашем случае он задает стиль оформления первой буквы параграфа, определенного в классе "par". Для применения нашего стиля пишем текст параграфа внутри элемента <p class="par"> </p>. Выделяемый текст помещаем внутри элемента <span class="spacer"> </span>. Посмотрим результат:

Данный пример демонстрирует использование описанного выше стиля для параграфа. В первой строчке описания стиля определяется стиль для параграфа как целого, во второй строчке определяется стиль начертания первой буквы. В третьей строчке описывается стиль для выделения части текста внутри параграфа.

Анонс следующего выпуска

В следующем выпуске рассмотрим стили оформления графических элементов.

Новости сайта/полезные ссылки

Добавлен новый раздел: Коллекция скриптов. JavaScript.

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

Реклама

Ночь. Сидит программист за компом, дописывает последние строчки новой программы. Но тут неожиданно звонок в дверь. Программист за дверь - а там смерть с косой, но маленькая. - Блин не вовремя ты дай допишу программу, а там и забирай меня... - Не переживай мужик, я не за тобой. Я за твоим винтом!
главная :: наверх :: добавить в избранное :: сделать стартовой :: рекомендовать другу :: карта сайта

Rambler's Top100

Страница сгенерированна за 0.4330 сек.
Сайт оптимизирован под разрешение 800х600 и браузер MS IE 6.0.
Copyright © 2005-2010 originweb.info, design.originweb.info.
Хостинг ruweb.net