![](/user_photo/2706_HbeT2.jpg)
- •Index.Htm
- •Урок 3: Цвет и фон в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 4: Шрифты в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 5: Текст в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 6: Списки в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 8: Типы селекторов в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 9: Блоковая модель в css
- •Урок 10: Рамки в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 13: Позиционирование блоков
- •↑ Наверх ↑
↑ Наверх ↑
Свойство
FONT-STYLE
Данное свойство задает стиль шрифта. Может принимать три значения:
normal- обычный;
italic- курсивный;
oblique- наклонный;
У вас может возникнуть вопрос: "чем отличается курсивный от наклонного?" , - дело в том, что значение italicозначает использование встроенного в шрифт курсивного начертания. Ведь почти каждый шрифт включает в себя все символы и буквы в нормальном исполнении, в полужирном исполнении и в курсивном. А значениеoblique - это искусственно созданный курсив, т.е. созданный наклоном стандартных букв на определенный угол.
h1{ font-family: verdana, arial, sans-serif; font-style:normal; } h2{ font-family: verdana, arial, sans-serif; font-style:italic ; } h3{ font-family: verdana, arial, sans-serif; font-style:oblique; }
Смотреть пример
↑ Наверх ↑
Свойство
FONT-VARIANT
Это свойство используется для выбора варианта написания букв нижнего регистра. Может принимать два значения:
normal- значение по умолчанию, текст отображается обычным образом.small-caps- буквы нижнего регистра отображаются как уменьшенные заглавные.
Т.е. как видите большие(заглавные буквы) остаются без изменений, а маленькие - представляют собой полную копию заглавных букв, только слегка меньшего размера.
По умолчанию (т.е. если вообще не записывать это свойство) текст будет отображаться обычным начертанием.
Пример записи стиля:
h1{ font-family: verdana, arial, sans-serif; font-variant:small-caps; } h2{font-family: verdana, arial, sans-serif;}
Смотреть пример
Думаю тут все понятно, поехали дальше...
↑ Наверх ↑
Свойство
FONT-WEIGHT
Это свойство определяет насыщенность шрифта, т.е. с его помощью можно сделать шрифт жирным. Основные значения: normal- обычный и bold- жирный. Некоторые браузеры поддерживают числовые значения: 100, 200,300,400,500,600,700,800,900. Для справки: 400 равносильно normal, а 700 - bold . Но я не советую вам пользоваться числами!
P {font-family: arial, verdana, sans-serif;} DIV { font-family: arial, verdana, sans-serif; font-weight: bold; }
Смотреть пример
↑ Наверх ↑
Свойство
FONT-SIZE
C его помощью можно регулировать размер шрифта. В качестве единиц измерения лучше всего использовать пикселы, т.к. это универсальный способ и во всех браузерах вы увидите одинаковый результат, а это самое главное.
Давайте прикольнемся над заголовками:
h1 { font-family: arial, verdana, sans-serif; font-size: 18px; } h2{ font-family: arial, verdana, sans-serif; font-size: 36px; color: red; }
Смотреть пример
Как видите с помощью этого свойства можно переопределять вид заголовков, что может быть полезно например при продвижении в поисковых системах. Ведь тексту, заключенному в заголовок поисковые системы придают большее значение, чем обычному.
↑ Наверх ↑
Сокращенная
запись. Свойство FONT
Все, перечисленные выше, свойства можно записать в краткой форме. Это помогает экономить время и делать код стилей более легким.
При этом нужно записывать значения всех свойств через пробел, в такой последовательности:
font-style_ font-variant_font-weight_font-size_font-family
Ну вот например:
P{ font-style: italic; font-variant: normal ; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }
А теперь то же самое в краткой форме:
P{ font : italic normal bold 30px arial,sans-serif; }
Еще раз обратите внимание, на то, что все значения указаны в нужной последовательности, и ЧЕРЕЗ ПРОБЕЛ. Если какое-либо свойство не указать, ему присвоится значение по умолчанию.
НУ что, теперь попрактикуйтесь, и можно приступать к следующему уроку.