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樣式表互相干擾

回答

相關問題