|
|||
!important
Hallo,
könnte mir einer den Sinn von !important erklären? Ich mein, der Browser nimmt dann diesen Wert als "bevorzugte" Farbe / Wert. Aber ist es nicht das gleiche als wenn ich das was diese !important Regel wahrnehmen soll in ein span packe und dem die farbe zuweise? Habe auch aufs friccas`s Seite recherchiert und das gefunden: PHP-Code:
Nur verstehe ich dort in keinster Weise den Sinn. Entweder ich weise eine Farbe zu oder nicht.... Wenn ein bestimmtes Wort eine andere Farbe haben soll packe ich dieses in ein span oder strong und weise der die Farbe zu... Hmm vlt hat einer von euch für mich eine logische Erklärung |
Sponsored Links |
|
|||
Zitat:
Ein span-Element ist eine Veränderung des Markups. !important ist eine Gewichtung einer bestimmten Angabe im Stylesheet. Zitat:
Mit deinem einzelnen Wort hat das nichts zu tun. Ein einzelnes Wort als wichtig zu kennzeichnen ist die Aufgabe von HTML. Wie diese Kennzeichnung aussieht, ist Sache von CSS. Konflikte in CSS werden nach bestimmten Regeln aufgelöst. Ein Bestandteil dieser Regeln ist !important. Zum Erlernen dieser Grundlagen eignet sich Little Boxes besonders gut.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Hallo fricca,
ja das habe ich gelesen. Nur kann mir dort den Sinn auch keiner erklären. Als grobes Bsp, entweder ich gebe #conten p color:green; oder nicht. Warum vergebe ich das dann erst wenn ich 10 Zeilen später alles wieder durch !importend aufhebe und somit #content p sinnlos wird bzw aufgehoben wird ?!? Wäre schön wenn mir das einer anhand eines Bsp erklären könnte warum das so wichtig ist. Denn aus diesem Bsp sehe ich darin überhaupt keinen Sinn. Denn ahand von dem Bsp kann ich es gleich richtig dem bereich den richtigen Wert zuweisen und muss es nicht im nachinein wieder umändern. |
|
|||
Besser, als auf der FWPF-Seite und in Little Boxes kann ich es auch nicht erklären. Da muss sich jemand anders finden.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
@ Corina: Zu spät gesehen
Ich komme auch ohne !important aus, aber das muss nicht heißen, dass diese Angabe sinnlos ist. Fricca hat bereits beschrieben um was es geht. !Important ist in der Lage, die Spezifität von CSS-Anweisungen zu überschreiben und z.B. vererbte Eigenschaften auszuschließen. Beispiel: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>!Important Beispiel</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"><!-- #content { border: 1px solid black; } #news { background-color: #ddd; } span { color: black !important; border: 1px solid red; } #news p, #news p span { color: red; border: none; } p { color: #222; text-decoration: none; font-size: 2em; } --></style> </head> <body> <div id="content"> <div id="main"> <p> Ein Absatz mit einem <span>SPAN-</span>Element</p> </div> <div id="news"><p> Ein Absatz mit einem <span>SPAN-</span>Element</p> </div> <div> </body> </html> Wie Du im Beispiel siehst, haben die Angaben für das span im Container #news eine deutlich höhere Spezifität als das bloße span. Diese wirken sich aus, aber nicht dort, wo bei der ersten CSS-Anweisung das !important nachgefügt ist.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
Hallo andir,
wenn ich aber z.B.schreibe: #main span {color:black;} #news span {color:red;} Hat es doch den gleichen Effekt oder? Vielen Dank für euer beiden bemühen Geändert von Muamicus (15.10.2010 um 15:26 Uhr) |
|
|||
Ja, natürlich, so geht das auch - aber eben eine neue Deklaration geschrieben, oder?
Ich hatte erst gestern den Fall (zum ersten Mal übrigens) dass ich !important brauchte. Ich hatte nicht genügend Anknüpfungspunkte (Selektoren) um die Spezifität so zu erhöhen, dass es gepasst hätte - und für dieses spezielle Element hätte ich dann ca. 12 Zeilen zusätzlichen Code gebraucht ( mit allen _hover- und :focus und :target stati...) . Zugegeben, !important wird selten wichtig, aber in grösseren CMS, bei Unternehmensanwendungen und dergleichen kann es hilfreich sein.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
||||
Dann wollen wir mal sehen, ob wir das nicht etwas beschleunigen können, auch wenn es ein bisschen theoretisch ist. Auch wenn !important eher selten benutzt wird, ist es nicht unwichtig
Vererbung, Standardwert und Kaskade Wenn ein Browser ein HTML-Element gestalten soll, gibt es für jede Eigenschaft (font-size, background-color etc.) genau drei Möglichkeiten:
Findet der Browser gar keine CSS-Anweisungen, schaut er, ob irgendetwas vererbt wird (Vererbung). Wird nichts vererbt, benutzt er einen fest definierten Standardwert. 2. Eine CSS-Anweisung. Simpel. Er nimmt diese Anweisung und formatiert das HTML-Element damit. Fertig. 3. Mehrere CSS-Anweisungen Falls mehrere CSS-Anweisungen zutreffen, durchläuft der Browser einen dreistufigen Entscheidungsprozess, die so genannte Kaskade. Cascading. Treppe. Stufen. Wasserfall. Das ist das C in CSS. !important spielt im im ersten Schritt dieser Kaskade (1. Sortiere nach Wichtigkeit) eine buchstäblich wichtige Rolle. Falls eine der Anweisungen !important (wichtig) ist, wird nämlich die Kaskade beendet und Spezifität und Reihenfolge spielen keine Rolle mehr. Ist keine Anweisung !important, geht es weiter zur zweiten Runde (2. Sortiere nach Spezifität), in der die Punktzahl der Selektoren entscheidet (Spezifität). Ist auch diese gleich, geht es in die dritte und letzte Runde (3. Sortiere nach Reihenfolge), in der die Reihenfolge der Selektoren zählt. Spätestens jetzt hat der Browser eine Anweisung gefunden, denn zwei Anweisungen stehen immer nacheinander, und dann hat die letzte der beiden gewonnen. Die folgende Grafik stellt diesen Prozess dar (Klick auf die Grafik => große Version): Wozu gibt es !important? Wenn du eine Site mit ein oder zwei Stylesheets gestaltest, die du alle selbst geschrieben hast, wirst du !important wirklich nur selten benutzen. Stell dir aber mal eine etwas komplexere Umgebung wie z. B. in einem Content Management System wie Contao oder Joomla vor:
Ein anderes Beispiel sind Benutzerstylesheets, also Stylesheets, die ein Surfer seinem Browser mit auf den Weg gibt, um zum Beispiel eine bestimmte minimale Schriftgröße festzulegen. In Benutzerstylesheets wird man !important sehr häufig finden, da ein p { font-size: 16px !important; } in einem Benutzerstylesheet sämtliche (wirklich alle) Anweisungen zur Gestaltung der Schriftgröße in Absätzen überschreibt. Im Zweifelsfall gewinnt der Benutzer, nicht der Autor. Hope it helps, auch wenn es etwas länger geworden ist
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao« Geändert von pmmueller (16.10.2010 um 22:55 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Abstand eines Elementes lässt sich nicht verringern | zeitweise | CSS | 2 | 28.04.2009 23:19 |
Myspace problem... Rechte Säule verschiebt sich im IE. | calledmarcel | CSS | 1 | 27.02.2009 10:12 |
Float-Reihenfolge? | wolf1985 | CSS | 0 | 21.08.2008 02:35 |
Float - Probleme | wolf1985 | CSS | 5 | 19.08.2008 09:14 |
Footer left und right Probleme... | wolf1985 | CSS | 2 | 14.08.2008 14:04 |