Question

主管部分

<head>
  <meta charset="utf-8">
  <title>Kaffehaus Mannfredo | Home</title>
  <link rel="shortcut icon" href="../1_pics/favicon.ico" />
  <link rel="stylehseet" type="text/css" href="../2_css/general.css">
  <link rel="stylesheet" type="text/css" href="../2_css/nav.css">
  <link href='fonts.googleapis.com/css?family=Open+Sans' ; rel='stylesheet' type='text/css'>

第一个CSS

ul {
position: fixed;
top: 0;
left: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
font-family: 'Open Sans', sans-serif;
margin:0px;
float: none;
display: inline-block;
}    

li a {
display: block;
color: white;
text-align: center;
padding: 15px 17px;
text-decoration: none;}  

li a.active {
background-color: #4CAF50;}

li a:hover:not(.active) {
background-color: #555;
color: white;}

.navbar-nav {
width: 100%;
text-align: center; }

第二个CSS

body {background-color: black;}

我想在1个html中添加2个CSS文件。第二个不起作用。

在第一个我格式化我的导航栏，在第二个我想为整个页面制作基本布局，任何提示？

Answer 1

此行无效

<link href='fonts.googleapis.com/css?family=Open+Sans' ; rel='stylesheet' type='text/css'>

删除半结肠

<link href='fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

半冒号用于属性值对，不能在<link>标记内随机使用。

Answer 2

请提供您的代码。

如果我理解正确，一个CSS正在工作而另一个不太可能，那么你的语法就会出错。检查CSS文件的正确路径和正确的名称。如果您复制并粘贴它，请确保您更改了第二个名称。 Bellow是名为1和2的两个不同CSS文件的示例，它们位于名为css的文件夹中。

<link rel="stylesheet" type="text/css" href = "css/1.css" />
<link rel="stylesheet" type="text/css" href = "css/2.css" />

如果您的文件不在文件夹中，只需删除“css /”部分即可。

Answer 3

您确定所有文件都在加载吗？

按F12并检查控制台，它会给出

uncaught error failed to load

或类似的东西

Answer 4

您可以根据需要添加任意数量的CSS。

来自外部文件：

<link rel="stylesheet" type="text/css" href="PATH_TO_YOUR_FILE">

或者在html文件中使用：

<style>
  /* ...Some css...*/
</style>

如果两个css之间存在冲突（样式化相同的元素），则需要添加特异性，因为第二个css会覆盖第一个。

例如：

/* first css file */
h1{
  color:blue;
}

/* second css file */
h1{
  color:red;
}

在这种情况下，h1到处都是红色。

所以在第一个css文件中，你必须通过向选择器添加一个类或id来更具体：

/* first css file */
.navbar h1{
  color:blue;
}

查看CSS Specificity

如何在1个Html中嵌入2个css？

4 个答案: