Визначаємо пріоритети стилів (каскадирование в CSS)
Добрий день друзі, в цій статті розглянемо поняття каскадирования і пріоритетів стилів в мові CSS.
У підручнику з CSS для початківців. ми дізналися що впровадити CSS-код в HTML-документ, можна трьома способами:
- через тег - зовнішній стиль, діє на весь сайт
- через тег - внутрішній стиль, діє на всю сторінку
- Через атрибут style = "" - вбудований стиль, діє на один тег
Всі ці три способи, утворюють єдиний каскад стилів. зовнішній, внутрішній, вбудований. У кожного способу є свій пріоритет.
Припустимо, за допомогою зовнішнього стилю, ви призначили абзаців сайту p червоний фон, його можна перебити внутрішнім стилем призначивши всім абзаців однієї сторінки, зелений фон, ну а внутрішній стиль, можна перебити вбудованим стилем, призначивши обраного абзацу синій фон.
З цих трьох стилів, найбільший пріоритет має вбудований стиль style = ""
Отже, на даний момент у нас є таке, в зовнішньому стилі (CSS-файлі), знаходиться правило яке робить фон у всіх абзаців сайту червоним:
У внутрішньому стилі одній зі сторінок сайту знаходиться правило, яке перебиває зовнішній стиль і робить фон у абзаців Сторінка, зеленим:
На цій сторінці, у одного абзацу є вбудований стиль, який перебиває і зовнішні і внутрішні стилі, роблячи його фон синім:
Сподіваюся, до цього моменту все ясно, йдемо далі.
Стилі браузера - це стилі за замовчуванням, наприклад якщо ви створили HTML-сторінку, але ще не впровадили CSS-код, то браузер за вас призначає абзаців колір шрифту чорним, а розмір 16px.
Стилі користувача - це стилі які задає відвідувач сайту в налаштуваннях свого браузера, наприклад в них можна прописати щоб на всіх сайтах, які ви відвідуєте, шрифт у абзаців дорівнював 22px (це корисно робити, якщо у вас проблеми із зором або занадто маленький шрифт на сайтах).
До речі в настройках браузера, можна задавати стилі будь-якого тегу, а не тільки з абзацами, наприклад можна зробити так, щоб всі посилання на кожному сайті який ви переглядаєте через свій браузер мали підкреслення і помаранчевий фон.
Каскад в CSS - це одночасне застосування різних стилів, до HTML-елементів (до каскаду також відноситься і успадкування CSS-властивостей, дочірніми елементами, від батьків).