title image


Smiley Re: kleine einleitung zu css....
Moin,



Dein Problem ist - wie das der meisten anderen CSS-Anfänger auch - dass Du Dich auf CSS stürzt, ohne HTML überhaupt zu beherrschen[1].



Eine wichtige Grundlage für gutes CSS ist eine solide HTML-Struktur. HTML wurde in den Jahren vor CSS leider immer wieder zum Layout benutzt (mangels anderer Möglichkeiten). Das ist heute nicht mehr nötig. Heute kann man HTML endlich so nutzen, wie es gedacht ist. Nur zur Festlegung der Struktur des Dokuments. CSS macht dann das rein optische. Das nennt man "Trennung von Inhalt und Layout". Das hat noch zahlreiche andere Vorteile, die Du sicher über die Suchfunktion recherchieren kannst.



Es ist wichtig, dass Du bei Deiner HTML-Seite auf die Semantik achtest. Was das ist? Das ist, wenn Du für jeden Content (Inhalt) das Tag verwendest, was den Content am besten beschreibt. Eine Überschrift zeichnet man mit bis aus, ein Textabsatz wird mit ausgezeichnet, eine Adresse mit , wichtige Textpassagen werden mit oder besonders stark betonte mit ausgezeichnet. "Boxen", also , wie Du wahrscheinlich meinst, kommt hier gar nicht vor, weil ein keine semantische Bedeutung hat außer "Elemente, die zusammengehören". D.h. ein wird eigentlich nur verwendet, um Elemente zu gruppieren und ein enthält niemals nur Content (im Sinne von Text oder so).



Wer richtiges und richtig gutes CSS-Design machen will, und dabei geplant vorgehen will, erzeugt als erstes eine reine HTML-Seite, semantisch korrekt ausgezeichnet. Ohne jegliche Informationen für das spätere Aussehen. Diese "nackte" Seite ist dann auch das, was man in Browsern sieht, die kein CSS können. Daher sind CSS-Layouts in *allen* Clients (nicht nur Browsern) dieser Welt nutzbar, was man von Tabellenlayouts nicht behaupten kann, denn Browser, die keine Tabellen können (ja, sowas gibts), stellen Tabellenlayouts falsch oder gar nicht dar.



Wenn Du so eine semantische Seite fertiggestellt hast, kommt das CSS. Jedes Element wird von Dir mit Eigenschaften versehen, die sein Aussehen bestimmen, seine Position im Dokument (soll nicht heißen, Du sollst position:absolute verwenden, davon rate ich ab), Größen usw. Wenn Du perfekt gearbeitet hast (was wohl die wenigsten können), müsstest Du jetzt keine Änderungen mehr am HTML-Code machen! Deine Eigenschaften lagerst Du alle in ein externes Stylesheet aus (was auch ganz besonders zur Trennung von Inhalt und Layout beiträgt).



Fertig ist die Seite.



Welche CSS-Eigenschaften es gibt, listet SelfHTML. Welche Du wann anwendest, das wirst Du im Laufe der Zeit lernen, das macht die Übung. Wichtig ist, dass Du verstehst, dass eine keine Restriktionen gibt (Ausnahmen bestätigen die Regel), auf welche HTML-Tags Du welche CSS-Eigenschaft anwendest, so wie es in HTML mit den Attributen der Tags zahlreiche Restriktionen gibt. Wenn Du einem Textabsatz ein Hintergrundbild oder eine Hintergrundfarbe zuweisen willst, dann musst Du dazu kein um Dein legen, sondern weist die erforderlichen Eigenschaften dem direkt zu. Und da es sich bei beiden, und , um Block-Elemente handelt, könntest Du auch die Größe des Textabsatzes direkt verändern. Aber das sind Feinheiten, die die Übung bringt.



Wichtig ist das grundsolide, semantische HTML. Und das Wissen, dass CSS auf alle Tags angewendet werden kann. Und die strikte Trennung von Inhalt und Layout. Der Rest kommt von selbst.



Wenn Du vorher Tabellenlayouts gemacht hast, wird der Vortrag in meiner Signature sehr hilfreich für Dich sein, aber auch wenn Du keine Tabellenlayouts gemacht hast, ist das Meiste noch sehr interessant für Dich.



Wenn Du weitere Fragen hast, scheue Dich nicht, sie zu stellen!



Gruß,

-Efchen



[1] Ist eine Vermutung meinerseits, wenn Du weiterliest, wird sich heraus stellen, ob ich damit richtig lag, oder nicht.

geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: