Как повысить приоритет стилей в css, если к странице подключены два файла css
Для указания псевдо-класса используется одинарное двоеточие ( : ), например:
Для указания псевдо-элементов используется двойное двоеточие ( :: ), например:
Для обратной совместимости оставили возможность указывать псевдо-элементы с одним двоеточием.
Так как в вопросе речь про псевдо-класс, нужно изменить
.payment::hover .payment:hover button < border-color: #659BDB; color: #191970; >button:hover < background: #659BDB; color: white; >.payment < border-color: #EE0000; color: #EE0000; >.payment:hover < background: #EE0000; color: white; >.payment::hover < /* не работает */ background: black; color: green; >Каскадность в CSS — Основы современной верстки
В прошлом уроке была разобрана вторая часть словосочетания Каскадные таблицы стилей, а именно таблицы стилей. Мы изучили, как записываются и применяются стили к различным HTML элементам. В этом уроке поговорим о значении слова каскадные.
Что такое каскадность? Представьте себе каскад водопадов. В них вода перетекает из одного водопада в другой и так до тех пор, пока это все не уйдет в общий бассейн.
В CSS слово каскадность имеет такое же значение. В качестве воды у нас CSS свойства. Они могут накладываться и перекрывать друг друга. Другими словами каскадность — возможность языка CSS накладывать свойства друг на друга, а также расширять свойства в селекторах.
Возможно такое описание достаточно сложное, но давайте посмотрим на примере. Создадим параграф с двумя классами: text-bold и text-dark . Первый класс будет отвечать за жирное начертание текста, а второй за установку темного цвета шрифта. Также добавим селектор по тегу и укажем размер шрифта 24 пикселя.
class="text-bold text-dark"> Какой-то очень интересный текст об интересной вещи. Очень интересно. В CSS файле укажем следующие стили:
p font-size: 24px; > .text-bold font-weight: bold; > .text-dark color: #333333; > Попробуйте воспроизвести этот пример, и вы увидите, что текст выводится темного цвета и с жирным начертанием. Стили от классов text-bold и text-dark сложились и применились к нашему параграфу. Также текст имеет размер 24 пикселя, которые мы указали для селектора по тегу.
Итоговыми стилями для нашего параграфа будут:
color: #333333; font-weight: bold; font-size: 24px; > Это и есть каскадность стилей CSS. Хоть мы и использовали разные селекторы и классы для описания, но в конечном итоге они суммировались.
Приоритет селекторов
Важной чертой CSS является то, что разные типы селекторов имеют разный приоритет. Если стили противоречат друг другу в разных селекторах, то вступает в дело принцип приоритета. Разберем на примере. Возьмем параграф с классом red и идентификатором blue . Установим соответствующие цвета для текста. Для всех же параграфов в тексте установим зеленый цвет.
p color: green; > .red color: red; > #blue color: blue; > id="blue" class="red">Какого же цвета будет параграф? Перед тем, как читать дальше попробуйте выполнить этот пример в любом удобном вам месте.
Как вы смогли заметить, текст параграфа будет синим. Но почему так? Может быть, дело в том, что синий цвет в CSS указан самым последним? В данном случае нет. Даже если мы переместим селектор по идентификатору в самый вверх, параграф все равно останется синим.
Все дело в том, что селектор по идентификатору имеет самый высокий приоритет. Встретив его, браузер будет считать эти стили самыми важными для страницы и в случае противоречий возьмет значение в первую очередь из стилей для идентификатора.
Условно можно расставить селекторы в следующем порядке по приоритету:
- Селектор по идентификатору ( #blue )
- Селектор по классу ( .red )
- Селектор по тегу ( p )
Где 1 — самый высокий приоритет, а 3 — самый низкий.
Разберем еще один пример:
p color: blue; font-weight: bold; > .important color: purple; font-style: italic; > #intro color: green; > class="important" id="intro">Индейские племена Манахаттоу и Канарси. Этот текст будет наклонным, жирным и зеленым . И вот почему:
- Селектор по тегу p :
- Добавит синий цвет
- Добавит жирное начертание
- Заменит
синий цветна пурпурный - Сделает текст курсивным
- Заменит
пурпурный цветна зеленый
После всех таких преобразований итоговые стили для параграфа сложатся следующим образом:
color: green; font-weight: bold; font-style: italic; >Важно: так как селектор по идентификатору имеет самый высокий приоритет и перебивает все стили классов, то его использование считается не очень хорошей практикой. Указав стили для идентификатора, мы лишаем себя возможности переопределить стили с помощью классов. Это бывает очень важно для создания отзывчивых к действиям пользователя сайтов, когда на его действия мы меняем внешний вид некоторых элементов.
Переопределение свойств
Возможно, у вас возник вопрос, а что случится, если элемент будет иметь несколько классов, свойства которых противоречат друг другу? Здесь каскадность работает по принципу «Кто последний, тот и прав». Проще всего это так же посмотреть на примере:
.alert color: gray; > .alert-error color: red; >class="alert alert-error">Важное сообщение! Сообщение красного цветаОтталкиваясь от принципа каскадности, браузер вначале увидит селектор .alert и установит серый цвет текста. Далее ему встретится селектор .alert-error , который говорит установить красный цвет. И браузер просто перезапишет серый цвет на красный. Порядок классов в HTML в данном случае не играет никакой роли. Даже в таком случае
class="alert-error alert">Важное сообщение! Сообщение красного цветацвет текста будет красным. Это наглядно показывает независимость CSS от HTML. Если же поменять местами селекторы в CSS, то поменяются и итоговые стили.
.alert-error color: red; > .alert color: gray; >class="alert alert-error">Важное сообщение! Сообщение серого цветаВес селекторов
Во время разработки вы будете встречать разные ситуации, при которых одни селекторы будут иметь больший вес, чем другие. Причем их месторасположение в CSS файле не имеет особого значения:
class="form-input">.form-input height: 50px; > textarea height: 200px; >Какой высоты будет элемент ? Правильный ответ — 50px, так как селектор по классу имеет больший приоритет, чем селектор по тегу. Но как же задать высоту в 200px и не вводить новые классы? Достаточно подставить к тегу еще и название класса:
.form-input height: 50px; > textarea.form-input height: 200px; >Теперь для элемента будет установлена высота в 200px. Это произошло благодаря тому, что приоритеты «складываются» в рамках одного селектора. Для большего понимания таких сложений можно представить, что общий вес селектора определяется тремя цифрами, где:
- Первая цифра показывает количество идентификаторов в селекторе
- Вторая цифра показывает количество классов в селекторе
- Третья цифра показывает количество тегов в селекторе
Может звучать сложно, но концепция простая. Разберем прошлый пример:
class="form-input">.form-input height: 50px; > textarea height: 200px; >- Селектор .form-input состоит из одного класса, поэтому в качестве второй цифры поставим единицу и получим: 010
- Селектор textarea состоит из одного тега. Записываем единицу в третий разряд нашего числа: 001
Визуально понятно, что 010 > 001, поэтому свойства внутри такого правила имеют больший приоритет. Мы захотели это исправить и дополнили наш селектор:
.form-input height: 50px; > textarea.form-input height: 200px; >Теперь порядок сил во вселенной немного изменился:
- Селектор .form-input состоит из одного класса, поэтому в качестве второй цифры поставим единицу и получим: 010
- Селектор textarea.form-input состоит из одного класса и тега. Записываем единицу во второй и третий разряд нашего числа: 011
Получаем, что 010 < 011, а значит свойства внутри селектора textarea.form-input будут иметь больший приоритет.
Такой подход поможет вам лучше понимать, как действуют те или иные правила, а также почему все разработчики стараются максимально уйти от сложных селекторов. При получении опыта вы все реже будете считать вес таким образом, а уже будете изначально понимать, как расставлены приоритеты.
Самостоятельная работа
Создайте файл index.html на своем компьютере.
Внутри HTML расположите следующую запись:
lang="en"> charset="UTF-8"> Небольшая вёрстка div width: 500px; height: 500px; background: #333333; > #main color: white; width: 750px; > .text-white color: white; > .alert height: 350px; color: gray; > div background: blue; > .alert-warning background: #000000; color: yellow; > id="main" class="text-white alert alert-warning">Какой-то текстПроанализируйте получившийся результат
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар « Как самостоятельно учиться »
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Приоритет в CSS
Элемент HTML может быть целью нескольких правил CSS. Давайте воспользуемся простым абзацем в качестве примера:
Мы можем изменить этот абзац просто используя имя тега:
Или же можем воспользоваться именем класса:
.message
Или можем использовать идентификатор:
#introduction
Поскольку браузер может выбрать только один цвет и применить его к этому абзацу, то он должен решить, какое правило CSS имеет приоритет над другими. Это называется приоритетом в CSS (или специфичностью).
В нашем примере абзац будет красным, потому что идентификатор более специфичен и, таким образом, более важен, чем другие селекторы.
Порядок правил CSS
Если в вашем CSS есть одинаковые селекторы, то последний из них будет иметь приоритет.
p < color: green; >p < color: red; >/* Абзац будет красным */Вычисление 100
Есть один быстрый способ выяснить, насколько правило CSS «сильное», путём вычисления специфичности селекторов:
Селектор с наивысшим «счётом» будет преобладать, независимо от порядка, в котором появляются правила CSS.
#introduction < color: red; >.message < color: green; >p
Правило #introduction < color: red; >является более специфичным, чем другие, потому что идентификаторы должны быть уникальными по всей веб-странице, таким образом, может быть только один целевой элемент.
.message < color: green; >будет нацелен на любой HTML-элемент с атрибутом class=»message» и, следовательно, менее специфичен. То же самое относится и к p < color: blue; >, который может предназначаться для любого абзаца.
Как избежать конфликтов
Во время написания вашего CSS могут легко возникнуть противоречивые правила, в которых одно и то же свойство применяется несколько раз.
Чтобы избежать этого:
- применяйте только классы: используйте .introduction вместо #introduction , даже если этот элемент появляется на вашей веб-странице только один раз;
- избегайте применять несколько классов к одному элементу HTML: пишите не , а , который является семантически более описательным;
- не используйте встроенные стили, такие как .
Каскадность в CSS
Добрый день друзья, в данной статье мы рассмотрим понятия каскадности в CSS, приоритетов стилей в языке.
В учебнике по CSS для начинающих, мы узнали что внедрить CSS-код в HTML-документ, можно тремя способами:
- Через тег — внешний стиль, действует на весь сайт
- Через тег — внутренний стиль, действует на всю страницу
- Через атрибут style=» » — встроенный стиль, действует на один тег
Все эти три способа, образуют единый каскад стилей: внешний, внутренний, встроенный. У каждого способа имеется свой приоритет.
Допустим, с помощью внешнего стиля, вы назначили абзацам сайта p красный фон, его можно перебить внутренним стилем назначив всем абзацам одной страницы, зелёный фон, ну а внутренний стиль, можно перебить встроенным стилем, назначив выбранному абзацу синий фон.
Из этих трёх стилей, наибольший приоритет имеет встроенный стиль style=» «
Итак, на данный момент у нас имеется следующее, во внешнем стиле (CSS-файле), находится правило которое делает фон у всех абзацев сайта красным:
Во внутреннем стиле одной из страниц сайта находится правило, которое перебивает внешний стиль и делает фон у абзацев данной страницы, зелёным:
На этой странице, у одного абзаца есть встроенный стиль, который перебивает и внешние и внутренние стили, делая его фон синим:
Абзац.
Надеюсь, до этого момента всё ясно, идём дальше.
Стили браузера, автора и пользователя
Рассмотренные выше стили, называются стилями автора сайта (создателя сайта). Существуют еще два стиля — это стили браузера и стили пользователя.
Стили браузера — это стили по умолчанию, например если вы создали HTML-страницу, но еще не внедрили CSS-код, то браузер за вас назначает абзацам цвет шрифта черным, а размер 16px .
Стили пользователя — это стили которые задает посетитель сайта в настройках своего браузера, например в них можно прописать чтобы на всех сайтах, которые вы посещаете, шрифт у абзацев был равен 22px (это полезно делать, если у вас проблемы со зрением или на вебсайте на котором вы любите сидеть, слишком маленький шрифт).
Кстати в настройках браузера, можно задавать стили любому тегу, а не только абзацам, например можно сделать так, чтобы все ссылки на каждом сайте который вы просматриваете через свой браузер имели подчеркивание и оранжевый фон.
Теперь соберем в кучу все полученные знания на этом уроке и составим список чьи стили наиболее приоритетнее при просмотре сайта, начиная с самого маленького:
- Стили браузера — самый маленький приоритет
- Стили автора:
- Внешний стиль — файл style.css
- Внутренний стиль — тег
- Встроенный стиль — атрибут style=» «
В основном, при создании сайтов вебмастера имеют дело с «внешним стилем», файлом style.css
Каскад в CSS — это одновременное применение разных по приоритету стилей, к HTML-элементам.