CSS Crashkurs
Teil 1
Basiswissen
- Was ist HTML?
- Wie sieht ein umschließendes HTML Element (tag) aus?
- Welche Eigenschaften hat HTML?
- Nenne ein paar HTML Elemente?
CSS
Cascading Style Sheets
- Cascading: Stufenförmig
Cascade: ein Wasserfall in Form von Stufen - Style Sheets: Formatvorlagen
Style: charakteristisch ausgeprägte Erscheinungsform
CSS Eigenschaften
CSS Regel
Quelle: MDN web docs
Die ganze Struktur wird Regelsatz (oder oft nur »Regel«) genannt.
Selektoren: Teil 1
/* Element Selektor (alle p tags) */
p {
color: red;
}
/* Class Selektor (alle tags mit <x class="my-class">..</x>) */
.my-class {
color: red;
}
/* ID Selektor (das tag mit <x id="my-id">..</x>) */
#my-id {
color: red;
}
/* Pseudo Selektor (Zustand des a tags bei mouse over)*/
a:hover {
color: green;
}
Selektoren: Teil 2
/* alle p tags auswählen */
p {
color: red;
}
/* alle p tags mit der Klasse "alert" */
p.alert {
color: red;
}
/* mehrere tags auswählen */
p,li,h1 {
color: #ff0000;
}
/* nur strong innerhalb von h1 */
h1 strong {
color: rgb(255, 0, 0);
}
/* p tag direkt nach einem h1 tag */
h1 + p {
color: rgba(255, 0, 0, 0);
}
Regeln
/* eine CSS Regel mit einer Deklaration */
p {
color: red; /* Schriftfarbe rot */
}
/* eine CSS Regel mit mehreren Deklarationen */
p {
color: red; /* Schriftfarbe rot */
text-align: center; /* Textausrichtung zentriert */
border: 1px solid black; /* Schwarzer Rahmen um Element */
}
Eigenschaften
denkt englisch, denn es gibt viele
Eigenschaften
Schriftbild
html {
/* Schriftgröße (Größenangabe in: px, em, rem, %) */
font-size: 100%;
}
body {
/* Einbindung mehrerer serifenloser Schriften absteigend nach Priorität */
font-family: Helvetica, Arial, Geneva, sans-serif;
}
h1 {
/* Schriftgröße (Größenangabe in: px, em, rem, %) */
font-size: 4rem;
/* Stil kursiv */
font-style: italic;
/* Dicke und Stärke der Schrift: fett*/
font-weight: bold;
/* Höhe einer Textzeile */
line-height: 1.25;
}
Eigenschaften
Textformatierung
p {
/* Farbe der Schrift */
color: #333;
/* Zeichenabstand */
letter-spacing: .25rem;
/* Wortabstand */
word-spacing: .5rem;
/* Nur Großbuchstaben*/
text-transform: uppercase; /* lowercase, capitalize, none */
/* Text Unterstrichen */
text-decoration: underline; /* overline, line-through, none */
/* Farbe der unterschrichenen Line (nicht des Textes)*/
text-decoration-color: #00ff00;
/* wenn Text abgeschnitten wird, dann "..." anzeigen*/
text-overflow: ellipsis; /* + white-space: nowrap; overflow: hidden; */
/* Schattierung des Textes*/
text-shadow: 5px 5px 5px;
}
Eigenschaften
Listenformatierung
ul {
/* leerer Kreis als Bullet Zeichen */
list-style-type: circle; /* disc, square, none */
/* eigene Grafik als Aufzählungszeichen*/
list-style-image: url('my-listIcon.svg');
}
ol {
/* Nummerierung in I., II., ... */
list-style-type: upper-roman; /* ...., none */
}
Eigenschaften
Größenangaben
div {
/* Gilt nur für Blockelemente, nicht für Inlineelemente */
/* Höhenangabe und Breiteangabe */
height: 4rem; /* px, %, rem, em, vh */
width: 50%; /* px, %, rem, em, vw */
/* Mindesthöhe, Mindesbreite */
min-height: 2rem;
min-width: 25%;
/* Maximale Höhe und Breite */
max-height: 6rem;
max-width: 75%;
}
Eigenschaften
Abstände
p {
/* Außenabstand nach oben, rechts, unten, links (uhrzeigersinn) */
margin: 2rem; /* px, %, em, rem */
/* Außenabstand nach unten*/
margin-bottom: 4rem; /* margin-top, margin-right, margin-left* /
/* Innenabstand in alle Richtungen*/
padding: 1rem;
/* Innenabstand nach Links*/
padding-left: 2rem;
}
Eigenschaften
Hintergrund
span {
/* Hintergrundfarbe blau */
background-color: #0000ff;
}
/* FullScreen Hero Section mit Hintergrund Bild */
.hero {
/* Größenangaben */
height: 100vh;
width: 100vw;
/* Hintergrundgrafik */
background-image: url('hero.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}