Панель Управления





Курс CSS. Урок 09. Жирный и курсивный текст.
Стиль сайта. Онлайновый курс по теме CSS. Сделано в kocby.ru Курс CSS. Урок 09. Жирный и курсивный текст. Эффект создания жирного и курсивного текста можно создавать с помощью старых тегов HTML <strong>(жирный текст)</strong> и <em>(курсивный текст)</em>. Но идеологически правильно это делать помощью CSS. Насыщенность (жирность) шрифта определяется с помощью свойства font-weight:normal|lighter|bold|100-900;. С помощью свойство font-style:italic; можно сделать шрифт курсивным.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
09. Жирный и курсивный текст.
Как мы все помним еще из курса HTML эффект создания жирного и курсивного текста можно создавать с помощью старых тегов <strong>(жирный текст)</strong> и <em>(курсивный текст)</em>.

Однако, идеологически неправильно определять способ показа возможностями HTML и сейчас мы научимся делать это по-правильному, с помощью CSS.

Стили шрифта нормальный и курсивный:
Шрифт нормальный и курсивом:
font-style:normal; - нормальное отображение
font-style:italic; - отображение курсивом
font-style:oblique; - что-то вроде курсива, но реже используется.

Насыщенность (жирность) шрифта:
Насыщенность (жирность) шрифта:
font-weight:normal|lighter|bold|100-900;

На базе данного теоретического материала попробуем создать соответствующие классы:
.font_style_normal {
	font-style:normal;
}
.font_style_italic {
	font-style:italic;
}
.font_style_oblique {
	font-style:oblique;
}
.font_weight_normal {
	font-weight:normal;
}
.font_weight_lighter {
	font-weight:lighter;
}
.font_weight_bold {
	font-weight:bold;
}
.font_weight_100 {
	font-weight:100;
}
.font_weight_200 {
	font-weight:200;
}
.font_weight_300 {
	font-weight:300;
}
.font_weight_400 {
	font-weight:400;
}
.font_weight_500 {
	font-weight:500;
}
.font_weight_600 {
	font-weight:600;
}
.font_weight_700 {
	font-weight:700;
}
.font_weight_800 {
	font-weight:800;
}
.font_weight_900 {
	font-weight:900;
}
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_009_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_009_001.zip ← скачайте пример, чтобы установить на свой сайт...

Вообще говоря, на практике чаще используют числовые параметры, благодаря их точности и понятности. Но в данном случае, похоже, лучше использовать просто font-weight:bold;, т.к. разницу между, например, font-weight:800; и font-weight:900; понять и увидить очень трудно. Если она вообще есть, эта разница...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
:: :: /


Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.


Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/css/p009.html
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
***** Реклама *****
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа
Красивая девушка блондинка слева Красивая девушка брюнетка справа
Наверх ↑