Три способа вставки CSS

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

  • Внешняя таблица стилей
  • Внутренняя таблица стилей
  • Встроенный стиль

Внешний лист стилей

С внешней таблицей стилей вы можете изменить внешний вид всего веб-сайта, изменив только один файл!
Каждая страница должна содержать ссылку на внешний файл таблицы стилей внутри элемента <link>. Элемент <link> входит в раздел <head>:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Внешняя таблица стилей может быть записана в любом текстовом редакторе. Файл не должен содержать никаких тэгов html. Файл таблицы стилей должен быть сохранен с расширением .css
Вот как выглядит «mystyle.css»:
body { background-color: lightblue;
}
h1 { color: navy; margin-left: 20px;
}
Примечание. Не добавляйте пробел между значением свойства и единицей (например margin-left: 20 px;). Правильный способ:margin-left: 20px;

Внутренний лист стилей

Внутренняя таблица стилей может использоваться, если одна страница имеет уникальный стиль.
Внутренние стили определяются внутри элемента <style> внутри раздела <head> страницы HTML:
<head>
<style>
body { background-color: linen;
}
h1 { color: maroon; margin-left: 40px;
}
</style>
</head>

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

Встроенный стиль может использоваться для применения уникального стиля для одного элемента.
Чтобы использовать встроенные стили, добавьте атрибут style к соответствующему элементу. Атрибут style может содержать любое свойство CSS.
В приведенном ниже примере показано, как изменить цвет и margin-left элемента <h1>:
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

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

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

пример

Предположим, что внешняя таблица стилей имеет следующий стиль для элемента <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> будут «navy»:
<head>
<style>
h1 { color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Каскадный заказ

Какой стиль будет использоваться, если для HTML-элемента указано более одного стиля?
Вообще говоря, мы можем сказать, что все стили «каскадируются» в новую «виртуальную» таблицу стилей по следующим правилам, где номер один имеет наивысший приоритет:
  1. Встроенный стиль (внутри HTML-элемента)
  2. Внешние и внутренние таблицы стилей (в головной части)
  3. Браузер по умолчанию
Таким образом, встроенный стиль (внутри определенного элемента HTML) имеет наивысший приоритет, а это означает, что он переопределит стиль, определенный внутри тега <head>, либо во внешней таблице стилей, либо по умолчанию для браузера.

Материал добавил

7FV

Связь со мной
Телеграм: aslan7f
Скайп: не указан
Добавил статей 35
Группа
Web Дизайнер
Немного обо мне
Всем привет ребят!
Предлагаю услуги по верстке сайтов, доработке уже существующих шаблонов, написание шаблонов с нуля.

Конечно же у вас возникает сразу вопрос, кто я, где мое портфолио и т.д.
Отвечу на этот вопрос:
Кто же я такой? - Я обычный растаман, который накурившись верстает сайты уже лет так 9, рисует иконки, визитки, банеры, логотипы, ретуширует фотографии.

Зарабатываю я на этом? - Скорей нет чем да. Это мое хобби, мне просто нравится все что связано с веб дизайном. Я не говорю что бесплатно все делаю,хотя порой если мне нравится проект и сам клиент как человек, тогда я могу бесплатно поддерживать, помогать с его проектом.
Исправить недочеты в статье

Для того что бы исправить текст новости, просто выделите нужное место и нажмите ctrl + enter

Добавить комментарий

Имя:*
E-Mail:
Введите два слова, показанных на изображении: *