78 lines
3.1 KiB
Markdown
78 lines
3.1 KiB
Markdown
# CSS-Explained
|
|
|
|
## Intro
|
|
This is all about the things I learned the last few years working as a frontend designer. There have been many times I got so frustrated with the way CSS works (or doesn't in many situations).
|
|
Often it was trial and error to get something done and more than once I stared at my display questioning my sanity for what I was seeing. Because I thought I knew what I was doing. In most cases I was wrong. Because I didn't understand all the details. In my opinion these details are very important to get the whole picture of how CSS works.
|
|
|
|
### Disclaimer
|
|
I used Codepen to create the examples and images in this guide
|
|
|
|
## Index
|
|
|
|
## Background Infos
|
|
- ** TBD **
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
A Site to remember all the important, way-to-complex and boring stuff about CSS. Bis zur Übersetzung ist dieser Text auf Deutsch
|
|
|
|
## Browser
|
|
- **TBD**
|
|
|
|
## Spezifität von CSS Selektoren
|
|
- **TBD**
|
|
|
|
## Initialwerte / Defaults
|
|
|
|
Jedes HTML-Element besitzt Initialwerte für bestimmte Eigenschaften. Leider sind diese nicht immer ganz selbsterklärend. Eine gute Übersicht findet sich hier: https://www.w3schools.com/cssref/css_default_values.asp
|
|
|
|
Es kann nicht schaden sich für häufig genutzte Elemente zu merken, welche Layout Eigenschaften sie mitbringen. Im Beispiel:
|
|
- Der body hat die Eigenschaften: *display: block* und *margin: 8px*
|
|
- Überschriften haben die Eigenschaft *display: block*
|
|
- Container haben die Eigenschaft *display: block*
|
|
|
|
### Tipps zu Initialwerten
|
|
- Initialwerte werden meist in einer **reset.css** Datei auf die gewünschten Werte festgelegt
|
|
|
|
|
|
## Vererbung von Eigenschaften
|
|
- **TBD**
|
|
|
|
## Layout einer Seite aufbauen
|
|
Quelle: [https://developer.mozilla.org/de/docs/Web/CSS/display](https://developer.mozilla.org/de/docs/Web/CSS/display)
|
|
|
|
*Display* gibt das grundlegende Layoutverhalten eines Elementes an. Hier die gebräuchlichsten: (Die vollständige Liste erreicht man über den Link unten).
|
|
|
|
- none
|
|
- inline (Initialwert)
|
|
- inline-block
|
|
- block
|
|
- flex
|
|
- grid
|
|
- table
|
|
-
|
|
|
|
### display: none
|
|
Blendet das Element und sämtliche Unterelemente aus. Die Seite wird gerendet, wie als wenn das Element nicht im DOM existieren würde
|
|
|
|
### display: inline vs. display: block
|
|
- *inline* Elemente nehmen nur so viel Platz ein, wie ihr Inhalt benötigt
|
|
- **Wichtig** *inline* Elemente nehmen keine Werte für *margin* an.
|
|
- *block* Elemente nehmen immer die gesamt verfügbare Breite ein
|
|
- *inline-block* Elemente verhalten sich grundsätzlich wie *block* Elemente. Teilen sich mehrere *inline-block* Elemente die verfügbare Breite, verhalten sie sich wie *inline* Elemente
|
|
- **Wichtig** *inline-block* Elemente können Werte für *margin* annehmen.
|
|
|
|
|
|
|
|
## Tipps und häufige Fragen
|
|
### Die Seite hat einen Abstand zum Browserfenster
|
|
- Auch das Body-Element hat Initialwerte, zu denen ein *margin* gehört. Dieses kann über *margin: 0* entfernt werden.
|
|
|
|
### 2 Wege Elemente auszublenden
|
|
- Ein *display: none* Element wird für den Aufbau der Seite komplett ingnoriert. Das Element nimmt keinen Platz auf der Seite ein
|
|
- Mit *visibility: hidden* wird das Element nur ausgeblendet, sprich unsichtbar gemacht. Es nimmt weiterhin Platz auf der Seite ein.
|