CSS: Использование CSS в HTML
Язык стилей CSS не связан с HTML напрямую. Необходимо указать браузеру, откуда нужно загрузить и интерпретировать стили. Для этого есть три способа:
- Указать стили в качестве значения атрибута
style. Такую запись называют «инлайн» (inline), что означает запись правила в одну строку с использованием атрибутаstyle. - Использовать специальный тег
<style>, который указывают в секцииhead. Браузер обработает всё, что написано внутри этого тега как CSS код - Подключать отдельный файл со стилями. В этом случае создаётся файл с расширением
.css, в котором записываются CSS правила. Для подключения файла используется мета-тег<link>
В этом уроке рассмотрим принцип инлайн записи стилей с помощью атрибута style. Какой бы способ подключения стилей вы не выбрали, синтаксис правил остаётся неизменным: название-свойства: значение;. Важно не забывать добавлять символ ; после значения свойства. Так браузер сможет отделить правила друг от друга.
Один из основных способов «попробовать» стили — работа с текстом. CSS позволяет оформлять текст множеством способов: увеличивать размер шрифта, определять начертание, насыщенность и так далее. Все основные правила для работы с текстом рассматриваются в течениe всего курса.
Научимся менять размер шрифта. Размер можно изменить с помощью свойства font-size, значением которого является число и единица измерения. Попробуем сделать текст размером 32 пикселя. Единица измерения пиксель обозначается с помощью сокращения px. Подробнее про различные единицы измерения и то, как они работают, будет рассказано в следующих уроках
<p style="font-size: 32px;">Large text</p>
Задание
Добавьте в редактор тег <p></p> и, используя атрибут style, установите размер шрифта в 12 пикселей.
CSS: Использование CSS в HTML
Язык стилей CSS не связан с HTML напрямую. Необходимо указать браузеру, откуда нужно загрузить и интерпретировать стили. Для этого есть три способа:
- Указать стили в качестве значения атрибута
style. Такую запись называют «инлайн» (inline), что означает запись правила в одну строку с использованием атрибутаstyle. - Использовать специальный тег
<style>, который указывают в секцииhead. Браузер обработает всё, что написано внутри этого тега как CSS код - Подключать отдельный файл со стилями. В этом случае создаётся файл с расширением
.css, в котором записываются CSS правила. Для подключения файла используется мета-тег<link>
В этом уроке рассмотрим принцип инлайн записи стилей с помощью атрибута style. Какой бы способ подключения стилей вы не выбрали, синтаксис правил остаётся неизменным: название-свойства: значение;. Важно не забывать добавлять символ ; после значения свойства. Так браузер сможет отделить правила друг от друга.
Один из основных способов «попробовать» стили — работа с текстом. CSS позволяет оформлять текст множеством способов: увеличивать размер шрифта, определять начертание, насыщенность и так далее. Все основные правила для работы с текстом рассматриваются в течениe всего курса.
Научимся менять размер шрифта. Размер можно изменить с помощью свойства font-size, значением которого является число и единица измерения. Попробуем сделать текст размером 32 пикселя. Единица измерения пиксель обозначается с помощью сокращения px. Подробнее про различные единицы измерения и то, как они работают, будет рассказано в следующих уроках
<p style="font-size: 32px;">Large text</p>
Задание
Добавьте в редактор тег <p></p> и, используя атрибут style, установите размер шрифта в 12 пикселей.
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const element = query(document, 'p');
const style = getComputedStyle(element);
expect(style).to.have.property('font-size', '12px');
});Решение учителя откроется через:
20:00
