Question

我想在我的个人网站上引用自己的CSS和Bootstrap CSS。但我只能参考Bootstrap的样式，我的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>

Answer 1

在bootstrap.css框架之后放置你自己的bio.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">

Answer 2

在<link href="bio.css" rel="stylesheet">

<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">

检查颜色是否为白色

Answer 3

你的头部css调用应该是正确的顺序，首先是bootstrap，你的样式表是最后的，所以它会覆盖bootstrap css中的任何内容：

＆＃13;

<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">

＆＃13;

另外请确保不要在身体内部的href标签中调用css文件，它在语义上是不正确的，除非你想要显示样式表，但我不认为你曾经会：

＆＃13;

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

＆＃13;

Answer 4

你应该在bootstrap之后放置自己的css表，否则引导程序将覆盖你自己的css，因为＆＃34;最后定义的规则会覆盖任何先前的冲突规则＆＃34; 。你的头css应该按顺序写：

print(df)

   0  1  2  3
0  1  2  3  4

df[4]= df[2]*df[3]/.3

print(df)

   0  1  2  3   4
0  1  2  3  4  40

这是一篇关于css特异性（优先级）的好文章，你可以在那里找到更多规则：http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Answer 5

在bootstrap之后放置自己的css表，否则引导程序将覆盖您自己的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">

引用Bootstrap CSS和自定义CSS

5 个答案: