Schlagwort-Archive: layout

Vorteile von CSS

Wozu ist CSS gut? Es gibt eine menge Gründe, CSS zu benutzen.

Allen voran steht die Trennung von Layout und Inhalt, sprich:
das Aussehen der Website und der Textinhalt lassen sich getrennt voneinander verwalten. Man muß nur eine einzige Datei ändern, um das Aussehen der gesamten Homepage zu ändern.
Das alleine wären schon Gründe genug, CSS zu verwenden.

Nachfolgend eine kurze Aufzählung:

+ Formatierung der Schrift Typen, Größe und Abstände
+ Einstellungen der gesamten Farben jeder Seite
+ Festsetzung der Breite der einzelnen Bereiche
+ Exakte Positionierung jeden Bereiches
+ Sehr suchmaschinenfreundlich
+ Pixelgenau bestimmen wo was erscheint
+ Versteckte Bereiche einfügen
+ Erzeugen einer Druckversion

CSS Kurzschrift

Nicht nur den Quellcode kann man mit CSS schlank halten, sondern auch die CSS Anweisungen und somit die ausgelagerte *.css Datei und übersichtlicher gestalten. Statt wie früher jede einzelne Anweisung exakt zu definieren gibt es schon längst viele Abkürzungen (Kurzschrift).
Früher hieß es zum Beispiel:

padding-top: 20px;
pading-bottom: 30px;
margin-left: 10px;

Dank der CSS Kurzschrift kann man das wie folgt schreiben und sich doch einige Arbeit ersparen. Es wird immer mit “top” begonnen, und es dreht sich wie der Uhrzeiger, also “oben, rechts, unten, links”. Das Ganze sieht dann so aus:

margin: 30px 10px 5px 0; //0 benötigt keine weitere Angabe
padding: 0 10px 0 10px;
padding: 10% 1%; // funktioniert auch, jeweils zwei Seiten
padding: 10px 0;
border: 1px solid #000000;
font: Arial, Helvetica, sans-serif 12px bold #000000;
background: #efefef url(foto.jpg) left top no-repeat fixed;

Linkeffekt mit CSS

Man sieht sie immer öfter, die netten Buttons, welche nur mit CSS realisiert werden. Benutzte man früher Grafiken .. heute funktioniert dies ganz einfach mit ein paar CSS Zeilen. Ein einfaches Beispiel kann wie folgt aussehen:

a {
border: 1px solid black; border-bottom: 1px solid #efefef; border-left: 1px solid #efefef; } // Allgemeine Linksa:hover {
border: 1px solid #efefef; border-bottom: 1px solid black; border-left: 1px solid black; } // Für den Hover-Effekt

.eine_klasse a {
border: 1px solid black; border-bottom: 1px solid #efefef; border-left: 1px solid #efefef; } // Für bestimmte Links

.eine_klasse a:hover {
border: 1px solid #efefef; border-bottom: 1px solid black; border-left: 1px solid black; } // Hover-Effekt

Auch hier ist wieder Kreativität gefragt.
Es ist zum Beispiel möglich, auch die Hintergrundfarbe zu verändern,
display -> block oder inline zu definieren
oder wechselnde Hintergrundbildchen einzufügen. Mit CSS ist vieles möglich. Einfach mal ausprobieren und freuen :-)

Verfasst von: Internet Blog