У меня есть следующий 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. Почему это происходит?
3 ответа
Это происходит потому, что вы загружаете после 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">
Как уже говорили другие, ваш CSS переопределяется. При включении внешних CSS-файлов добавляйте свой собственный CSS-файл после внешних файлов.
Правило переопределения также применяется внутри CSS-файла.
body {
background-color: black;
color: white !important;
background-color: red;
}
Цвет фона следующего будет красным, потому что цвет фона объявлен последним.
Все, что объявлено последним, переопределит то, что было объявлено до него. Имейте это в виду, так как это сэкономит ваше время в будущем и сделает использование! Важным ненужным
Здесь возникает проблема правильного порядка вызова файлов 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>
Похожие вопросы
Новые вопросы
html
HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].