zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden !important

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.10.2010, 10:40
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard !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:
 1.  p {
   
2. color:red !important;
   
3. }
   
4. #content p {
   
5. color:green;
   
6. 
!important-Regel | Webdesign mit XHTML und CSS

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.10.2010, 11:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von nils_1309 Beitrag anzeigen
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?
Nein, das ist etwas völlig anderes.
Ein span-Element ist eine Veränderung des Markups.
!important ist eine Gewichtung einer bestimmten Angabe im Stylesheet.

Zitat:
PHP-Code:
 1.  p {
   
2. color:red !important;
   
3. }
   
4. #content p {
   
5. color:green;
   
6. 
!important-Regel | Webdesign mit XHTML und CSS

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...
Der Sinn liegt einer Veränderung der Gewichtung, wenn mehrere Angaben für ein und das selbe Element in Frage kommen. Lies doch mal was zur Kaskade und der Spezifität von Selektoren -- grundlegende Konzepte von CSS.
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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.10.2010, 11:25
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 15.10.2010, 11:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Besser, als auf der FWPF-Seite und in Little Boxes kann ich es auch nicht erklären. Da muss sich jemand anders finden.
Mit Zitat antworten
  #5 (permalink)  
Alt 15.10.2010, 12:24
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

@ 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>
Das kann sehr hilfreich sein, wenn man ein Element (z.B. einen Link) überall gleich oder ähnlich aussehen lassen will und nicht noch die CSS-Kaskade mit Vererbungen berücksichtigen will - das macht einfach mehr Arbeit. Beispielsweise können unterschiedliche Bereiche einer Seite unterschiedliche Schriftfarben etc. haben. Das kann sich auch vererben
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
Mit Zitat antworten
  #6 (permalink)  
Alt 15.10.2010, 15:19
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

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)
Mit Zitat antworten
  #7 (permalink)  
Alt 16.10.2010, 09:28
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

OK, so habe ich es mir auch gedacht.

So, weitermachen
Mit Zitat antworten
  #8 (permalink)  
Alt 16.10.2010, 19:18
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 16.10.2010, 19:27
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

OK, wir belassen es dabei

Aber für !imp muss ich doch auch extra Code schreiben also hum wie num

Egal irgendwann werde auch ich dahinter steigen
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.10.2010, 22:45
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von nils_1309 Beitrag anzeigen
Egal irgendwann werde auch ich dahinter steigen
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:
  1. Er findet keine passende CSS-Anweisung (Deklaration).
  2. Er findet genau eine CSS-Anweisung.
  3. Er findet mehrere passende CSS-Anweisungen.
1. Keine CSS-Anweisung
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:
  • Die Webseiten werden von Stylesheets gestaltet, die ein Webdesigner gestaltet hat. Darin sind die Formatierungen definiert.
  • Ein Redakteur möchte jetzt eine CSS-Anweisung aus diesen Stylesheets überschreiben.
Wenn der Redakteur jetzt in seine Anweisung !important schreibt, überschreibt seine Gestaltung auf jeden Fall alle Styles des Webdesigners, völlig egal, welche Spezifität der Style hat und ob er weiter oben oder unten steht. Spezifität und Reihenfolge werden gar nicht mehr ausgewertet, wenn eine Anweisung !important ist.

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)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:40 Uhr.