CSS Inclusion Problem - html, CSS

Ich habe eine JSP-Seite mit ein paar CSS-Dateien enthalten.

In diesem hat jeder CSS separat Stile für die Tabelle definiert.

Das Problem ist, dass ich diese verschiedenen Stile für verschiedene Tabellen brauche und nicht in der Lage bin, sie zu unterscheiden und die CSS-Stile des Menüs mit dem neuen CSS-Stil überlappen.

Wie kann ich dieses Problem vermeiden? Die menu.jsp wurde in eine andere Seite eingefügt. Gibt es eine Möglichkeit, das Übersteuern der Stile zu vermeiden?

Antworten:

7 für die Antwort № 1

Gib deiner CSS-Struktur eine bessere Hierarchie.

#container #sectionid .class{}

Anstatt von

.class{}

Ein Beispiel wäre das:

<h2>Page Title</h2>
<div id="container">
<div id="news">
<h2>News Section</h2>
<div class="month" id="january">
<h2>News Article 1</h2>
</div>
<div class="month" id="february">
<h2>News Article 2</h2>
</div>
</div>
</div>

h2 {color:red;} < This would set all <h2> tags to be red
#container h2 {color: red;} < This would set all <h2> tags inside the container div to red
#container #news h2 {color: red;} < This would set all <h2> tags inside the news div to red
#container #news .month h2 {color: red;} < This would set all <h2> tags inside month divs to red
#container #news .month #january h2 {color: red;} < This would only set the <h2> tag inside the january div to red.

Wenn Sie diese Methode verwenden, wird Ihr Code semantischerund gibt Ihnen viel mehr Kontrolle über Ihre Elemente, ohne eine große Anzahl von IDs und Klassen verwenden zu müssen. Im obigen Beispiel möchten Sie, dass alle Ihre h2-Tags die gleiche Größe haben, aber die Monate in verschiedenen Farben, so dass Sie die Stile entsprechend festlegen würden:

h2 {font-size: 2em;}
#container #news .month #january h2 {color: red;}
#container #news .month #february h2 {color: blue;}

2 für die Antwort № 2

Dies ist Teil des Verhaltens von Cascading Stylesheets - Sie können viele Regeln deklarieren und sie in der richtigen Reihenfolge anwenden.

Um dies zu vermeiden, müssen Sie eine Klasse zu Ihrer hinzufügenMenütabelle und den CSS-Regeln für diese Menütabelle. In den CSS-Regeln, die Sie für die Menütabelle schreiben, müssen Sie möglicherweise alle Regeln außer Kraft setzen, die für das allgemeine Element "table" an anderer Stelle in CSS deklariert sind.


2 für die Antwort № 3

Um Stile für verschiedene Elemente zu trennen, müssen Sie sie normalerweise in übergeordnete Container mit einer bestimmten Klasse einfügen.

Betrachten Sie eine HTML-Struktur wie folgt:

<div class="area1">
<table ...... >
</div>

<div class="area2">
<table ...... >
</div>

Ihr CSS würde diese Bereiche wie folgt ansprechen:

.area1 table { ... } /* Definitions for tables in area1 */
.area1 table td {  ... }

.area2 table {  ... }  /* Definitions for tables in area2 */
.area2 table td { ...  }

2 für die Antwort № 4

Wenn Sie mehrere CSS laden und in jedem die gleiche CSS definiert ist, gibt es keine Möglichkeit, das Überschreiben zu vermeiden.

Möglicherweise möchten Sie für jede Tabelle eine andere ID / Klasse definieren.

Die einzige andere Lösung ist, wenn Sie irgendwie könnenIdentifizieren / angeben, dass nur ein Tabellenstil pro JSP verwendet wird. Dann können Sie mit dem JSP nur die benötigten CSS laden und die anderen ignorieren (oder sie in einer anderen Reihenfolge laden)


0 für die Antwort № 5

Entweder fügen Sie diese CSS-Dateien nicht hinzu oder geben der Tabelle eine eindeutige ID oder einen eindeutigen Klassennamen, damit Sie sie in CSS verankern können.

Wenn Sie speziell mit einer eindeutigen Tabelle arbeiten möchten, verwenden Sie die id:

<table id="mySpecialTable">
...
</table>

mit einer CSS-Regel für diese ID beginnend mit #:

#mySpecialTable {
border: 2px solid red;
}

Oder wenn Sie den Stil unter mehreren Tabellen teilen möchten, verwenden Sie die class:

<table class="mySpecialTable">
...
</table>

mit einer CSS-Regel für diesen Klassennamen, beginnend mit .:

.mySpecialTable {
border: 2px solid red;
}

Siehe auch:


Speisekarte