splash-art

CSS Tutorials

Photoshop Tutorials

Allgemeine CSS Tutorial Einleitung

Herzlich Willkommen in unserer CSS Tutorialzone. Hier lernst du alles rund um CSS. Die Tutorials sind kurz und knapp aber informativ. Probier die Dinge die dir in den Tutorials gezeigt werden einfach aus. (Learning by Doing) Wenn du viel herumexperimentierst wirst du es schnell drauf haben =) Solltest du ein komplett Anfänger im Bereich CSS sein, so empfehle ich dir hier erstmal ein gewisses Grundwissen anzulgen.
CSS3:
In den nächsten Wochen werdet ihr hier auch jede Menge neue CSS 3 Befehle lernen, bitte gedulded euch damit noch ein wenig. Wir werden uns bemühen fast jeden Tag ein neues Tutorial zu schreiben.
Typselektoren:
In diesen Tutorials fehlen noch die Typselektoren wie (div, p, span, b, i, u, body .. usw) die wir in den nächsten Woche noch nachtragen werden. Hier solltet ihr aber eigentlich nicht all zu lange drauf warten müssen.


Wir, Born und ich (Max der Schreiber der CSS Tutorials, Born macht die GfX Tutorials) wünschen dir viel Spaß beim lesen und lernen.

#id_name | ID's

Containern (HTML Blöcken) kann man soganennate ID's zuordnen. Diese kann man dann anschließend via CSS ansprechen und ihnen bestimmte Befehle geben. Wichtig ist, dass in einer ID keine Sonderzeichen oder Leerzeichen vorkommen dürfen. Außerdem darf am Anfang einer ID keine Zahl stehen.

Das ganze geht generell sehr einfach: <!-- HTML Code, in diesem Beispiel haben wir einem div - Element einer ID zugewiesen. --> <div id="Dein_ID_Name"></div> <!-- In dem Fall trägt das div die ID "Dein_ID_Name". Dieses müsstet ihr dann durch einen beliebigen Namen ersetzen. --> /*Anschließend sprechen wir dieses nun mit CSS an:*/ #Dein_ID_Name { /*Zwischen den Klammern {} kommen anschließend die CSS Befehle*/ }

.class_name | Klassen

Containern (HTML Blöcken) kann man ebenfalls soganennate Klassen zuordnen. Diese kann man dann anschließend via CSS ansprechen und ihnen bestimmte Befehle geben. Wichtig ist, dass in einer Klasse keine Sonderzeichen oder Leerzeichen vorkommen dürfen. Außerdem darf am Anfang einer Klasse keine Zahl stehen.

zur Praxis: <!-- HTML Code, in diesem Beispiel haben wir einem div - Element eine Klasse zugewiesen. --> <div class="Dein_Klassen_Name"></div> <!-- In dem Fall trägt das div die Klasse "Dein_Klassen_Name". Dieses müsstet ihr dann durch einen beliebigen Namen ersetzen. --> /*Anschließend sprechen wir diese Klasse nun mit CSS an:*/ .Dein_Klassen_Name { /*Zwischen den Klammern {} kommen anschließend die CSS Befehle*/ }

CSS Area | CSS Feld

Nur in einem CSS Feld kann man auch CSS schreiben, deswegen muss man erst eine sogenannte CSS Area machen. Dieses wird mit einem CSS Tag gemacht. Im Homepage-Baukasten im Feld "CSS Code ohne Style Tags" musst du jedoch keine CSS Area vorher machen, dieses wird schon automatisch vom Homepage-Baukasten gemacht.

So geht's: <style type="text/css"> /*Hier kann nun CSS verwendet werden*/ </style>

!important | Prioritäten setzen

Der Befehl "!important" kann hinter jeden normalen CSS Befehl vor dem ";" gesetzt werden. Das !important bewirkt schlicht, dass die Eigenschaft die gestzt worden ist die höchste Priorität hat und von keiner anderen überschrieben werden kann.
Da der Internet Explorer "!important" nicht unterstützt / kennt, kann dieses als Hack verwendet werden.

Praxis: /* Als Beispiel geben wir folögendem width - Befehl die !important Eigenschaft. Durch das !important wird das width nicht mehr vom darunterliegenden überschrieben und die Breite bleibt bei 100px. Genauere Erklärungen zum width - Befehl könnt ihr unten nachlesen.*/ width: 100px !important; width: 120px; /*Da es häufig Probleme im Zusammenhang mit dem padding im IE und den anderen Browsern gibt, können wir durch das !important dem Internet - Explorer als einzigsten eine andere Breite geben als den anderen Browsern. Da der IE das !important ignoriert, überschreibt dieser stur die erste width Anweisung. Der Internet - Explorer rechnet das padding nicht zur Breite und Höhe. Daher müssen wir diese auch nicht abziehen. Bei dem Wert der mit !important ausgestattet ist, sind 20px abgezogen da das padding ja links und rechts 10px beträgt. (Weiteres zum padding findet ihr auch hier bei den Tutorials*/ padding: 10px; width: 100px !important; width: 120px;

padding | Innenabstände

Mithilfe vom padding könnt ihr div Containern Innenabstände geben. Dass heißt, das ihr einen Abstand vom Rand eines div Containers bis zum Inhalt innen schafft. So hängen eure Text z.B. nicht genau am Rand, sondern haben etwas Abstand. Wichtig dabei ist, dass das padding in XHTML 1.0 (was wir hier im Baukasten haben) zu der Höhe und Breite hinzugerechnet wird. Wenn ihr also ein Hintergrundbild mit genauen Maßen habt, müsst ihr immer von den Breiten und - Höhen Angaben das padding abziehen.

In der Praxis sieht das dann so aus:
/*Wenn ihr auf allen Seiten das gleiche padding haben wollt*/ padding: 10px; /* Hier entspricht das padding 10px*/ /*Wenn ihr jede Seite selbst bestimmen möchtet*/ padding-top: 10px; /*padding oben*/ padding-bottom: 10px; /*padding unten*/ padding-left: 10px; /*padding links*/ padding-right: 10px; /*padding rechts*/

margin | Außenabstände

Mit "margin" könnt ihr die Außenabstände von z.B. div - Container bestimmen. Dadurch könnt ihr bestimmen wie diese Conatiner zueinander entfernt sind (von oben, von unten, von links und von rechts).

Die Praxis:
/*Wenn ihr alle Abstände aufeinmal festlegen wollt.*/ margin: 50px; /*So beträgt der Abstand in alle Richtungen 50px*/ /*Wenn ihr alle Abstände einzeln festlegen wollt*/ margin-top: 10px; /*Abstand von oben*/ margin-bottom: 10px; /*Abstand von unten*/ margin-left: 10px; /*Abstand von links*/ margin-right: 10px; /*Abstand von rechts*/

color | Farbe

Mithilfe von dem Befehl "color" lässt sich ganz einfach die Schriftfarbe von einem Textblock, Container etc. definieren. Dieses kann man auf 2 verschiedenen Arten machen (Es gibt auch eine 3. aber ich bevorzuge nur diese 2). Die erste Möglichkeit wäre, die farbe einfach auf Englisch zu schreiben. Jedoch kann man damit natürlich nicht viele Farbtöne erreichen. (blue, brown, yellow, red, green, black, white usw.)
Falls ihr aber doch mehr Farbtöne haben möchtet, so geht dieses mit einem Hex-Code. Eine Hex-Code Tabelle findet ihr hier: http://www.html-php-mysql.de/generatoren/colors.php.

Nun aber zur Praxis: /*Farbe durch englische Begriffe festlegen*/ color: blue; /*So wäre die Schriftfarbe Blau festgelegt*/ /*Farbe durch Hex-Code festelgen*/ color: #000000; /*So wäre durch einen Hex - Code die Farbe schwarz festegelegt.(000000)*/

font-family | Schriftart

Mithilfe von dem Befehl "font-family" kannst du die Schriftart in einem Textblock festlegen. Dabei solltest du beachten das du nur die Web - Schriftarten verwendest. Normalerweise gibt man immer 1-2 Schriftartenan und einen Schrifttyp. Im allgemeinen unterscheidet man zwischen 4 Typen: sans-serif,   serif   ,monospace    ,fantasy Nunja der Typ sans-serif bedeutet einfach das keine serifen verwendet werden, und der Typ serif genau das Gegenteil.Was sind Serifen?. Als monspace wird eine Schriftart bezeichnet, wenn jeder Buchstabe die gleiche Größe hat. Fantasy Schriftarten sind einfach Zierschriften.

Praxis: /*Festlegung von einer sans-serifen Schrift*/ font-family: Arial, Tahoma, sans-serif; /*So würde als erstes die Schriftart Arial angezeigt, ist diese nicht vorhanden so kommt Tahoma. Ist diese nun auch nicht vorhanden, so wird allgemein eine sans-serifen Schrift festgelegt.*/ /*Festlgeung von einer serifen Schrift*/ font-family: Times, Georgia, serif; /*Festlegung von einer monospace Schriftart*/ font-family: Courier, Consolas, monospace; /*Festlegung von einer fantasy Schriftart*/ font-family: Vivaldi, Bradley Hand, fantasy;

background-image | Hintergrundbild

Mit dem Befehl "background-image" kann man ein Hintergrund von einem beliebigen Container festlegen. Dieses Bild kann entweder ein Bild sein, dass den ganzen Container ausfüllt, oder eins das sich wiederholen kann. Wie die Wiederholungsart eingestellt wird erfahrt ihr bei dem Tutorial "background-repeat".

Die Praxis: /*Dort wo "http://dein-Bild.tld" steht, musst du einen direkten Link zu einem beliebigen Bild einfügen.*/ background-image: url(http://dein-Bild.tld);

background-color | Hintergrundfarbe

Durch "background-color" kann eine Hintergrundfarbe von einem beliebigen Container festgelegt werden. Die Farbe kann genauso festgelegt werden wie beim color - Befehl. Also einmal mit englischen Begriffen (blue, red, green, yellow, pink, orange usw.), oder mit Hexcodes. Eine Hex-Code Tabelle findest du hier: http://www.html-php-mysql.de/generatoren/colors.php.

Praxis: /*Als erstes wenden wir mal die Art mit den englischen Begriffenan*/ background-color: blue; /*So wäre die Hintergrundfarbe blau*/ /*Als nächstes verwenden wir Hex-Codes:*/ background-color: #000000; /*So wäre die Hintergrundfarbe schwarz (000000)*/

background-repeat | Hintergrundwiederholung

Durch den Befehl "background-repeat" wird festgelegt, wie sich der Hintergrund wiederholt. Er kann sich auf vier verschiedenen Arten wiederholen: von links nach rechts, von oben nach unten, in alle Richtungen und garnicht.

Praxis: /*So wiederholt sich der Hintergrund von links nach rechts. (Also auf der x - Achse, deshalb repeat-x)*/ background-repeat: repeat-x; /*So wiederholt sich der Hintergrund von oben nach unten. (Auf der y - Achse, also repeat-y)*/ background-repeat: repeat-y; /*So wiederholt sich der Hintergrund in alle Richtungen:*/ background-repeat: repeat; /*So wiederholt sich der Hintergrund garnicht:*/ background-repeat: no-repeat;

background-position | Hintergrundposition

Mit der Eigenschaft "background-position" legt ihr die Position vom Hintergrund fest. Man kann einmal die horizontale Hintergrund-Position festlegen, und einmal die vertikale. Bei der Horizontale legt man fest, wie der Hintergrund wagerecht (von links nach rechts) positioniert wird, und bei der Vertikale legt man fest wie der Hintergrund senkrecht positioniert wird(von oben nach unten). Man kann die Positionen bei der Horizontale mit folgenden Begriffen angeben: left, right und center, entsprechend bei der Vertikale: top, bottom und center. Natürlich kann man auch alle Werte Prozentual, oder in Pixeln angeben.

Einige Praxis Beispiele: /*Position: links - oben*/ background-position: left top; /*Position: links und mittig(von oben nach unten)*/ background-position: left center; /*Position: links - unten*/ background-position: left bottom; /*Position: rechts - oben*/ background-position: right top; /*Position: rechts und mittig(von oben nach unten)*/ background-position: right center; /*Position: rechts - unten*/ background-position: right bottom; /*mittig - oben*/ background-position: center top; /*mittig - mittig*/ background-position: center center; /*mittig - unten*/ background-position: center bottom; /*So würde der Hintergrund 100px von links sitzen und 100px von oben.*/ background-position: 100px 100px; /*Und so würde das ganze 20% von links und 20% von oben sitzen*/ background-position: 20% 20%;

width | Breite

Die Eigenschaft "width" kann einem beliebigen Container eine feste Breite zuweisen. Dieses kann entweder in Prozent oder Pixel - Angaben geschehen.

Ihr müsst eigentlich nicht viel beachten, deswegen gleich zur Praxis: /*Als erstes bestimmen wir die Breite durch Prozentangaben. Die Prozentangaben richten sich immer an den Container der über diesem liegt. 100% wäre dann die Länge des gesamten überliegendem Containers usw.*/ width: 50%; /* So würde der Container 50% breit sein */ /*Nun bestimmen wir die Breite in Pixelangaben:*/ width: 500px; /* So würde die Breite 500px betragen*/

height | Höhe

Die Eigenschaft "height" kann einem beliebigen Container eine feste Breite zuweisen. Dieses kann entweder in Prozent oder Pixel - Angaben geschehen.

Ihr müsst eigentlich nicht viel beachten, deswegen gleich zur Praxis: /*Als erstes bestimmen wir die Höhe durch Prozentangaben. Die Prozentangaben richten sich immer an den Container der über diesem liegt. 100% wäre dann die Höhe des gesamten überliegendem Containers usw.*/ height: 50%; /* So würde die Höhe 50% betragen */ /*Nun bestimmen wir die Breite in Pixelangaben:*/ height: 500px; /* So würde die Höhe 500px betragen*/

float | Ausrichtung

border | Kontur

 

Allgemeine CSS Tutorial Einleitung Hier bekommst du eine kleine Einleitung in unsere Tutorial Zone ˄ zur Tutorial Einleitung
#id_name ID's ˄ zum Tutorial	.class_name Klassen ˄ zum Tutorial	CSS Area CSS Feld ˄ zum Tutorial	!important Prioritäten setzen ˄ zum Tutorial
padding Innenabstände ˄ zum Tutorial	margin Außenabstände ˄ zum Tutorial	color Farbe ˄ zum Tutorial	font-family Schriftart ˄ zum Tutorial
background-image Hintergrundbild ˄ zum Tutorial	background-color Hintergrundfarbe ˄ zum Tutorial	background-repeat Hintergrundwiedh. ˄ zum Tutorial	background-pos.. Hintergrundposition ˄ zum Tutorial
width Breite ˄ zum Tutorial	height Höhe ˄ zum Tutorial	float Ausrichtung ˄ zum Tutorial	border Kontur ˄ zum Tutorial