Html/CSS: Unterschied zwischen den Versionen

Aus Tutorials
Zur Navigation springen Zur Suche springen
 
(8 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 59: Zeile 59:


[https://css-tricks.com/almanac/properties/t/transform-origin/ https://css-tricks.com/almanac/properties/t/transform-origin/]
[https://css-tricks.com/almanac/properties/t/transform-origin/ https://css-tricks.com/almanac/properties/t/transform-origin/]
==== Sprechblasen ====
===== Links =====
[https://roginnovation.com/tutorials/website/css/speechbubble/speechbubble.php https://roginnovation.com/tutorials/website/css/speechbubble/speechbubble.php]
=== Flexbox ===
[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 ===
[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_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.a-coding-project.de/ratgeber/css/verknuepfungen]
[https://www.mediaevent.de/css/css-selektor-kontextselektor.html https://www.mediaevent.de/css/css-selektor-kontextselektor.html]
[https://css-tricks.com/the-sass-ampersand/ https://css-tricks.com/the-sass-ampersand/]


=== Links ===
=== Links ===
Zeile 67: Zeile 89:


[https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/]
[https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/]
== Frameworks ==
=== Bootstrap ===
[https://getbootstrap.com/ https://getbootstrap.com/]


== Html ==
== Html ==

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