13. Сокращенная запись свойств шрифта.
Помимо подробных записей установки свойств шрифта можно использовать сокращенный аналог:
Допустим, начальник поставил там такую задачу: создать шрифт: курсивный, редкого варианта капитель, жирный, размером 24 пикселя, межстрочный интервал 80% от нормального, тип шрифта Tahoma.
В полном виде код будет таким:
А в сокращенном виде код будет таким:
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере. Получилось неплохо, а почему? Потому, что начальник грамотно поставил задачу, как и обычно.
css_013_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_013_001.zip ← скачайте пример, чтобы установить на свой сайт...
Сокращенная запись свойств шрифта:
Смотреть на этот теоретический материал выше, конечно, страшно и неприятно. Но понять человеку со средними способностями вполне реально. Попробуем и мы осилить:
Шрифт (font):
[<'font-style'>||<'font-variant'>||<'font-weight'>]?<'font-size'>[/<'line-height'>]?<'font-family'>
- Последовательность - должна строго соблюдаться, т.е. свойства должны назначаться строго в таком порядке, который отображен на схеме.
- || - двойные палки означают, что из трех можно назначить от 1 до 3 указанных свойств. Если бы была не двойная палка, а одинарная, то тогда можно было выбрать только 1 свойство из данных трех.
- [] - квадратные скобки обозначают определенную группу свойств.
- ? - знак вопроса означает, что элементы данной группы указывать не обязательно.
- font: 16px Tahoma; - пример простой записи, в которой используются только обязательные свойства <'font-size'> (16px) и <'font-family'> (Tahoma).
Допустим, начальник поставил там такую задачу: создать шрифт: курсивный, редкого варианта капитель, жирный, размером 24 пикселя, межстрочный интервал 80% от нормального, тип шрифта Tahoma.
В полном виде код будет таким:
.font_013_full {
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:24px;
line-height:0.8;
font-family:"Tahoma";
}
.font_013_short {
font:italic small-caps bold 24px/0.8 "Tahoma";
}
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере. Получилось неплохо, а почему? Потому, что начальник грамотно поставил задачу, как и обычно.
css_013_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_013_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
