Как сделать стили css главными
!important
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0 | 7.0+ | 1.0+ | 3.5+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | Нет |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/cascade.html#important-rules |
Версии CSS
Описание
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
/* Размер текста 8 пунктов */
font-size: 8pt
>
/* Черный цвет текста */
color: #000;
/* Размер текста 12 пунктов */
font-size: 12pt
>
Lorem ipsum dolor sit amet.
Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.
/* Серый цвет текста */
color: silver;
/* Размер текста 12 пунктов */
font-size: 12pt
>
Lorem ipsum dolor sit amet.
Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов.
/* Серый цвет текста */
color: silver;
Lorem ipsum dolor sit amet.
Будут использоваться все стилевые свойства пользователя. Текст станет отображаться как черный, размер 12 пунктов.
Lorem ipsum dolor sit amet.
Рис. 1. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Настроить стили» (рис. 2).
Рис. 2. Подключение стиля пользователя в браузере Opera
Синтаксис
Значения
У этого свойства нет значений.
HTML5 CSS2.1 IE Cr Op Sa Fx
Браузеры
Как в CSS переопределить стиль
Дата публикации: 2016-08-10
От автора: работая с css вам в любом случае придется переопределять стили. Задания свойств для глобальных селекторов в любом случае не хватит. Сегодня посмотрим, как в css переопределить стиль любому элементу.
Первое – глобальные селекторы тегов
Селекторы тегов предназначены для того, чтобы давать стили всем элементам одного типа. Например, спискам. Чтобы убрать маркеры у всех списков на веб-страницах сайта, достаточно в css записать это:
Отлично. Соответственно, свой селектор есть у ячеек таблиц, картинок, блоков, полей форм и вообще всех элементов. Это понятно. Но тут же возникает проблема: едва ли все списки на сайте вы будете стилизовать одинаково. Не, ну тут ситуации могут быть абсолютно разными. Давайте рассмотрим лучше на примере абзацев, потому что это будет более приближено к реальности.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Итак, всем абзацам на странице задаем какие-то стили. Это будет общее оформление.
Ну сильно напрягаться не будем, всего лишь зададим цвет и размер шрифта. Хорошо, это просто оформление для всех параграфов. Но теперь допустим, что перед вами появилась задача: определенные абзацы нужно выделить красным цветом. Как это сделать?
Достаточно просто. Опишем в css новый стилевой класс. Допустим, назовем его red, чтобы было понятно.
Теперь остается задать его нужным абзацам. Допустим, мне нужно сделать его для второго и третьего. Я надеюсь, прописывать стилевые классы вы умеете, это делается так:
Ну и также поступаем с другим абзацем. В итоге мы уже переопределили стиль. То есть цвет текста всех абзацев был темно-серым, а мы изменили цвет некоторых параграфов на красный. Вот вам и переопределение стилей.
Но задание стилевого класса годится в том случае, когда нужно переопределить правила группе элементов. То есть нескольким параграфам, изображениям и т.д. Но что делать, если переопределить стили нужно всего лишь одному элементу? Для этой цели уже лучше использовать идентификатор.
Идентификатор (id) используется для того, чтобы присвоить уникальную метку конкретному элементу на веб-странице. Таким образом к нему можно будет обращаться в css через этот идентификатор и задавать какие-то правила. Они будут применены, даже если ранее для этого элемента были заданы абсолютно другие стили.
Например, у нас есть 2 абзаца, в котором текст окрашен красным цветом. Но если одному из них задать идентификатор и потом описать в css стили для этого селектора, то они будут приоритетнее, чем правила класса.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Обновим страницу и убедимся в том, что цвет текста синий. Но по сути для нашего абзаца цвет текста задается в трех местах. Во-первых, в селекторе тега – темно-серый. Во-вторых, в классе – красный. В-третьих, в идентификаторе.
Какой вывод из этого эксперимента? А то, что класс приоритетнее селектора тега, а идентификатор приоритетнее класса. Еще одно важное утверждение, которые вы должны понять для себя: стилевые классы обычно используют для стилизации группы элементов (пункты меню, группа абзацев, ряд картинок), а идентификаторы – для стилизации одиночных элементов, уникальных на сайте (шапка, подвал, какая-то иконка, логотип и т.д.).
Переопределение с помощью встроенных стилей
Любому html-элементу можно встроить стили прямо в тег, прописав их с помощью атрибута style. Если мы сделаем так:
Смотрите, у нашего параграфа уже куча свойств, определяющих оформление. Но его текст станет зеленым, как это описано в атрибуте style. Почему? Да потому что внутренние стили имеют самый высокий приоритет.
В частности, в селекторе тега указан темно-серый цвет, но он перебивается классом, идентификатором и внутренними стилями, которые в нашем случае перебивают все остальное. Но есть простой способ перебить все это. Запишем так:
Все абзацы одного цвета – темно-серого. Заметьте. Что ни класс, ни идентификатор, ни даже встроенные стили, которые по идее применяются в последнюю очередь и должны перебивать все, не могут переопределить цвет и он остается таким, каким он задан в селекторе тега.
Ну опять же, не советую вам слишком много играться с important, это считается плохим тоном верстки.
Окей. С переопределением мы вроде разобрались. Конечно, мы рассмотрели не все способы переопределения. О некоторых вы можете догадаться и сами. Например, использование вложенных селекторов. В принципе можно легко догадаться, что абзацы в боковой колонке легко отделить от абзацев в основной части сайта.
Приоритеты стилей в CSS
При использовании CSS довольно часто можно наблюдать такую ситуацию, когда указанные стили почему-то не работают, хотя все написано без ошибок. Например, не изменяется размер шрифта, цвет ссылки или какие-то другие параметры HTML-элемента. В таком случае можно говорить только об одном — где-то в таблице стилей уже существует селектор (возможно и не один) воздействующий на данный элемент и содержащий то же самое свойство CSS, которое у вас не хочет действовать. Этот селектор был создан вами ранее и возможно вы о нем забыли или не забыли, а просто не учли правила приоритетов стилей.
Именно о приоритетах стилей мы и поговорим в этом уроке, из которого вы узнаете о целом ряде правил, которые используют браузеры при обработке вашего CSS. Сначала мы по отдельности рассмотрим с вами каждый фактор влияющий на итоговый результат, а затем объединим все это в общую картину.
Приоритеты стилей в зависимости от типа селектора
Да, селекторы CSS также влияют на стилевые приоритеты, причем в расчет берутся не только простые селекторы (классы, селекторы тегов, атрибуты и т.д.), но и составные (дочерние, соседние, селекторы потомков и т.д.).
Чтобы вычислить уровень приоритета (специфичности) какого-либо селектора браузеры используют определенный алгоритм, где каждому типу начисляется определенное количество баллов, определяющее вес селектора. Стили того селектора, который наберет больший вес, в конечном итоге и будут применены к элементу. Если же получится так, что какие-то селекторы, которые воздействуют на один и тот же HTML-элемент наберут одинаковое число баллов, то будут использованы стилевые свойства того, который находится в коде ниже.
А теперь давайте рассмотрим, каким же образом браузеры считают эти баллы.
Чтобы вы лучше поняли, как вычисляются эти виртуальные баллы, вот вам несколько простых примеров.
Как видите все довольно просто. Только вы не пугайтесь заранее, думая, что вам придется постоянно высчитывать эти баллы при создании своих таблиц стилей. На самом деле их никто никогда просто так не считает. Обычно про селекторный приоритет вспоминают только тогда, когда какие-то стили не хотят работать. Вот тут-то и начинаются «танцы с бубном» и поиски виновного. 🙂
Пример демонстрирующий приоритеты селекторов
Результат в браузере
Правило !important используется в тех случаях, когда необходимо, чтобы конкретное свойство было обязательно применено к элементу вне зависимости от того, в каком селекторе и в каком месте CSS-кода оно находится, а также, невзирая на имеющиеся дубли. Общий синтаксис:
Результат в браузере
Приоритеты подключаемых и импортируемых стилей
Так как же и в каком порядке браузер создает эту общую таблицу стилей из отдельных файлов-кусочков? Ну, тут все довольно предсказуемо, предполагаю, что многие из вас уже давно догадались. Так вот, браузер считывает подключаемые стили по мере их появления в коде, то есть он сначала берет CSS из самого первого файла, затем ниже добавляет стили второго, еще ниже — третьего и так далее. Таким образом создается одна общая каскадная таблица стилей, в которой действуют такие же правила приоритетов, как и в обычной таблице состоящей из одного файла.
Давайте-ка я вам все-таки быстренько покажу это схематично на примере импортируемых стилей, так сказать, для закрепления материала.
Содержимое файла style1.css
Итоговая таблица созданная браузером
Итоговая таблица стилей с учетом приоритетов и что такое Каскад
Для получения итоговой таблицы стилей браузеры используют несколько этапов отбора, при котором учитывают приоритетные правила рассмотренные нами выше.
Ну а почему же все-таки «каскадные таблицы стилей»? Под каскадом в данном случае как раз и понимается то, что описано чуть выше. То есть возможность для браузера получения CSS из трех разных источников с учетом правил сортировки и приоритетов стилей. Все.
Не глядя в результат задания, определите, какого цвета будет текст внутри каждого элемента. Не сломайте мозг. 🙂 Вот код:
Приоритеты стилей CSS.
Приоритет от способа подключения стилей CSS.
На практике, когда вы будете работать с реальными веб-страницами, очень часто возникает ситуация, что одному и тому же элементу на веб-странице может быть присвоен один и тот же стиль с разными значениями, но из разных источников.
Какой из этих стилей будет приоритетнее для браузера? Какой он отобразит в итоге?
В этой серии видеоуроков мы с вами попытаемся разобраться с этими вопросами.
Давайте рассмотрим такую ситуацию. У нас есть элемент абзаца. Давайте сейчас применим к этому абзацу разные стили CSS, но из разных источников и посмотрим, какой стиль в итоге будет применен для элемента.
В этом примере у нас есть 3 источника, в которых задается значение цвета текста для элемента абзаца с атрибутом :
Самое главное, значение цвета текста, в каждом из этих источников противоречит друг другу.
Какое значение стиля CSS в итоге будет применено к элементу? Каким цветом в итоге будет отображаться наш абзац? Зеленым, синим или красным?
Если вы откроете эту веб-страницу в браузере, вы увидите, что абзац отобразиться зеленым цветом текста.
Т.е. самым приоритетным с точки зрения подключения стилей CSS будет являться внутренний стиль, который применяется с помощью атрибута style.
Если удалить этот стиль, то более приоритетным становится стиль внутри элемента style. Это является вторым по приоритету способом применения стилей CSS.
Последним по приоритету применения стилей CSS будут являться стили внутри файла style.css.
Смысл здесь в том, что стили CSS, которые находятся ближе всего к элементу и будут являться наиболее приоритетными.
Приоритет от места нахождения в коде.
Давайте рассмотрим еще один случай «конфликта» стилей CSS (когда они противоречат друг другу). Это тот случай, когда в пределах одного источника подключения файлов стилей CSS, например мы подключаем стили из файла style.css и в этом файле произошел конфликт стилей CSS: стили накладываются друг на друга.
Т.е. один и тот же селектор, одно и то же свойство color, но имеет разные значения. Какое значение в итоге будет применено к выбранному абзацу? Он станет синим или он станет красным?
Если проверить это на практике, то мы убедимся, что абзац становится синим цветом.
Таким образом, если у вас в пределах одного источника подключения стилей CSS есть один и тот же селектор и какие-то свойства этого селектора противоречат друг другу, то применяться в итоге будет тот стиль, который идет ниже по коду.
Это можно объяснить тем, что браузер выполняет код сверху вниз и сначала сделает элемент красным цветом и потом сделает его синим. В итоге в браузере отобразиться цвет текста, который будет синим.
Имейте это правило применения приоритетов стилей CSS в виду, т.к. часто приходится с этим сталкиваться, особенно в больших проектах.
Каскадность CSS. Приоритеты стилей
В данной главе подробно объясняется, почему каскадные таблицы стилей (Cascading Style Sheets, CSS) называются каскадными. Для начала давайте вспомним, какими способами можно добавить стиль на веб-страницу:
Это – один из способов управлять значимостью стилей. Еще один способ повысить приоритет – специально увеличить вес селектора, например, добавив к нему ID или класс.
Сброс стилей с помощью reset.css
В предыдущей главе мы уже упоминали о том, что у каждого браузера есть свои встроенные стили HTML-документов, созданные для улучшения читабельности. Вы наверняка уже видели, как выглядит «голая» веб-страница в браузере: синие подчеркнутые ссылки, черный шрифт, полужирное начертание заголовков и т. д.
Каждый браузер имеет свои отличия во встроенных стилях: например, в IE нет отступа от верхнего края окна, а в Firefox есть. Таких отличий существует много. Чтобы они не создавали помех для кроссбраузерности при написании собственного стиля CSS, можно воспользоваться методом сброса встроенных стилей.
Инструмент для сброса стилей – это, по сути, та же самая таблица CSS, где описаны правила, которые сбрасывают встроенные стили браузеров, устанавливая базовые значения свойств. Называется такая таблица reset.css и служит для того, чтобы вы могли начать создавать стиль «с нуля». Вот пример стандартной таблицы сброса:
Этот вариант таблицы Reset.css разработал известный опытный специалист по стандартам HTML и CSS Эрик Мейер. Он работает в области веб-технологий с 1993 года и является автором многих книг по CSS.
Конечно же, существуют и другие вариации Reset CSS, например, более популярный сейчас Normalize.css, который, в отличие от Reset CSS, сохраняет много полезных стилей по умолчанию, а не стирает их начисто. Это удобно, поскольку избавляет от необходимости вновь объявлять стили для многих стандартных элементов.
Если требуется, вы и сами можете создать свой файл сброса стилей, исходя из ваших потребностей.
А сейчас вкратце о том, что делает вышеприведенная таблица сброса стилей:
Файл сброса стилей необходимо подключать раньше, чем собственные стили. Если вы внимательно читали абзац о приоритетах, то уже поняли, почему reset.css должен находиться перед другими стилями: потому что правила, указанные ниже в коде, перезаписывают правила, объявленные ранее.
Итоги
Каскадность в CSS – это способность стилевых правил накладываться друг на друга, перезаписывать и смешиваться. Итоговый стиль элемента, который виден в браузере – это комбинация нескольких последовательно примененных стилей.
При конфликте нескольких стилей срабатывает правило приоритетов. Предпочтение отдается тому стилю, который считается более значимым.
Необходимо знать, как работают правила распределения приоритетов между стилями, чтобы создавать грамотные таблицы стилей.
Первая часть нашего учебника подошла к концу. Второй раздел книги мы начнем с изучения CSS шрифтов, веб-шрифтов и способов их подключения.