Frage von davidkoudii, 47

Eigenes Stylesheet für bestimmten Bereich?

Hallo,

ich habe ein eigenes Stylesheet erstellt, welches für die komplette Website gilt (style.css). jetzt habe ich eine Log-In Kästchen, welches anders designed ist. Für das Log-In Kästchen habe ich auch ein eigenes Stylesheet erstellt. (stylebanner.css). Wie kann ich jetzt dem Kästchen - NUR DEM KÄSTCHEN das Stylesheet (stylebanner.css) zuweisen?

Danke im Voraus, David

Antwort
von Limearts, 20

Was sollte dich daran hindern sie hinein "zu schmeißen"? Sofern es nicht andere Elemente gibt, die ebenfalls diese Klassen nutzen, ist das kein Problem.

Und selbst dann kannst Du der Login-Box noch immer eine eigene ID zuweisen und anhand dieser differenzieren dass nur Klassen innerhalb dieser ID die Formatierungen erfahren.

Falls die Login-Box tatsächlich nur auf einer Seite vorkommt und Du schlicht den Code "klein" halten willst, binde auf der Seite einfach ein zweites Stylesheet mit den entsprechenden Definitionen ein. Der Code dafür kennst Du ja schon. Musst lediglich einen anderen Dateinamen vergeben.

Antwort
von fluffiknuffi, 10

Ist soweit mir bekannt nicht üblich. Ich mache das jedenfalls nicht. Es gibt auch keine schöne Lösung dafür bzw. mir ist keine bekannt.

Alternativen:

  1. Du könntest die Login-Box in ein iFrame kapseln, dann kannst du für das iFrame ein eigenes Stylesheet laden. Aber ein iFrame dafür ist kein gutes Vorgehen.
  2. Je nachdme worum es dir genau geht könntest du das Stylesheet mit deiner server- oder clientseitigen Programmiersprache immer vor der Login-Box in den HTML-Code einfügen. Aber auch davon rate ich ab.
  3. Shadow DOM ist ein Stichwort das dein Problem vermutlich lösen würde - wenn es denn heute schon von allen Browsern unterstützt würde. Das kannst du allerdings vergessen: http://caniuse.com/#feat=shadowdomVielleicht hilft Polymer dir weiter, das müsstest du aber selber recherchieren ( https://www.polymer-project.org/1.0/ )

Aber wie gesagt du benötigst das vermutlich alles gar nicht. Denke du hast hier eher ein grundlegenderes Verständnisproblem bezüglich CSS. Deine HTML-Login-Box bekommt die Klasse "login-box" und die nutzt du dann in der CSS-Datei:

.login-box { background-color: silver }
.login-box button { border: 1px solid gray }

Falls du nicht dauernd ".login-box" schreiben möchtest, dann nutze SASS oder LESS, dort kannst du das Beispiel so schreiben:

.login-box { 
    background-color: silver;
button { border: 1px solid gray } }
Antwort
von heilwigkenner, 15

Du kannst ja eine Oberklasse für das Login-Div ansprechen.

.login > .btn {}
.btn {}
Antwort
von André Schulz, 36

Hallo,

Spar dir doch die extra Datei und schreib die Formatierung in die style.css. Dann gibst du der Login Box eine Klasse und fertig ist es.

Ich hoffe das ich dir helfen konnte!

Gruß André

Kommentar von davidkoudii ,

Nein, das funktioniert nicht. Kannst du mir bitte helfen. 

Ich habe ca. 10 Befehle (wie z.B. ".login-card", ".login-submit", .login-submit:hover) und das kann ich nicht einfich in die style.css schmeissen oder? Wie sag ich dan in HTML, dass das funktioniert? 

Kommentar von fluffiknuffi ,

Das sind keine Befehle, das sind Selektoren.

Die kannst du hierarchisch anordnen in deiner CSS-Datei:
.login-box .login-submit { background-color: red }
bedeutet, Elemente mit der Klasse "login-submit" die ein Elternelement mit der Klasse "login-box" haben bekommen eine roten Hintergrundfarbe.

Keine passende Antwort gefunden?

Fragen Sie die Community