HTML样式表互相干扰

目前我正在制作演示网站。我正在使用多个样式表，并从他们每个人中挑选我喜欢的内容来构建用于学习目的的网站。现在我的问题是元数据中有一行可以阻止我的模式关闭，我的模式因为它锁定了位置，但我也需要它按照我希望的方式设计其他部分。HTML样式表互相干扰

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <!-- EFFECTING CLICKING OUT TO CLOSE --> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css"> <!-- EFFECTING WORDS IN MODALS --> 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

我试图摆脱每一行，具体看他们做了什么以及它们如何影响我的程序。一些要么影响模态，要么能够点击它们，或者擦除模态中的所有文本。

我有一个想法，使单独的HTML文件，并将其调用到主文件，给他们每个人不同的元数据。这会工作吗？

在此先感谢。

来源

2016-07-06 kgt

您可以尝试坚持引导，并从w3 css文件中只复制/粘贴您需要的部分并添加您自己的。或者寻找兼容的引导主题。或者只使用你需要的编写你自己的CSS。 – Turqueso

如果你对导航css文件足够了解，你应该从每个css文件中提取出所需的东西，并将它们放到一个文件中。如果你对导航的css文件不够舒服，那么我真的建议你这样做。说实话，这将是一个更好的学习经历。另外，你的最终结果将是没有冲突的CSS。 2只1石1鸟 – mhodges

我强烈建议不要热链接到其他网站的CSS文件，除非它们是为此目的设计的CDN的一部分。你能不能简单地从它们中提取你需要的样式，而不是从它的一个方面加载一个完整的样式表？ –

我会建议其他人在评论中提到的只是保留头部的主要部分。这意味着它对你来说更容易，因为如果你编写自己的CSS并将它加载到你的html上，你将更好地控制你的代码。坚持引导，因为它已经提供了一个网页的基本布局，也可以作出响应。

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Font awesome --> 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
    <!--Links to CSS, Bootstrap--> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="your-external-css-file.css"/> 
</head>

您的head标签应该包含类似于上一个示例的内容。

来源

2016-07-06 15:56:27

被引用的文件（/w3.css和/w3-theme-black.css）在它们之间没有任何冲突的类。渲染冲突可能是由您如何实现这些类引起的。

您可以轻松地通过颠倒顺序测试这个理论，你指的是.css文件，如：

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css"> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

如果通过改变CSS的顺序，你得到相反的经验比它的一个CSS冲突，但我怀疑。然后下一个选项是仔细看看你如何使用CSS类。

此外，我会建议将“< meta charset =”utf-8“>”移到bootstrap css文件的上方。

来源

2016-07-06 16:13:37

在仔细研究了您发布的代码之后，我注意到您有2个对bootstrap/3.3.6的引用。您可能还得玩文件顺序。

来源

2016-07-06 16:21:37

HTML样式表互相干扰

回答

相关问题