HTML/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;">Большой текст</p>
Большой текст
Задание
Добавьте в редактор тег <p></p> и, используя атрибут style, установите размер шрифта в 12 пикселей.
Упражнение не проходит проверку — что делать? 😶
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.