Einbinden und Grundsätzliches

Externe Datei einbinden: <link rel="stylesheet" href="screen.css" media="screen"> durch media screen wird fürs drucken das css nicht verwendet
<link rel="stylesheet" href="print.css" media="print"> zum drucken

<link href="screen.css" type="text/css" rel="stylesheet" media="screen and (min-device-width: 481px)"> Css3 Media Querries
<link href="mobile.css" type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)"> CSS3 für Handys
Einbinden: <style> </style>
Direktangabe: <span style="border:3px;"> Text </span> Styleeigenschaften im Tag besitzen einen höheren Kascadenwert
Kommentar: /* Kommentar */
Einheiten: Zwischen Wert und Einheit keine Leerstellen erlaubt, also z.B. 10px;

px Pixel sind unterschiedlich groß auf jedem Bildschirm
em relativ zur Schrifgröße die der Benutzer eingestellt hat, z.B. gut geeignet für Abstände zwischen Absätzen
% Prozent zum Elternelements

Absolute Einheiteen pt (Punkt), mm, cm für Printmedien
Farbangaben: #ffccdd; Hexadezimal: rot, grün, blau -- ff folles Fund -- 00 für nix
#fcd; Kurzform

color:rgb(51,0,102); zwischen 0 und 255
color:rgb(100%,100%,0%); in Prozent angebbar, hier gelb

black; red; yellow;
Mauszeiger: cursor: auto; Normaleinstellung
cursor: crosshair; Fadankreuzes
cursor: pointer; Link Cursor
cursor: move; Bewegungskreuz
cursor: text; Texteingabesymbol
cursor: wait; Sanduhr
cursor: help; Fragezeichen
Grundsätzlich: Css besteht aus Deklarationen. Deklartionen bestehen aus Eigenschaft und Wert.
Einige Eingenschaften werden vererbt (Schriftart), andere nicht (margin, border, width)

Grundsätzlich sollte beim der Gestaltung auf folgendes geachten werden: viel weiße Fläche, wenig Linien, Pastellfarben, nicht so breite Paragraphen, 900 goldener Schnitt
Refernz und Links: www.css4you.de Referenz
http://thestyleworks.de/ref/ Referenz

Selektoren

Elementgewichtung Kaskade: Typ gibt 1 Punkt, z.B. body oder a - bei Punktgleichheit gilt letzt definierte Regel
Klasse: 10 Punkte
Id: 100 Punkte - div#navi entspricht 101 Punkten.
Direktangabe im Tag: 1000 Punkte
Important: color:blue!important; dadurch am wichtigsten, falls anderes zugewiesen wird es trotz schwächeren Selektor ausgwählt
Selektoren: h1, p { font-size:48pt; color:#FF0000; } Tags

#extra { font-weight:bold; } Id
div#wrapper { font-weight:bold; }

.rot { color:red; } Klasse
p.normal { font-size:10pt; color:black; }

* { color:red; } alles
Kind- und Nachbar-Selektoren: h1 i { color:blue; font-style:normal; } Verschachtelte Tags: nur, wenn i innerhalb h1
hi > i { color:blue; font-style:normal; } Nur direkte Kinder werden angesprochen

div#textbereich a { color:red; } alle Links im textbereich

ul+p { color:red; } Nachbarselektor: ein p selektieren was direkt auf ein ul folgt <ul><p>
Pseudokassen Link: a:link { color:#FF0000; text-decoration:none; }
a:visited { color:#990000; }
a:active { color:#0000FF; } Moment des Klicks
a:hover { color:#0000FF; text-decoration: underline; }
a:focus { color:#990000; }
div#navi a:hover { color:#990000; } für bestimmten Bereich gültig
Pseudokassen Input: input:focus { color:#990000; }
Text einfügen: .class_1:before {content:"na toll! ";color:#ff0000;} Text mit Farbe rot wird vor das Element .class_1 eingesetzt
.class_1:after { content: "123"; color:red; } Inhalte nachträchlich in html einfügen
Elemente ansprechen: li:nth-child(odd) { background:#eee; } für Zebraeffekt
li:nth-child(even) { background:red; }
li:nth-child(1) { background:red; } erstes direkt angesprochen
Attributselektoren (CSS3): *[href^="http"] { } Selektor sucht Links die mit http beginnen

*[title] alle Elemente mit dem Attribut title
a[title] alle a Elemente mit dem Attribut title
a[href*="eyoo.de"] alle a Elemente in welchem href eyoo.de enthält

Es gibt noch viele weitere.

Schriftformatierung, Ausrichtung, Abstand, Rahmen

Schriftarten: font-family: Verdana, Segoe UI, Corbel sans-serif; Letzte ist Schriftart ohne Häkchen; Standart Schrift ist Times new roman 16
Schriftgrösse: font-size: 13px;
font-size: small; xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger oder 130%;
Schriftform: font-style: italic; kursiv - font-style: normal; nicht kursiv
Schrifgewicht: font-weight: bold; bolder, lighter, normal, oder Zahlenwert von 100 bis 900 - 400 ist normal
Textfarbe: color: #CC0000;
Zeichenabstand: letter-spacing: 3px; Abstand der Buchstaben
Zeilenhöhe: line-heigth: 1.5; 1.5 Fache der Schrifgröße ist die Zeilenhöhe
Schrift mehrere: font: bold 12pt Times; font-family, font-style, font-size, font-weight, font-height, font-variant
Gross oder Kleinbuchstaben: text-transform: uppercase; alles Großbuchstaben
text-transform: capitalize; Wortanfänge als Großbuchstaben
text-transform: lowercase; alles Kleinbuchstaben
Vertikal: vertical-align: top; middle, bottom, sub (tieferstellen), super (höherstellen)
Horizontal: text-align: center; left, center, right, justify (Blocksatz)

Box Modell

Inhaltsbereich: width: 100px; bei keiner Angabe, so groß wie das Elternelement
height: 200px; wächst bei keiner Angabe mit Inhalt mit
Innenabstand: padding: 1px; um den Inhaltsbereich drumherum, also zwischen Inhalt und Border
padding-top:1px; padding-right:1px; padding-bottom:1px; padding-left:1px;
padding: 10px 20px 0 10px; top right bottom left
padding: 5px 20px; oben und unten, dann rechts und links
Rahmen: border-color:red;
border-width:2px;
border-style:none; dotted (gepunktet), dashed (gestrichelt), solid (durchgezogen), double (doppelt), groove (3D-Effekt)
border: 1px solid blue;
border-left:1px; border-right:1px; border-top:1px; border-bottom:1px;
border-top-color:blue;
Außenabstand: margin: 1px; margin-top:1px; margin-bottom:1px; margin-left:1px; margin-right:1px; Besonderheit: bei vertikalen Aussenabständen 2 Elemente wird der untere Abstand verschluckt. also beide 30 px, bleiben nur 30 vom oberen
margin: 10px 20px 0 10px; top right bottom left
Hintergundsfarbe: background-color: #003366; für Inhaltsbereich und Innenabstand
Hintergrundsbild: background-image: url(bild.gif); z.B auch für Farbverlauf

background-repeat: no-repeat, repeat (Voreinstellung gekachelt), repeat-x (nur von rechts nach links gekachelt), repeat-y (nur von oben nach unten gekachelt)
background-position: 20px 30px; oben und links Wert -- left top;
background-attachment: fixed; Wasserzeicheneffekt

background: #003366 url(bild.gif) repeat-y left top; Kurzschreibweise

Positionierung und Weiteres

Display: dispaly: inline; Erzwingt Inline; Elemente stehen dadurch nebeneinander, Anwednung ist z.B. vertikales Menu
display: block; Erzwingt ein Block
display: none; Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.
display: inline-block Das Element ist eine Mischung aus einem Block- und einem Inline-Element. Es wird als Block-Element formatiert, floatet aber wie Inline-Elemente in der Zeile.
Positionierung: position: absolute; top:50px; left:10px; width:150px; height:150px; z-index:1; Pixelgenau positioniert, losglöst von anderen Elementen; gemessen wird vom Elternelement, html ist ein nicht static Element.
position: relative; top:10px; left:10px; width:150px; height:150px; Vom Ort aus wo sich die Box befindet wird diese 10px nach unten geschoben und 10 nach links; gemessen wird von der Anfangsposition des Elements
position: static; Positionierung im Textfluss.
position: fixed top:10px; left:10px; width:150px; height:150px; Wie absolute, jedoch bleibt das Element beim Scrollen stehen.
Ebenen: z-index:1; Element mit höherem Wert überdeckt Elemente mit niedrigerem Wert
Inline Elemente: Inline Elemente dürfen keine Blockelemente enthalten. Width und height können nicht angegeben werden (width und height sind immer automatisch, so groß wie Inhalt). Auch kann kein margin-top oder margin-bottom angegeben werden. Die Höhe wird duch font-size bestimmt.
Beispile: span, em, strong, a, cite, img, label, legend, input, button, select, option, textarea
OVERFLOW: Mit overflow: kann bestimmt werden, wie übergroße innere Elemente behandelt werden. Folgende Angaben sind möglich:
overflow: visible; Inhalt ragt aus dem Element so weit heraus, dass sein Inhalt auf jeden Fall komplett sichtbar ist.
overflow: hidden; Inhalt wird abgeschnitten, wenn er die Grenzen des Elements überschreitet.
overflow: scroll; Inhalt wird abgeschnitten, wenn er die Grenzen des Elements überschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie bei einem eingebetteten Frame-Fenster.
overflow: auto; Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.
Sichtbarkeit: visibility: hidden; nicht angezeigt
visibility: visible; Normaleinstellung
Aufzählung: list-style-type: none; keine Aufzählungszeichen bei li - weitere: circle, square, disc, decimal, ...

Floating und Layout

float: <img src="a.gif" style="float: right;"> Dieser Text steht links. Das Bild wird rechts angezeigt
float: left; Element steht links und wird rechts davon von nachfolgenden Elementen umflossen.
float: none; Kein Umfluss (Normaleinstellung)
clear: <img src="a.gif" style="float: right;">
<p style="clear: right;"> </p>

<div style="float: left;">123 </div>
<div style="clear: both; width: 0; height: 0; font-size: 0; line-height: 0;"'></div>

clear: left; Beendet einen Umfluß mit float:left.
clear: both; Beendet den Umfluß um beide Seiten.

Die Angabe clear beendet das Umfließen andere Elemente. Ein mit clear formatiertes Element ist das Erste, dass nicht mehr neben anderen Elementen steht. Es kann aber trotzdem mit der float-Eigenschaft formatiert werden, damit nachfolgende Elemente um dieses Element wieder herum fließen.
Floats einschließen mit overflow:hidden: <div style="overflow:hidden;">
<img style="float: left;" >
<p>Overflow schliesst Elemente ein.</p>
</div>
Flexibles Layout: #wrapper {
width: 80%; 80% des Browserfensters;
min-width: 620px; kleiner wirds nicht; max und min nicht ie6 > sternchenhack
max-width: 72px; an Schriftgröße gekoppelt, bei Schriftgröße 13: 13 * 72, also wrapper nicht breiter als 976 Pixel
min-height: 300px; für kurze Texte
}

width: auto; nimmt allen Bereich der zur Verfügung steht, innerhalb der Grenzen, anstatt 80%, kleine Bildschirme können dann auch besser darstellen.

Reset und Grundeinstellungen

Reset: * { padding:0; margin: 0; } Reset: einheitliche Ausgangswerte, damit Browserunterschiede verschwinden

body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea { padding: 0; margin: 0; }
Restaurierung der Abstände: h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl { margin-bottom: 1em; } nach Reset neu definieren
li { margin-left: 1em; }

blockquote { margin: 1em 2em; } Zitate einrücken
ul, ol, dl { margin-left: 1em; } Alle Listen wieder einrücken
li { margin-left: 2em; } Listenelemente etwas mehr einrücken
dd {margin-left: 2em; } Definitionen in Definitionslisten noch mehr einrücken
ul ul, ul ol, ul dl, ol ul, ol ol, ol dl, dl ul, dl ol, dl dl { margin-top: 0; margin-bottom: 0; } Verschachtelte Listen ohne Außenabstand oben/unten
ul { list-style-type: square; } Aufzählungszeichen
ol { list-style-type: decimal; } Aufzählungszeichen
ul ul { list-style-type: disc; }
ol ol { list-style-type: lower-alpha; }
ul ol { list-style-type: decimal; }
ol ul { list-style-type: square; }
table { border-collapse: collapse; border-spacing: 0; } Tabellen
td { vertical-align: top; }
fieldset, a img { border: none; } Formulare und verlinkte Bilder ohne Rahmen
Scrollbalken: html { overflow-y: scroll; } für alle Bereiche Scrollleiste
Formatierung für gut lesbaren Text: body {
font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: small;
   width: 50em; damit nicht zu lange Zeilen
   padding: 10px;
   margin: 0 auto;
}

p { line-height: 1.5; margin: 1em 0; }

Standard Schriftgröße für lange Texte
Schwarz auf weiß
Zeilenhöhe mindest 140%
Beispiel für Druckversion: <link href="druckversion.css" rel="stylesheet" media="print">

body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 11pt; }
h1, h2 { font-family: Verdana, Arial, Helvetica, sans-serif; }
h2 { font-size: 16pt; padding-top: 6pt; border-top: 1pt solid #d90000; margin-top: 12pt; }
#navibereich { display: none; }
Blockelemente zentrieren: div#wrapper { width: 720px; margin: 10px auto; margin-top: 10px; margin-right: auto; margin-bottom: 20px; margin-left:auto; padding: 10px 20px 0 10px; }

CSS3

Progressive Enhancement: Weseiten müssen nicht in jedem Brower gleich aussehen. Ältere Browser zeigen einfachere Versionen an.
Präfixe der Brower, Firefox z.B. -moz-, dies um Lösung für bestimmte Browser anzubieten
Abgerundete Ecken: border-radius: 10px; www.border-radius.com Radius Generator -- mit background: none durchsichtiger Hintergrund des div
border-radius: 5px 50px 5px 50px; 50 ist stärker abgerundet
border-top-left-radius: 10px;
Boxschatten: box-shadow: 4px 4px 10px #888; horizontal, vertical, blur, farbe -- Schatten unten rechts, 10 px ist unschärfe
box-shadow: -4px -4px 10px #888; Schatten oben links
Bild mit Schatten und runden Ecken: <img src="" style="box-shadow: 4px 4px 10px #888; border-radius: 10px;">
Text Schatten: text-shadow: 1px 1px 2px #999; nicht ie
text-shadow: 0px 0px 1px #555;
Farbverlauf: erzeugt Farbverlauf

background: rgb(228,245,252); Old browsers
background: -moz-linear-gradient(left, rgba(228,245,252,1) 0%, rgba(42,176,237,1) 100%); FF3.6+
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(228,245,252,1)), color-stop(100%,rgba(42,176,237,1))); Chrome,Safari4+
background: -webkit-linear-gradient(left, rgba(228,245,252,1) 0%,rgba(42,176,237,1) 100%); Chrome10+,Safari5.1+
background: -o-linear-gradient(left, rgba(228,245,252,1) 0%,rgba(42,176,237,1) 100%); Opera 11.10+
background: -ms-linear-gradient(left, rgba(228,245,252,1) 0%,rgba(42,176,237,1) 100%); IE10+
background: linear-gradient(to right, rgba(228,245,252,1) 0%,rgba(42,176,237,1) 100%); W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=1 ); IE6-9
Tranzparenz: <div style="opacity: 0.7;">opacity<br>transparent</div> Deckkraft mit Werten zwischen 0 und 1, z.B. div überhalb eines Bildes
<div style="background: rgba (192,192,192, 0.7);">rgba<br>Schrift ist nicht transparent</div> Tranzparenz gilt nur für Hintergrund
Transform: dif { transform: translate(100px, 50px) rotate(10deg) scale(1);
-moz-transform: translate(100px, 50px) rotate(10deg) scale(1); Webfix mozilla
-webkit-transform: translate(100px, 50px) rotate(10deg) scale(1); Webfix chrome
width: 200px; height: 200px; background: red; } versetzt, gedreht, verkleinert
Farblicherübergang mit Zeitverzögerung: #uebergang { transition-property: background-color; transition-duration: .5s;
-moz-transition-property: background-color; -moz-transition-duration: .5s;
-webkit-transition-property: background-color; -webkit-transition-duration: .5s;}
#uebergang:hover { background-color: blue; }
Mehrfachhintergründe: div { width: 600px; padding: 5px 50px;
background-image: url(error-icon.png), url(comment-icon.png), url(orange_bg.jpg);
background-position: top left, top right, top left;
background-repeat: no-repeat, no-repeat, no-repeat; } erstes ist im Fordergrund, ohne Tranzparenz verdeckt