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

Стили шрифта в CSS

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

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


Содержание выпуска:
Стили шрифта и текста.

Свойства оформления шрифта представлены в таблице:

КодОписание
font-family Определяет шрифт или семейство шрифта. Можно указывать до трех шрифтов, через запятую (если у клиента не будет установлен первый шрифт, то браузер перейдет к следующему в списке).
font-style Определяет способ начертания. Возможные значения: normal (нормальный, установлен по умолчанию), italic (курсив), oblique (наклонный).
font-variant Определяет варианты начертания шрифта. Возможные значения: normal (нормальный, установлен по умолчанию), small-caps (все буквы заглавные).
font-weight Определяет степень жирности шрифта. Возможные значения: normal (нормальный, установлен по умолчанию), bold, bolder, lighter. Значения bolder и lighter являются относительными, например, значение lighter для жирного текста делает его нормальным.
font-size Устанавливает размер шрифта. Можно указывать как в относительных единицах (проценты), так и в абсолютных (пикселы, сантиметры и т.д.)

Рассмотрим пример по использования стиля шрифта. Для начала опишем соответствующие классы стилей. Напомню, что это делается внутри элемента <STYLE>, расположенного внутри элемента <HEAD>.

<STYLE>
<!--
.font_main{font-family:Arial;}
.font_strong{font-family:Arial;font-weight: bold;}
.font_comment{font-family:System; font-style: italic;}
.font_footnote{font-family:Arial;color: gray;}
-->
</STYLE>

А теперь запишем фрагмент текста оформленного с помощью определенных выше стилей:

<p class="font_main"><span class="font_strong">CSS</span> (<span class="font_comment">Cascading Style Sheets - Каскадные таблицы стилей</span> ) - это набор правил оформления и форматирования HTML страницы, позволяющий определять свойства элементов HTML для целого документа. В CSS Вы один раз описываете характеристики объекта и связываете объект со стилем. Для того, чтобы поменять характеристики объекта достаточно изменить описание стиля*.</p> <p class="font_footnote">*При подключении CSS через стилевой файл, все изменения стиля автоматически переносятся на страницы сайта. При этом, сам код html страниц остается без изменений.</p>

Посмотрим, как будет выглядеть текст:

CSS (Cascading Style Sheets - Каскадные таблицы стилей ) - это набор правил оформления и форматирования HTML страницы, позволяющий определять свойства элементов HTML для целого документа. В CSS Вы один раз описываете характеристики объекта и связываете объект со стилем. Для того, чтобы поменять характеристики объекта достаточно изменить описание стиля*.

*При подключении CSS через стилевой файл, все изменения стиля автоматически переносятся на страницы сайта. При этом, сам код html страниц остается без изменений.

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

В следующем выпуске продолжим знакомство с оформлением текста.

Новости сайта
Мы перешли на новый адрес: design.originweb.info. Переработан ряд разделов, полностью переписано ядро сайта, улучшена навигация. Если у Вас есть тематический сайт, предлагаю обмен ссылками. Новым подписчикам будет интересен архив рассылки.

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

Реклама

технология изготовления пластиковых окон фото окон пвх
Иисус изменил твою жизнь. Сохранить(Да/Нет) ?
главная :: наверх :: добавить в избранное :: сделать стартовой :: рекомендовать другу :: карта сайта

Rambler's Top100

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