Wie meine Formatangaben in ext. CSS auslagern?

[Bill]

Hallo,
ich habe im Augenblick in meinen Texten die Einrückung
 mit style="margin-left:1em"; bzw.
  mit style="margin-left:2em"; bzw.
   mit style="margin-left:3em"; ....
Wie mache ich dies sinnvollerweise?
class="Absatz1",  class="Absatz2", ....?

[Baba]

Wie mache ich dies sinnvollerweise?

Hi,
wie wäre es mit einem CSS Einführungstutorial?? :)

Generell über Selektoren oder Klassen.

h1 und p sind Selektoren.

<h1>Überschrift</h1>  
<p class=absatz1>Hier steht Text.</p>  
  
<h2>Unterüberschrift</h2>  
<p class=absatz2>Hier steht auch Text.</p>  

css:

  
h1 {margin-left:1em}  
p.absatz1  {margin-left:2em}  
h2 {margin-left:2em}  
p.absatz2  {margin-left:3em}  

Cheers,
Baba

[suit]

Wie mache ich dies sinnvollerweise?

Hi,
wie wäre es mit einem CSS Einführungstutorial?? :)

Für dich?

Generell über Selektoren oder Klassen.

Wohl eher über Kombinatoren und Pseudo-Klassen.

h1 und p sind Selektoren.

Soweit richtig.

<h1>Überschrift</h1>

<p class=absatz1>Hier steht Text.</p>

Was soll die Klasse hier?

<h2>Unterüberschrift</h2>
<p class=absatz2>Hier steht auch Text.</p>

  
Oder hier?  
  

> ~~~css
  

> h1 {margin-left:1em}  
> p.absatz1  {margin-left:2em}  
> h2 {margin-left:2em}  
> p.absatz2  {margin-left:3em}  
> 

Der Adjacent Sibling Combinator ist wohl besser geeignet

h1+p { margin-left: 2em; }  
h2+p { margin-left: 3em; }

Oder aber die :nth-of-type()-Pspeudo-Klasse

p:nth-of-type(1) { margin-left: 2em; }  
p:nth-of-type(2) { margin-left: 3em; }

[Bill]

Oh je!

Der Adjacent Sibling Combinator ist wohl besser geeignet

Oder aber die :nth-of-type()-Pspeudo-Klasse

Mit derartig schwierigen Begriffen/Themen muss man sich befassen, wenn man
das individuelle Einrücken von Text möchte?
Dann lasse ich doch lieber die Style-Definitionen im Html-Text.
Gruß
Bill

[suit]

Oh je!

Der Adjacent Sibling Combinator ist wohl besser geeignet

Oder aber die :nth-of-type()-Pspeudo-Klasse

Mit derartig schwierigen Begriffen/Themen muss man sich befassen, wenn man
das individuelle Einrücken von Text möchte?

Die Begriffe zu kennen schadet nicht, es ist aber nicht notwendig für das verständnis.

Der Adjecent Sibling Combinator ist das + Zeichen, er sorgt dafür dass nur "nachfolgende" einfache Selektoren zählen.

h1+p bedeutet, alle p-Elemente die nach einem h1 Element kommen.

Du kannst also z.B. mit folgenden Selektoren arbeiten.

p  erster absatz
p+p  alle ab dem 2. Absatz
p+p+p  alle ab dem 3. Absatz

:nth-of-type() ist ebenfalls einfach zu merken

n bezeichnet in der Mathematik indizierte Variablen - of type ist englisch und steht für "dieses Typs".

p:nth-of-type(3) ist also das 3. Element vom Typ "p"

Dann lasse ich doch lieber die Style-Definitionen im Html-Text.

Wohnst du noch, ober lebst du schon?

Während in Villariba noch geputzt wird, wird in Villabajo schon wieder gefeiert!

Während ich mir die Sonne auf den Bauch scheinen lasse, bist du noch damit beschäftigt irgendwelches inline-CSS in deinem HTML umzubauen.

[Baba]

[code lang=html]<h1>Überschrift</h1>
<p class=absatz1>Hier steht Text.</p>

Was soll die Klasse hier?

Ehrlich gesagt, hatte ich gedacht, dass die Frage auf einer viel einfacheren Ebene gestellt wurde.

Das war das OP:

ich habe im Augenblick in meinen Texten die Einrückung
mit style="margin-left:1em"; bzw.
  mit style="margin-left:2em"; bzw.
   mit style="margin-left:3em"; ....

Ich dachte der OP wäre schon gut beraten durch html-Klassen und -Id's. Vielleicht sollte ich mich zurückhalten, wenn ich nicht Gurukenntnisse über ein Thema habe.

Cheers,
Baba

[Der Martin]

Hi,

ich habe im Augenblick in meinen Texten die Einrückung
mit style="margin-left:1em"; bzw.
  mit style="margin-left:2em"; bzw.
   mit style="margin-left:3em"; ....

erinnert mich stark an neulich ...

Ciao,
 Martin

[Bill]

erinnert mich stark an neulich ...

Nach Durchlesen einiger Beiträge dort habe ich den Eindruck, dass
dies eine kontroverse Diskussion von Spezialisten war.
Das meiste vestehe ich nicht.
Was ich aber gesehen habe, ist, dass das dortige class="paddingLeft8em", was ja in etwa meinem class="Absatz1" und dem jetzigen Vorschlag von Baba entspricht, zerrissen wurde, u.a. mit den Worten "eine Klasse soll inhaltsbezogen sein".
Wenn ich aber doch das Einrücken an den unterschiedlichsten Stellen (Inhalten) benötige?

[Matthias Apsel]

Om nah hoo pez nyeetz, Bill!

»»... u.a. mit den Worten "eine Klasse soll inhaltsbezogen sein".

Wenn ich aber doch das Einrücken an den unterschiedlichsten Stellen (Inhalten) benötige?

Dann wird es zumindest ähnliche Gründe für die Verwendung einer Einrückung geben. Die könnten dann im Klassennamen auftauchen.

Matthias

[Bill]

Hallo

Dann wird es zumindest ähnliche Gründe für die Verwendung einer Einrückung geben. Die könnten dann im Klassennamen auftauchen.

Wo siehst Du ähnliche Gründe (außer vielleicht Untergruppe1, Untergrupp2 ....) bei folgendem:

Name
  Adresse
     Strasse
     Ort
.......

Artikelnummer
  Bezeichnung
  Komponenten
    2 * 4766
    1 * 3215
.......
Gruß
Bill

[Matthias Apsel]

Om nah hoo pez nyeetz, Bill!

Dann wird es zumindest ähnliche Gründe für die Verwendung einer Einrückung geben. Die könnten dann im Klassennamen auftauchen.

Wo siehst Du ähnliche Gründe (außer vielleicht Untergruppe1, Untergrupp2 ....) bei folgendem:

Name
  Adresse
     Strasse
     Ort
.......

Artikelnummer
  Bezeichnung
  Komponenten
    2 * 4766
    1 * 3215
.......

deine Beispiele sind Listen.

z.B.

<ul class="person">  
  <li>  
    <dl>  
      <dt>Name</dt><dd>Mustermann</dd>  
      <dt>Vorname</dt><dd>Max</dd>  
    </dl>  
  </li>  
  <li>Adresse  
    <dl>  
      <dt>Name</dt><dd>Mustermann</dd>  
      <dt>Vorname</dt><dd>Max</dd>  
    </dl>  
  </li>  
</ul>

Dann sind alle Elemente ohne weitere Klassen ansprechbar.

Matthias

[Bill]

Hi,
auch in Deinem Beispiel müsste ich, wenn ich unterschiedliche "Einrückungen" möchte doch weitere CSS-Angaben machen?

[Matthias Apsel]

Om nah hoo pez nyeetz, Bill!

auch in Deinem Beispiel müsste ich, wenn ich unterschiedliche "Einrückungen" möchte doch weitere CSS-Angaben machen?

sicher, nur käme man ohne Klassen aus.

Matthias

[Bill]

Hi

auch in Deinem Beispiel müsste ich, wenn ich unterschiedliche "Einrückungen" möchte doch weitere CSS-Angaben machen?

sicher, nur käme man ohne Klassen aus.

Aber doch nur wenn mann in allen Listen die gleichen Einrückungen hätte,
d.h. li, dl immer die gleichen Eigenschaften hätten?
Gruß
Bill

[Matthias Apsel]

Om nah hoo pez nyeetz, Bill!

Aber doch nur wenn mann in allen Listen die gleichen Einrückungen hätte,
d.h. li, dl immer die gleichen Eigenschaften hätten?

Ich gehe davon aus, dass alle Personen gleich aussehen sollen und alle Bauelemente.

dann kannst du mit einer Klasse alle anderen Stellen formatieren. Beispielsweise

.person ul

oder

.bauelement dt

Wenn du konkrete Hinweise brauchst, musst du die konkrete Seite zeigen. (Für allgemeines Hin und Her und Wenn und Aber ist jetzt EOD.)

Matthias

[Encoder]

Ich nehme an die Antwort war auf verschachtelte Listen bezogen.
Eine Liste hat Einrückung x. Eine Liste innerhalb einer Liste hat Einrückung 2x. Ganz ohne css gehts natürlich nicht, aber es braucht nicht jede Liste eine eigene Einrückung, bzw. kann man die Einrückung einer Liste auf das Elternelement beziehen.

[suit]

auch in Deinem Beispiel müsste ich, wenn ich unterschiedliche "Einrückungen" möchte doch weitere CSS-Angaben machen?

In welchem Fall müsstest du den, wenn du etwas mit CSS formatieren willst, keine CSS-Deklarationen notieren? :)

[Encoder]

Eine Klasse wie paddingLeft8em

• sagt nicht aus WO sie überall verwendet wird, sondern nur was sie bewirkt. Wenn du später dazu noch weitere Angaben haben willst, suchst du evtl. lange, bis du alle Vorkommen findest.
• müsste konsequenterweise immer umbenannt werden wenn du den Style änderst. Irgendwann hast du paddingLeft8emColorRedMarginTop10pxBorderGreen...