09. Жирный и курсивный текст.
Как мы все помним еще из курса HTML эффект создания жирного и курсивного текста можно создавать с помощью старых тегов <strong>(жирный текст)</strong> и <em>(курсивный текст)</em>.
Однако, идеологически неправильно определять способ показа возможностями HTML и сейчас мы научимся делать это по-правильному, с помощью CSS.
Стили шрифта нормальный и курсивный:
Насыщенность (жирность) шрифта:
На базе данного теоретического материала попробуем создать соответствующие классы:
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_009_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_009_001.zip ← скачайте пример, чтобы установить на свой сайт...
Вообще говоря, на практике чаще используют числовые параметры, благодаря их точности и понятности. Но в данном случае, похоже, лучше использовать просто font-weight:bold;, т.к. разницу между, например, font-weight:800; и font-weight:900; понять и увидить очень трудно. Если она вообще есть, эта разница...
Однако, идеологически неправильно определять способ показа возможностями HTML и сейчас мы научимся делать это по-правильному, с помощью CSS.
Стили шрифта нормальный и курсивный:
Шрифт нормальный и курсивом:
font-style:normal; - нормальное отображение
font-style:italic; - отображение курсивом
font-style:oblique; - что-то вроде курсива, но реже используется.
font-style:normal; - нормальное отображение
font-style:italic; - отображение курсивом
font-style:oblique; - что-то вроде курсива, но реже используется.
Насыщенность (жирность) шрифта:
Насыщенность (жирность) шрифта:
font-weight:normal|lighter|bold|100-900;
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_009_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_009_001.zip ← скачайте пример, чтобы установить на свой сайт...
Вообще говоря, на практике чаще используют числовые параметры, благодаря их точности и понятности. Но в данном случае, похоже, лучше использовать просто font-weight:bold;, т.к. разницу между, например, font-weight:800; и font-weight:900; понять и увидить очень трудно. Если она вообще есть, эта разница...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
