Подготовительный курс HTML и CSS: Запись стилей в теге style

Основная проблема использования атрибутов для определения стилей — их перегруженность. Часто разметка HTML содержит очень много элементов, а с добавлением стилей кода становится намного больше, что плохо сказывается на чтении разметки.

Вторая проблема — исправление стилей. Для этого необходимо сначала найти нужный элемент в коде, а потом отредактировать его стили. Таких элементов на странице может быть 10, 20, 100. А для одноимённых тегов придётся записывать стили отдельно для каждого элемента.

Возникает естественное желание иметь все стили в одном месте, где можно было бы их быстро редактировать. Таким решением является использование тега <style>, внутри которого могут располагаться все необходимые стили.

Возьмём пример из прошлого урока:

<div style="font-size: 20px;">
  Этот текст будет с размером шрифта 20 пикселей

  <p>Вложенный параграф также будет иметь размер шрифта 20 пикселей</p>
</div>

Чтобы избавиться от атрибутов, добавим тег style и укажем, что для тега <div> используется шрифт размером в 20 пикселей.

<style>
  div {
    font-size: 20px;
  }
</style>

<div>
  Этот текст будет с размером шрифта 20 пикселей

  <p>Вложенный параграф также будет иметь размер шрифта 20 пикселей</p>
</div>

Таким же образом можно указать, что у параграфа будет размер шрифта 10 пикселей.

<style>
  div {
    font-size: 20px;
  }

  p {
    font-size: 10px;
  }
</style>

<div>
  Этот текст будет с размером шрифта 20 пикселей

  <p>Вложенный параграф будет иметь размер шрифта 10 пикселей</p>
</div>

Внутри тега <style> использовалась конструкция вида:

имя_тега {
  свойство: значение;
}

Всё, что было записано до открывающей скобки { называется селектор. Селекторы — правила, по которым браузер определяет к какому элементу нужно добавить стили. С некоторыми из селекторов мы познакомимся чуть позже. В примерах выше используются селекторы по тегу, то есть стили будут применяться ко всем элементам с тегом, указанном в качестве селектора

/* Для всех элементов div будет установлен размер шрифта 20px */
div {
  font-size: 20px;
}

Задание

Добавьте в редактор параграф и, используя тег style, установите размер шрифта в 10 пикселей.

Как с вами связаться? 🙃

Команда проекта находится в телеграм-сообществе по ссылке https://ttttt.me/HexletLearningBot. Там можно задать любой вопрос и повлиять на проект

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "Обсуждение". Как правильно задать вопрос:

В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи. В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в обратной связи нашего сообщества

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются

Привет! Я Тота и моя задача помочь в обучении. Чтобы активировать меня, нужно зарегистрироваться или залогиниться, если у вас уже есть аккаунт

Loading...

Ваше упражнение проверяется по этим тестам

1const { test } = require('tests');
2
3test(({ query, expect }) => {
4  const styleTag = query(document, 'style');
5  expect(styleTag).to.be.visible;
6
7  const paragraph = query(document, 'p')
8  const styleP = getComputedStyle(paragraph);
9
10  expect(styleP).to.have.property('font-size', '10px');
11});
12

Решение учителя откроется через:

20:00
waiting_clock