CSS wurde entworfen, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen. Wenn diese Trennung konsequent vollzogen wird, werden nur noch die inhaltliche Gliederung eines Dokumentes und die Bedeutung seiner Teile in HTML oder XML beschrieben, während mit CSS gesondert davon, vorzugsweise in separaten CSS-Dateien, die Darstellung der Inhalte festgelegt wird (z. B. Layout, Farben und Typografie). Gab es anfangs nur einfache Darstellungsanweisungen, so wurden im Verlauf komplexere Module hinzugefügt, mit denen z. B. Animationen und für verschiedene Ausgabemedien verschiedene Darstellungen definiert werden können.
/* Deutsch */
Selektor {Eigenschaft:Wert;}
/* English */
selector {property:value;}
Abstände
Innenabstand
Außenabstand
Hier siehst Du beides
Bilder nach Typ ansprechen: https://jdsteinbach.com/css/targeting-a-specific-image-type-with-css/
img {
border: border;
background: border-color;
box-shadow: box-shadow;
}
img[src*="png"] {
border: none;
background: transparent;
box-shadow: none;
}
Maßeinheiten in CSS
In der Sprache CSS gibt es absolute (cm, inch, …) und relative Maßeinheiten.
Das ist 1cm groß = absolut!
Die Maßeinheit Pixel ist absolut und relativ, weil es einen Bezug hat zur Auflösung des Monitors.
Das ist 30px groß = relativ zum Monitor!
Das sind 1.4rem (Root-Element „M“) – absolut zur 1 x definierten relativen Angabe. Beziehen sich daruf: Wie groß its das große M der Standardschrift.
CSS Links
- Schöner drucken mit CSS
- Wikipedia CSS
- Mediaevent: CSS, HTML und Javascript mit {stil}
- Animated Gradient Border: www.codepen.io/mike-schultz
CSS CheatSheets
CSS Generatoren
- Border-Radius und Box-Shaddow
- Webcode Tools -CSS-Generator
- Top 26 Free CSS Generator Tools
- Top 9 CSS generator tools
Accessibility
Diese Seite bietet einen Kontrast-Checker und gibt Hinweise, wie sich ein CSS auf die Zugänglichkeit auswirkt. Das CSS display:none; verbirgt die Dinge (den Text) auch für Screenreader.