- Live Server Extension für VS code
- Emmet
html:5-> vollst. Seitenstruktur
- https://caniuse.com - testen von html Sprachelementen & Nutzungsdaten nach Browsern und Ländern
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>- werden vererbt
- lang
- dir
- nur für das Element
- id - muss eindeutig sein
- class - gleiche Werte in einem Dokument zulässig
- title - wird als Tooltip angezeigt
- ?
- style
- <meta xxx="">
- Blockelemente
- h1, ..., h6
- p
- div (neutrales Element)
- Inlineelemente
- strong, statt b
- em, statt i
- span (neutrales Element)
- Spezialelemente
- script - lädt JS-Skript, blockierend, während Skript geladen wird
- link - setzt referenz auf StyleSheet, nicht blockierend, möglichst weit oben
Neue semantische Elemente
- header, navigation, main, footer, aside, ...
- werden von älteren Browsern nicht unterstützt -> modernizr.2.6.2.js
- section - hierarchische Organisation des Dokumentes, Überschriften in sections immer h1!
- article - "neben" der Dokumentstruktur stehende Informationsblöcke - styling über class-Angabe
- video, iframe (Tipp: Einbettungscode kopieren)
- Formulare:
- Input-Types date, ...
- label
- tabindex als Attribut
- pattern -> Prüfung erst bei Abschicken
<label for="vn">Vorname:</label>
<input id="vn" type="text" name="vorname" required tabindex="1">- Auto-Validierung bei GET oder GET novalidate
- placeholder attribute
- type range
- type date, datetime, ...
- datalist bei type text, statt select/option (mehr Eingaben möglich)
- output-Element -
- "Komplexes Thema"
- tabindex: erst die Inputs mit tabindex, dann die ohne Angabe.
Priorität:
- Spezifizität
- ID...
- Class... / Pseudo-Klassen... / Attribut...
- Type...
- Reihenfolge
| Selektor | ID | Class | Type |
|---|---|---|---|
| * (Universell) | 0 | 0 | 0 |
| p | 0 | 0 | 1 |
| .lightblue | 0 | 1 | 0 |
| #div1 | 1 | 0 | 0 |
| p.yellow | 0 | 1 | 1 |
| a:hover (Zustand) | 0 | 1 | 1 |
| p:firstline (Struktur) | 0 | 1 | 1 |
| [title='...'] | 0 | 1 | 0 |
| [title=] | 0 | 1 | 0 |
| div p | 0 | 0 | 2 |
| div#div1_id p | 1 | 0 | 2 |
| div#div1_id > p | 1 | 0 | 2 |
| h1 + p | 0 | 0 | 2 |
- + adjacent sibling
- ~ all siblings
- > children
- :first-child
- :last-child
- :nth-child(even|odd) jedes gerade/ungerade Element
- :nth-child(number) - das Element an Position number
- :nth-child(n+2) - ab dem 2. Element alle
- :nth-child(3n) - jedes 3. Element
- :first-of-type
Standard-Layout
- Inhalt (width, height)
- Padding
- Border
- Margin - mit Margin Merge - überlagern der Margins, der größere gewinnt; body margin geht nach innen!
- border
- border-radius
- box-shadow
#p1 {
box-shadow: -5px -10px 5px darkgray; /* l(-)/r(+) t(-)/b(+) Verlauf */
}- inset - Shadow nach innen
- Listen von shadows - werden von rechts nach links "gemalt";
- background:
url(special.gif);oderbackground-image: linear-gradient(155deg, 0%, red 100%);
#p2 {
background-color: rosybrown;
_display: none; /* aus dem Flow herausnehmen */
_visibility: hidden; /* unsichtbar, aber Layout bleibt erhalten */
opacity: 0; /* 0 ... 1, Layout bleibt erhalten */
}| position: | ist im Flow | ist positioniert |
|---|---|---|
| static | x | - |
| relative | x | x |
| absolute | - | x (relativ zum nächsten positionierten Parent) |
| fixed | - | x (relativ zum viewport) |
| sticky | - | x |
float: left|right- um divs z.B. nebeneinander zu positionieren &clear: left|both|rightum das nächste Element im Flow nach den gefloateten Elementen zu positionieren float.html und float02.html
display: table;- optional, solange kein Zugriff auf die ganze Tabelle benötigt wirddisplay: table-row;- optional, solange nur eine Zeile benötigt wirddisplay: table-cell;- Element soll 1-n Zellen füllen
display:flex
Elemente im Flexcontainer richten sich aus nach:
Main Axis: links nach rechts
justify-content: flex-start; /* | flex-start | flex-end | center | ... */Cross Axis: oben nach unten
align-items: center; /* | flex-start | flex-end | stretch (default) | ... */Items haben
- order - Reihenfolge festlegen
- flex - relative Breite festlegen
display:grid
Es wird ein Gridtemplate definert, das Spalten un Zeilen festlegt
Margins werden nicht gemerged, sondern addieren sich
Von-/Bis-Angaben beziehen sich auf die (Trenn-)Linien der Zeilen und Spalten, d.h. bei 3 Spalten habe ich die Linien 1, 2, 3, 4
https://developer.mozilla.org/de/docs/Web/CSS/CSS_Grid_Layout
Gesteuertes Umschalten von einer Darstellung zu einer anderen.
Beispiel - Breite, Höhe, Farbe beim Übergang eine Sekunde lang ändern:
.box:hover {
width: 100px;
height: 100px;
background-color: yellow;
transition: width 1s, height 1s, background-color 1s; /* = all 1s */
}Angabe: Attribut Dauer [Verzögerung]
Style von c anpassen, wenn Hover über Parent-Element b von c:
a b:hover c { ... }https://www.rechnerhaus.de/blog/unterschied-zwischen-css-scss-sass