Как добавить CSS в HTML?

Время чтения: мин.

02 фев 2023

Раздел:

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

Что такое CSS?

Проще говоря, сайт состоит из двух частей. Первая часть — это HTML, который отвечает за структуру документа, благодаря языку HTML мы описываем элементы страницы, например, заголовок, раздел, абзац и т. д. С помощью CSS (или каскадных таблиц стилей) мы придаем им внешний вид, т.е. определяем размер, цвет, позиционирование и вообще то, как элемент будет выглядеть на странице. Сочетание CSS с HTML позволяет создать полноценный веб-сайт, как редактировать CSS стили можно узнать по ссылке.

Благодаря тому, что CSS отделен от структуры документа, проще управлять стилями на странице, например, для изменения размера шапки на всех подстраницах веб-сайта достаточно одного изменения в листе CSS. достаточно. Вам не нужно изменять каждую подстраницу отдельно.

Как добавить CSS в HTML?

Поскольку листы CSS отделены от структуры документа, как их добавить на наш сайт? Есть три способа добавить CSS в HTML, и тот, который вы используете, может варьироваться в зависимости от случая. Следует помнить, что существует такое понятие, как иерархия важности стилей и заключается она в том, что тот стиль, который был определен в коде самое позднее, будет «работать».

Добавление CSS в HTML с помощью внешнего файла

Это самый популярный способ подключения CSS к HTML, и он дает вышеупомянутые преимущества, связанные с отделением файла от структуры документа. Чтобы включить CSS во внешний файл, сначала необходимо его создать. Мы можем назвать его styles.css. Затем в разделе <head>нашего HTML-документа нам нужно добавить следующую разметку:

<link rel="stylesheet" href="styles.css" />

Атрибут hrefуказывает путь к нашему листу, в примере выше файл находится в той же директории, что и файл.html, к которому мы его прикрепляем.

Добавление CSS в HTML с помощью тега<style>

Другой способ добавить CSS — использовать файл <style>. Мы должны добавить его в раздел <head>документа, который мы хотим стилизовать. Добавление CSS в файл HTML переопределит стили, добавленные с помощью внешнего листа. Пример использования:

<style>

p {

color: black;

font-size: 24px;

}

</style>

Встроенный CSS, то есть добавление стилей с использованием атрибута «стиль»

Мы также можем добавить CSS непосредственно к определенному элементу HTML, используя расширение style. Это перезапишет стили, добавленные с помощью методов, перечисленных ранее. Пример использования:

<p class="description" style="color: black; font-size: 24px;">Lorem ipsum</p>

Иерархия

По умолчанию иерархия такова, что стили, добавленные с помощью встроенного CSS, переопределяют стили, добавленные с помощью других методов, а стили, добавленные с помощью тега <style>в разделе, <head>переопределяют стили, добавленные с помощью внешнего листа.

Однако мы можем разбить иерархию, используя предложение!important:

/* złamanie hierarchii */

p {

color: red!important;

}

Комментарии

Добавить

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Как добавить CSS в HTML?

Что такое CSS?

Как добавить CSS в HTML?

Добавление CSS в HTML с помощью внешнего файла

Добавление CSS в HTML с помощью тега<style>

Встроенный CSS, то есть добавление стилей с использованием атрибута «стиль»

Иерархия

Похожие статьи

Как кодировать игру: создание игры с нуля

Как происходит разработка веб-сайта

Как выучить Django

Как использовать ChatGPT: что вам нужно знать

Руководство для начинающих по программированию в Linux

Сложно ли выучить Python?

Понимание процесса разработки программного обеспечения

Что такое Веб 3.0?

Программирование для детей — оно того стоит?

Пишем простой и красивый блог. Страница с новостью. Это последняя часть. Часть #7

Пишем инвестиционный сайт (HYIP). Структура. Валидация данных пользователей. Часть #1

Пишем инвестиционный сайт (HYIP). Регистрация пользователей. Подтверждение E-email. Часть #2

Пишем инвестиционный сайт (HYIP). Реферальная программа. Вход. Часть #3

Пишем инвестиционный сайт (HYIP). Выход. Сброс пароля. Часть #4

Пишем инвестиционный сайт (HYIP). Вывели тарифы на главной. Мелкие доработки. Часть #5

Пишем инвестиционный сайт (HYIP). Подключили Perfect Money. Покупка тарифов. Часть #6

Пишем инвестиционный сайт (HYIP). Доработали оплату тарифов. Часть #7

Пишем инвестиционный сайт (HYIP). Дорабатываем профайл. История, рефералы, тарифы. Часть #8

Пишем инвестиционный сайт (HYIP). Дорабатываем ПУ Администратора. Часть #9

Пишем инвестиционный сайт (HYIP). Заявки на вывод средств. Часть #10