diff --git a/README.md b/README.md index 2d41204..8545651 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,57 @@ # CSS-Explained -A Site to remember all the important, way-to-complex and boring stuff about CSS. \ No newline at end of file +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.