ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

 Как подключить CSS


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


Три способа подключения CSS

Существует три способа подключения таблицы стилей CSS:

  • Внешняя таблица стилей (External)
  • Внутренняя таблица стилей (Internal)
  • Встроенный стиль (Inline)

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

С помощью внешней таблицы стилей вы можете изменить внешний вид всего сайта, изменив только один файл!

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

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

Пример

Внешние стили определены в элементе <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>
Попробуйте сами »

Внешнюю таблицу стилей можно написать в любом текстовом редакторе (например, в стандартном Блокноте). Файл не должен содержать никаких HTML-тегов. Файл таблицы стилей должен быть сохранен с расширением .css.

Примечание: Подробнее о текстовых редакторах, которые можно использовать для написания как HTML-кода, так и CSS-кода, читайте в разделе Редакторы кода.

Вот как выглядит файл "mystyle.css":

"mystyle.css"

body {
  background-color: lightblue;
}

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

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


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

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

Пример

Внутренние стили определены в элементе <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>
Попробуйте сами »

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

Встроенный стиль может использоваться для применения уникального стиля для отдельного элемента на HTML странице.

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

Примечание. Встроенный стиль необходимо использовать как-можно реже, в крайних случаях, когда нужно выделить отдельный фрагмент текста (словосочетание) только на одной HTML странице. Встроенный стиль перегружает HTML-код и увеличивает общий объем веб-страницы.

Пример

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

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
Попробуйте сами »

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


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

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

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

h1 {
  color: navy;
}

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

h1 {
  color: orange;   
}

Пример

Если внутренний стиль определен после ссылки на внешнюю таблицу стилей, то элемент <h1> будет отображаться "orange" (оранжевым):

<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. Внешние и внутренние таблицы стилей (в разделе head)
  3. Стиль браузера по умолчанию

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

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


Проверьте себя с помощью упражнений!