Привет, джуниор!
В прошлой статье, мы разобрались с несколькими базовыми тегами и для чего они предназначены. Сегодня, я предлагаю приступить к изучению новой технологии, которая позволить поработать на визуальных оформлением этих элементов. Для этого нам понадобится CSS.
Есть несколько способов стилизация нашей страницы. Мы будем рассматривать каждый, но последний считается предпочитаемым.
Стилизация html-элемента через атрибут style.
Откройте редактор Visual Studio Code.
В строке с заголовком первого уровня пропишите
<h1 style="color: blue">Заголовок первого уровня</h1>
Сохраните код и откройте страницу в браузере.
Как вы могли заметить, цвет текста заголовка сменился на синий.
Когда необходимо применить стили к какому-то элементу, в теге необходимо добавить атрибут style, в значении атрибута указать свойство и его значение.
В текущем примере, тегу <h1> добавили атрибут style и задали цвет (color) текста со значением синий (blue).
Стилизация html-элементов через тег <style>.
Следующий способ стилизовать элементы, создать тег style внутри тега head и прописать ему свойства стилей. Отредактируйте код и обновите станицу.
<style>
img {
width: 300px;
height: 150px;
}
</style>
В этом участке кода, мы для тега img, задали свойства:
width - устанавливает ширину элемента, значение указываем в пикселях;
height - устанавливает высоту элемента, значение указываем в пикселях.
Стилизация элементов через подключение внешнего файла.
Раскройте проводник в проекте, создайте папку css, в папке создайте файл style.css
Структура проекта теперь выглядеть так
Возвращаемся в index.html, в теге head, подключаем файл со стилями, используя тег link, содержащий два атрибута rel и href.
<link rel="stylesheet" href="./css/style.css">
Атрибут rel со значение stylesheet, определяет, что подключаемый файл хранит таблицу стилей.
Атрибут href со значение ./css/style.css, определяет, где хранится файл со стилями. В нашей случае, мы переходим в папку css и подключаем файл style.css
Переходим к оформлению страницы.
Добавим к тегу-абзацу (<p>) и элементам списков (<li>) классы.
Классы необходимы, чтобы применять стили к нескольким элементам.
Для присвоения класса нужно добавить атрибут class для html-элемента и задать письменное значение.
Тегу p присвойте атрибут класс со значением text.
Тегам li присвойте атрибут класс со значением item.
Сохраняем страницу index.html и переходим в файл style.css
В файле style.css добавим два класса. Синтаксис написание классов начинается с ".имя класса", сами правила оформляются фигурными скобками и в теле класса прописывают свойство: значение
Классу text мы присвоили:
font-family - свойство, в котором задаем шрифты без засечек;
font-style - свойство, в котором задаем курсивный текст;
font-size - свойство, в котором задаем размер шрифта;
line-height - свойство, в котором задаем междустрочную высоту.
классу item мы присвоили:
font-weight - свойство, в котором задаем жирный текст;
font-size - свойство, в котором задаем размер шрифта;
line-height - свойство, в котором задаем междустрочную высоту.
Сохраните файл style.css и обновите страницу браузера.
В результате, у вас визуально изменится абзац и элементы списков.
Как я уже писал ранее, подключение отдельного файла со стилями является более верным решением.
Конечно же, мы рассмотрели лишь маленькую часть тех свойств, которыми могут быть применены. По мере написания статей, мы обязательно познакомимся с другими свойствами.
В следующей статье, мы рассмотрим полезные расширения для Visual Studio Code.
До скорых встреч =)