[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis · Links formatieren & Pseudoklassen/Elemente CSS 3 Download Schlusswort Vorwort CSS (oder lang: "Cascading Style Sheets") geben deiner (HTML

09.07.13 [Guide] CSS (3) | Webentwicklung und Programmierung

forum.pokefans.net/post984502.html#p984502 1/16

[Guide] CSS (+ CSS 3!)

Inhaltsverzeichnis

Vorwort

CSS in HTML einbinden

HTML mit CSS ansprechen

Farben

Jetzt geht es los: Normales Stylen

Boxen (DIVs) mit dem Boxmodel

Fliessende Boxen

Links formatieren & Pseudoklassen/Elemente

CSS 3

Download

Schlusswort

Vorwort

CSS (oder lang: "Cascading Style Sheets") geben deiner (HTML-‐‑)Website ein Design. Mit CSS

kannst du den Webseiten-‐‑Hintergrund ändern, Tabellen eine andere Farbe geben oder Links

anders Färben. Dieser Guide gibt dir einen Einblick was du mit dem modernen CSS 3 alles

machen kannst.

Unter dem Link "ansehen" kannst du dir immer den vollständigen Code ansehen.

Um CSS nutzen zu können, solltest du aber die Grundlagen zu HTML kennen. Dazu helfen dir

die folgenden 2 Pokefans-‐‑Guides:

Guide Autor

[Guide] HTML LukeSkywalker

[Guide] HTML lernen leicht gemacht RPGMKXP

CSS in HTML einbinden

CSS formatiert deine HTML-‐‑Seite. Dies bedeutet, dass alle CSS-‐‑Befehle mit dem HTML-‐‑

Dokument verbunden sein müssen. Dazu gibt es 3 Methoden:

In der HTML-‐‑Seite direkt einbindenDiese Methode verwenden wir in diesem Tutorial, da sie erstens nur eine Datei braucht und

zweitens relativ übersichtlich ist. Für grössere Projekte sollte man aber Methode 2 nutzen.

Code:

<!DOCTYPE html><html lang="de"> <head> <style type="text/css">  </style>



</head> <body> <h1>CSS GUIDE</h1> </body></html>

Als einzelne DateiDu kannst den CSS-‐‑Code auch in einer separaten Datei schreiben, und dann in dem HTML-‐‑

Dokument verlinken. Die CSS-‐‑Datei hat die Endung (wer hätte es erwartet:) .css. Diese Methode

nutzt man für grössere Projekte, vor allem wenn das Stylesheet in mehreren Dateien gebraucht

wird.

In HTML wird sie folgendermassen verlinkt:

Code:

<link href="design.css" type="text/css" rel="stylesheet">

Direkt im HTML-‐‑TagDiese Methode nutzt man, wenn der Style nur bei einem bestimmten Tag gebraucht wird. Diese

Methode ist aber schnell unübersichtlich:

Code:

<h1 style="HIER DER STYLE">Überschrift</h1>

HTML mit CSS ansprechen

In CSS können wir auswählen was bearbeitet wird, das ist der Selektor. Der Selektor kann ein

bestimmter Tag (z.B. <h1> oder <b>), eine id (<b id='titel'>) oder eine Klasse (<b

class='menu'>) sein. Ich zeige euch wie ihr das umsetzt (mit color wird jeweils die Textfarbe

geändert).

<b> Tag (Selektor) bearbeiten

Will man jeden Tag bearbeiten, schreibt man einfach den Text zwischen den zwei Spitzen

klammern auf. Hier ist das Beispiel mit <b>.

Code:

<!DOCTYPE html><html lang="de"> <head> <style type="text/css">  </style> </head>



<body> <b>Das wird bearbeitet</b> <b class='klasse'>Das auch (ist ja ein b Tag)</b><b id='id'>das auch</b> </body></html>

ansehen

<b id='gruen'> IDs bearbeitenWenn man sich auf IDs beziehen will kommt zuerst eine Raute (#) und danach der Name der ID(hier "gruen").

Code:

<!DOCTYPE html><html lang="de"> <head> <style type="text/css">  </style> </head> <body> <b>Hier wird nichts geändert</b> <b class='klasse'>Hier wird nichtsgeändert</b> <b id='gruen'>das wird geändert</b> <h1 id='gruen'>das auch</h1> <bid='blau'>das wird nicht geändert</b> </body></html>

ansehen

<b class='gruen'> Klassen bearbeiten.Der unterschied zwischen Klassen und IDs ist, das jede ID normalerweise nur einmalvorkommt. Klassen werden mit einem Punkt eingeleitet worauf der Name folgt.

Code:

<!DOCTYPE html><html lang="de"> <head> <style type="text/css">  </style> </head> <body>



<b>Hier wird nichts geändert</b> <b class='gruen'>Hier wird etwas

geändert</b> <b id='gruen'>das wird nicht geändert</b><h1 class='gruen'>das wird

geändert</h1><b class='blau'>das wird nicht geändert</b>

</body>

</html>

ansehenFarben

Man kann in CSS viele verschiedene Farbcodes verwenden. Die drei beliebtesten zeige ich euchhier:Englische Farben

Man kann in CSS einfache englische Farbnamen geben wie blue, red, lightblue, black, green,grey, white.

HEX-‐‑Farbencodes

Sehr beliebt sind HEX-‐‑Farbencodes. Diese kann man mit einem Color Picker generieren lassen.In CSS kennzeichnet man sie mit einer Raute (#).

RGB-‐‑Farben

Man kann auch RGB Farbencodes benutzen.

Beispiel für alle drei Möglichkeiten (immer mit einem reinen Blau):

Code:

background-color: blue;

background-color: #0000FF;

background-color: rgb(0,0,255);

Jetzt geht es los: Normales Stylen

Man designt mit CSS mit verschiedenen Befehlen, welche immer zwischen den beidengeschweiften Klammern stehen ( "" und "" ). Die Befehle haben immer dasselbe Schema:

Code:

Selektor

Eigenschaft: Wert;

Die Anweisung kann eine Grösse/Breite sein (Pixel) oder eine Farbe (siehe Oben) oder einAussehen (z. B. italic für kursiv).Ich liste hier mal die oft genutzten Befehle auf:

Eigenschaft Mögliche Werte Beschreibung

color: [Anweisung];; FarbenTextfarbe zwischen den

Tags

background-color: [Anweisung];; Farben Hintergrundfarbe

font-size: [Anweisung];; Grösse in em/pt/cm/mm Schriftgrösse



font-family: [Anweisung];; Arial, Times New Roman, ... Schriftart

font-weight: [Anweisung];; normal, bold, bolder, lighter Schriftbreite

font-style: [Anweisung];; normal, oblique, italic Schriftdesign

text-align: [Anweisung];; center, left, right Text-Ausrichtung

background-image:

url([PFAD_ZUM_BILD]);;-- Hintergrundbild

border-width: [Anweisung];; Grösse (px) Rahmenbreite

border-color: [Anweisung];; Farben Rahmenfarbe

border-style: [Anweisung];;none, dotted, dashed, solid, double, groove,

ridge, inset, outsetArt des Rahmens

border-radius: [Anweisung];; Radius (px)Rahmen mit

abgerundeten Ecken

border: [Dicke] [Art] [Farbe];;Erst Rahmenbreite, dann die Art und am Schluss

die FarbeRahmen

Boxen (DIVs) mit dem BoxmodelGrundsätzlichesFür Templates werden statt Tabellen meist Boxen genutzt. Auf diese kann man fast alle obengenannten Anweisungen nutzten, und man kann sie sehr gut Stylen.Fangen wir mit dem Grundgerüst an:

Code:

<!DOCTYPE html>

<html lang="de">

<head>

<style type="text/css">



</style>

</head>

<body>

<div class='box'>Unser Text</div>

</body>

</html>

ansehen

Wenn man sich das im Browser anschaut, gibt es nichts spannendes zu sehen. Doch mit zweineuen Befehlen und einem alten lässt sich das ändern.



Code:

... <style type="text/css">  </style>...

ansehen

Mit width und height geben wir der Box eine variable (prozentuale) Breite und eine feste Höhe.Mit der Hintergrundfarbe lassen wir sie zusätzlich sichtbar werden. Wenn man sich dasResultat nun anschaut sieht man, dass der Text ganz am Rand liegt. Dieses ändern wir indemwir den Innenabstand ändern.

Padding -‐‑ Der InnenabstandDer Befehl dazu lautet: padding. Wir wollen aber nur den Abstand von Links und von Obenändern, dazu nutzen wir padding-‐‑top und padding-‐‑left.Achtung: Wenn du das padding erhöhst, wird das DIV automatisch grösser auch wenn du einefeste Breite hast (Trotz width: 400px; ist es dann eventuell 500px Breit).Der Innenabstand nützt extrem viel. Hier der Vergleich zwischen padding: 0px; und padding: 100px;

Eigenschaft Mögliche Anweisungen Beschreibung

padding[-left/-right/-top/-bottom]:

[Anweisung];;Grösse in px

Der Aussenabstand von der

gewünschten Richtung

padding: [oben] [rechts] [links]

[unten];;

Innenabstand von allen

Richtung (px)

Innenabstand von allen Richtungen

(platzsparend)

Code:

... <style type="text/css">  </style>...



ansehen

Dies sieht schon um längen besser aus. Allerdings ist die Box noch ganz am Rand, dies ändern

wir mit dem Aussenabstand.

Margin -‐‑ Der AussenabstandDer Befehl lautet hierzu margin(-‐‑left/-‐‑right/-‐‑top/-‐‑bottom).

Hier gibt es den unterschied zwischen 10 und 100px Aussenabstand (links und oben).

Eigenschaft Mögliche Anweisungen Beschreibung

margin[-left/-right/-top/-bottom]:

[Anweisung];;Grösse in px

Der Aussenabstand von der

gewünschten Richtung

margin: [oben] [rechts] [links]

[unten];;

Aussenabstand von allen

Richtung (px)

Aussenabstand von allen Richtungen

(platzsparend)

Code:

... <style type="text/css">  </style>...

ansehen

Zum Schluss von diesem Kapitel gibt es noch einen "Trick" um eine Box zu zentrieren. Bei

margin gibt es die Regel, dass bei der Anweisung "auto" die beiden Seiten gleich sein müssen.

Man zentriert die Box also so:

Code:

... <style type="text/css">  </style>...

ansehen

Bild des Boxmodels und ein Beispiel-‐‑DIV

Das Modell sieht so aus (ausgehen vom hellblauen Kasten der ein DIV darstellt).

Natürlich kann man das Div noch viel weiter ausbauen mit den Anweisungen von "NormalesStylen". Wie das ausschauen könnte seht ihr hier:

Code:

... <style type="text/css"> 

</style>

...

ansehen

Fliessende BoxenFür ein Menü wünscht man sich schnell, dass man zwei DIVs nebeneinander setzen kann.Damit dies funktioniert, muss man den Befehl float nutzen.

BefehlMögliche

AnweisungenBeschreibung

float:

[Anweisung];;left/right

Wird meistens für DIVs genutzt. Lässt es in die angegebene

Richtung fliessen

Am besten versteht man es mit einem Beispiel:

Code:

<!DOCTYPE html>

<html lang="de">

<head>


 </style> </head> <body> <div class='website'> <div class='box_links'>Menu</div> <div class='box_rechts'>Inhalt</div> <br style='clear: both;'> </div> </body></html>

ansehen/Bild

Zuerst wird ein Container mit der festen Grösse von 700px erstellt in dem der ganze Inhalt ist.

Ich habe ihm die Klasse "website" gegeben. Zusätzlich gibt es zwei Boxen. Die Linke Box hat

200px die Rechte dann 700px-‐‑200px-‐‑10px (Aussenabstand)-‐‑10px

(Innenabstand)-‐‑2px(Rahmen)-‐‑10px (Aussenabstand der anderen Box)-‐‑10px (Innenabstand der

anderen Box)-‐‑2px(Rahmen der anderen Box) = 458. Das <br style='clear: both'> sorgt dafür,

dass das fliessen beendet wird und somit das DIV mit der Klasse Website die richtige Höhe hat.

Links formatieren & Pseudoklassen/ElementeIn CSS lassen sich auch Links formatieren. Dazu nutzt man Pseudoklassen und -‐‑Elemente.

Dabei kann man einen besuchten Link (:visited), einen Link wo gerade drauf geklickt wird

(:active), einen normalen Link (:link) und einen Link wo die Maus drüber ist Formatieren

(:hover). Eine weitere Pseudoklasse ist :focus. Sie wird oft bei Textfeldern verwendet und wird

aktiviert sobald das Textfeld fokusiert wird (also man etwas reinschreiben kann).

Der CSS-‐‑Teil könnte also so sein.

Code:

a:link /* Link wenn er einfach irgendwo steht */ color:#3279F2; text-decoration:none;a:visited /* einen besuchten Link */ font-weight:bold; color:#448699; text-decoration:none; a:hover /* Link wo man rüber fährt */ font-weight:bold; color: #000000; text-decoration:none; a:active /* Link wenn man draufdrückt */ color: #120E3F;



text-decoration:underline; #text:focus /* Beispiel für ein Fokusiertes Textfeld */ background-color: #F0F0F0;

Beispiel anzeigen

CSS 3Mit CSS 3 kommen einige nützliche Funktionen dazu. Einige möchte ich auch in diesem Guide

zeigen. Allerdings gibt es zwei Dinge zu beachten:

1. Nicht alle Browser unterstützen die Neuerungen (der Internet Explorer v. a. Version 6/7

unterstütz kaum welche)

2. Für einige Funktionen/Eigenschaften wird ein Browser Präfix benötigt. Dazu kommen wir

jetzt gleich:

FarbverläufeEine Neuerung mit CSS3 sind Farbverläufe. Da Farbverläufe schwer zu erstellen sind, nützt es

wenn man sich dieses Tool als Hilfe nimmt. Erstellt man dort einen Farbverlauf, kann man den

CSS-‐‑Code dazu ganz einfach kopieren. Der Code ist bei dem oberen Bild blau markiert.

Achtung: Es gibt auf der Seite einen Farbverlauf-‐‑Generator für Firefox und einen für

Safari/Chrome. Du solltest für beide Browser einen machen! Die Vorschau auf der Webseite

funktioniert allerdings nur wenn du den passenden Browser nimmst.

Firefox:

Safari:

Nachdem du einen Farbverlauf erstellt hast, kannst du ihn so als Hintergrundfarbe einstellen.

Allerdings solltest du für die nicht-‐‑unterstützen Browser eine Hintergrundfarbe einstellen.

Diese wird überschrieben sollte der Browser einen Farbverlauf unterstützen (dafür muss die

background-‐‑color Anweisung aber vor dem Farbverlauf kommen).

Alternativ kannst du dir den kompletten Code auch hier generieren lassen: klick.

Code:

body background-color: orange; background: -moz-linear-gradient(19% 75% 90deg,#AB0000, #C9BA2E); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000),to(#FFDD03));

Falls du dich fragst was das -‐‑moz-‐‑ und das -‐‑webkit-‐‑ bedeuten, kannst du gleich weiter lesen.

Browser Präfixe



Viele Browser implementieren die Neuerungen als "private Eigenschaften". Bei diesen muss ein

Browser Präfix her. Hier sind die Präfixe:

Präfix Browser

-moz- Firefox

-ms-, mso- Internet Explorer

-khtml- Konqueror

-o- Opera

-webkit- Chrome, Safari

Transparents und RGBAEs gibt in CSS mindestens zwei Möglichkeiten etwas Transparent zu machen.

Mit RGBA:

In CSS kann man Farben auch mit RGB anzeigen lassen. Mit CSS 3 kam auch RGBA dazu, RGBA

steht für Rot Grün Blau Alpha(-‐‑Kanal), also die Transparenz. Dabei ist die erste Zahl der

Rotwert die zweite der Grünwert und die dritte der Rotwert alle von 0-‐‑255). Die vierte Zahl ist

die Transparenz 0 ist unsichtbar und 1 ist ganz sichtbar.

Dies ist ein Beispiel (anzeigen):

Code:

.box background-color: rgba(255, 200, 120, 0.75);; width: 80%; height: 250px; padding-left: 10px; padding-top: 100px; position: absolute; left: 20px; transition: all 3s ease-in;

Transparenz mit der opacity AnweisungDies ist die zweite Methode. Man fügt einfach die Anweisung opacity ein. 1 ist wieder komplett

sichtbar und 0 ist unsichtbar.

Code:

.box background-color: green; opacity: 0.5; width: 80%; height: 250px; padding-left: 10px; padding-top: 100px; position: absolute;



left: 20px; transition: all 3s ease-in;

anzeigen/Bild

AnimationenBevor du beginnst: Der freundliche Internet Explorer mit Version 9 oder tiefer unterstützt dieseAnimationen nicht.

KeyframesIn CSS definiert man die Animationen bei den Keyframes (Ich empfehle diese am Anfang desCSS Teils/Stylesheets einzufügen). Wir beginnen mit einer Animation welche ein DIV langsamerscheinen lässt (Es braucht immer noch ein Extra-‐‑Keyframe für Webkit Browser).

Code:

@keyframes erste_animation 0% opacity: 0; 100% opacity: 1;

@-webkit-keyframes erste_animation /* Safari und Chrome */ 0% opacity: 0; 100% opacity: 1;

Nun haben wir eine Animation. Ganz am Anfang (bei 0%) ist das DIV (oder jeder andereSelektor wo das angewendet wird) unsichtbar. Bei 100% ist es dann sichtbar. Man kann beliebigviele Schritte einfügen!Die Animation wurde nun erstellt, nun muss man sie aber noch irgendwo nutzen.

Animation nutzenWie geschrieben nutzen wir das obere Beispiel für ein DIV. Dies Funktioniert sehr einfach:

Code:

div animation: erste_animation 5s; /* 5s dauert die Animation -webkit-animation: erste_animation 5s; /* Safari und Chrome */ /* zusätzliches welches nicht für die Animation ist kommt jetzt: */ margin: 50px 0 0 50px; padding: 50px; background-color: blue; border: 1px solid black;

ansehen



Natürlich kann man die Animation immer wiederholen lassen, und das Objekt bewegen. Es istauch möglich die Hintergrundfarbe zu ändern. Lassen wir die Animation von oben doch immersichtbar und wieder unsichtbar werden. Das alternate am Ende der Animation bewirkt, dass dieAnimation die Richtung wechselt (rückwärts läuft), sobald sie wiederholt wird.

Code:

animation: erste_animation 5s linear 2s infinite alternate;

-webkit-animation: erste_animation 5s linear 2s infinite alternate;

ansehen

Zum Schluss gibt es noch ein Beispiel wo das Objekt bewegt und die Hintergrundfarbeverändert wird. Zu beachten ist, dass das DIV position: fixed hat. Denn dann kann man mit"left/right/top/bottom" den Abstand zum Rand ändern.

ansehen

Andere Animationen: TransitionsEs gibt noch eine andere Möglichkeit für Animationen. Mit dieser Möglichkeit kannst du ganzeinfach Animationen erstellen, welche z.B. bei einem Hover-‐‑Effekt animiert werden.Dazu schreibst du alle Anweisungen welche animiert werden sollen, mit der jeweiligenZeitangabe durch ein Komma (",") getrennt auf. Dieser Teil kommt in das normale DIV, nachder Anweisung "transition" bzw. für Chrome und Safari -‐‑webkit-‐‑transition. Anschliessendkannst du auswählen wo der Effekt kommt, mit den jeweiligen Pseudoklassen.Am besten versteht man es mit einem Beispiel (nur der CSS-‐‑Teil).

Code:

div

width: 100px;

height: 50px;

-webkit-transition: width 1s, height 2s;

transition: width 1s, height 2s;

div:hover /* Während man darüber fährt */

width: 200px;

height: 300px;

Code:

<!DOCTYPE html>

<html lang="de">

<head>


<!--

div

animation: zweite_animation 3s linear 2s infinite alternate;

-webkit-animation: zweite_animation 3s linear 2s infinite alternate;

position: fixed;

/* zusätzliches welches nicht für die Animation ist kommt jetzt: */

margin: 50px 0 0 50px;

padding: 50px;

width: 50px;



div:active /* Während man drauf klickt */ width: 300px; height: 200px;

Beispiel ansehen

Diese Animationen haben noch einige weitere Funktionen. Zwei werde ich euch in diesemBeispiel noch zeigen. Man kann der Anweisung nämlich noch zwei weitere Parameter geben:

Code:

Selektor transition: [ANWEISUNG] [METHODE] [VERZÖGERUNG];

ANWEISUNG ist einfach die Anweisung welche Animiert sein soll. In diesem Beispiel "width". DieVerzögerung ist wahrscheinlich klar. Man kann in Sekunden angeben um wie viel die Animationverzögert sein soll (Standard: 0). Bei der METHODE kann man angeben wie die Animationverlaufen soll beim Standard (ease) werden alle Animationen gleichzeitig ausgeführt. Man kannallerdings auch linear nutzen, so werden die Animationen nacheinander abgespielt. Auch dazugibt es ein Beispiel:

Code:

div width: 100px; height: 50px; -webkit-transition: width 1s linear 3s; transition: width 1s linear 3s;div:hover /* Während man darüber fährt */ width: 200px;

Beispiel ansehen

Border-‐‑RadiusOben wurde er bereits erwähnt, trotzdem hat es der border-‐‑radius verdient im CSS3 Teil nocheinmal erwähnt zu werden. Bei allen aktuellen Browser wird kein Browser-‐‑Präfix benötigt.Anwenden kann man den Border-‐‑Radius ganz einfach:

Code:

div border:2px solid; border-radius:20px;



Ansehen/BildMit "border-‐‑top-‐‑left-‐‑radius" oder "border-‐‑bottom-‐‑right-‐‑radius" kann man auch jede Eckeeinzeln bearbeiten.

Box-‐‑ und Text-‐‑Schatten (shadow)In CSS 3 ist es auch möglich sowohl Text als auch Boxen (DIVs) einen Schatten zu verpassen.Der Syntax dieses Befehls lautet:

Code:

Für Boxen/Divs: box-shadow: h-shadow v-shadow blur spread color inset;Für Text: text-shadow: h-shadow v-shadow blur color;

Dabei ist h-‐‑shadow der Horizontale Abstand des Schattens zum Objekt (DIV bzw. Text). V-‐‑shadow ist der Vertikale Abstand zum Objekt, sowohl beim vertikalen Abstand als auch beimhorizontalen Abstand sind negative Zahlen möglich. "blur" ist die länge wie es unschärfer bzw.undeutlicher wird. "Color" ist die Farbe des Schattens, diese Angabe ist optional. Inset ist nurbei Boxen möglich und macht, dass der Schatten innen ist (Bild). Dieser Parameter ist nur beiBoxen möglich. Beispiel:

Code:

div width: 100px; height: 50px; border-radius: 20px; border: 2px solid; box-shadow:10px 10px 50px 20px #C44F44;

ansehen/Bild

SchlusswortDieser Guide wurde von KingDDD geschrieben. Er darf nicht kopiert aber natürlich verlinktwerden.

DerSpieler hat geschrieben:

Afaik benötigt man für einen Guide auch eigentlich keine Erlaubnis (es schadet abernatürlich auch nicht XD). Damit du etwas zum zitieren hast:Die Erlaubnis sei dir erteilt!

Danke an W3Schools für einige Hilfen

Documents

[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis · Links formatieren & Pseudoklassen/Elemente CSS 3 Download Schlusswort Vorwort CSS (oder lang: "Cascading Style Sheets") geben deiner (HTML