CSS formatieren - Wie formatiert Ihr eure CSS Dateien?

[Max]

Hallo Zusammen

Mich würde wunder nehmen, wie Ihr eure CSS Dateien formatiert. Liegt die Vorliebe z.B. so:

a.readmore:link {font-weight:bold;color:#0099CC;}
a.readmore:visited {font-weight:bold;color:#0099CC;}
a.readmore:hover {font-weight:bold;color:#000099;}

oder so:

a.readmore:link {
  font-weight:bold;
  color:#0099CC;
}

oder doch so ?

a.readmore:visited
{
  font-weight:bold;
  color:#0099CC;
}

nein, noch immer nicht gut?

a.readmore:hover {
  font-weight:bold;
  color:#000099; }

etc. Postet mal eure Vorlieben .. ich bin gespannt ;).

Liebe Grüsse
Max

[Dieter Raber]

Hallo Max,

#irgeneine-id a.readmore:link {
  font-weight:bold;
  color:#0099CC;
}

So

Gruß,

Dieter

[Sven Rautenberg]

Moin!

#irgeneine-id a.readmore:link {
  font-weight:bold;
  color:#0099CC;
}
So

Me too.

• Sven Rautenberg

[Peter]

So...

a.readmore:link {font-weight:bold;color:#0099CC;}
a.readmore:visited {font-weight:bold;color:#0099CC;}
a.readmore:hover {font-weight:bold;color:#000099;}

Schön alles auf einen Blick :]
Ich hätte noch ein Format anzubieten...
Das schimpft sich CHAOS:

-------------------------------------------------------------------
h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i {font-family:Arial,sans-serif; }h1 { font-size:26px; margin-bottom:18px; }
h1.ph1 { font-size:21px; margin-bottom:18px; }h2 { font-size:21px; margin-bottom:18px; }h2.sh2 { font-size:21px; }h3,h3.xmp,h3.xpl,h3.inf,h3.tip,h3.akt { font-size:16px; }h4 { font-size:13.4px; }p,ul,ol,li,div,td,th,address,blockquote { font-size:13.4px; }li { margin-top:3px; }pre { font-family:Courier New,Courier; font-size:13.4px; color:#0000C0; }code,kbd,tt { font-family:Courier New,Courier; color:#0000C0; }

[Henryk Plötz]

Moin,

Mich würde wunder nehmen, wie Ihr eure CSS Dateien formatiert.

Kommt drauf an. Für die schnelle Regel zwischendurch:

  
ol#root ul.hat_antworten { border-left: 5px solid green; }  

ansonsten:

  
ol#root ul {  
    margin-left: 0.25em;  
    border-left: 1px solid black;  
    padding-left: 1.75em;  
}  

[Dieter Raber]

Hallo Henryk,

Ich habe diese Form bisher noch nicht benutzt:

ol#root

Bedeutet das 'das ol mit der ID root'? Und wenn ja, wozu, es kann doch ohnehin nur einmal die ID root geben.

Gruß,

Dieter

[Thomas Meinike]

Hallo,

Ich habe diese Form bisher noch nicht benutzt:

ol#root
Bedeutet das 'das ol mit der ID root'? Und wenn ja, wozu, es kann doch ohnehin nur einmal die ID root geben.

Es kann aber mehrere ol-Elemente mit unterschiedlichen IDs geben.

MfG, Thomas

[Sven Rautenberg]

Moin!

ol#root
Bedeutet das 'das ol mit der ID root'? Und wenn ja, wozu, es kann doch ohnehin nur einmal die ID root geben.

Es kann aber mehrere ol-Elemente mit unterschiedlichen IDs geben.

Das dürfte relativ egal sein, weil

#root
#andereid

zwei <ol>s genauso formatiert, wie

ol#root
ol#andereid

• Sven Rautenberg

[Thomas Meinike]

Hallo,

Das dürfte relativ egal sein, weil

#root
#andereid

zwei <ol>s genauso formatiert, wie

ol#root
ol#andereid

Mein Gedanke ging eher in diese Richtung:

ol#ur
{
  list-style-type: upper-roman;
}

ol#lr
{
  list-style-type: lower-roman;
}

fuer:

<ol id="ur">
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ol>
<ol id="lr">
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ol>

wobei IDs bei mehrfacher Anwendung der Formatierungen natuerlich nicht das Mittel der Wahl sind.

MfG, Thomas

[Sven Rautenberg]

Moin!

ol#root
Bedeutet das 'das ol mit der ID root'? Und wenn ja, wozu, es kann doch ohnehin nur einmal die ID root geben.

Richtig, aber diese ID muß ja nicht zwingend auf allen Seiten im <ol> vorkommen, sondern kann auch in einem <ul> vorkommen. Das gemeinsame CSS für beide Seiten erlaubt auf diese Weise unterschiedliche Formatierung.

• Sven Rautenberg

[Dieter Raber]

Hallo Sven und Thomas,

Danke fuer die Antworten.

Gruß,

Dieter

[Ingo Turski]

Hi,

Ich habe diese Form bisher noch nicht benutzt:

ol#root
Bedeutet das 'das ol mit der ID root'? Und wenn ja, wozu, es kann doch ohnehin nur einmal die ID root geben.

Außer dem bereits Gesagtem: diese Notation schließt auch Netscape 4 aus und könnte als Browserweiche fungieren. Außerdem erhöht es die Spezifität und hilft vielleicht später mal dem Gedächtsnis etwas auf die Sprünge.

Zur Eingangsfrage: auch wenn's "OldSchool" ist, bevorzuge ich
a.readmore:link {
  font-weight:bold;
  color:#0099CC;
}
weil weniger zu scrollen ist und die Übersichtlichkeit durch die Einrückung ausreicht.

freundliche Grüße
Ingo

[Vinzenz Mai]

Hallo Henryk

#root ul {
    margin-left: 0.25em;
    border-left: 1px solid black;
    padding-left: 1.75em;
}

So sieht es auch bei mir aus. (Die schnelle Regel zwischendurch fällt allerdings weg. In den seltenen Fällen, wo ich sowas schlampig hingeschrieben habe, habe ich es später nahezu ausnahmslos bereuen müssen.)

Freundliche Grüße

Vinzenz

[Jeena Paradies]

Hallo,

eigentlich so:

a.readmore:link {
  font-weight:bold;
  color:#0099CC;
}

Aber damit das nicht zu unübersichtlich wird mache ich sachen von denen ich denke dass ich sie nie wieder berühren muss so:

a.readmore:link {font-weight:bold;color:#0099CC;}
a.readmore:visited {font-weight:bold;color:#0099CC;}
a.readmore:hover {font-weight:bold;color:#000099;}

Nur mit Leerzeichen drinn:
a.readmore:link { font-weight:bold; color:#0099CC; }
a.readmore:visited  {font-weight:bold; color:#0099CC; }
a.readmore:hover { font-weight:bold; color:#000099; }

Grüße
Jeena Paradies

[L00NIX]

Ich halte es da, wie beim Programmieren...

a.readmore:link {
  font-weight:bold;
  color:#0099CC;
}

Sicher nicht, weil "Old-School" und man nie weiß, wozu denn die
geschlossene } gehört. Klar gibt es bei CSS keine Schachtelungen,
habe es mir aber (auch bei Java) abgewöhnt.

a.readmore:visited
{
  font-weight:bold;
  color:#0099CC;
}

Genau so.

Dat ist übersichtlich. :o)

a.readmore:hover {
  font-weight:bold;
  color:#000099; }

Ojeojeoje... wer macht denn sowas?

Gruß
L00NIX

[MudGuard]

Hi,

Klar gibt es bei CSS keine Schachtelungen,

@media print
{
  body { margin:0; }
}

Und schon hat man eine Schachtelung (auch wenn sie nicht sehr tief ist)

a.readmore:visited
{
  font-weight:bold;
  color:#0099CC;
}
Genau so.

Dito, wobei gelegentlich auch
  body { margin:0; padding:0; }
vorkommt.

cu,
Andreas

[Der Martin]

Hallo Max,

Mich würde wunder nehmen, wie Ihr eure CSS Dateien formatiert.

Liegt die Vorliebe z.B. so:

a.readmore:link {font-weight:bold;color:#0099CC;}

Eventuell bei kurzen Styles, die nur ein oder zwei Attribute enthalten.
Sonst genauso, wie ich auch C-Programmcode formatiere:

a.readmore:visited
{ font-weight: bold;
   color:       #0099CC;
}

Die öffnende und die schließende Klammer gleich weit eingerückt und VOR dem Inhalt (nicht am Zeilenende), und das, was in der Klammer steht, wird sauber untereinander ausgerichtet.

Ciao,

Martin

[Der Martin]

Grmpf.
Hab schon wieder den Bug übersehen, dass die Forumssoftware Probleme mit Leerzeichen am Zeilenanfang hat.
Normaler weise sollte es so ausgerichtet sein:

| a.readmore:visited
|  { font-weight: bold;
|    color:       #0099CC;
|  }

und tschüss,

Martin

[Candid Dauth]

Heißa, Max,

> a.readmore:visited  
> {  
>   font-weight:bold;  
>   color:#0099CC;  
> }

Ursprünglich habe ich ja das bevorzugt, aber das wurde dann zuviel Code und unübersichtlich, also habe ich mich für folgende Variante entschieden:

> a.readmore:link {font-weight:bold;color:#0099CC;}  
> a.readmore:visited {font-weight:bold;color:#0099CC;}  
> a.readmore:hover {font-weight:bold;color:#000099;}

Nur halt mit Leerzeichen um die Klammern. Und dort blicke ich mittlerweile auch am besten durch. Ich bin tatsächlich froh, dass ich diese Variante benutze – auch so habe ich schon etwa drei Seiten CSS-Code, und das ohne automatischen Zeilenumbruch.

Caramba!
Grüße aus Biberach Riss,
Candid Dauth (ehemals Dogfish)