Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Приоритеты стилей в CSS

Определяем приоритеты стилей (каскадирование в CSS)

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

В учебнике по CSS для начинающих, мы узнали что внедрить CSS-код в HTML-документ, можно тремя способами:

  1. Через тег <link> — внешний стиль, действует на весь сайт
  2. Через тег <style> </style> — внутренний стиль, действует на всю страницу
  3. Через атрибут style=" " — встроенный стиль, действует на один тег

Все эти три способа, образуют единый каскад стилей: внешний, внутренний, встроенный. У каждого способа имеется свой приоритет.

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

Из этих трёх стилей, наибольший приоритет имеет встроенный стиль style=" "

Итак, на данный момент у нас имеется следующее, во внешнем стиле (CSS-файле), находится правило которое делает фон у всех абзацев сайта красным:

p {
 background: red;
}

Во внутреннем стиле одной из страниц сайта находится правило, которое перебивает внешний стиль и делает фон у абзацев данной страницы, зелёным:

<style>
p {
 background: green;
}
</style>

На этой странице, у одного абзаца есть встроенный стиль, который перебивает и внешние и внутренние стили, делая его фон синим:

<p style="background: blue;">
 Абзац...</p>

Надеюсь, до этого момента всё ясно, идём дальше.

Стили браузера, автора и пользователя

Рассмотренные выше стили, называются стилями автора сайта (создателя сайта). Существуют еще два стиля — это стили браузера и стили пользователя.

Стили браузера — это стили по умолчанию, например если вы создали HTML-страницу, но еще не внедрили CSS-код, то браузер за вас назначает абзацам цвет шрифта черным, а размер 16px.

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

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

Теперь соберем в кучу все полученные знания на этом уроке и составим список чьи стили наиболее приоритетнее при просмотре сайта, начинаяя с самого маленького:

  • Стили браузера — самый маленький приоритет
  • Стили автора:
    • Внешний стиль
    • Внутренний стиль
    • Встроенный стиль
  • Стили пользователя — самый высокий приоритет

Каскад в CSS — это одновременное применение разных стилей, к HTML-элементам (к каскаду также относится и наследование CSS-свойств, дочерними элементами, от родителей).

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 31 Окт 2014
Статья обновлена: 5 Фев 2016

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget