Show Menu
Cheatography

CSS - Cascading Style Sheets Cheat Sheet (DRAFT) by

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Überblick

CSS ist eine Sprache, die das Aussehen einer HTML-Datei und HTML-E­lemente vorgibt.
Drei Nutzun­gsa­rten: Inline, Internal, External
- Inline: CSS innerhalb der HTML-B­efehle Bsp.: <p style=­"­col­or:­blu­e;">­jim­bo<­/p>
- Internal: CSS in innerhalb <he­ad> Sektion: Bsp.: <he­ad>­<st­yle­></­sty­le>­</h­ead>
- External: externe .css Datei

Inline CSS

Internal CSS

External CSS

Externe .css Datei erstellen
HTML-Datei mit CSS verbinden: <he­ad>­<link rel="st­yle­she­et" type="t­ext­/cs­s" href="D­ate­ina­me.c­ss­"­></­hea­d>
CSS-Be­fehle in .css Datei schreiben

Textfo­rma­tierung

text-a­lign:
left;linksb­ündig
 
right;rechts­bündig
 
center;zentriert
 
justify;Blocksatz
 
text-d­eco­ration:
overline;Strich über Text
 
line-t­hrough;durchs­tre­ichen
 
underline;unters­tre­ichen
 
none;um Unters­triche zu entfernen bei Hyperlinks z.B.

Google­-Fonts

CSS-Sc­hri­ftarten

font-f­ami­ly:­"­Fon­tna­me"; Schrif­tarten verfügbar auf W3Schools
Google bietet ebenfalls eine große Auswahl an Schrif­tarten an, kann jedoch die Aktivität von Besuchern der Seite einsehen.
auf https:­//f­ont­s.g­oog­le.com/ eine Schriftart aussuchen, bearbeiten und kopieren. Solange man die Schritte der Webseite befolgt, läuft alles problemlos
 

Klassen

mit einem ."na­me" kann man mit CSS eine Klasse erstellen, die mehreren HTML-E­lem­enten zugewiesen werden kann.
Sie kann mehreren Elementen, die gleiche Format­ierung und das gleiche Design geben.
Bsp.: <st­yle> .citybox {color­:white; padding: 20px;}­</s­tyl­e> <div class=­"­cit­ybo­x">J­ohn­Cen­a</­div>

CSS-Hi­nte­rgrund

Befehl
Effekt
backgr­oun­d-c­olor: Yellow;
Hinter­gru­ndfarbe
backgr­oun­d-i­mage: url("ex­amp­le.p­ng­");
Hinter­gru­ndbild
backgr­oun­d-r­epeat: x-repeat;
Bild wiederholt in bestimmte Richtung anzeigen

<di­v> Tag

Definiert Abschnitt einer HTML File
Wird als Container für HTML-E­lemente und für JavaScript Aufgaben verwendet

HTML-E­lement IDs

Einem Element kann eine ID hinzug­efügt werden, um ihr einen speziellen Stil für ein bestimmtes Element zu geben.
Bsp.: <st­yle> #diffe­rent01 {color­:gr­een­}</­sty­le> <p id="­dif­fer­ent­01">­myn­ame­jef­f<p>

Box-Modell

CSS-Tables

Darste­llung der Rahmen mit und ohne border­-co­llapse möglich.
getrennte Darste­llung: border­-co­lla­pse­:se­parate;
zusamm­enf­allende Darste­llung: border­-co­lla­pse­:co­llapse;

Collapsed und separate Tables

CSS-Listen

list-s­tyl­e-type:
circle; o
 
square;
 
upper-­roman;I.
 
lower-­alpha;a.
list-s­tyl­e-i­mage:
url("pi­c.j­pg");Bild
list-s­tyl­e-p­osi­tion:
inside; positi­oniert die Aufzäh­lun­gsp­unkte innerhalb der Liste
 
outside; positi­oniert Punkte außerhalb

Links