Css какое свойство определяет степень жирности шрифта: Основы работы с CSS — тест 5

Основы работы с CSS — тест 5

Главная / Интернет-технологии / Основы работы с CSS / Тест 5

Упражнение 1:

Номер 1

Укажите вариант определения курсива:

Ответ:

&nbsp(1) 'oblique' &nbsp

&nbsp(2) 'cursive' &nbsp

&nbsp(3) 'italic' &nbsp

Номер 2

Укажите вариант определения полужирного шрифта:

Ответ:

&nbsp(2) 'bold' &nbsp

&nbsp(3) 'demi' &nbsp

Номер 3

Какое свойство определяет семейство шрифтов?

Ответ:

&nbsp(1) 'font-style' &nbsp

&nbsp(2) 'font-family' &nbsp

&nbsp

Упражнение 2:

Номер 1

В каком примере текст в заголовках h2, h3 или h4 будет отображаться шрифтом italic?

Ответ:

&nbsp(1) h2; h3; h4 { font-style: oblique } &nbsp

&nbsp(2) h2 - h4 { font-style: italic } &nbsp

&nbsp(3) h2, h3, h4 { font-style: italic } &nbsp

Номер 2

В каком примере текст тэга EM в заголовке h2 будет иметь обычное начертание?

Ответ:

&nbsp(1) h2 EM { font-style: normal } &nbsp

&nbsp(2) h2, EM { font-style: normal } &nbsp

&nbsp(3) h2 {EM { font-style: normal }} &nbsp

Номер 3

Какой из примеров устанавливает маленькие заглавные буквы для заголовка h4 и наклонные - для выделенного текста (EM)?

Ответ:

&nbsp

&nbsp(2) h4 { font-variant: small-caps } EM { font-style: oblique } &nbsp

&nbsp(3) h4 { font-variant: small-caps } EM { font-style: cursiv } &nbsp

Упражнение 3:

Номер 1

В каких примерах свойство 'font-size' описано без ошибок?

Ответ:

&nbsp(1) P { font-size: 12pt; } &nbsp

&nbsp(3) EM { font-size: 150% } &nbsp

Номер 2

Назовите свойство, позволяющее управлять размером шрифта:

Ответ:

&nbsp(1) 'font-size-adjust' &nbsp

&nbsp(2) 'font-width' &nbsp

&nbsp(3) 'font-higth' &nbsp

&nbsp(4) 'font-size' &nbsp

Номер 3

Укажите допустимые значения свойства 'font-size':

Ответ:

&nbsp(1) 10em &nbsp

&nbsp(2) 10% &nbsp

&nbsp(3) big &nbsp

Упражнение 4:

Номер 1

Какое свойство позволяет вывести текст малыми прописными буквами?

&nbsp(1) font-style &nbsp

&nbsp(2) font-variant &nbsp

&nbsp(3) font-weight &nbsp

Номер 2

Какое значение свойства font-variant позволяет вывести текст малыми прописными буквами?

Ответ:

&nbsp(1) 'small-caps' &nbsp

&nbsp(2) 'small'

&nbsp(3) 'normal' &nbsp

Номер 3

Какое свойство определяет шрифты диалоговых окон?

Ответ:

&nbsp(1) message-box &nbsp

&nbsp(2) dialogs &nbsp

&nbsp(3) menu &nbsp

Упражнение 5:

Номер 1

В каких примерах корректно задается степень жирности шрифта?

Ответ:

&nbsp(1) <style type=»text/css»> h2. first {font-weight: 800} </style> &nbsp

&nbsp(2) <style type=»text/css»> h3.second {font-weight: bold} </style> &nbsp

&nbsp(3) <style type=»text/css»> h4.third {font-weight: 200} </style> &nbsp

Номер 2

В каких примерах корректно задается степень жирности шрифта?

Ответ:

&nbsp(1) <style type=»text/css»> h2 {font-weight: 2000} </style> &nbsp

&nbsp(2) <style type=»text/css»> h3 {font-weight: lighter} </style> &nbsp

&nbsp(3) <style type=»text/css»> h4 {font-weight: 300} </style> &nbsp

Номер 3

В каких примерах корректно задается степень жирности шрифта?

Ответ:

&nbsp(1) <style type=»text/css»> p {font-weight: 700} </style> &nbsp

&nbsp(2) <style type=»text/css»> ol {font-weight: bolder} </style> &nbsp

&nbsp(3) <style type=»text/css»> li {font-weight: 1000} </style> &nbsp

Упражнение 6:

Номер 1

Укажите корректные примеры описания шрифтов:

Ответ:

&nbsp(1) pre { font: oblique arial } &nbsp

&nbsp(2) h2 { font: italic 200 arial } &nbsp

&nbsp(3) p { font: italic small-caps 10px/12px serif } &nbsp

Номер 2

Укажите корректные примеры описания шрифтов:

Ответ:

&nbsp(1) pre { oblique arial } &nbsp

&nbsp(2) h2 { font: italic 200 arial } &nbsp

&nbsp(3) p { font: status-bar } &nbsp

Номер 3

Укажите корректные примеры описания шрифтов:

Ответ:

&nbsp(1) font { oblique arial } &nbsp

&nbsp(2) h2 { font: italic 200 arial } &nbsp

&nbsp(3) p { font: status } &nbsp

Упражнение 7:

Номер 1

Укажите корректные примеры сокращенной записи свойств шрифта:

Ответ:

&nbsp(1) p { font: oblique small-caps bold 5px serif } &nbsp

&nbsp(2) p { font: italic small-caps 10px/12px serif } &nbsp

&nbsp(3) p { font style: oblique small-caps bold 5px serif } &nbsp

Номер 2

Укажите корректный пример сокращенной записи свойств шрифта:

Ответ:

&nbsp(1) p { font: oblique small-caps bold 5px serif } &nbsp

&nbsp(2) p { font: italic; small-caps; 10px; 12px; serif } &nbsp

&nbsp(3) p { font-family: oblique small-caps bold 5px serif } &nbsp

Номер 3

Укажите корректный пример сокращенной записи свойств шрифта:

Ответ:

&nbsp(1) p { font: oblique, small-caps, bold, 5px, serif } &nbsp

&nbsp(2) p { font: oblique small-caps bold 5px serif } &nbsp

&nbsp(3) p { oblique small-caps bold 5px serif } &nbsp

Упражнение 8:

Номер 1

Перечислите доступные свойства параметра font

Ответ:

&nbsp(1) font-style &nbsp

&nbsp(2) font-variant &nbsp

&nbsp(3) font &nbsp

Номер 2

Перечислите доступные свойства параметра font

Ответ:

&nbsp(1) font-size &nbsp

&nbsp(2) font-variant &nbsp

&nbsp(3) font-menu &nbsp

&nbsp(4) font-hint &nbsp

Номер 3

Назовите доступное свойство параметра font

Ответ:

&nbsp(1) message-box &nbsp

&nbsp(2) font-weight &nbsp

&nbsp(3) menu &nbsp

&nbsp(4) font-small &nbsp

Главная / Интернет-технологии / Основы работы с CSS / Тест 5

Основы работы с CSS

Какое свойство позволяет вывести текст малыми прописными буквами?

Укажите корректные варианты форматирования:

С помощью какого элемента можно сослаться на внешнюю таблицу стилей?

В каком примере ширина верхнего поля равняется 5px?

Укажите правильный вариант размещения таблицы стилей в документе:

Укажите корректный пример задания фиксированного (не прокручивающегося) фонового изображения:

В каких примерах корректно описано свойство ‘text-align’?

Укажите корректные примеры описания шрифтов:

Какое свойство позволяет задать цвет фона элемента?

Как с помощью псевдо-классов создать новый стиль гиперссылки?

Укажите корректный вариант задания параметров границы:

Укажите корректный вариант задания толщины границы:

Укажите корректные варианты форматирования:

Укажите варианты форматирования, в которых допущена ошибка:

Укажите корректные варианты использования свойства visibility:

Укажите корректные варианты форматирования:

Какие свойства получат свои начальные значения в примере:h2 { font: bold 12pt/14pt Helvetica }

Назовите доступное свойство параметра font

Укажите допустимые значения параметра border-width?

Какой параметр задает тип маркера элемента списка?

Укажите варианты, в которых параметры полей заданы ошибочно:

Укажите варианты, в которых корректно заданы параметры отступов:

В каком примере ширина верхнего отступа равняется 5px?

Какой параметр задает форму элемента?

Какой псевдо-элемент позволяет вставить некоторое содержимое после элемента ?

Как с помощью псевдо-классов задать цвет активной гиперссылки?

Какое свойство позволяет задать выравнивание текста в элементе?

Псевдоэлементами являются:

Выберите корректные примеры задания фонового цвета текста:

Укажите корректный пример задания повторяющегося фонового изображения:

Укажите сокращенный вариант записи правила:

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}

Что является селектором в примере h3 { font-weight: bold }?

Что является объявлением в правиле «HR { width:50px }»?

Что является свойством объявления в примере P { font-weight: oblique }?

Что является значением объявления в правиле «B { font-weight: bold }»?

Укажите атрибуты тэга LINK, которые используются для ссылки на внешнюю таблицу стилей:

Укажите примеры корректного подключения внешней таблицы стилей:

С помощью какого элемента можно поместить в документ таблицу стилей?

Укажите корректный пример задания фонового цвета элемента:

Укажите корректный пример задания изображения в качестве фона:

Укажите корректный пример задания повторяющегося фонового изображения:

Укажите корректный пример задания повторяющегося только по вертикали фонового изображения:

Укажите корректный пример задания повторяющегося только по горизонтали фонового изображения:

Укажите корректный пример задания фиксированного (не прокручивающегося) фонового изображения:

Укажите корректный пример задания прокручивающегося фонового изображения:

Укажите корректный пример сокращенной формы задания повторяющегося только по вертикали фонового изображения:

Какое свойство позволяет задать изображение в качестве фона элемента?

Укажите допустимые значения свойства background-position:

Какое свойство позволяет задать цвет текста?

Какое свойство позволяет задать направление текста?

В каком примере текст в заголовках h2, h3 или h4 будет отображаться шрифтом italic?

Выберите корректный пример задания цвета текста:

Укажите корректные примеры использования свойства text-indent:

Какое свойство позволяет задавать отступы?

Какое свойство позволяет управлять выравниванием?

Какое свойство позволяет управлять оттенением текста?

Какое свойство задает выравнивание содержимого блока?

Укажите вариант определения полужирного шрифта:

В каком примере текст в заголовках h2, h3 или h4 будет отображаться шрифтом italic?

Назовите свойство, позволяющее управлять размером шрифта:

Какое свойство определяет шрифты диалоговых окон?

В каких примерах корректно задается степень жирности шрифта?

Укажите корректные примеры описания шрифтов:

Укажите корректные примеры сокращенной записи свойств шрифта:

Перечислите доступные свойства параметра font

Укажите доступные значения параметра border:

Какой параметр можно использовать для задания цвета левой стороны границы?

Укажите допустимые значения параметра border-style?

Какой параметр служит для задания толщины границы?

Укажите корректные варианты задания толщины границы:

Укажите корректный вариант задания цвета границы:

Укажите корректный вариант задания параметров границы:

Укажите варианты задания параметров границы, содержащие ошибку:

Какой параметр можно использовать для задания всех отступов в одном объявлении?

Укажите вариант, в котором корректно заданы параметры отступов:

Укажите вариант, в котором параметры отступов заданы ошибочно:

Какой параметр можно использовать для задания всех полей в одном объявлении?

В каком примере ширина левого поля равняется 20px?

Укажите вариант, в котором корректно заданы параметры полей:

Укажите варианты, в которых параметры полей заданы ошибочно:

Укажите вариант, в котором корректно заданы параметры полей:

Укажите доступные значения параметра list-style:

Укажите доступные значения параметра list-style-image:

Укажите доступное значение параметра list-style-position:

Укажите доступные значения параметра list-style-type:

Какое значение параметра list-style-position определяет размещение маркера после текста?

Какое значение параметра list-style-type определяет маркер — закрашенный круг?

Какое значение параметра list-style-type определяет маркер — латинские большие буквы?

Укажите пример корректного задания маркеров:

Укажите доступные значения параметра height:

Укажите доступные значения параметра line-height:

Укажите доступные значения параметра max-height:

Укажите доступные значения параметра max-width:

Какой параметр задает минимальную высоту элемента?

Укажите доступные значения параметра width:

Укажите корректный вариант форматирования:

Укажите корректные варианты форматирования:

Укажите доступные значения параметра cursor:

Как установить курсор в виде указателя (руки)?

Укажите допустимые значения параметра display:

С помощью какого параметра можно задать вывод элемента в виде списка?

Укажите корректные варианты форматирования:

С помощью какого параметра можно задать статическое, относительное, абсолютное или фиксированное положение элемента?

Укажите доступные значения параметра clip:

Какой параметр определяет, что происходит, когда содержимое элемента переполняет его область?

Какой параметр определяет, насколько далеко правый край элемента находится левее/правее правого края родительского элемента?

Как с помощью псевдо-классов задать цвет посещенной гиперссылки?

Как с помощью псевдо-классов создать новый стиль гиперссылки?

Какой псевдо-класс добавляет специальный стиль элементу, когда указатель мыши находится над элементом?

Какой псевдо-класс добавляет специальный стиль непосещенной ссылке ?

К псевдоклассам относятся:

Какие псевдоэлементы можно использовать для вставки генерируемого содержимого до или после содержимого элемента?

В каком примере будет создана начальная заглавная зависающая буква, захватывающая две строки:

Перечислите параметры псевдо-элемента first-letter:

Перечислите параметры псевдо-элемента first-line:

Укажите корректный пример задания прокручивающегося фонового изображения:

В каких примерах корректно описано свойство ‘text-align’?

Укажите правильный вариант определения отступа для текста размером ‘3em’:

Какой параметр задает изображение в качестве маркера элемента списка?

Укажите доступные значения параметра cursor:

Укажите корректный пример задания повторяющегося фонового изображения:

Укажите пример, в котором текст будет мигать:

Как установить курсор в виде знака вопроса?

В каком примере текст тэга EM в заголовке h2 будет иметь обычное начертание?

В каком примере ширина левого отступа равняется 20px?

Какое значение параметра list-style-type определяет маркер — число?

Укажите доступные значения параметра padding:

Укажите корректный пример задания повторяющегося только по горизонтали фонового изображения:

Укажите варианты форматирования, в которых допущена ошибка:

Укажите доступное значение параметра max-height:

Какое значение свойства font-variant позволяет вывести текст малыми прописными буквами?

Укажите корректный вариант форматирования:

Какой параметр задает ширину элемента?

Укажите доступные значения параметра line-height:

Какой параметр задает высоту элемента?

Укажите вариант, в котором корректно заданы параметры отступов:

Что является объявлением в правиле «h2 { color: brown }»?

Что является свойством объявления в примере HR { width:250px } ?

Укажите правильные варианты размещения таблицы стилей в документе:

Укажите пример корректного подключения внешней таблицы стилей:

Укажите корректный пример задания фонового цвета элемента:

Укажите корректный пример задания изображения в качестве фона:

Укажите корректный пример задания повторяющегося только по вертикали фонового изображения:

Укажите корректный пример задания фиксированного (не прокручивающегося) фонового изображения:

Укажите корректный пример сокращенной формы задания прокручивающегося фонового изображения:

Укажите допустимые значения свойства background-repeat:

Укажите допустимые значения свойства color:

Какое свойство позволяет задать направление текста?

Какое свойство позволяет изменить интервал между символами?

Какое свойство определяет семейство шрифтов?

Какой из примеров устанавливает маленькие заглавные буквы для заголовка h4 и наклонные — для выделенного текста (EM)?

В каких примерах свойство ‘font-size’ описано без ошибок?

В каких примерах корректно задается степень жирности шрифта?

Какой параметр можно использовать для задания свойств всех четырех сторон границы в одном объявлении?

Какой параметр можно использовать для задания цвета верхней стороны границы?

Укажите допустимые значения параметра border-style?

Назовите допустимое значения параметра border-width?

Укажите корректный вариант задания цвета границы:

Укажите корректный вариант задания параметров границы:

Укажите варианты задания параметров границы, содержащие ошибку:

В каких примерах ширина внешнего правого отступа равняется 10px?

Укажите варианты, в которых параметры отступов заданы ошибочно:

Укажите вариант, в котором корректно заданы параметры отступов:

Какой параметр служит для задания левого поля элемента?

В каких примерах ширина правого поля равняется 10px?

Укажите варианты, в которых корректно заданы параметры полей:

Укажите вариант, в котором параметры полей заданы ошибочно:

Укажите вариант, в котором корректно заданы параметры полей:

Какой параметр можно использовать для задания всех характеристик списка в одном объявлении?

Укажите доступное значение параметра list-style-image:

Укажите доступные значения параметра list-style-position:

Какое значение параметра list-style-position определяет размещение маркера внутри текста?

Какое значение параметра list-style-type определяет маркер — большие римские цифры?

Укажите пример корректного задания маркеров:

Какой параметр задает максимальную высоту элемента?

С помощью какого параметра можно задать вывод элемента в виде таблицы?

С помощью какого параметра можно определить, где в другом элементе появится изображение или текст?

Укажите корректные варианты форматирования:

Какой псевдо-класс добавляет специальный стиль посещенной ссылке ?

Примером псевдокласса гиперссылок являются:

Какой псевдоэлемент можно использовать для «начальных заглавных» и «зависающих заглавных», которые являются распространенными типографскими эффектами?

Первая форматированная строка будет голубого цвета в следующем примере:

Какой псевдо-элемент добавляет специальный стиль к первой букве текста?

Перечислите параметры псевдо-элемента first-line:

Какой псевдо-элемент позволяет вставить некоторое содержимое перед элементом ?

Какой параметр задает максимальную ширину элемента?

Какой параметр служит для задания всех свойств нижней стороны границы в одном объявлении?

Какой параметр задает размещение маркера элемента списка?

Какой параметр задает интервал между строками?

Какой параметр служит для задания стиля границы?

В каком примере текст тэга EM в заголовке h2 будет иметь обычное начертание?

Укажите корректный пример сокращенной формы задания повторяющегося только по горизонтали фонового изображения:

Укажите сокращенный вариант записи правила:

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}

Что является свойством объявления в примере h2 { color: grey } ?

Что является значением объявления в правиле «I { font-weight: bold }»?

Какие символы используются при описании объявления?

Укажите корректный пример задания фонового цвета элемента:

Укажите допустимые значения свойства direction:

Укажите вариант определения курсива:

Укажите допустимые значения свойства ‘font-size’:

В каких примерах корректно задается степень жирности шрифта?

Укажите корректные примеры описания шрифтов:

Укажите варианты задания параметров границы, содержащие ошибку:

Укажите варианты, в которых корректно заданы параметры отступов:

Укажите варианты, в которых параметры отступов заданы ошибочно:

Укажите доступные значения параметра list-style-type:

Укажите корректные варианты форматирования:

Укажите допустимые значения параметра display:

Укажите корректные варианты форматирования:

Укажите корректные варианты форматирования:

Как с помощью псевдо-классов задать цвет гиперссылки?

Какое значение может иметь свойство ‘text-indent’?

Какое значение параметра list-style-type определяет маркер — окружность?

Укажите свойство, позволяющее сделать текст подчеркнутым:

Какой параметр служит для задания левого отступа элемента?

Какой псевдо-класс добавляет специальный стиль активированному элементу?

Какой псевдо-элемент добавляет специальный стиль к первой строке текста?

Какой символ разделяет объявления, сгруппированные внутри блока?

Какое значение параметра list-style-type определяет список без маркера?

Укажите сокращенный вариант записи правила:

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}

Что является селектором в примере P { font-style:italic }?

Что является значением объявления в правиле «h3 { font-weight: bold }»?

Укажите корректный пример задания повторяющегося только по вертикали фонового изображения:

Укажите корректный пример задания повторяющегося только по горизонтали фонового изображения:

Какое свойство позволяет задать цвет текста?

Какой из примеров устанавливает маленькие заглавные буквы для заголовка h4 и наклонные — для выделенного текста (EM)?

Укажите корректные примеры использования свойства text-indent:

Укажите корректный пример сокращенной записи свойств шрифта:

Укажите корректный вариант задания цвета границы:

Укажите вариант, в котором корректно заданы параметры отступов:

Укажите доступные значения параметра list-style:

Какое значение параметра list-style-position определяет размещение маркера слева от текстового блока?

Какой параметр задает тип выводимого курсора?

С помощью какого параметра можно отключить вывод элемента?

Укажите доступные значения параметра clip:

Укажите доступные значения параметра overflow:

Укажите варианты форматирования, в которых допущена ошибка:

Какой псевдо-класс добавляет специальный стиль элементу, когда элемент находится в фокусе?

Как с помощью псевдо-классов создать новый стиль гиперссылки?

Что является селектором в примере P { font-size:10pt }?

Какой параметр позволяет задать способ визуализации элемента?

С помощью какого элемента можно сослаться на внешнюю таблицу стилей?

Как установить курсор в виде песочных часов?

Укажите варианты, в которых корректно заданы параметры полей:

Укажите пример корректного подключения внешней таблицы стилей:

Какое свойство позволяет задать начальное положение фонового изображения?

Укажите допустимые значения свойства background-attachment:

Выберите корректные примеры изменения интервала между символами:

Укажите корректный пример сокращенной записи свойств шрифта:

Какой параметр можно использовать для задания цвета нижней стороны границы?

Укажите доступные значения параметра margin:

Укажите доступное значение параметра max-height:

Укажите доступные значения параметра width:

Укажите вариант стиля, который будет воспроизводить некоторый звук после каждого появления элемента заголовка h5:

Укажите корректный пример задания изображения в качестве фона:

Укажите корректные примеры использования свойства text-indent:

Укажите доступные значения параметра max-height:

Укажите корректный вариант задания толщины границы:

Перечислите параметры псевдо-элемента first-letter:

Что является объявлением в правиле «P { font-family:Arial }»?

Укажите правильный вариант размещения таблицы стилей в документе:

Укажите допустимые значения свойства text-align:

Укажите пример корректного задания маркеров:

Укажите доступные значения параметра overflow:

Какой псевдо-класс добавляет специальный стиль элементу, который является первым потомком некоторого другого элемента?

Укажите доступные значения параметра max-width:

Укажите корректные варианты форматирования:

Перечислите доступные свойства параметра font

Укажите вариант, в котором корректно заданы параметры полей:

Укажите доступные значения параметра height:

В каком примере первые буквы каждого элемента P будут зелеными и размером ’24pt’.

Learn to Change Font CSS

TL;DR — Свойство шрифта CSS устанавливает семейства шрифтов, размеры, жирность и другие свойства стиля шрифтов.

Содержание

• 1. Знакомство со шрифтами
• 1.1. семейство шрифтов
• 1.2. стиль шрифта
• 1.3. размер шрифта
• 1.4. вес шрифта
• 1.5. вариант шрифта
• 1.6. шрифт-стрейч
• 1.7. line-height
• 2. Шрифт CSS: полезные советы

Введение в шрифты

Сокращение шрифта CSS предназначено для установки семи свойств шрифтов в одном объявлении .

В этом примере задается стиль

со шрифтом . сокращение:

Пример

    шрифт: 14px arial, без засечек;
}
p.georgia-шрифт {
   шрифт: курсив полужирный 16px/32px Georgia, с засечками;
} 

Попробуйте живое обучение на Udacity

Недвижимость	Описание
семейство шрифтов	Определяет семейство шрифтов, которое будет использоваться в вашем тексте.
стиль шрифта	Добавляет обычный, курсивный или наклонный эффект к вашим буквам
размер шрифта	Определяет размер ваших символов
вес шрифта	Описывает толщину ваших символов
вариант шрифта	Преобразует текст в меньшие прописные буквы
растяжка шрифта	Выбирает сжатый или расширенный шрифт из шрифтов
высота строки	Указывает высоту строки

Примечание: только font-size и font-family свойства являются обязательными в сокращении CSS font . Другие не являются обязательными.

Проблемы с наследованием и синтаксисом

Сокращение шрифта имеет некоторые проблемы из-за проблемного синтаксиса и наследования. Взгляните на этот краткий обзор:

• Синтаксис: , если в сокращении нет font-size и font-family , CSS проигнорирует весь оператор.
• Синтаксис: значение font-family должно быть последним в объявлении.
• Синтаксис: необязательные значения должны стоять перед размер шрифта значение в сокращении. В противном случае CSS игнорирует их и может сделать то же самое для обязательных свойств.
• Синтаксис: свойство CSS font-stretch может не работать в старых браузерах. Это заставляет CSS игнорировать весь оператор. В целях безопасности включите резервную функцию , которая будет запускаться при сбое сокращения.
• Наследование: опущены необязательные свойства не наследуются значения из их родительских элементов. Вместо этого у них есть свои значения по умолчанию .

font-family

Свойство font-family устанавливает шрифт для элемента. Это свойство определяет не один шрифт, а семейство . Следовательно, другие свойства важны для выбора необходимого шрифта из семейства.

Два имени семейства шрифтов в CSS выглядят следующим образом:

• семейство шрифтов — конкретное семейство шрифтов
• общее семейство – группа семейств шрифтов

Общее семейство	Семейство шрифтов	Описание
Моноширинный	Консоль Lucida Курьер Новый	Ширина всех моноширинных символов одинакова
С засечками	Грузия Таймс Нью Роман	Все шрифты с засечками имеют маленькие линии в конце определенных символов
Без засечек	Ариал Вердана	Символы шрифтов без засечек не заканчиваются маленькими черточками, как в шрифтах с засечками. Считается, что их легче читать на экране, чем Serif

Часто разработчики включают несколько названий семейств CSS шрифтов через запятую . Альтернативы гарантируют , что

стиль шрифтовых работ:

Пример

 p {
   семейство шрифтов: "Times New Roman", Times, serif;
} 

Попробуйте вживую. Учитесь на Udacity

Браузеры выбирают первый встроенный в страницу с помощью @font-face или установленный в операционной системе.

Включите более одного имени, чтобы предоставить браузерам альтернативы . Если один шрифт недоступен , могут быть другие варианты. Укажите этот список из самый высокий приоритет до самый низкий .

Примечание: выбор шрифта происходит по одному символу за раз.

font-style

Свойство font-style определяет стиль шрифта для элементов HTML. Он оформляет шрифт как обычный, курсивный или наклонный. Он может иметь следующие три значения :

• нормальный — текст отображается нормально (по умолчанию).
• курсив — текст отображается курсивом.
• oblique — текст наклонен (немного отличается от курсива). Это значение задает угол наклона.

В примере вы увидите сравнение всех трех значений для стиля

:

Пример

 p.normal {
   стиль шрифта: обычный;
}

курсив {
   стиль шрифта: курсив;
}

п. косой {
   стиль шрифта: наклонный;
} 

Попробуйте живое обучение на Udacity

Примечание: наклонный с установленным углом работает в браузерах, поддерживающих синтаксис CSS Fonts Level 4 .

размер шрифта

Свойство размер шрифта устанавливает размер или высоту шрифта. Это свойство поддерживает три типа значений:

• Ключевые слова: размеров, предопределенных в соответствии с размером шрифта пользователя по умолчанию (xx-маленький, x-маленький, маленький, средний, большой, x-большой, xx-большой, меньший, крупнее).
• Процентное значение: процента в виде значений размера относительно размера шрифта элементов.
• Индикаторы длины: конкретных размеров относительно размера элементов (px, cm, pt, em).

Помните: значения длины делают не принимают отрицательные числа.

В этом примере вы увидите различные значения размера шрифта в действии:

Пример

 стр.размер1 {
    размер шрифта: x-большой;
}

p.size2 {
    размер шрифта: 200%;
}

p.size3 {
    размер шрифта: 20px;
} 

Попробуй вживую Учись на Udacity

Это x-large text

I am a 200% text

Этот текст 20px

Pros

6

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid certificates of completion

EXCLUSIVE: 75% OFF

Pros

• Easy to navigate
• No technical issues
• Seems to забота о своих пользователях

Основные характеристики

• Большое разнообразие курсов
• 30-дневная политика возврата средств
• Бесплатные сертификаты об окончании

AS LOW AS 12. 99$

Pros

• Great user experience
• Offers quality content
• Very transparent with their pricing

Main Features

• Free certificates of completion
• Focused on data научные навыки
• Гибкий график обучения

СКИДКА 75%

вес шрифта

Свойство CSS вес шрифта определяет вес ( жирность ) шрифта.

В примере мы видим элементы с разными значениями font-weight :

Нормальный текст нормальный.

Этот текст выделен жирным шрифтом.

Так выглядит шрифт с начертанием 900.

Пример

 p.normal {
   вес шрифта: нормальный;
}

р.толстый {
   вес шрифта: полужирный;
}

р.толще {
   вес шрифта: 900;
} 

Попробуйте живое обучение на Udacity

Есть несколько способов изменить стиль шрифта в CSS, когда дело доходит до веса:

• Ключевые слова: вы можете установить шрифт обычный . Числовое значение для этого ключевого слова — 400. полужирный задает стиль жирного шрифта (такой же, как 400). light устанавливает шрифт на один вес светлее, чем родительский элемент. жирнее устанавливает шрифт на один вес легче, чем родительский элемент .
• <число>: принимает значения от 1 до 1000. Чем выше число, тем жирнее шрифт такой.

font-variant

Свойство CSS font-variant позволяет заменять текст маленькими прописными (буквы меньше, чем обычные прописные).

В приведенном ниже примере мы видим, как выглядит текст с строчными буквами :

В этом тексте все строчные буквы.

Пример

 p.smallcaps {
   вариант шрифта: капитель;
} 

Попробуйте вживую. Учитесь на Udacity

До CSS3 это свойство для установки стиля шрифта в CSS имело только обычные значения и с маленькими заглавными буквами . Теперь он принимает больше:

• все строчные буквы отображает строчные буквы для прописных и строчных букв.
• маленькие заглавные буквы дисплеи маленькие заглавные буквы. Если шрифты не имеют этой функции, буквы выглядят так же, как с маленькими заглавными буквами .
• all-petite-caps отображает маленькие заглавные буквы для верхнего и нижнего букв. Резервная функция все-маленькие .
• заглавные буквы дисплей заглавные буквы заглавные буквы.
• unicase отображает смесь маленьких заглавных букв для прописных букв с обычными обычными строчными буквами.

font-stretch

Свойство font-stretch указывает обычный , расширенный или сжатый шрифт из шрифта.

Примечание: сокращенный 9Начертания 0033 обозначают символы, которые уже , чем обычно. Расширенные символы относятся к символам, которые шире обычных.

Это свойство принимает следующие значения:

• ультраконденсированный
• сверхконденсированный
• конденсированный
• полуконденсированный
• обычный
• полурасширенный
• расширенный
• расширенный
• сверхрасширенный

Когда шрифты не имеют расширенных или сжатых лиц, CSS font-stretch не изменяет стиль шрифта для элементов HTML.

Примечание: CSS3 представил font-stretch . Для браузеров , таких как Google Chrome и Opera, вам необходимо включить font-stretch в @font-face .

line-height

line-height задает пространство для над и под встроенными элементами. Посмотрите на этот пример:

Пример

 p {
    высота строки: 10;
} 

Попробуйте Live Learn на Udacity

Это свойство принимает следующие значения:

• a
• a <длина>
• a <процент>
• ключевое слово обычный

Примечание: лучший вариант номер . Это может быть любое число, включая десятичных числа .

Шрифт CSS: полезные советы

• Используя свойства текста и свойства шрифта, вы получаете больше контроля над тем, как выглядит текст.
• Рассмотрим пользователей с когнитивными проблемами , такими как дислексия, слабое зрение или другие состояния.

Свойство CSS font-weight - Tutorial Republic

Advertisements

Тема: Свойства CSS3 СправочникПредыдущая|Следующая

Описание

CSS-свойство font-weight устанавливает толщину или жирность шрифта.

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

Синтаксис

Синтаксис свойства задается следующим образом:

 вес шрифта: 

В приведенном ниже примере показано свойство font-weight в действии.

Пример

Попробуйте этот код »

 h2 {
    вес шрифта: нормальный;
}
п {
    вес шрифта: полужирный;
} 

---

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
обычный	Определяет обычные символы.
полужирный	Задает толстые символы.
жирнее	Выбирает жирность шрифта, которая шире, чем толщина, унаследованная от родителя.
зажигалка	Выбирает толщину шрифта, которая легче, чем толщина, унаследованная от родителя.
100	Числовые значения от 100 до 900 образуют упорядоченную последовательность, где каждое число указывает вес, который равен или темнее предыдущего. Ключевое слово обычный совпадает с 400 , а полужирный совпадает с 700 .
200
300
400
500
600
700
800
900
начальный	Устанавливает для этого свойства значение по умолчанию.
унаследовать	Если указано, связанный элемент принимает вычисленное значение свойства своего родительского элемента font-weight . Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт