Html/CSS: Unterschied zwischen den Versionen

Aus Tutorials
Zur Navigation springen Zur Suche springen
 
Zeile 68: Zeile 68:
=== Flexbox ===
=== Flexbox ===


[https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background]
[https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-properties https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-properties]


=== Grid-Layout ===
=== Grid-Layout ===

Aktuelle Version vom 26. August 2021, 15:10 Uhr

CSS

:nth-child(n)

Eigenschaft gilt für das n-te Kind eines Elements. n kann eine Nummer, ein Schlüsselwort oder eine Formel sein.

Beispiel:

tr:nth-child(even) {background-color: #f2f2f2;}

Border Box

Damit die Komponentengröße generell immer mit Rand bemessen wird, in der CSS-Datei folgendes eintragen:

* {
    box-sizing: border-box;
}

Links

https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Inhalte zentrieren

.class {
  display: flex;
  align-items: center;
  justify-content: center;
}

Links

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Inhalte_zentrieren

width: 100% and margin

width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);

Links

https://stackoverflow.com/questions/13322789/display-a-div-width-100-with-margins

Pseudoklassen

Links

https://t3n.de/news/css-pseudoelementen-komplexe-427026/

https://css-tricks.com/almanac/properties/t/transform-origin/

Sprechblasen

Links

https://roginnovation.com/tutorials/website/css/speechbubble/speechbubble.php

Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-properties

Grid-Layout

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout

Verknüpfungen (Kontextselektoren)

https://www.a-coding-project.de/ratgeber/css/verknuepfungen

https://www.mediaevent.de/css/css-selektor-kontextselektor.html

https://css-tricks.com/the-sass-ampersand/

Links

https://www.w3schools.com/cssref/default.asp

https://www.w3schools.com/css/css_website_layout.asp

https://css-tricks.com/snippets/css/complete-guide-grid/

Frameworks

Bootstrap

https://getbootstrap.com/

Html

Links

https://www.w3schools.com/html/

Unicode

Links

https://de.m.wikipedia.org/wiki/Unicodeblock_Verschiedene_Symbole

https://de.m.wikipedia.org/wiki/Unicodeblock_Verschiedene_Symbole_und_Pfeile


Zurück zu Hauptseite