Important html: Документ не найден | htmlbook.ru

Leave a Comment / Html / By alexxlab / 08.01.2023

Содержание

CSS :: !important

css-модификатор !important (от англ. important – важный) используется для повышения приоритета стилевого правила. В случае необходимости !important указывается во внутренних и внешних таблицах стилей после значения css-свойства через пробел, например, p{color: green !important;}. Свойство стиля, в котором указан данный параметр, обладает наибольшим приоритетом в независимости от расположения таблицы стилей в коде документа или же самого правила внутри таблицы стилей, но только в ситуации, когда специфичности стилей равны (при этом не следует забывать, что специфичность встроенного стиля следует считать наивысшей в любом случае!). Опять же, если свойств с таким параметром несколько, да еще и специфичности соответствующих селекторов одинаковы, то приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы.

Всегда пытайтесь использовать специфичность, а не модификатор !important, т.к. он усложняет отладку, нарушая естественное каскадирование стилей.

Характеристики

Значение по умолчанию: нет.
Применяется: ко всем элементам.
Наследуется: нет.

Синтаксис

свойство: !important

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-cascade-3/#importance

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/Specificity

Примеры

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	<style>
		/* Специфичность селектора выше */
		div p.green_normal{
		color: #007700;      
		font-weight: normal;   
		}
		/* Специфичность селектора ниже, */
		/* плюс отсутствует !important */
		.
  bold_wrong{
		font-weight: bold;   
		}	
		/* Специфичность селектора ниже, */
		/* но присутствует !important */	
		.bold_font{
		font-weight: bold !important;   
		}
	</style>
</head>
<body>
	<div>
		<p>
			Получаем обычный текст, зеленого цвета.
		</p>
	</div>
	<div>
		<p>
			Начертание не стало полужирным, т.к. приоритет<br> 
			селектора .bold_font ниже, чем селектора div p.green_normal.
		</p>
	</div>
	<div>
		<p>
			Цвет текста остался зеленым, но начертание стало полужирным,<br> 
			т.к. в подключенном классе .bold_font присутствует !important.
		</p>
	</div>
	<div>
		<p>
			Цвет текста остался зеленым, но начертание стало полужирным,<br> 
			т.к. в подключенном классе .bold_font присутствует !important.<br>
			<span>Но мое начертание осталось 
			обычным,<br> т.к. встроенный стиль имеет наивысший приоритет.</span>
		</p>
	</div>
</body>
</html>

Пример №1

HTML CSS Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  
  <meta name="robots" content="noindex">
  <title>Пример №2</title>
	<!-- Подключаем внешнюю таблицу стилей -->
	<link rel="stylesheet" href="styles. css">
	<style>
		/* Базовый класс */
		div p.green_normal{
		color: #007700;      
		font-weight: normal;   
		}
		/* Специфичность селектора такая же, как */
		/* и у класса .bold_font во внешней CSS */
		/* плюс также присутствует !important */
		.normal_strong{
		font-weight: normal !important;   
		}	
	</style>
   
</head>
<body>
 
  <div>
    <p>
			Цвет текста остался зеленым, но начертание стало полужирным,<br> 
			несмотря на то, что класс .green_normal находится во внутренней<br>  
			таблице стилей, поскольку в подключенном классе .bold_font из<br> 
			внешней таблицы стилей присутствует параметр !important.
    </p>
  </div>
 
  <div>
		<p>
			Цвет текста остался зеленым, но начертание полужирным не стало,<br> 
			т.к. подключенный класс .normal_strong имеет ту же специфичность<br> 
			селектора, что и класс .bold_font, в нем также присутствует<br> 
			модификатор !important, но зато он расположен во внутренней<br> 
			таблице стилей, которая имеет приоритет над внешней таблицей.
  </p>
  </div> 
   
</body>
</html>

/* Специфичность селектора ниже, */
/* + это внешняя таблица стилей */
/* но присутствует !important */	
.bold_font{
font-weight: bold !important;   
}

Пример №2

html — !important для всего блока css

Вопрос задан 4 года 4 месяца назад

Изменён 4 года 4 месяца назад

Просмотрен 452 раза

Подскажите, есть ли в css возможность выставления свойства !important сразу для всех свойств.

Сейчас мне приходится писать так:

.btn-disabled {
  background: #eaeaea !important;
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  cursor: default !important;
}

Но может есть какой-нибудь способ сказать, что всё, что указано в .

btn-disabled имеет свойство !important?

html
css
css3
оформление

Нет такого.Пишите !important отдельно для каждого свойства.

Можно использовать «вес» селекторов css, использовать цепочки селекторов. important используем когда нет возможности написать правила правильно, или для исключительных случаев.

можно представить, что

p — один селектор это 1 бал
div p — это 2 бала
.class — класс это 10
#id — идентификатор это 100

тогда

body(1) #id(100) .class(10) p(1) === 112
body(1) p(1) === 2

Этого вполне достаточно, чтобы правильно спланировать свою структуру.

!important может (но не обязательно) потенциально создать трудности при переопределении стилей в будущем.

Поэтому его нужно использовать именно для «важных» значений, которые не должны переопределятся или имеют особый приоритет.

.wrapper {
  color: red;
}

.list {
  color: green;
}

.btn {
   color: blue;
}

.wrapper .btn {
  color: orange;
}

.wrapper .list .btn {
  color: yellow;
}

.wrapper .list .ul li:first-child > a.btn {
  color: black;
}


#btn {
 color: violet;
}

<div>
  <div>
     <ul>
        <li><a>ul .btn</a></li>
        <li><a>ul .btn</a></li>
        <li><a>#btn</a></li>
     </ul>
     <p>.list p</p>
  </div>
  <p>.wrapper p</p>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как переопределить !important

Переопределить !important можно, но сначала давайте разберемся, почему не рекомендуется использовать правило !important.

Использование !important является плохой практикой, и его следует избегать, так как это усложняет отладку, нарушая обычное каскадирование в таблице стилей. Когда мы применяем два конфликтующих объявления с правилом !important к одному и тому же элементу, будет применено объявление с более высокой специфичностью.

Теперь мы представим способы переопределения правила !important.

Добавьте еще одно правило CSS с !important. Затем дайте селектор с более высокой специфичностью (добавление тега, идентификатора или класса к селектору) или добавьте правило CSS, имеющее тот же селектор, на более позднем этапе, чем существующий. При равенстве специфичности выигрывает последнее определенное правило.

Давайте посмотрим примеры с более высокой специфичностью:

 table td {
  высота: 50px !важно;
}

.myTable тд {
  высота: 50px !важно;
}

#myTable тд {
  высота: 50px !важно;
}

Первый уровень самый низкий, а третий самый высокий.

Вы можете добавить такой же селектор после существующего.

 тд {
  высота: 50px !важно;
}

Давайте шаг за шагом посмотрим, как переопределить правило !important.

Используйте элемент
с атрибутами class, id и style.
Добавьте !important к атрибуту стиля.

 <дел>
  Пример переопределения правила !important.

Добавьте стиль к атрибутам class и id. Установите для них свойство background -color и добавьте правило !important.
Придайте стиль
, указав свойства font-size, margin-top, text-align, color и font-weight.
Добавьте свойство background-color и используйте правило !important.
Установите другой цвет для
с помощью свойства background-color и добавьте !important.
Установите background-color для атрибутов class и id элемента
и добавьте !important.

 # текстовый идентификатор {
  цвет фона: зеленый !важно;
}
. text-класс {
  цвет фона: белый !важно;
}
дел {
  размер шрифта: 25px;
  маржа сверху: 30%;
  выравнивание текста: по центру;
  цвет: #1d1d69;
  вес шрифта: полужирный;
  цвет фона: черный !важно;
}
дел {
  цвет фона: белый !важно;
}
div[текстовый класс],
div[идентификатор текста] {
  цвет фона: желтый !важно;
}

Теперь мы можем увидеть полный код.

Пример переопределения правила !important:

 

  <голова>
    Название документа
    <стиль>
      # текст-идентификатор {
        цвет фона: зеленый !важно;
      }
      .text-класс {
        цвет фона: белый !важно;
      }
      дел {
        размер шрифта: 25px;
        маржа сверху: 30%;
        выравнивание текста: по центру;
        цвет: #1d1d69;
        вес шрифта: полужирный;
        цвет фона: черный !важно;
      }
      дел {
        цвет фона: белый !важно;
      }
      div[текстовый класс],
      div[идентификатор текста] {
        цвет фона: желтый !важно;
      }
    
  
  <тело>
    <дел>
      Пример переопределения правила !important.

Попробуй сам »

Здесь мы предлагаем некоторые правила, которые необходимо учитывать при использовании !important:

Всегда находите способ использовать специфичность, прежде чем даже рассматривать правило !important.
Используйте правило !important только для специфичных для страницы CSS, которые переопределяют внешний CSS.
Не используйте правило !important при написании подключаемого модуля/мэшапа или в CSS для всего сайта.

Как и когда их использовать — Smashing Magazine

9 мин чтения
Кодирование, CSS, Essentials
Поделиться в Твиттере, LinkedIn

Об авторе

Луис — разработчик интерфейса, писатель и писатель из Торонто, Канада. Он курирует информационные бюллетени Web Tools Weekly и Tech Productivity, а также ведет блоги о… Больше о Louis ↬

Когда спецификация CSS1 была составлена в середине-конце 90-х годов, в ней было представлено !important объявлений, которые помогали разработчикам и пользователям легко переопределять обычную специфичность при внесении изменений в свои таблицы стилей.

По большей части !important объявления остались прежними, только с одним изменением в CSS2.1 и ничего нового не было добавлено или изменено в спецификации CSS3 в связи с этим уникальным объявлением.

Когда спецификация CSS1 была разработана в середине-конце 90-х годов, она представила !important объявлений, которые помогли разработчикам и пользователям легко переопределить обычную специфичность при внесении изменений в свои таблицы стилей. По большей части объявления !important остались прежними, за исключением лишь одного изменения в CSS2.1 и ничего нового, добавленного или измененного в спецификации CSS3 в связи с этим уникальным объявлением.

Дополнительная литература на SmashingMag:

Специфика и наследование CSS
Освоение принципов CSS: подробное руководство
Специфика CSS: вещи, которые вы должны знать что именно означают эти типы объявлений и когда, если вообще когда-либо, вы должны их использовать.
Краткое введение в Cascade
Прежде чем мы перейдем к !важно 9Объявления 0081 и то, как именно они работают, давайте придадим этому обсуждению немного контекста. В прошлом журнал Smashing Magazine подробно освещал специфику CSS, поэтому, если вы хотите получить подробное обсуждение каскада CSS и того, как специфичность связана с ним, ознакомьтесь с этой статьей.
Больше после прыжка! Продолжить чтение ниже ↓
Ниже приведена основная схема того, как любой документ, оформленный в стиле CSS, будет решать, какой вес придавать различным стилям, с которыми он сталкивается. Это общее резюме каскада, как указано в спецификации:
- Найти все объявления, которые относятся к элементу и свойству
- Применить стиль к элементу на основе важности и происхождения, используя следующий порядок, с первым элементом в списке, имеющим наименьший вес: Объявления от пользовательского агента Объявления от пользователя Объявления от автора Объявления от автора с !важно добавлено Объявления от пользователя с !важно добавлено
- Применять стили на основе специфики, при этом более конкретный селектор «выигрывает» над более общими
- Применять стили на основе порядка, в котором они появляются в таблице стилей (т. один «победит»)
С этим основным планом вы, вероятно, уже можете видеть, какое значение имеют объявления !important и какую роль они играют в каскаде. Давайте рассмотрим !важный более подробно.
Что такое важный CSS?
Объявление !important предоставляет автору таблицы стилей способ придать значению CSS больший вес , чем это естественно.
Синтаксис и описание
Здесь следует отметить, что фраза «!important Declaration» является ссылкой на всю декларацию CSS, включая свойство и значение, с добавлением !important (спасибо Брэду Черняку за указание на это несоответствие ). Вот простой пример кода, наглядно иллюстрирующий, как !important влияет на естественный способ применения стилей:
```
 #example {
    размер шрифта: 14px !важно;
}
#контейнер #пример {
    размер шрифта: 10 пикселей;
} 
```
В приведенном выше примере кода элемент с идентификатором «пример» будет иметь размер текста 14 пикселей из-за добавления !important .
Без использования !important есть две причины, по которым второй блок объявления должен иметь больший вес, чем первый: Второй блок находится позже в таблице стилей (т. е. он указан вторым). Также второй блок имеет большую специфичность ( #контейнер , за которым следует #пример вместо #пример ). Но с включением !important первое правило font-size теперь имеет больший вес.
Несколько слов об объявлениях !important :
- Когда !important впервые был представлен в CSS1, авторское правило с объявлением !important имело больший вес, чем пользовательское правило с !important декларация; для улучшения доступности это было изменено в CSS2
- Если !important используется в сокращенном свойстве, это добавляет «важность» всем подсвойствам, которые представляет сокращенное свойство. строка, непосредственно перед точкой с запятой, иначе не будет никакого эффекта (хотя пробел перед точкой с запятой не нарушит ее)
- Если по какой-то причине вам нужно написать одно и то же свойство дважды в одном и том же блоке объявления, то добавьте !important в конец первого, первый будет иметь больший вес во всех браузерах, кроме IE6 (это работает как хак только для IE6, но не делает ваш CSS недействительным)
- В IE6 и IE7, если вы используете другое слово вместо !important (например, !hotdog ), правилу CSS все равно будет придан дополнительный вес, в то время как другие браузеры его проигнорируют
Когда следует использовать !important?
Как и у любой техники, есть свои плюсы и минусы в зависимости от обстоятельств. Итак, когда его следует использовать, если вообще? Вот мой субъективный обзор возможных вариантов использования.
Никогда
!важно объявления не должны использоваться, если они не являются абсолютно необходимыми после того, как все другие возможности были исчерпаны. Если вы используете !important из-за лени, чтобы избежать надлежащей отладки или ускорить проект до завершения, то вы злоупотребляете им, и вы (или те, кто наследует ваши проекты) пострадаете от последствий.
Если вы хотя бы немного включите его в свои таблицы стилей, то скоро обнаружите, что некоторые части вашей таблицы стилей будет сложнее поддерживать. Как обсуждалось выше, важность свойства CSS происходит естественным образом благодаря каскаду и специфичности. Когда вы используете !important , вы нарушаете естественный поток ваших правил, придавая больший вес правилам, которые не заслуживают такого веса.
Если вы никогда не используете !important , то это признак того, что вы понимаете CSS и тщательно продумываете свой код перед его написанием.
При этом старая поговорка «никогда не говори никогда» здесь, безусловно, применима. Итак, ниже приведены некоторые законные варианты использования !important .
Для помощи или проверки доступности
Как уже упоминалось, пользовательские таблицы стилей могут включать !important объявления, позволяющие пользователям с особыми потребностями придавать значение определенным правилам CSS, которые помогут им читать и получать доступ к содержимому.
Пользователь с особыми потребностями может добавить !important к типографским свойствам, таким как размер шрифта , чтобы увеличить текст, или к правилам, связанным с цветом, чтобы повысить контрастность веб-страниц.
На снимке экрана ниже показана домашняя страница журнала Smashing Magazine с пользовательской таблицей стилей, перекрывающей обычный размер текста, что можно сделать с помощью панели инструментов разработчика Firefox:
В этом случае размер текста настраивался без использования !important , потому что пользовательская таблица стилей перекрывает авторскую таблицу стилей независимо от специфики. Однако, если размер текста для основного текста был установлен в таблице стилей автора с помощью объявления !important , таблица стилей пользователя не могла переопределить настройку размера текста даже с более конкретным селектором. Включение !important решает эту проблему, а позволяет пользователю регулировать размер текста , даже если автор злоупотребил !важно .
Для временного устранения неотложной проблемы
Бывают случаи, когда что-то дает ошибку в вашем CSS на работающем клиентском сайте, и вам нужно применить исправление очень быстро. В большинстве случаев вы должны иметь возможность использовать Firebug или другой инструмент разработчика для отслеживания кода CSS, который необходимо исправить. Но если проблема возникает в IE6 или другом браузере, у которого нет доступа к инструментам отладки, вам может потребоваться быстрое исправление с помощью 9.0080 !важно .
После того, как вы переместите временное исправление в производственную среду (тем самым удовлетворив клиента), вы можете работать над устранением проблемы локально, используя более удобный для сопровождения метод, который не портит каскад. Когда вы найдете лучшее решение, вы можете добавить его в проект и удалить !important — и клиент не станет мудрее.
Переопределение стилей в Firebug или другом инструменте разработчика
Проверка элемента в инструментах разработчика Firebug или Chrome позволяет редактировать стили на лету, тестировать, отлаживать и т. д., не затрагивая реальную таблицу стилей. Взгляните на скриншот ниже, на котором показаны некоторые стили Smashing Magazine в инструментах разработчика Chrome:
Правило стиля выделенного фона перечеркнуто линией , что указывает на то, что это правило было переопределено более поздним правилом. Чтобы повторно применить это правило, вы можете найти более позднее правило и отключить его. В качестве альтернативы вы можете отредактировать селектор, чтобы сделать его более конкретным, но это сделает весь блок объявлений более конкретным, что может быть нежелательно.
!important можно добавить в одну строку, чтобы вернуть значение переопределенному правилу, что позволит вам протестировать или отладить проблему CSS без внесения серьезных изменений в вашу фактическую таблицу стилей, пока вы не решите проблему.
Вот то же правило стиля с добавлением !important . Вы заметите, что сквозная линия исчезла, потому что это правило теперь имеет больший вес , чем правило, которое раньше его переопределяло: разработка — это когда пользовательский контент включает встроенные стили, как это происходит с некоторыми редакторами WYSIWYG в CMS. В каскаде CSS встроенных стиля переопределяют обычные стили , поэтому любые нежелательные стили элементов, возникающие в сгенерированном контенте, будет трудно, если вообще возможно, изменить с помощью обычных правил CSS. Вы можете обойти эту проблему, используя объявление !important , потому что правило CSS с !important в таблице стилей автора переопределит встроенный CSS.
Для таблиц стилей печати
Хотя это не обязательно во всех случаях и может быть нежелательно в некоторых случаях по тем же причинам, упомянутым ранее, вы можете добавить !important объявлений в ваших таблицах стилей только для печати, чтобы помочь переопределить определенные стили без необходимости повторять специфичность селектора.
Для постов в блоге с уникальным дизайном
Если вы пробовали себя в постах в блоге с уникальным дизайном (многие дизайнеры не согласны с использованием «художественного направления» для этой техники, и это правильно), как показано на Heart Directed, вы знайте, что такое предприятие требует, чтобы каждая отдельно разработанная статья имела свою собственную таблицу стилей, иначе вам нужно использовать встроенные стили. Вы можете присвоить отдельной странице собственные стили, используя код, представленный в этом посте в блоге Digging Into WordPress.
Использование !important может пригодиться в таком случае, позволяя вам легко переопределять стили по умолчанию, чтобы создать уникальный опыт для отдельной записи блога или страницы на вашем сайте, не беспокоясь о естественном Специфика CSS.
Заключение
!important Объявления лучше зарезервировать для особых нужд и пользователей, которые хотят сделать веб-контент более доступным, легко переопределяя стандартные таблицы стилей пользовательского агента или автора.