Как подключить CSS в HTML документ

Как подключить CSS в HTML документ

Подключить CSS стили к HTML документу (сайту) можно тремя способами:

  1. Встроенные стили - использование атрибута style в начальном теге HTML (<a style="font-color: red;" href="#">Ссылка</a>).
  2. Внутренние таблицы стилей - использование элемента <style> в разделе заголовка документа <head>.
  3. Внешние таблицы стилей - Использование элемента <link>, указывающего на внешний файл CSS (наиболее предпочтительный вариант).

В этом уроке мы рассмотрим все эти три способа вставки CSS один за другим.

Встроенные стили

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

Атрибут style включает ряд пар свойств и значений CSS. Каждая пара «свойство: значение» разделяется точкой с запятой (;), так же, как вы пишете во встроенную или внешнюю таблицу стилей. Но все это должно быть в одной строке, то есть после строки с точкой с запятой не должно быть разрыва:

<h1 style="color:red; font-size:30px;">Это заголовок</h1>
<p style="color:green; font-size:22px;">Это параграф текста</p>

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

Внутренние таблицы стилей

блок 1

Внутренние таблицы стилей влияют только на документ, в который они встроены.

Внтуренние таблицы стилей определены в разделе <head> документа HTML с использованием элемента <style>. Вы можете определить любое количество элементов <style> в документе HTML, но они должны появляться между тегами <head> и </head>. Вот пример:

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML страница</title>
<style type="text/css">
  body { background-color: YellowGreen; }
  p { color: #fff; }
</style>
</head>
<body>
  <h1>Заголовок страницы</h1>
  <p>Параграф текста.</p>
</body>
</html>

Внешние таблицы стилей

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

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

Добавление внешних таблиц стилей CSS

Перед установкой ссылки нам нужно сначала создать таблицу стилей. Давайте откроем ваш любимый редактор кода и создадим новый файл. Теперь введите следующий код CSS внутри этого файла и сохраните его как "style.css".

body {
  background: lightyellow;
  font: 18px Arial, sans-serif;
}
h1 {
  color: orange;
}

Внешняя таблица стилей может быть связана с документом HTML с помощью тега <link>. Тег <link> находится внутри раздела <head>, как показано в этом примере:

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Страница</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Заголовок</h1>
  <p>Параграф текста.</p>
</body>
</html>

Среди всех трех методов использование внешней таблицы стилей является наилучшим методом определения и применения стилей к документам HTML.

Импортирование внешних таблиц стилей

Правило @import - это еще один способ загрузки внешней таблицы стилей. Оператор @import указывает браузеру загрузить внешнюю таблицу стилей.

Вы можете использовать его двумя способами. Самый простой способ - в заголовке вашего документа. Обратите внимание, что другие правила CSS так же могут быть включены в элемент <style>. Вот пример:

<style type="text/css">
  @import url("style.css");
  p {
    color: blue;
    font-size: 16px;
  }
</style>

Точно так же вы можете использовать правило @import для импорта таблицы стилей в другой файл таблицы стилей.

@import url("layout.css");
@import url("color.css");
body {
  color: blue;
  font-size: 14px;
}
блок 3

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*