Anleitung im Internet unter http://stellatest.de
Die Systematik dieser Darstellung ist in Anlehnung an die englischsprachige Seite von w3school.com entstanden. Dort ist zu CSS3 und vielen anderen Themen umfangreiches Schulungsmaterial zu finden. Interessante Online-Editoren erlauben es auf dieser Seite, sebständig mit eigenem Code zu experimentieren.
Die Verwendung von CSS-Befehlen im HTML-Dokument hat sich nicht geändert. Folgende Möglichkeiten sind aber so entscheidend, dass sie hier dennoch nochmal aufgeführt werden.
<p style="color: blue">Absatz mit Farbauszeichnung direkt im Text</p>
Diese Auszeichnung direkt am Element macht nur dann Sinn, wenn sie nur an dieser einen Stelle gelten soll.
<style>
p {color: blue;}
</style>
<p>Absatz erhält seine Farbauszeichnung im Html-Dokument</p>
Die Auszeichnung im Style-Bereich gilt für alle Elemente im selben Dokument
Im HTML-Dokument werden externe CSS-Dateien verlinkt
<link href="screen.css" rel="5tylesheet" type="text/css" media="screen">
<link href="print.css" rel ="stylesheet" type="text/css" media="print">
In einer angelegten externen CSS-Datei stehen die Befehle
/* CSS Datei screen.css mit Befeheln für die Bildschirmansicht */
p {color: blue;}
/* CSS Datei print.css mit Befeheln für den Druck*/
p {color: black;}
Die Auszeichnungen in der externen CSS-Datei gelten in allen HTML-Dokumenten, die mit dieser Datei verlinkt sind.
border-radius ermöglicht es jedem Element "runde Ecken" zuzuweisen.
.RundeEcken {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 500px;
height: 150px;
}
.RundeEcken3 {
border-radius: 25px;
background: url(steine.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 500px;
min-height: 150px;
}
Das Bild für den Hintergrund finden Sie unter: steine.pnghttp://stellatest.de/anleitungen/css/steine.png
RGBA Farbwerte sind eine Erweiterung der RGB-Farben um einen Alphakanal, der eine Transparenz (opacity) ermöglicht.
Der Alphakanal kann Werte von 0.0 (100% Transparenz) bis 1.0 (0% Transparenz) einnehmen.
.rgbaeins {background-color: rgba(255, 0, 0, 0.3);} /* Rot mit Transparenz */
.rgbazwei {background-color: rgba(0, 255, 0, 0.3);} /* Grün mit Transparenz */
.rgbadrei {backgound-color: rgba(0, 0, 255, 0.3);} /* Blau mit Transparenz */
.rgbavier {background-color: rgba(0, 0, 255, 0.3);} /* Schwarz mit Transparenz */
Der Befeht box-shadow ermöglicht es, einem Element Schatten hinzuzufügen.
div {
box-shadow: 10px 10px 5px rgba(0,0,0,0.3);
background: yellow;
width: 600px;
}
Neue Eigenschaften ermöglichen mehr Einstellungen für Hintergrundbilder
Die Hintergrundbildeigenschaften ermöglichen es, mehrer Bilder im Hintergrund zu platzieren.
(Das Blumenbild für den Hintergrund finden Sie unter: blumen.png http://stellatest.de/anleitungen/css/blumen.png)
(Das Sandbild für den Hintergrund finden Sie unter: sand.png http://stellatest.de/anleitungen/css/blumen.png)
Seit CSS3 kann die Größe des Hintergrundbildes definiert werden. Zum Beispiel durch die Angabe der Größe, eine Prozentangabe oder durch die Schlüsselbegriffe contain (Größe in Bezug auf den Textinhalt) oder cover (Größe bezogen auf die Gesamtgröße des Hintergrundbereichs.
background-size: contain skaliert das Hintergrundbild so groß wie möglich, aber nur so weit, dass sich die Breite und Höhe eines Bildes innerhalb des Hintergrundbereiches befinden. Es kann daher in Abhängigkeit von den Bildproportionen sein, dass ein Teil des Hintergrundes nicht vom Hintergrundbild bedeckt ist.
background-size: cover skaliert das Hintergrundbild so, dass in jedem Fall so, dass der gesamte Hintergrundbereich komplett bedeckt wird. Das kann - abhängig von den Bildproportionen - dazu führen, dass ein Teil des Bildes nicht sichtbar ist.
Hier zwei Beispiele
(Das Blumenbild für den Hintergrund finden Sie unter: blumen.pnghttp://stellatest.de/anleitungen/css/blumen.png)
Die Eigenschaft background-origin bestimmt, an welcher Stelle das Bild positioniert wird.
.bgcontentbox
{
border: 10px solid black;
padding: 15px;
background: url(blumen.png);
background-repeat: no-repeat;
background-origin: content-box;
background-position: right;
background-color: #ffff00;
background-clip: content-box;
}
Wird kein Hintergrundbild sondern eine Hintergrundfarbe verwendet, legt background-clip fest, wo die Hintergrundfarbe positioniert wird.
Folgende Werte können verwendet werden: