2015-09-24 4 views
0

Я пытаюсь ссылаться на свой собственный CSS и Bootstrap CSS на своем личном веб-сайте. Но я могу ссылаться только на стили Bootstrap, и мой цвет фона CSS ушел. Почему это происходит?Ссылка на Bootstrap CSS и пользовательский CSS

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="bio.css" rel="stylesheet"> 
     <meta name="viewport" content="width=device=width,initial-scale=1.0"> 
     <link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>Home</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-user">About me</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-home"></span>Resume</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-inbox"></span>Contact </a></li> 
    </ul> 
    <body> 
     <a href="bio.css"> 
     <div class="row"> 
      <div class="col-sm-12"> 
       <h1><a href="bio.css"> Bio </h1> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-1"></div> 
      <div class="col-sm-4"> 
       <a href="#"><img src="propic.jpg" alt="Propic" width="354" height="354"> 
      </div> 
      <div class="col-sm-7"> 
       <p><a href="#"> paragraph 1 </p> 
       <p><a href="#"> paragraph 2</p> 
       <p><a href="#"> paragraph 3</p> 
      </div> 
     </div> 
    </body> 
</html> 
+0

css последовательность неверна. Сначала добавьте bootstrap.css и второй добавьте свой собственный css bio.css. Также проверьте путь вашего bio.css. –

ответ

0

Просто поместите свой собственный bio.css после рамки bootstrap.css, чтобы ваш CSS можно переписать bootstrap.css.

<meta name="viewport" content="width=device=width,initial-scale=1.0"> <link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet"> <link href="bio.css" rel="stylesheet">

0
  1. Набор <link href="bio.css" rel="stylesheet"> после <link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
  2. Проверьте, цвет белый
+0

не нужно добавлять важные, если определенность задана правильно. –

0

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

<meta name="viewport" content="width=device=width,initial-scale=1.0"> 
 
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href="bio.css" rel="stylesheet">

Кроме того, убедитесь, чтобы не вызвать файл CSS в HREF тега внутри тела, как вы сделали, это семантически неправильно, если вы не хотите, чтобы показать, что таблицы стилей, но я не думаю, что вы когда-нибудь будет :

<body><a href="bio.css">

0

вы должны поставить у вас есть CSS лист после начальной загрузки, в противном случае загрузчик будет охватывать вас есть CSS, так как «Последнее правило, определенные переопределения всех предыдущие, с onflicting rules ". Ваша голова CSS следует написать в таком порядке:

<head> 
    <meta name="viewport" content="width=device=width,initial-scale=1.0"> 
    <link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="bio.css" rel="stylesheet"> 
</head> 

А вот хорошая статья о CSS специфичности (приоритет), вы можете найти больше правил есть: http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

0

Помещенных у вас есть CSS лист после начальной загрузки, иначе bootstrap переопределит ваш собственный CSS и просто изменит ваше имя css на custom.css.

<meta name="viewport" content="width=device=width,initial-scale=1.0"> 
    <link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="custom.css" rel="stylesheet">