RGBa steht für Red-Green-Blue-alphachannel, also einem Quadrupel aus drei Farbwerten (Rot, Grün und Blau) und einem Transparenzwert (Alphakanal).
Damit stellt es eine Weiterentwicklung des schon bekannten RGB Farbraumes dar und unterscheidet sich im Wesentlichen nur durch den vierten Kanal.
CSS3 erlaubt die Verwendung mehrerer Hintergrundbilder (multiple backgrounds). Dazu werden den entsprechenden CSS-Eigenschaften einfach mehrere durch Kommata von einander getrennte Werte übergeben.
Die Hintergrundgrafiken werden dabei in umgekehrter Reihenfolge, in der sie genannt werden, übereinander gestapelt, also die erste Grafik liegt ganz oben.
Damit man die neue Technik nutzen kann, muss man mehrere URLs, das Attachment und die Position des Bildes in die background– Anweisung schreiben.
id.multiple_backgroung {
background:url(img1.jpg) no-repeat 0 0,
url(img2.jpg) no-repeat right bottom,
url(img3.jpg) no-repeat center center;no-repeat nur einmal angezeigt und links mittig positioniert repeat-x horizontal gekachelt wird.CSS-Farbanweisungen sind Befehle, die verwendet werden, um die Farben von Texten, Hintergründen und anderen Dingen auf einer Webseite festzulegen. Du kannst diese Befehle nutzen, um zu bestimmen, welche Farben deine Webseite haben soll. Dies hilft dabei, deine Webseite hübsch und ansprechend zu gestalten.
Neben RGB ist es in CSS3 auch möglich seine Farbangaben in HSL anzugeben. Das heißt, dass die Werte nicht in additiver Farbmischung sondern in Farbton durch Grad und Sättigung und relative Helligkeit in Prozent angegeben werden. HSL im Einsatz
background-color: hsl(0,100%,50%); rgba(), hsla()
Daneben ist es auch möglich RGB und HSL mit Transparenz-Angaben zu versehen: Die beiden Farbsysteme nehmen hierbei die Form RGBA und HSLA ein. “A” steht für den Alpha-Kanal. Die Werte liegen zwischen 0 und 1, wobei 0 0% Transparenz und 1 100% Transparenz hat. RGBA verhält sich hierbei genauso wie HSLA. RGBA im Einsatz
background: rgba(255, 0, 0, 0.2);Schrift bedeutet, wie die Buchstaben und Wörter geschrieben sind. Zum Beispiel, welche Schriftart und -größe genutzt werden. Das hilft dabei, dass der Text leicht zu lesen ist.
Satz ist, wie der Text auf einer Seite oder auf dem Bildschirm angeordnet ist. Das betrifft, wie der Text in Abschnitte aufgeteilt ist, ob er links oder in der Mitte steht, wie viel Platz zwischen den Zeilen ist und wie die Absätze beginnen. Ein guter Satz sorgt dafür, dass der Text gut aussieht und einfach zu verstehen ist.
Der Textfluss ist die Art und Weise, wie der Text im Dokument angeordnet ist. Er bestimmt, wie der Text gelesen wird, indem er die Abschnitte und Seiten ordnet. Ein guter Textfluss macht den Text leichter verständlich und angenehm zu lesen. Alle diese Dinge arbeiten zusammen, um sicherzustellen, dass der Text gut aussieht und leicht zu lesen ist. Designer und Autoren denken darüber nach, um sicherzustellen, dass ihre Texte ansprechend und verständlich sind.
Bessere Steuerung von Zeilenumbrüchen: Mit text-wrap können Zeilen an Interpunktionszeichen umgebrochen werden.
Mit word-wrap legt man fest wie Wörter umgebrochen werden dürfen. hyphenate bricht Wörter um, indem an die vorangehende Silbe ein “-” angehängt wird.
Die word-break-Eigenschaft legt fest, welche Zeilenumbruch-Beschränkungen für ein Element gelten. Diese Eigenschaft ist nur für asiatische Schriftarten interessant.
text-overflow
Was mit überfließendem Text geschehen soll, kann mit text-overflow gesteuert werden. Hier kann man z.B. automatisch bei zu langem Text Pünktchen “…” anhängen lassen. (Opera:-o-text-overflow )
text-align-last
Die Eigenschaft text-align-last gibt (falls text-align:justify; gesetzt ist) an, wie die letzte Zeile des Blocksatzes gehandhabt werden soll.
Genauso verhält sich auch text-justify zu text-align. Diese Eigenschaft gibt an wie stark der Blocksatz erzeugt werden soll. Zum Beispiel nur durch die Zwischenräume der Wörter oder auch durch die Zwischenräume der Buchstaben.
Mit white-space-collapse kann, wie der Name schon sagt, die Handhabung von Leerzeichen gesteuert werden.
Die Eingeschaften text-align, letter-spacing und word-spacing erhalten weitere Werte.
text-kashida-space ist eine Eigenschaft die noch undefiniert ist. Unter Umständen kommt diese auch gar nicht im CSS3 zum Einsatz.
@font-face
Mit @font-face kann eine beliebige Schriftdatei auf einem Server angegeben werden, die dann heruntergeladen und vom Browser verwendet wird. Zu beachten ist hierfür aber besonders die Lizenzart der Font.
Dies war eigentlich schon seit sehr langer Zeit in der CSS2 Spezifikation, wurde aber mangels Browserunterstützung in CSS 2.1 wieder entfernt.
@font-face {
font-family: "Fertigo";
src: url(http://www.taptaptap.com/Fertigo.otf)
format("opentype");Neuste WebKit-Versionen (Safari 3) enthalten diese Funktion, Schriften dynamisch nachzuladen. Der Internet Explorer unterstützt seit Version 4 das nachladen von Schriftarten im eigenen .eot-Format.
Ein “CSS Gradient” ist eine Methode, um Hintergrundfarben auf einer Webseite zu gestalten, bei der die Farben fließend von einer zur anderen übergehen. Es ist wie ein Farbverlauf. Es kann gerade Linien oder runde Kreise erzeugen, die Farben miteinander vermischen. Dies wird in der Webentwicklung verwendet, um Webseiten hübscher zu machen, indem man Farbübergänge erstellt, ohne Bilder zu verwenden.
Man muss zwischen zwei Arten von Farbverläufen unterscheiden:
Lineare Verläufe, geradliniger Farbverlauf von zwei oder mehr Farben
background:-moz-linear-gradient(top,#fff,#adf);/* Firefox */
background:-webkit-linear-gradient(top,#fff,#adf);/* Safari, Chrome */
background:-o-linear-gradient(top,#fff,#adf);/* Opera */
background:-ms-linear-gradient(top,#fff,#adf);/* IE */
background:linear-gradient(top,#fff,#adf);/* W3C Standard */Radiale Verläufe, kreisförmiger Farbverlauf von zwei oder mehr Farben
background:-moz-radial-gradient(center,#fff,#adf);/* Firefox */
background:-webkit-radial-gradient(center,#fff,#adf);/* Safari, Chrome */
background:-o-radial-gradient(center,#fff,#adf);/* Opera */
background:-ms-radial-gradient(center,#fff,#adf);/* IE */
background:radial-gradient(center,#fff,#adf);/* W3C Standard */linear-gradient, radial-gradient und conic-gradient sind Werte für background-image, border-image, list-style-image und generated content.
Es gibt drei Formen des CSS-Gradient:
Mit der opacity Eigenschaft kann die Deckkraft/Transparenz von Elementen gesteuert werden. Diese Eigenschaft wird zwar so nicht im Internet Explorer unterstützt, es gibt aber eine ebenbürtige Eigenschaft, wodurch in allen Browsern Transparenz genutzt werden kann.
Beachten Sie: Obwohl der Wert für opacity eine prozentuale Angabe ist, sind Prozentwerte nicht erlaubt.
Empfehlung: Wenn Sie nur den Hintergrund und nicht den Textinhalt durchscheinend darstellen wollen, verwenden Sie rgba-Farbangaben bei der Hintergrundfarbe.
background-origin, -clip
Mit background-origin kann man angeben, ob das Hintergrundbild am Rahmen, am Innenabstand oder am Inhalt ausgerichtet werden soll. (Webkit: -webkit-background-composite)
background-clip gibt an, ob sich das Hintergrundbild bis in den Rahmen erstrecken soll oder nicht hinter dem Rahmen angezeigt werden soll. (Webkit: -webkit-background-clip)
background-size
Mit background-size kann die Größe von Hintergrundbildern angegeben werden. Dies ist vor allem Wichtig um zukünftig SVG Grafiken sinnvoll als Hintergrundbilder einzusetzen.
Mehrere Hintergrundbilder
In CSS3 können für ein Bild mehrere Hintergrundbilder angegeben werden. Dadurch müssen für viele Effekte keine ansonsten unnötigen HTML-Elemente eingefügt werden.
Für mehr Informationen schaut auch auf: https://wiki.selfhtml.org/wiki/CSS
Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren (selectors).
Ein CSS-Selektor nennt die Bedingungen, die auf ein Element zutreffen müssen, damit der nachfolgende Regelsatz an CSS-Deklarationen auf das Element angewendet wird. Der Selektor ist somit der Teil vor den geschweiften Klammern.
Mit neuen Selektoren (Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren (selectors). kann man Elemente noch genauer auswählen.
Beispiele:
first-of-type
first-letterFazit, CSS 3 Selektoren (selectors) erweitern also die Möglichkeiten zur gezielten Auswahl und Gestaltung von HTML-Elementen auf Webseiten erheblich. Mit Pseudo-Klassen, Pseudo-Elementen, Attribut-Selektoren und Kombinator-Selektoren bieten sie mehr Flexibilität und Präzision bei der Anpassung des Stils und der Interaktivität von Webseiten. Dies ermöglicht eine verbesserte Benutzererfahrung und eine ansprechendere Webentwicklung.
Um die Erstellung eines mehrspaltigen Seitenlayouts (column layout) ohne viel Code zu ermöglichen, sollen drei neue CSS-Eigenschaften eingeführt werden.
Zum einen kann man mit column-count festlegen, wie viele Spalten erzeugt werden sollen, mit der Eigenschaft column-gap gibt man den Abstand zwischen den einzelnen Spalten an und mit column-width legt man die Breite der Spalte fest. Dabei sollen nur prozentuale Angaben möglich sein.
body {
display: grid;
gap: 10px;
}
@media (min-width: 500px) {
body {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr 100px;
}
header,footer {
grid-column: 1 / -1;
}Zusammenfassend kann gesagt werden: Das Holy-Grail-Layout ist ein Webseiten-Layout, das mehrere, trotz unterschiedlichen Inhalts gleich hohe Spalten hat.
Weiterführende Infomationen findet ihr auf: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/mehrspaltige_Layouts
Das Boxmodell: Mit CSS können Sie Elementen (feste) Breiten, Höhen und Abstände geben und diese nebeneinander positionieren.
Das CSS-Boxmodell ist ein grundlegendes Konzept in der Webentwicklung, das die Darstellung und das Layout von HTML-Elementen beschreibt. Es behandelt jedes HTML-Element als eine rechteckige Box, die aus mehreren Schichten besteht:
Die Gesamtbreite und Höhe eines HTML-Elements werden durch die Summe von Inhalt, Padding, Border und Margin bestimmt. Das Boxmodell ermöglicht es Entwicklern, das Layout von Webseiten genau zu kontrollieren, indem sie diese Eigenschaften gezielt anpassen.
Das Boxmodell ist ein grundlegendes Konzept in der Webentwicklung und spielt eine entscheidende Rolle bei der Gestaltung von Webseiten und der Positionierung von Inhalten.
Die rechteckigen Blöcke, die im Elementbaum erzeugt und auf dem Bildschirm dargestellt werden, folgen einem Schema, dem „Boxmodell“. Es ist somit Grundlage jeden Layouts.
Jedes Block-Element wie Textabsätze (p), -Abschnitte (div, article, main, aside, …) und Überschriften (h1, h2, …) bildet eine rechteckige Box, die Sie frei formatieren können.
Beispiel:
overflow-x, overflow-yMit overflow-x und overflow-y kann der “Überlauf” eines Elementes(overflow) für jede Richtung einzeln eingestellt werden (also ob z.B. ein Scrollbalken angezeigt werden soll).
box-sizingMittels box-sizing kann eingestellt werden ob sich die Breite eines Elementes auf deren Inhalt oder auf Inhalt+Rahmen+padding bezieht. (Webkit: -webkit-box-sizing)
calc()Die Eigenschaft calc(), die z.B. innerhalb einer CSS-Eingeschaft wie width oder height stehen kann, ist es möglich Breiten- und Längenangaben direkt auszurechnen.