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-Elemente vorgibt. |
Drei Nutzungsarten: Inline, Internal, External |
- Inline: CSS innerhalb der HTML-Befehle Bsp.: <p style="color:blue;">jimbo</p>
|
- Internal: CSS in innerhalb <head> Sektion: Bsp.: <head><style></style></head>
|
- External: externe .css Datei |
External CSS
Externe .css Datei erstellen |
HTML-Datei mit CSS verbinden: <head><link rel="stylesheet" type="text/css" href="Dateiname.css"></head>
|
CSS-Befehle in .css Datei schreiben |
Textformatierung
|
|
| |
|
| |
|
| |
|
| |
|
overline;
Strich über Text |
| |
line-through;
durchstreichen |
| |
underline;
unterstreichen |
| |
none;
um Unterstriche zu entfernen bei Hyperlinks z.B. |
CSS-Schriftarten
font-family:"Fontname";
Schriftarten verfügbar auf W3Schools |
Google bietet ebenfalls eine große Auswahl an Schriftarten an, kann jedoch die Aktivität von Besuchern der Seite einsehen. |
auf https://fonts.google.com/ eine Schriftart aussuchen, bearbeiten und kopieren. Solange man die Schritte der Webseite befolgt, läuft alles problemlos |
|
|
Klassen
mit einem ."name" kann man mit CSS eine Klasse erstellen, die mehreren HTML-Elementen zugewiesen werden kann. |
Sie kann mehreren Elementen, die gleiche Formatierung und das gleiche Design geben. |
Bsp.: <style> .citybox {color:white; padding: 20px;}</style> <div class="citybox">JohnCena</div>
|
CSS-Hintergrund
Befehl |
Effekt |
background-color: Yellow;
|
Hintergrundfarbe |
background-image: url("example.png");
|
Hintergrundbild |
background-repeat: x-repeat;
|
Bild wiederholt in bestimmte Richtung anzeigen |
<div> Tag
Definiert Abschnitt einer HTML File |
Wird als Container für HTML-Elemente und für JavaScript Aufgaben verwendet |
HTML-Element IDs
Einem Element kann eine ID hinzugefügt werden, um ihr einen speziellen Stil für ein bestimmtes Element zu geben. |
Bsp.: <style> #different01 {color:green}</style> <p id="different01">mynamejeff<p>
|
CSS-Tables
Darstellung der Rahmen mit und ohne border-collapse möglich. |
getrennte Darstellung: border-collapse:separate;
|
zusammenfallende Darstellung: border-collapse:collapse;
|
|
Collapsed und separate Tables
CSS-Listen
|
|
| |
|
| |
|
| |
|
|
|
|
inside;
positioniert die Aufzählungspunkte innerhalb der Liste |
| |
outside;
positioniert Punkte außerhalb |
|
