HTML-Stylesheet, die sich gegenseitig stören

Derzeit mache ich eine Demo-Site. Ich verwende mehrere Stylesheets und nehme von jedem von ihnen, was ich möchte, um eine Seite für Lernzwecke zu erstellen. Nun, mein Problem ist, dass es eine Zeile in den Metadaten gibt, die verhindert, dass meine Mods schließen, meine Mods werden dadurch gesperrt, aber ich brauche sie auch, um die anderen Teile so zu gestalten, wie ich sie haben möchte.HTML-Stylesheet, die sich gegenseitig stören

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

Ich habe versucht, jede Zeile loszuwerden, um genau zu sehen, was sie getan haben und wie sie mein Programm beeinflusst haben. Einige beeinflussen entweder die Modale und die Fähigkeit, aus ihnen zu klicken oder den gesamten Text innerhalb der Mods zu löschen.

Ich hatte eine Idee, separate HTML-Dateien zu erstellen und sie in eine Hauptdatei zu benennen, wobei jeder von ihnen verschiedene Metadaten erhielt. Würde das funktionieren?

Vielen Dank im Voraus.

Quelle

2016-07-06 kgt

Sie könnten versuchen Stick zu Bootstrap und kopieren/fügen Sie nur die Teile, die Sie benötigen, aus den W3 CSS-Dateien und fügen Sie Ihre eigenen. Oder suchen Sie nach einem kompatiblen Bootstrap-Thema. Oder schreiben Sie Ihre eigene CSS mit nur was Sie brauchen. – Turqueso

Wenn Sie sich mit der Navigation von CSS-Dateien vertraut genug fühlen, sollten Sie die benötigten Daten aus jeder CSS-Datei extrahieren und in eine einzige Datei einfügen. Wenn Sie mit CSS-Dateien nicht vertraut genug sind, empfehle ich Ihnen WIRKLICH, dies zu tun. Das wäre eine viel bessere Lernerfahrung, ehrlich gesagt. Außerdem würde Ihr Endergebnis CSS ohne Konflikte sein. 2 Vögel mit 1 Stein – mhodges

Ich würde dringend davon abraten, direkt auf die CSS-Dateien einer anderen Website zu verweisen, es sei denn, sie sind Teil eines CDN, das für diesen Zweck entwickelt wurde. Können Sie nicht einfach die benötigten Stile von ihnen extrahieren, anstatt einen ganzen Stylusheet für einen bestimmten Aspekt zu laden? –

Ich würde vorschlagen, wie andere in den Kommentaren erwähnt, nur die wesentlichen Teile auf dem Kopfabschnitt zu halten. Das bedeutet, dass es für Sie viel einfacher ist, da Sie Ihren Code besser kontrollieren können, wenn Sie Ihr eigenes CSS schreiben und es in Ihren HTML-Code laden. Bleiben Sie bei Bootstrap, da es bereits das grundlegende Layout für eine Webseite gibt, die auch reagieren kann.

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

Ihre Kopf-Tags sollten etwas wie das vorherige Beispiel enthalten.

Quelle

2016-07-06 15:56:27

Die referenzierten Dateien (/w3.css und /w3-theme-black.css) haben keine Konfliktklassen zwischen ihnen. Der Rendering-Konflikt kann durch die Implementierung solcher Klassen verursacht werden.

Sie einfach diese Theorie durch Umkehrung der Reihenfolge testen können, auf die verweisen auf die CSS-Dateien, wie zB:

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

Wenn durch die Reihenfolge der CSS Ändern Sie die umgekehrte Erfahrung bekommen, als es ist ein CSS Konflikt, aber ich bezweifle. Dann wäre die nächste Option, genauer zu betrachten, wie Sie die CSS-Klassen eingesetzt haben.

Auch würde ich empfehlen, die "< meta charset =" utf-8 ">" über die Bootstrap CSS-Dateien zu verschieben.

Quelle

2016-07-06 16:13:37

Nach genauerem Hinsehen habe ich festgestellt, dass Sie 2 Referenzen zum Bootstrap/3.3.6 haben. Möglicherweise müssen Sie auch mit der Reihenfolge der Dateien spielen.

Quelle

2016-07-06 16:21:37

HTML-Stylesheet, die sich gegenseitig stören

Antwort

Verwandte Themen