Каскадность в 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 (это полезно делать, если у вас проблемы со зрением или на вебсайте на котором вы любите сидеть, слишком маленький шрифт).

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

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

• Стили браузера — самый маленький приоритет
• Стили автора:
  • Внешний стиль — файл style.css
  • Внутренний стиль — тег <style>
  • Встроенный стиль — атрибут style=" "
• Стили пользователя — самый высокий приоритет

В основном, при создании сайтов вебмастера имеют дело с «внешним стилем», файлом style.css

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

• Category: CSS
• Tag: css, каскадность