Html/CSS: Unterschied zwischen den Versionen
| (14 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 24: | Zeile 24: | ||
[https://www.w3schools.com/cssref/css3_pr_box-sizing.asp https://www.w3schools.com/cssref/css3_pr_box-sizing.asp] | [https://www.w3schools.com/cssref/css3_pr_box-sizing.asp https://www.w3schools.com/cssref/css3_pr_box-sizing.asp] | ||
=== Inhalte zentrieren === | |||
<pre> | |||
.class { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
</pre> | |||
==== Links ==== | |||
[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Inhalte_zentrieren https://wiki.selfhtml.org/wiki/CSS/Tutorials/Inhalte_zentrieren] | |||
=== width: 100% and margin === | === width: 100% and margin === | ||
| Zeile 33: | Zeile 47: | ||
width: calc(100% - 10px); | width: calc(100% - 10px); | ||
</pre> | </pre> | ||
==== Links ==== | |||
[https://stackoverflow.com/questions/13322789/display-a-div-width-100-with-margins https://stackoverflow.com/questions/13322789/display-a-div-width-100-with-margins] | |||
=== Pseudoklassen === | |||
==== Links ==== | |||
[https://t3n.de/news/css-pseudoelementen-komplexe-427026/ https://t3n.de/news/css-pseudoelementen-komplexe-427026/] | |||
[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 41: | 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 == | ||
| Zeile 47: | Zeile 101: | ||
[https://www.w3schools.com/html/ https://www.w3schools.com/html/] | [https://www.w3schools.com/html/ 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] | |||
[https://de.m.wikipedia.org/wiki/Unicodeblock_Verschiedene_Symbole_und_Pfeile https://de.m.wikipedia.org/wiki/Unicodeblock_Verschiedene_Symbole_und_Pfeile] | |||
Zurück zu [[Hauptseite#Programmieren|Hauptseite]] | Zurück zu [[Hauptseite#Programmieren|Hauptseite]] | ||
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
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