Свойство-сокращение font | Трепачёв Дмитрий
В предыдущем уроке мы с вами разобрали много
свойств для текста. Зачастую достаточно накладно
отдельно прописывать каждое из этих свойств,
поэтому в CSS для большего удоства существует
специальное свойство-сокращение font.
Данное свойство позволяет одновременно задать
размер шрифта, семейство, жирность, курсив
и межстрочный интервал.
Описываемое свойство имеет следующий синтаксис:
курсив жирность размер_шрифта / межстрочный_интервал семейство
При этом порядок свойств имеет значение, и обязательными являются «размер_шрифта» и «семейство». Обратите внимание на то, что другие свойства, кроме описанных выше в синтаксисе, не входят в данное свойство сокращение.
Давайте посмотрим на примерах.
Пример
Пусть у нас есть следующие стили:
p {
font-size: 16px;
font-family: Arial;
}
Давайте перепишем их через свойство-сокращение:
p {
font: 16px Arial;
}
Пример
Пусть у нас есть следующие стили:
p {
font-size: 16px;
font-family: Arial;
line-height: 50px;
}
Давайте перепишем их через свойство-сокращение:
p {
font: 16px/50px Arial;
}
Пример
Пусть у нас есть следующие стили:
p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
}
Давайте перепишем их через свойство-сокращение:
p {
font: bold 16px Arial;
}
Пример
Пусть у нас есть следующие стили:
p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
line-height: 50px;
font-style: italic;
}Давайте перепишем их через свойство-сокращение:
p {
font: bold italic 16px/50px Arial;
}
Практические задачи
Сократите код, используя свойство-сокращение font:
p {
font-family: "Times New Roman";
font-size: 13px;
line-height: 20px;
}
Сократите код, используя свойство-сокращение font:
p {
width: 300px;
font-family: Arial;
color: red;
font-size: 40px;
font-weight: bold;
}
Сократите код, используя свойство-сокращение font:
Основы работы с CSS — тест 2
Главная / Интернет-технологии / Основы работы с CSS / Тест 2
Упражнение 1:
Номер 1
Укажите сокращенный вариант записи правила:
h2 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}Ответ:
 (1) h2 { font: bold 12pt/14pt Helvetica }  
 (2) h2 { font: bold 14pt/12pt Helvetica }
 (3) h2 { font: bold 12pt/14pt}  
 (4) h2 { font: 14pt/12pt Helvetica }  
Номер 2
Укажите сокращенный вариант записи правила:
h2 {
font-weight: bold;
font-size: 14pt;
line-height: 12pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}Ответ:
 (1) h2 { font: bold 12pt/14pt Helvetica }  
 h2 { font: bold 14pt/12pt Helvetica }  
 (3) h2 { font: bold 12pt/14pt}  
 (4) h2 { font: 14pt/12pt Helvetica }  
Номер 3
Укажите сокращенный вариант записи правила:
P {
font-weight: bold;
font-size: 14pt;
line-height: 12pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}Ответ:
 (1) P { font: bold 12pt/14pt Arial }  
 (2) P { font: bold 14pt/12pt Arial }  
 (3) P { font: bold 12pt/14pt}  
 (4) P { font: 14pt/12pt Arial }  
Упражнение 2:
Номер 2
Какие свойства получат свои начальные значения в примере:
h2 { font: bold 12pt/14pt Helvetica }Ответ:
 (1) 'font-family'  
'font-weight    (3) 'font-variant'  
Упражнение 3:
Номер 1
Что является селектором в примере P { font-size:10pt }?
Ответ:
 (1) P  
 (2) 'font-size'  
 (3) 10pt  
 (4) { font-size:10pt }  
Номер 2
Что является селектором в примере h3 { font-weight: bold }?
Ответ:
 (1) { font-weight: bold }  
 (2) h3  
 (3) bold  
 (4) h3 { font-weight: bold }  
Номер 3
Что является селектором в примере P { font-style:italic }?
Ответ:
 (1) { font-style:italic }  
 (2) 'font-style'  
 (3) P { font-style:italic }  
 (4) P  
Упражнение 4:
Номер 1
Что является объявлением в правиле "h2 { color: brown }" ?
Ответ:
 (1) h2  
 (2) 'color'  
 (3) { color: brown }  
Номер 2
Что является объявлением в правиле "HR { width:50px }"?
Ответ:
 (1) HR { width:50px }  
 (2)
 (3) { width:50px }  
Номер 3
Что является объявлением в правиле "P { font-family:Arial }"?
Ответ:
 (1) P  
 (2) 'font-family'  
 (3) { font-family:Arial }  
Упражнение 5:
Номер 1
Что является свойством объявления в примере h2 { color: grey } ?
Ответ:
 (1) h2  
 (2) { color: grey }  
 (3) color  
Номер 2
Что является свойством объявления в примере P { font-weight: oblique }?
Ответ:
 (1) { font-weight: oblique }  
 (2) 'font-weight'  
 (3) 'oblique'  
Номер 3
Что является свойством объявления в примере HR { width:250px } ?
Ответ:
 (1) HR  
 (2) 'width'  
 (3) '250px'  
Упражнение 6:
Номер 1
Что является значением объявления в правиле "h3 { font-weight: bold }"?
Ответ:
 (1) h3 { font-weight: bold }  
 (2) 'font-weight'  
 (3) 'bold'  
Номер 2
Что является значением объявления в правиле "I { font-weight: bold }"?
Ответ:
 (1) I  
 (2) { font-weight: bold }  
 (3) 'bold'  
Номер 3
Что является значением объявления в правиле "B { font-weight: bold }"?
Ответ:
 (1) B  
 (2) B { font-weight: bold }  
 (3) 'bold'  
Упражнение 7:
Номер 1
Укажите правильные варианты размещения таблицы стилей в документе:
Ответ:
 (1) <STYLE type=»text/css»> h2 { color: blue } </STYLE>  
 (2) <STYLE type=»text/css»> P { color: blue } </STYLE>  
 (3) <STYLE type=»text/css»> I { color: blue } </STYLE>  
Номер 2
Укажите правильный вариант размещения таблицы стилей в документе:
Ответ:
 (1) <STYLE type=»text/css»> h2 { color: blue } </STYLE>  
 (2) <LINK rel=»stylesheet» href=»one.
css» type=»text/css»>
 
 (3) HR { width:250px }  
Номер 3
Укажите правильный вариант размещения таблицы стилей в документе:
Ответ:
 (1) <STYLE type=»text/css»> P { color: blue }  
 (2) <LINK rel=»stylesheet» href=»number.css» type=»text/css»>  
 (3) <STYLE type=»text/css»> S { color: blue } </STYLE>  
Упражнение 8:
Номер 1
Укажите атрибуты тэга LINK, которые используются для ссылки на внешнюю таблицу стилей:
Ответ:
 (1) "rel"  
 (2) "href"  
 (3) "text/html"  
Номер 2
Какие символы используются при описании объявления?
Ответ:
 (1) "/.   ..\"
 (2) "{...}"  
 (3) "/*...*/"  
Номер 3
Какой символ разделяет объявления, сгруппированные внутри блока?
Ответ:
 (1) ":"  
 (2) "/"  
 (3) ";"  
Упражнение 9:
Номер 1
Укажите пример корректного подключения внешней таблицы стилей:
Ответ:
 (1) <LINK rel="stylesheet" href="one.   css" type="text/css">
 (2) <LINK rel="stylesheet" type="text/css">  
 (3) <LINK href="first.css" type="text/css">  
Номер 2
Укажите примеры корректного подключения внешней таблицы стилей:
Ответ:
 (1) <LINK rel="stylesheet" href="bach.css" type="text/css">  
 (2) <LINK rel="stylesheet" href="one.css" type="text/css">  
 (3) <LINK href="one.   css" type="text/css">
Номер 3
Укажите пример корректного подключения внешней таблицы стилей:
Ответ:
 (1) <HEAD> <LINK rel=»stylesheet» href=»table.css» type=»text/css»> </HEAD>  
 (2) <STYLE> <LINK rel=»stylesheet» href=»table.css» type=»text/css»> </STYLE>  
 (3) <BODY> <LINK rel=»stylesheet» href=»table.css» type=»text/css»> </BODY>  
Упражнение 10:
Номер 1
С помощью какого элемента можно сослаться на внешнюю таблицу стилей?
Ответ:
 (1) <UL>  
 (2) <TABLE>  
 (3) <LINK>  
Номер 2
С помощью какого элемента можно поместить в документ таблицу стилей?
Ответ:
 (1) <STYLE>  
 (2) <TABLE>  
 (3) <LINK>  
 (4) <P>  
Номер 3
С помощью какого элемента можно сослаться на внешнюю таблицу стилей?
Ответ:
 (1) <TABLE>  
 (2) <LINK>  
 (3) <STYLE>  
Главная / Интернет-технологии / Основы работы с CSS / Тест 2
Font Weight
Свойство Font Weight устанавливает вес (толщину/тонкость) шрифта.
Примечание. Насыщенность шрифта 400 соответствует обычному, а насыщенность шрифта 700 соответствует полужирному.
| Вес шрифта | Пример | Выход |
|---|---|---|
| обычный | .весобычный
{
вес шрифта: нормальный;
} | |
| полужирный | .весПолужирный
{
вес шрифта: полужирный;
} | |
| жирнее | .weightБолее жирный
{
вес шрифта:жирнее;
} | |
| 100 | . | |
| 200 | .вес200
{
вес шрифта: 200;
}
| |
| 300 | .вес300
{
вес шрифта: 300;
}
| |
| 400 | .вес400
{
вес шрифта: 400;
} | |
| 500 | .вес500
{
вес шрифта: 500;
}
| |
| 600 | . | |
| 700 | .вес700
{
вес шрифта: 700;
}
| |
| 800 | .вес800
{
вес шрифта: 800;
} | |
| 900 | .вес900
{
вес шрифта: 900;
} | |
<тело>
| ||
Пример: Установите толщину шрифта для семейства шрифтов по умолчанию.
<голова>
Толщина шрифта CSS
<тип стиля="текст/CSS">
.div1 {
вес шрифта: 200;
отступ: 15 пикселей;
}
.div2 {
вес шрифта: 900;
отступ: 15 пикселей;
}
<тело>
<дел>
Это первая линия.