Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Стили Bootstrap почему-то перекрывают мои стили  [new]
Alibek B.
Member

Откуда:
Сообщений: 3250
Есть такая страница:
...
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/site.css">
...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#form-feedback">Написать сообщение</button>
...

В site.css такие стили:
body {
	font-family: "Book Antiqua", "Times New Roman", Times, serif;
	color: #555;
	padding-top: 4em;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
nav, footer {
	margin-top: 0;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-weight: normal;
	color: #333;
}
button {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
}


Но почему-то кнопка выводится шрифтом Book Antiqua.
Если посмотреть в инспекторе объектов, то мой стиль (site.css) перекрывается стилями из normalize.less и scaffolding.less, в которых задано inherit (этих файлов на сервере нет, но есть bootstrap.min.css.map, который видимо и содержит названия этих файлов).

Почему это происходит? Ведь мой site.css подключается позже bootstrap?
15 янв 18, 12:02    [21107032]     Ответить | Цитировать Сообщить модератору
 Re: Стили Bootstrap почему-то перекрывают мои стили  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13303
Alibek B.
...
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/site.css">
...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#form-feedback">Написать сообщение</button>
...

В site.css такие стили:
body {
	font-family: "Book Antiqua", "Times New Roman", Times, serif;
	color: #555;
	padding-top: 4em;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
nav, footer {
	margin-top: 0;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-weight: normal;
	color: #333;
}
button {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

Но почему-то кнопка выводится шрифтом Book Antiqua.

Бивас, тест! (с)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
body {
	font-family: "Book Antiqua", "Times New Roman", Times, serif;
	color: #555;
	padding-top: 4em;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
nav, footer {
	margin-top: 0;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-weight: normal;
	color: #333;
}
button {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<p>Test text</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#form-feedback">Написать сообщение</button>
</body>
</html>

У твоей кнопки шрифт "Open Sans"... Т.ч. ты что-то не договариваешь.
15 янв 18, 13:21    [21107439]     Ответить | Цитировать Сообщить модератору
 Re: Стили Bootstrap почему-то перекрывают мои стили  [new]
Areostar
Member

Откуда:
Сообщений: 3446
Alibek B.,

!important пробывали?
15 янв 18, 13:50    [21107642]     Ответить | Цитировать Сообщить модератору
 Re: Стили Bootstrap почему-то перекрывают мои стили  [new]
Alibek B.
Member

Откуда:
Сообщений: 3250
Да, оказалось что проблема на моей стороне.
Chrome не хотел обновлять стили через F5, обновил только через Ctrl+F5.
15 янв 18, 14:29    [21107826]     Ответить | Цитировать Сообщить модератору
 Re: Стили Bootstrap почему-то перекрывают мои стили  [new]
Alibek B.
Member

Откуда:
Сообщений: 3250
Но все равно странно.
В инспекторе объектов я явно видел, что мой стиль из site.css у кнопки прописан (font-family Open Sans), но перекрывается стилями normalize.less и scaffolding.less.
То есть измененный site.css браузер загрузил.
15 янв 18, 14:31    [21107834]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить