zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mehrfache Deklaration des ID-Selektors

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.02.2005, 17:06
Benutzerbild von norm21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2005
Beiträge: 34
norm21 befindet sich auf einem aufstrebenden Ast
Standard Mehrfache Deklaration des ID-Selektors

Hallo mal alle,

Ich hab hier im Forum eine Page gefunden (http://previews.redrotate.de/spinne/index.php),
die folgenden Css-Code verwendet:



#content h1 {
margin: 0 0 15px 0;
padding: 0 0 2px 10px;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
font-size: 80%;
font-weight: bold;
border-bottom: 2px groove #D14800;
}
#contentStart h1 {
margin: 0 0 15px 0;
padding: 0 0 2px 10px;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
font-size: 80%;
font-weight: bold;
border-bottom: 2px groove #D14800;
}
#content h2 {
margin: 0 0 3px 0;
padding: 0;
color: #fff;
font-size: 75%;
font-weight: bold;
}



Die Attribut Angabe von "#contentStart h1" sieht folgendermaßen aus:


<div id="contentStart">

<h1>&raquo; Die Spinne.de GmbH</h1>



hat sich auf die Vermarktung...</p>

</div>


-----------------------------------------------------------------------


Da mir eine mehrfache Deklaration des ID-Selektor neu ist, möchte ich jetzt
gerne mehr davon wissen! :)

Warum mehrfache Deklaration - Vorteil?

Haben die zwei Selektoren "#content h1" und "#content h2" im obigem Css-Code
irgend etwas gemeinsam?

Wäre toll wenn mir das jemand mit der mehrfachen Deklaration des ID-Selektors
erklären könnte.



danke schon mal

----------
mfg george
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.02.2005, 17:43
Benutzerbild von Pablo
4 8 15 16 23 42
XHTMLforum-Kenner
 
Registriert seit: 31.05.2004
Beiträge: 1.772
Pablo sorgt für eine eindrucksvolle AtmosphärePablo sorgt für eine eindrucksvolle Atmosphäre
Standard

Hi,

in CSS darfst du eine ID beliebig oft deklarieren... Nur in HTML ist es verboten.

Code:
#content {
    color:red;
}
#content {
    background:green;
}
[...]
<div id="content">Container #content</div>
ist erlaubt, da es nur einen Tag mit der id "content" gibt.


Code:
#content {
    color:red;
    background:green;
}
[...]
<div id="content">Container #content 1</div>
<div id="content">Container #content 2</div>
ist nicht erlaubt, da es zwei Tags mit der selben id gibt.

Pablo
__________________
Go Opera!
… oder Chrome. Auch cool.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.02.2005, 18:04
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Diese Schreibweise
Code:
#content h1 {
margin: 0 0 15px 0;
padding: 0 0 2px 10px;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
font-size: 80%;
font-weight: bold;
border-bottom: 2px groove #D14800;
}
#contentStart h1 {
margin: 0 0 15px 0;
padding: 0 0 2px 10px;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
font-size: 80%;
font-weight: bold;
border-bottom: 2px groove #D14800;
}
#content h2 {
margin: 0 0 3px 0;
padding: 0;
color: #fff;
font-size: 75%;
font-weight: bold;
}
legt lediglich die Werte und Eigenschaften von Überschriften der Kategorie 1 und 2 für bestimmte Bereiche fest!

Für eine Überschirift h1, die in einem Bereich mit der ID Footer liegen würde, würden diese Eigenschaften und Werte nicht gelten!

Prinzip verstanden?
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #4 (permalink)  
Alt 07.02.2005, 15:40
Benutzerbild von norm21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2005
Beiträge: 34
norm21 befindet sich auf einem aufstrebenden Ast
Standard

ok
,
das heißt:

Das <h1> Tag wird innerhalb von <div id="content"> mit den gleichen
Eigenschaften wie von “#content h1“ formatiert.

Das <div id="content"> wird aber wiederum anders formatiert, da es ja
weiter unten im Stylesheet (#content h2) geänderte Angaben beinhaltet
und somit die „alten“ Angaben (#content h1) aktualisiert werden.


hab ich das jetzt verstanden?



@ Dieter Krautkraemer
danke, ich bin ja schon ein wenig weiter gekommen (hoffe ich zumindest) :)
Mit Zitat antworten
  #5 (permalink)  
Alt 07.02.2005, 15:56
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von norm21
Das <h1> Tag wird innerhalb von <div id="content"> mit den gleichen Eigenschaften wie von “#content h1“ formatiert.
nein, nicht "mit den gleichen wie" - sondern diese eigenschaften sind speziell nur auf h1 bezogen, die innerhalb des bereiches mit der ID content stehen.

Zitat:
Das <div id="content"> wird aber wiederum anders formatiert, da es ja weiter unten im Stylesheet (#content h2) geänderte Angaben beinhaltet und somit die „alten“ Angaben (#content h1) aktualisiert werden.
ebenfalls nein - #content h2 wirkt sich natürlich analog nur auf die h2 aus, die innerhalb von content stehen.

wenn irgendwelche formatierungen auf content angewandt werden sollten, müsste da nur #content { ... } stehen.

Zitat:
hab ich das jetzt verstanden?
i hope so.
Mit Zitat antworten
  #6 (permalink)  
Alt 07.02.2005, 16:01
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Nee, ich glaube, da hakt noch was beim Verständnis!?

Mit
Zitat:
#content
legst Du einen Bereich fest, in dem Dein Inhalt kommen soll.

Mit
Code:
#content h1
legst Du fest, wie eine Überschrift der Kategorie 1 in diesem Bereich aussehen soll. Das gleiche gilt für "#content h2" usw.

Einen Bereich, der die Navigation beinhalten soll, würdet Du zum Beispiel
Code:
#menu
nennen. Überschriften für diesen bereich könntest Du in der CSS als
Code:
#menu h1
deklarieren.

Im Quelltext sähe dies dann so aus:
Code:
<div id="menu">
<h1>Überschrift</h1>
</div>
Diese Überschrift im Bereich "#menu" bekäme dann die Eigenschaften aus der CSS von "#menu h1"

Jetzt klar?
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #7 (permalink)  
Alt 07.02.2005, 16:29
Benutzerbild von norm21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2005
Beiträge: 34
norm21 befindet sich auf einem aufstrebenden Ast
Standard thx

so, da war ich ja voll daneben,

aber jetzt hab ich’s!


Besten DANK an euch, für die ausführliche Erläuterung!

danke


mfg george
Mit Zitat antworten
  #8 (permalink)  
Alt 07.02.2005, 16:43
Benutzerbild von norm21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2005
Beiträge: 34
norm21 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
#content h1
Sozusagen hat das mit „Mehrfache Deklaration des ID-Selektors“ wenig zu tun!


also nicht zu vergleichen mit :

h1, h2, h3 {color:#000000; font-weight:bold; font-size:18px;}


ist mir eh schon spanisch vorgekommen,
weil kein Beistrich zwischen "#content" und "h1"stand.
Mit Zitat antworten
  #9 (permalink)  
Alt 07.02.2005, 17:00
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Wenn Du
Code:
h1, h2, h3, h4 {
irgenwas: nochwas;
}
schreibst, so ist das nur eine verkürzte Schreibweise von
Code:
h1 {
irgendwas: nochwas;
}
h2 {
irgendwas: nochwas;
}
h3 {
irgendwas: nochwas;
}
h4 {
irgendwas: nochwas;
}
Voraussetzung: Du willst für alle Elemente (h1, h2, etc.) die gleichen Eigenschaften und Werte verwenden!
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.02.2005, 17:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

http://edition-w3c.de/TR/1998/REC-CS...512/kap05.html
__________________
</ulle>
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
Problem mit z-index Unearth CSS 10 23.04.2009 07:49
des hundes hexenküche derHund http://csskueche.xhtmlforum.de/ 10 19.05.2005 23:56
Ratschläge bei Publizierung eines fertigen Layouts gesucht Black Fladder CSS 55 05.09.2004 15:30
Overflow - Darstellung des Scrollbalkens im IE falsch?? stollev CSS 6 05.07.2004 16:44
Bildlaufleiste des IE unsichtbar machen Jürgen CSS 10 06.06.2003 16:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:21 Uhr.