Um für alle Browser die gleichen Ausgangsbedingungen der Innen- und Außenabstände herzustellen, verwende ich folgende Einstellungen für ALLE Selektoren (ALLE werden durch den * referenziert)
/* --------- CSS-Reset start --------- */
* {
margin: 0;
padding: 0;
}
nav ul,
nav ol {
list-style: none;
}
nav a {
text-decoration: none;
}
/* --------- CSS-Reset end ------------ */
Um den Mauszeiger in bestimmten
Situationen zu verändern
verwende die Anweisung cursor:
Mögliche Einstellungen:
cursor: default;
cursor: not-allowed;
cursor: grabbing;
cursor: move;
cursor: url(pfad);
...
Quelle: https://www.w3schools.com/csSref/tryit.asp?filename=trycss_cursor
Um einen Farbverlauf darzustellen hat man früher Grafiken benutzt.
Heute gibt man als background-image: einen gradient an.
background-image: linear-gradient(yellow, red);
Demo
Es können auch mehrere Farben durch Komma getrennt angegeben werden.
Um die Richtung zu beeinflussen kommt vor die erste Farbe zB. 0.25turn.
background-image: linear-gradient(0.25turn, red, blue, green);
Demo
Es gibt hier viele mögliche Einstellungen, siehe Quelle.
Quelle: https://www.w3schools.com/css/css3_gradients.asp
display: flex;ist die moderne Art der Positionierung von Bereichen und Elementen.
Im Prinzip besteht ein übergeordneter Flex-Container, in dem eine Mehrzahl von
Blockelementen platziert werden können. Folgende Einstellungen im css des Containers sind möglich:
display: flex; Regelt die Anordnung der Elemente in der Flexbox
display: inline-flex; wie oben, regelt nur wie sich Flex-Boxen
gegenüber benachbarten Elementen verhalten
flex-direction: row (default)|column
flex-wrap: nowrap(default)|wrap|wrap-reverse
justify-content: flex-start(default)|flex-end|center|space-between|space-around
align-items: flex-start(default)|flex-end|center|baseline|stretch (horizontal)
align-content: flex-start|flex-end|center|space-between|
space-around|stretch(default) (vertikal)
...
Es ist aufgrund des Datenschutzes deiner Besucher nicht zu empfehlen, Google-Fonts auf deiner Homepage zu verwenden. Besser du bindest Schriftarten ein, die direkt von deinem Webspace geladen werden.
Mit font-display: swap; setzt der Browser die erste alternative Schrift ein,
die auf dem System des Besuchers installiert ist und tauscht die Systemschrift
aus (swap), sobald der Web Font geladen ist.
Wenn eine Systemschrift eingesetzt wird, die dem Webfont möglichst ähnlich ist, ist der Wechsel zur Wunschschrift kaum spürbar, aber der Text ist bereits sichtbar, bevor der Webfont geladen ist.
Quelle: https://www.mediaevent.de/font-face-schrift-in-webseiten-laden/
WOFF ist ein vom W3C standardisiertes Format für Web-Schriften, das die Formatvielfalt und Unsicherheit der frühen Webfonts beendet. WOFF ist ein komprimiertes TTF mit Meta-Informationen, das von den Mainstream-Browsern und Font-Designern unterstützt wird. Zu den Meta-Informationen können z.B. die Lizenzbestimmungen gehören – die allerdings nicht von den Browsern verifiziert werden. Mit den aktuellen Browser- und Betriebssystem-Versionen können WOFF-Schriften eingesetzt werden.
Quelle: https://www.mediaevent.de/css/font-face.html
Man lädt eine Schrift herunter. Entweder man kauft eine, oder man nutzt eine der vielen Gratis-Fonts, zB. von https://www.fontsquirrel.com herunter, bitte dabei die Lizenzbestimmungen zu beachten! Man legt einen Ordner 'fonts' am Webspace an und kopiert die Datei (*.otf oder *.ttf) hier hinein. Im CSS bindet man die Schrift folgendermaßen ein:
@font-face {
font-family: 'NameDerSchrift';
font-style: normal;
font-weight: 400;
font-display:swap;
src:
/* erst nachsehen, ob die Schrift beim
Besucher schon installiert ist: */
local('NameDerSchrift'),
/* mit url() dann wirklich einbinden: */
url('../fonts/NameDerSchrift.otf'); /* oder *.ttf */
Die Zuweisung zB. für Überschriften erfolgt dann wie gewohnt:
h1 {
font-family: NameDerSchrift, sans-serif;
}
Es gibt folgende Kombinatoren um Selektoren zu verketten:
'>' selektiert ALLE DIREKTEN Kindelemente ' ' (Leerzeichen) selektiert auch indirekte Nachfahren, tiefer im Elementbaum '+' selektiert den UNMITTELBAR FOLGENDEN Nachbarn '*+*' (Eulen-Selektor) selektiert alle Kinder, aber NICHT das ERSTE.
Beachte, dass dabei hinter der Eule KEIN weiterer Selektor steht! Also nur ul *+* {color:red;} ul * + * {color:red;}
'~' selektiert ALLE Elemente der GLEICHEN Ebene, auch wenn dazwischen andere Elemente stehen.Quelle: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Kombinator
Langsameres Scrollen auf der Seite erzeugen.
Funktioniert in den meisten Browsern, keine Nachteile für nicht unterstützende Browser. Am besten gleich nach dem CSS-Reset in die CSS einfügen.
html {scroll-behavior: smooth;}/* langsameres Scrollen */
Man unterscheidet prinzipiell folgende Selektoren:
Will man JEDE Überschrift <h2> rot darstellen, notiert man:
<h2>xy</h2>
h2 {color: red;}
Will man "wichtige" Überschriften grün darstellen, notiert man:
<h2 class="wichtig">xy</h2>
h2.wichtig {color: green;}
ID-Selektoren funktioniern im Prinzip gleich wie Klassen-Selektoren, jedoch darf jede ID auf einer Seite jedoch NUR EINMAL vorkommen. Man notiert:
<h2 id="einzigartig">xy</h2>
h2#einzigartig {color: orange;}
Es wird also im CSS anstelle des Punktes für die Klasse, eine Raute # für die ID verwendet.