HTML/CSS: Каскадные таблицы стилей
В прошлом модуле, посвящённом языку разметки HTML, были рассмотрены различные элементы, которые, по умолчанию, имели стилевое оформление: параграфы отделялись отступами, ссылки отличались цветом, заголовки различались размером текста и т.д. Будучи разработчиком можно изменять это оформление и добавлять совершенно новое. Добавить фон к тексту? Изменить размеры элементов? Создать анимацию? Всё это можно сделать с помощью CSS (англ. Cascading Style Sheets — Каскадные таблицы стилей) — языка, который определяет, как будут выглядеть HTML-элементы в браузере.
Курс по CSS является логическим продолжением курса по HTML. Многие теги и понятия, которые будут встречены по ходу прохождения уже рассматривались.
На примере ниже показывается вывод текста без использования своего CSS (то есть применяются те стили, которые «проставляет» браузер) и то, как можно стилизовать документ с использованием CSS.
Пример текста со стандартным оформлением
Параграфы
Параграфы создаются с помощью парного тега <p>, в тело которого помещается небольшая часть текста. Например:
<p>Первый параграф</p>
<p>Второй параграф</p>Пример текста с пользовательским оформлением
Параграфы
Параграфы создаются с помощью парного тега <p>, в тело которого помещается небольшая часть текста. Например:
<p>Первый параграф</p>
<p>Второй параграф</p>Теперь текст читается проще, и можно быстро отделить примеры кода от описания. В курсе будут рассмотрены базовые CSS-правила для работы с текстом и блоками, которые позволят оформить текст и визуально структурировать информацию.
Задание
Скопируйте код в редактор. Попробуйте подставлять различные значения, чтобы увидеть, как работает редактор. Тесты ожидают полную копию кода ниже.
<p style="font-size: 25px;">Первое изменение стиля с помощью CSS</p>
Упражнение не проходит проверку — что делать? 😶
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.