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

Когда браузер читает таблицу стилей, он форматирует документ HTML в соответствии с информацией из таблицы стилей.

Три способа использования CSS

Есть три способа вставки таблиц стилей:

  • Внешний CSS
  • внутренний CSS
  • внутренний CSS

Внешний CSS

Используя внешние таблицы стилей, вам нужно всего лишь изменить один файл, чтобы изменить весь вид сайта!

Каждая страница HTML должна содержать ссылку на внешний файл таблицы стилей в элементе <link> раздела head.

пример

Внешний стиль определяется в элементе <link> в разделе <head> страницы HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Попробуйте сами

внешние таблицы стилей могут быть написаны в любом текстовом редакторе и должны сохраняться с расширением .css.

внешние .css файлы не должны содержать никаких HTML-тегов.

"mystyle.css" выглядит так:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

внимание:не добавляйте пробелы между значением свойства и единицей измерения (например margin-left: 20 px;) правильное написание:margin-left: 20px;

внутренний CSS

если у HTML-страницы есть уникальные стили, можно использовать внутренние таблицы стилей.

внутренние стили определяются в элементе <style> в разделе head.

пример

внутренние стили определяются в элементе <style> в разделе <head> HTML-страницы:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Попробуйте сами

внутренний CSS

внутренние стили (также известные как inline стили) могут использоваться для применения уникальных стилей к одному элементу.

если нужно использовать внутренние стили, добавьте атрибут style к соответствующему элементу. Атрибут style может содержать любые свойства CSS.

пример

внутренние стили определяются в атрибуте "style" соответствующего элемента:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Это заголовок</h1>
<p style="color:red;">Это абзац.</p>
</body>
</html>

Попробуйте сами

подсказка:внутренние стили теряют многие преимущества таблиц стилей (путем смешения содержимого с представлением). Используйте этот метод с осторожностью.

несколько таблиц стилей

если для одного и того же селектора (элемента) в различных таблицах стилей определены некоторые свойства, то будут использоваться значения из последней таблицы стилей.

предположим, что у нас естьвнешняя таблица стилейследующие стили установлены для элемента <h1>:

h1 {
  color: navy;
}

предположим, что у нас естьвнутренняя таблица стилейтакже был установлен следующий стиль для элемента <h1>:

h1 {
  color: orange;    
}

пример

если внутренние стили связаны с внешней таблицей стилейпослеэлемент <h1> будет оранжевым, если он определен в таблице стилей:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Попробуйте сами

пример

но, если стили связаны с внешним таблицей стилейранееОпределили внутренние стили, поэтому элемент <h1> будет темно-синим:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Попробуйте сами

Порядок наложения

Когда для одного и того же HTML элемента задается несколько стилей, какой стиль будет использоваться?

Все стили на странице будут «слоиться» в новый «виртуальный» таблицу стилей по следующим правилам:

  1. Стили inline (в элементах HTML)
  2. Внешние и внутренние таблицы стилей (в разделе head)
  3. Стандартные стили браузера

Таким образом, стили inline имеют наивысший приоритет и будут перекрывать внешние и внутренние стили, а также стили по умолчанию браузера.

Попробуйте сами