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(2) 'font-family' &nbsp

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

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

Номер 1

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

Ответ:

&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(1) H { font-variant: small-caps } EM { font-style: oblique } &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

Номер 1

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

Ответ:

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

&nbsp(2) BLOCKQUOTE { font-size: larger } &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

Номер 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)

Номер 2

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

Ответ:

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

&nbsp(2) 'small' &nbsp

&nbsp(3) 'normal' &nbsp

Номер 3

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

Ответ:

&nbsp(1) message-box &nbsp

&nbsp(2) dialogs &nbsp

&nbsp(3) menu &nbsp

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

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

Ответ:

&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 свойства

CSS позволяет тегам HTML назначать любые визуальные стили, формируя таким образом уникальный внешний вид сайта. Делается это при помощи свойств CSS. В данном справочнике приводится информация по всем свойствам CSS с описанием, допустимыми значениями и примерами.

Шрифт

Анимация

Гибкая компоновка элементов

Трансформация

Цвет и фон

background	Короткое свойство, устанавливающее все свойства фона элемента за одну декларацию
background-attachment	Определяет, будет ли фоновое изображение зафиксировано, или оно будет прокручиваться вместе с остальным содержимым страницы
background-blend-mode	Устанавливает режим наложения фонового изображения элемента на фоны других элементов.
background-clip	Устанавливает область прорисовки фонового изображения
background-color	Определяет фоновый цвет элемента
background-image	Определяет фоновое изображение элемента
background-origin	Устанавливает область позиционирования фонового изображения
background-position	Задает начальное положение фонового изображения в пределах содержащего его элемента
background-repeat	Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image
background-size	Устанавливает размер фонового изображения
color	Это свойство определяет цвет текста элемента

Рамка и контур

Свойства таблиц

Позиционирование и отображение

bottom	Это свойство определяет расстояние от нижнего края HTML элемента до нижнего края его родительского элемента
clear	Это свойство определяет, с какой стороны элемента запрещено его обтекание другими элементами
clip	Это свойство определяет область позиционированного элемента, в которой будет показано его содержимое
display	Определяет, как элемент должен быть показан в документе
float	Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с другой стороны
left	Это свойство определяет расстояние от левого края HTML элемента до левого края его родительского элемента, т. е. расстояние его смещения вправо
overflow	Определяет, каким образом будет отображаться содержимое элемента, если оно не помещается в область вывода данного элемента
overflow-wrap	Определяет, должен ли браузер переносить длинные слова на новую строку при переполнении контейнерного элемента
overflow-x	Определяет, как будет отображаться содержимое элемента, если оно не помещается слева/справа в область вывода данного элемента
overflow-y	Определяет, как будет отображаться содержимое элемента, если оно не помещается вверху/внизу в область вывода данного элемента
position	Устанавливает способ позиционирования элемента
right	Это свойство определяет расстояние от правого края HTML элемента до правого края его родительского элемента
top	Это свойство определяет расстояние от верхнего края HTML элемента до верхнего края его родительского элемента
visibility	Определяет видимость элемента
z-index	Определяет порядок позиционированных элементов по z-оси

Тени и прозрачность

Размеры

box-sizing	Устанавливает алгоритм вычисления ширины и высоты элемента
height	Устанавливает высоту блочных или заменяемых элементов
max-height	Устанавливает максимальную высоту элемента.
max-width	Устанавливает максимальную ширину элемента
min-height	Устанавливает минимальную высоту элемента
min-width	Устанавливает минимальную ширину элемента
resize	Определяет, может ли пользователь изменять размер элемента
width	Устанавливает ширину блочных или заменяемых элементов

Другое

Генерируемый контент

Режимы написания

Свойства текста

Свойства списков

Внешние и внутренние отступы

Вывод на печать

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: полезные советы

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

Свойства шрифта

 P { семейство шрифтов: «Учебник нового века», Times, serif } 

 h2 {стиль шрифта: наклонный}
P {стиль шрифта: обычный} 

 SPAN { вариант шрифта: маленькие заглавные буквы } 

 h2 { вес шрифта: 800 }
P {начертание шрифта: нормальный} 

 h2 {размер шрифта: большой}
P {размер шрифта: 12pt}
LI {размер шрифта: 90%}
СИЛЬНЫЙ {размер шрифта: больше} 

 h2 { font-size: 200% }