CSS
Was ist CSS?
- CSS = Cascading Style Sheets
- Verantwortlich f�r Design & Layout von Webseiten
- Getrennt von HTML (Struktur vs. Darstellung)
- HTML = Struktur, CSS = Aussehen
css
h1 {
color: blue;
font-size: 32px;
}1
2
3
4
2
3
4
CSS einbinden
Externe Datei (empfohlen):
html
<link rel="stylesheet" href="styles.css">1
Internes CSS:
html
<style>
p { color: blue; }
</style>1
2
3
2
3
Inline CSS:
html
<p style="color: blue;">Text</p>1
CSS Syntax
css
selektor {
eigenschaft: wert;
}1
2
3
2
3
Beispiel:
css
h1 {
color: red;
font-size: 32px;
text-align: center;
}1
2
3
4
5
2
3
4
5
Selektoren - Element
- Spricht alle Elemente eines Typs (Tag) an
css
p {
color: green;
}
h1 {
font-size: 36px;
}
a {
text-decoration: none;
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Selektoren - Klassen
- Mit
.ansprechen - Wiederverwendbar
- Element kann mehrere Klassen haben
html
<p class="wichtig highlight">Text</p>1
css
.wichtig {
color: red;
font-weight: bold;
}
.highlight {
background-color: yellow;
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Selektoren - IDs
- Mit
#ansprechen - Nur einmal pro Seite
- H�here Priorit�t als Klassen
html
<div id="header">Header</div>1
css
#header {
background-color: navy;
color: white;
padding: 20px;
}1
2
3
4
5
2
3
4
5
Kombinierte Selektoren
Mehrere Elemente:
css
h1, h2, h3 {
font-family: Arial, sans-serif;
}1
2
3
2
3
Nachfahren ("Kinder"):
css
.container p {
margin: 10px;
}1
2
3
2
3
Direkte Kinder:
css
.container > p {
color: blue;
}1
2
3
2
3
Pseudo-Klassen
css
a:hover {
color: red;
}
input:focus {
border: 2px solid blue;
}
li:first-child {
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f0f0f0;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Farben
Farbnamen:
css
color: red;1
Hexadezimal:
css
color: #FF0000;
color: #333; /* Kurzform */1
2
2
RGB:
css
color: rgb(255, 0, 0);1
RGBA (mit Transparenz):
css
background-color: rgba(255, 0, 0, 0.5);1
Schriftarten
Font-Family:
- Fallback falls die Schrift auf dem System nicht vorhanden ist
css
font-family: Arial, Helvetica, sans-serif;1
Font-Size:
css
font-size: 16px;
font-size: 1.5em; /* Relativ */
font-size: 1.5rem; /* Root relativ */1
2
3
2
3
Font-Weight & Style:
css
font-weight: bold;
font-style: italic;
text-decoration: underline;1
2
3
2
3
Text-Formatierung
css
text-align: center;
line-height: 1.5;
letter-spacing: 2px;
word-spacing: 5px;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Box Model
�������������������������
Margin
�������������������
Border
�������������
Padding
�������
Content
�������
�������������
�������������������
�������������������������1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Padding & Margin
css
/* Alle Seiten */
padding: 20px;
margin: 20px;
/* Vertikal | Horizontal */
padding: 10px 20px;
/* Oben | Rechts | Unten | Links */
padding: 10px 20px 15px 25px;
/* Einzelne Seiten */
padding-top: 10px;
margin-bottom: 15px;
/* Zentrieren */
margin: 0 auto;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Border
Grundform:
css
border: 2px solid black;1
Eigenschaften:
css
border-width: 2px;
border-style: solid; /* dashed, dotted, double */
border-color: black;1
2
3
2
3
Abgerundete Ecken:
css
border-radius: 10px;
border-radius: 50%; /* Kreis */1
2
2
Width & Height
css
width: 300px;
height: 200px;
width: 50%;
min-width: 200px;
max-width: 800px;
min-height: 100px;
max-height: 500px;1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Box-Sizing (Best Practice):
css
* {
box-sizing: border-box;
}1
2
3
2
3
Background Color & Image
css
background-color: #f0f0f0;
background-image: url('bild.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;1
2
3
4
5
6
7
2
3
4
5
6
7
Kurzform:
css
background: #f0f0f0 url('bild.jpg') no-repeat center/cover;1
Gradients
Linear:
css
background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, red, yellow, green);1
2
2
Radial:
css
background: radial-gradient(circle, red, blue);1
Bilder stylen
css
img {
width: 100%;
max-width: 600px;
height: auto;
display: block;
margin: 0 auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Object-Fit:
css
img {
width: 300px;
height: 200px;
object-fit: cover; /* F�llt, schneidet ab */
object-fit: contain; /* Ganzes Bild sichtbar */
}1
2
3
4
5
6
2
3
4
5
6
Flexbox Grundlagen
- Modernes Layout-System
- Flexible, responsive Designs
css
.container {
display: flex;
}1
2
3
2
3
Flex-Direction:
css
flex-direction: row; /* Default */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;1
2
3
4
2
3
4
Justify-Content
- Ausrichtung auf Hauptachse (horizontal bei row)
css
.container {
display: flex;
justify-content: flex-start; /* Default */
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Align-Items
- Ausrichtung auf Querachse (vertikal bei row)
css
.container {
display: flex;
align-items: stretch; /* Default */
align-items: flex-start;
align-items: flex-end;
align-items: center;
}1
2
3
4
5
6
7
2
3
4
5
6
7
Zentrieren:
css
.container {
display: flex;
justify-content: center;
align-items: center;
}1
2
3
4
5
2
3
4
5
Flex Wrap & Gap
css
.container {
display: flex;
flex-wrap: wrap; /* Umbricht auf neue Zeile */
gap: 20px; /* Abstand zwischen Items */
row-gap: 20px;
column-gap: 10px;
}1
2
3
4
5
6
7
2
3
4
5
6
7
Flex Items
css
.item {
flex-grow: 1; /* Nimmt verf�gbaren Platz */
flex-shrink: 0; /* Schrumpft nicht */
flex-basis: 200px; /* Ausgangsgr��e */
}1
2
3
4
5
2
3
4
5
Kurzform:
css
.item {
flex: 1; /* grow shrink basis */
}1
2
3
2
3
Flexbox Beispiel - 3 Spalten
html
<div class="container">
<div class="column">Spalte 1</div>
<div class="column">Spalte 2</div>
<div class="column">Spalte 3</div>
</div>1
2
3
4
5
2
3
4
5
css
.container {
display: flex;
gap: 20px;
}
.column {
flex: 1;
padding: 20px;
background-color: #f0f0f0;
}1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Flexbox Beispiel - Navigation
html
<nav class="navbar">
<div class="logo">Logo</div>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">�ber</a>
</div>
</nav>1
2
3
4
5
6
7
2
3
4
5
6
7
css
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links {
display: flex;
gap: 20px;
}1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Transitions
- Sanfte �berg�nge bei Zustands�nderungen
Grundform:
css
transition: property duration timing-function delay;1
Beispiel:
css
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Transition Timing
css
transition: all 0.3s linear; /* Gleichm��ig */
transition: all 0.3s ease; /* Default */
transition: all 0.3s ease-in; /* Langsamer Start */
transition: all 0.3s ease-out; /* Langsames Ende */
transition: all 0.3s ease-in-out; /* Beides */1
2
3
4
5
2
3
4
5
Transition Beispiel - Button
css
.button {
background-color: #007bff;
padding: 10px 20px;
transition: all 0.3s ease;
}
.button:hover {
background-color: #0056b3;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Animations
- Komplexere Bewegungen mit Keyframes
Keyframes definieren:
css
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Anwenden:
css
.box {
animation: fadeIn 1s ease-in;
}1
2
3
2
3
Keyframes mit Prozenten
css
@keyframes slideIn {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(10%);
}
100% {
transform: translateX(0);
}
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Animation Eigenschaften
css
.element {
animation-name: fadeIn;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Animation Beispiel - Pulse
css
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.pulse-button {
animation: pulse 2s ease infinite;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Animation Beispiel - Spinner
css
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: rotate 1s linear infinite;
}1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
Box-Shadow
css
box-shadow: x y blur spread color;1
Beispiele:
css
.card {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
/* Innerer Schatten */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
/* Mehrere Schatten */
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 4px 8px rgba(0,0,0,0.1);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Text-Shadow
css
text-shadow: x y blur color;1
Beispiele:
css
h1 {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
/* 3D-Effekt */
h1 {
text-shadow:
1px 1px 0 #ccc,
2px 2px 0 #bbb,
3px 3px 0 #aaa;
}
/* Glow */
h1 {
text-shadow: 0 0 10px #fff, 0 0 20px #0073e6;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Display Property
css
display: block; /* Ganze Breite, neue Zeile */
display: inline; /* Nur Inhalt-Breite */
display: inline-block; /* Kombiniert beides */
display: flex; /* Flexbox */
display: grid; /* Grid */
display: none; /* Versteckt */1
2
3
4
5
6
2
3
4
5
6
Position
css
position: static; /* Default */
position: relative; /* Relativ zur normalen Position */
position: absolute; /* Relativ zum Elternelement */
position: fixed; /* Relativ zum Viewport */
position: sticky; /* Wechselt zwischen relative/fixed */1
2
3
4
5
2
3
4
5
Beispiel:
css
.element {
position: absolute;
top: 20px;
right: 30px;
}1
2
3
4
5
2
3
4
5
Fixed Header Beispiel
css
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: white;
z-index: 1000;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Responsive Design - Media Queries
css
/* Mobile First */
.container {
width: 100%;
}
/* Tablets */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
width: 1000px;
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Media Query Beispiel
css
/* Mobile */
@media (max-width: 767px) {
.menu {
display: none;
}
.hero h2 {
font-size: 24px;
}
}
/* Desktop */
@media (min-width: 768px) {
.menu {
display: flex;
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
CSS Variablen
css
:root {
--primary-color: #007bff;
--spacing: 20px;
--border-radius: 5px;
}
.button {
background-color: var(--primary-color);
padding: var(--spacing);
border-radius: var(--border-radius);
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
CSS Reset
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Best Practices
- Externe CSS-Dateien verwenden
- Klassen statt IDs f�r Styling
box-sizing: border-boxf�r alle Elemente- Mobile First Ansatz
- CSS-Variablen f�r wiederholte Werte
- Kommentare f�r Struktur
- Vermeide
!important
Vollst�ndiges Beispiel - HTML
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<div class="container">
<h1>Logo</h1>
<nav class="nav">
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">�ber</a>
</nav>
</div>
</header>
<main>
<section class="hero">
<h2>Willkommen!</h2>
<button class="button">Start</button>
</section>
</main>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Vollst�ndiges Beispiel - CSS
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #007bff;
--spacing: 20px;
}
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing);
}
.header {
background-color: var(--primary-color);
color: white;
padding: var(--spacing) 0;
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav {
display: flex;
gap: 20px;
}
.nav-link {
color: white;
text-decoration: none;
transition: opacity 0.3s;
}
.nav-link:hover {
opacity: 0.8;
}
.hero {
text-align: center;
padding: 80px var(--spacing);
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.button {
background-color: white;
color: var(--primary-color);
padding: 12px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
.button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
Resources
Wichtigste Eigenschaften
| Kategorie | Eigenschaften |
|---|---|
| Text | color, font-family, font-size, text-align |
| Box | width, height, padding, margin, border |
| Background | background-color, background-image |
| Flexbox | display: flex, justify-content, align-items |
| Position | position, top, left |
| Effects | box-shadow, border-radius, opacity |