САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиция CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

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

CSS3 Адаптивный дизайн

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

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

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

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

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS Инструкции



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


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

Существует три способа вставки таблицы стилей:

  • Внешний стиль CSS
  • Внутренний стиль CSS
  • Встроенный стиль CSS

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

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

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

Пример

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Редактор кода »

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

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

mystyle.css

body {
   background-color: lightblue;
}

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

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


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

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

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

Пример

<head>
<style>
body {
   background-color: linen;
}

h1 {
   color: maroon;
   margin-left: 40px;
}
</style>
</head>
Редактор кода »

Встроенный стиль CSS

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

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

В примере ниже показано, как изменить цвет заголовка <h1> и установить поле слева margin-left:30px; на 30 пикселей:

Пример

<h1 style="color:blue;margin-left:30px;">Это заголовок</h1>
Редактор кода »

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


Несколько стилей CSS

Если несколько свойств были определены для того же селектора <h1> с разными стилями, будет использоваться чтение значений из последнего стиля CSS.

Пример

Предположим, что внешний стиль имеет следующий стиль заголовка <h1>:

h1{
   color: navy;
}

Затем, предположим, что внутренний стиль имеет следующий стиль заголовка <h1>:

h1{
    color: orange;   
}

Если внутренний стиль определяется после ссылки на внешний стиль заголовка <h1>, тогда будет color: orange; оранжевый цвет:

Пример

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
   color: orange;
}
</style>
</head>
Редактор кода »

Однако, если внутренний стиль определяется, раньше чем ссылка на внешний стиль CSS, заголовок <h1> будет color: navy; голубого цвета:

Пример

<head>
<style>
h1 {
   color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Редактор кода »

Порядок каскадных стилей CSS

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

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

  1. Встроенный стиль (внутри элемента HTML)
  2. Внешние и внутренние стили (в раздел head)
  3. Браузер по умолчанию

Так, встроенный стиль (внутри конкретного элемента HTML) имеет наивысший приоритет, что означает, что он будет переопределять стили, определенными внутри тега <head>, или во внешней таблице стилей, или браузер по умолчанию.

Редактор кода »


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