janz, janz fiese CSShack

howto:css

Cascading_Style_Sheets sind Formatbeschreibungen für (hauptsächlich) Webseiten. Eine normale (richtige) Webseite sollte logisch aufgebaut sein (der ganze h1, strong kram). Das sieht erst mal aus wie die hompages von Matheprofessoren, meist recht eintönig. Hier kommt css ins Spiel, css gibt dem browser Anweisung welchen Absatz er wohin stellen soll und mit welcher Schrift und Farbe die Überschrift hervorgehoben werden soll.
Kurz gesagt: css verbindet das design mit der Webseite.

Ich will hier gar nicht das 1000 howto für .css aufstellen (da gibt es wesentlich fähigerer Koryphäen) sondern eigentlich nur auf die wirklich guten verlinken und aufzählen was mir am wichtigsten ist.

Grundsätzlich kann man css erst mal auf mit dem Wikibook books:CSS? lernen. Das Standardnachschlagewerk für alle css Referenzen ist selfhtml.org.

Vor allem werkeln steht natürlich der Entwurf, mit diesem kann man sich dann ans Werk machen.

Tables

Ach ja nochwas: Tabellen sind ein Container für Daten in einer Matrix, kein Designgrundbaustein. (flo sagt: tabellen sind tabellen sind tabellen)

Wenn man aber mal doch was links und rechts anordnen muss:

 

Erscheinung

Backgroundbild

Mit dem Hintergrund kann man sehr viel machen. Er wirkt quasi wie wenn man einen Liebesbrief entweder auf Karoausdemblockgerissen-Papier oder auf parfümierten Büttenpapier schreibt. Eine einfache Variante ist es dem Textinhalt eine anständige Schrift, ein bisschen Proportion zu geben und dann den ganzen superblingblingdesignkram raus aus dem photoshop ähm gimp und ab in den Hintergrund.

Ein sehr schönes und spooky Beispiel ist benecke.com.

icons

icons helfen vor allem bei links dem Auge recht gut anzuzeigen wo es hingehen soll. Mit css kann man icons ohne überflüssige und aufwändige html-Elemente einbauen.

feine details

in css sind ja so schöne details möglich die man oft gar nicht sieht. ;) z.B. cursor-url.

data2css

Die Möglichkeiten sind riesen groß und ermöglichen es strukturierte Daten darzustellen. Allerdings nur wen man diese sich auch identifizieren und damit ansteuern lassen.
Definiert man nun das grundsätzliche Element body und alle links mit einer identifizierenden Klasse oder ID, kann fast jeder Inhalt auf einer Seite kaskadierend von dieser aus angesteuert werde. data2css

Print

Zwar kann man auf dem Bildschirm doch so einiges machen, an ein printcss stellen sich aber dann wieder ganz andere Ansprüche.

  • Den ganzen Navikram, den man auf dem Papier eh net brauchen kann erst mal weg displayen: ( display: none )
  • Seitenumbrüche, Schusterjungen und Hurenkinder: de.selfhtml.org - Layouts für Printmedien
  • Da man auf dem Papier net klicken kann kann man optional Links ausgeschrieben darstellen. link?
  • Serifen wirken auf dem Bildschirm nicht, beim print sind sie aber hilfreich, so kann man jetzt umstellen.

 
style-sheets.de - Print-Stylesheets Einführung

IEx

Auch wenn CSS sehr oft Spaß macht, vergiss nie am Schluss kommt immer der IE check. Und der nervt, da er meist nochmal soviel Zeit kostet. Also erst mal mit dem box modell auseinandersetzen oder ein javascript CSS Browser Selector (wobei ich meine: nääähhh).neben vielen Andern werden Conditional Comments empfohlen.

Und dann mit browsershots.org (alle browser, aber langsam) oder netrenderer (nur IE aber fix) per screenshot testen.

Designs

Sammlung von designvorlagen oder Teilen die man mal brauchen könnte:

 

Vorlage

Was man eigentlich immer braucht, wenn nicht schon durch das CMS vorgegeben 

body { font:normal 12px Arial, Helvetica; background: url('example_body_bg.png*) repeat-x top left #F6F6F6 ;margin: 0; padding: 0, outline: none;}
ul,
ol { list-style:none; list-style-image: url('data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs'); }
.clear,
.cb { clear:both; }
img { border:none; }
.left { float:left;}
.right { float:right;}
.none { float: none !important;}
img.left { float:left;margin:0 5px 5px 0;}
img.right { float:right;margin:0 5px 0 5px;}
.hidden { display: hidden; }
h1,h2,h3,h4,h5,h6{padding:0; margin:0;}
h1{color:#000; font-size: 130%; }
h2{color:#000; font-size: 120%; }
h3{color:#000; font-size: 115%; }
h4{color:#000; font-size: 110%; }
h5{color:#000; font-size: 105%; }
h6{color:#000; font-size: 105%; }
p {margin: 0 0 10px 0;}
hr {color:#000;background-color:#000;height:1px;margin: 0 0 2px 0;}
td{vertical-align: text-top;}
.alerta, .notice {color:red;text-transform:uppercase;}
.row2 dl dt {float: left;font-weight: bold;width: 150px;} // class.row2 is above if you use markdown etc
.row2 dl dd {margin-bottom: 5px !important;}
/* proportion */
#panel {margin: 0 auto; width: 956px;background-color:#fff;} //middled fixed width

 
Wie in css-icons erwähnt nutze ich diese gelich für ul ol, daher schalte ich auch den list-style ab.

heros

Manchmal findet man da draußen Seiten die einfach wunderschönes CSS haben:

 

--

umija quick

Google Search