Для свойств тела CSS необходимо ключевое слово! Important

Question

У меня есть следующий HTML-код:

<!DOCTYPE html>
<html>
<head>
  <title>Project Web</title>
</head>

<body>
  <h1>Hello, World!</h1>
</body>

<link href="index_style.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</html>

И следующий CSS (в файле index_style.css):

body {
  background-color: black !important;
  color: white !important;
}

Как вы можете заметить, свойства "background-color" и "color" имеют место только тогда, когда за ними следует ключевое слово! Important. Почему это происходит?

html css

1

Christos Maris 4 Сен 2017 в 13:59

Answer 1

Это происходит потому, что вы загружаете после CSS-файла начальной загрузки. Когда вы это делаете, CSS Bootstrap переопределяет все ваши body декларации и только !important заставляет их применяться над декларациями начальной загрузки.

Чтобы это исправить, загрузите файлы CSS в следующем порядке:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="index_style.css" rel="stylesheet">

2

Koby Douek 4 Сен 2017 в 11:02

Answer 2

Как уже говорили другие, ваш CSS переопределяется. При включении внешних CSS-файлов добавляйте свой собственный CSS-файл после внешних файлов.

Правило переопределения также применяется внутри CSS-файла.

 body {
  background-color: black; 
  color: white !important;
  background-color: red;
 }

Цвет фона следующего будет красным, потому что цвет фона объявлен последним.

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

0

Qais Abou Jaoudé 4 Сен 2017 в 11:14

Answer 3

Здесь возникает проблема правильного порядка вызова файлов CSS, пожалуйста, используйте ваши пользовательские стили после стилей начальной загрузки, чтобы исправить это и перезаписать стили для других компонентов, поэтому правильный порядок будет таким, как показано ниже:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="index_style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

0

Ravinder Singh 4 Сен 2017 в 11:13

Для свойств тела CSS необходимо ключевое слово! Important

3 ответа

Похожие вопросы

Новые вопросы

html