div oder unabhängig von html?

[xXxPeterPanxXx]

Hi
Wie macht ihr eure Website mit "div" oder macht ihr die stylesheets unabhängig vom html.

Ich hab nicht so ganz verstanden wie man das mit den stylesheets unabhängig vom html machen soll. Wie soll man den die Bereiche auswählen für diedie stylesheets sind? Ich will ja meinetwegen nicht für den ganzen "body" Bereich die Schrift Arial haben sondern. Theoretisch jeden Satz einzelnd designen können.

 

[prm]

Es gibt immer eine Abhängigkeit zwischen CSS-Stylesheet und HTML.

Ein Element (zum Beispiel ein div, Absatz, Überschrift, Liste usw.) wird durch HTML aufgerufen.
Im Stylesheet kann man jedes Element dann individuell formatieren.
Das kann generell erfolgen, indem du z.B. für den Body eine Schriftart hinterlegst.

Willst du dagegen für einen Bereich Verdana und für einen anderen Bereich Times New Roman als Schriftart verwenden, dann definierst du eben für die entsprechenden Div's unterschiedliche Schriftarten. Hierzu brauchst du lediglich andere "ID-Bezeichnungen" für die Div's, also andere Namen, damit sie sich unterscheiden.
Beispiel:

HTML:

<div id="header">Headerinhalt</div>

CSS:

#header {
font-family: Verdana;
}

HTML:

<div id="content">Content-Inhalt</div>

CSS:

#content {
font-family: 'Times New Roman';
}

Für Elemente, die mehrmals auf einer Seite vorkommen, verwendest du CSS-Klassen.

Beispiel:
HTML:

<p class="rot">Absatz mit roter Schrift</p>
<p class="blau">Absatz mit blauer Schrift</p>

CSS:

.rot {
color: red;
}

.blau {
color: blue;
}

 

[xXxPeterPanxXx]

ja das war schon ganz hilfreich. Aber wie machst du deine websites?Im html dokument oder in einem andren dokument wo nur die stylesheets drin sind?

 

[threadi]

Natürlich gibt es immer ein HTML-Dokument und eine CSS-Datei die die Gestaltungsangaben enthält.

 

[prm]

Eine Seite der Website besteht sozusagen aus zwei getrennten Dateien:

Eine HTML-Datei für den Inhalt und den Aufruf der Elemente und

eine CSS-Datei, wo alle Formatierungen drinstehen. Die CSS-Datei wiederum kann für alle HTML-Seiten verwendet werden.
In der HTML-Datei ist lediglich ein Bezug zur CSS-Datei herzustellen.

vielleicht ist auch das zum Verständnis nützlich: CSS-Styleangaben einbinden

 

[Efchen]

Hi
Wie macht ihr eure Website mit "div" oder macht ihr die stylesheets unabhängig vom html.

Sicher nicht "mit div", sondern mit HTML. Der Inhalt wird mittels HTML logisch ausgezeichnet, d.h. Du gibst ihm eine Bedeutung. Du zeichnest Überschriften aus, Textabsätze, Adressen, Zitate, usw. Mit dem Element <div> gruppierst Du lediglich mehrere Elemente zu einer Einheit.

Ich hab nicht so ganz verstanden wie man das mit den stylesheets unabhängig vom html machen soll.

Zunächst einmal, indem Du Deine Stylesheets alle extern über den <link>-Tag im Header der HTML-Datei einbindest.

Wie soll man den die Bereiche auswählen für diedie stylesheets sind? Ich will ja meinetwegen nicht für den ganzen "body" Bereich die Schrift Arial haben sondern. Theoretisch jeden Satz einzelnd designen können.

Das geht mit Selektoren, IDs und Klassen.
Mit "body" sprichst Du, wie Du schon sagst, das gesamte Dokument an. Willst Du aber nur einen bestimmten Textabsatz fett darstellen, dann sieht das so aus:

HTML:
<p class="BesondererAbsatz">Dieser Absatz ist was besonderes.</p>

CSS:
p.BesondererAbsatz {
  font-weight:bold;
}

Trennen sollst Du HTML und CSS insofern, als dass Du in die HTML-Datei keinerlei Layout/Design-Informationen schreiben sollst. Das bedeutet, CSS-Angaben immer extern, nie über das style-Attribut, das bedeutet aber auch, dass Du Deine IDs oder Klassennamen nicht gemäß dem Layout oder Design benennst, also nicht id="rechts" oder class="rot". Auch IDs oder Klassennamen sollten gemäß der logischen Bedeutung vergeben werden, wie eben alles in HTML.
Wenn Du eine Klasse "rot" nennst, die in Deinen 274 HTML-Dateien insgesamt 723 mal vorkommt und Du willst das jetzt aber alles grün einfärben, hast Du verdammt viel Arbeit (unnötigerweise) oder aber Du hast 723x etwas "rot" benannt, was aber tatsächlich grün ist. Das gilt es zu vermeiden.

Okay?

Grüße,
-Efchen

P.S.:

Beispiel:

<div id="header">Headerinhalt</div>
<div id="content">Content-Inhalt</div>
<p class="rot">Absatz mit roter Schrift</p>
<p class="blau">Absatz mit blauer Schrift</p>

Das sind alles sehr zweifelhafte Beispiele.

Bei den ersten beiden bekommt man den Eindruck, man packt seinen Inhalt einfach in divs. Das macht man natürlich nicht. Sowas wie da wird normalerweise nie vorkommen. Ein Header wird auch nicht zum Header, indem man ihn "header" nennt, sondern indem man ihn als Header (= Überschrift) auszeichnet.
<h1 id="header">Headerinhalt</h1> wäre definitiv besser zum Verständnis von HTML.
<div id="Header"><h1>Willkommen</h1><ul id="Menu">...</ul></div> wäre aber durchaus okay, wenn der Header als eine EInheit mit CSS formatiert werden soll.

Die anderen beiden Beispiele haben ungünstige Klassennamen, warum habe ich ja oben beschrieben.