Atttribute in CSS
CSS bietet ein Vielzahl an Befehlen. Hier soll dir nur ein Überblick über ausgewählte Befehle gegeben werden. Klickst du auf die Überschrift, kommst du auf selfhtml.org, wo du noch viel mehr Befehle findest. Deiner Fantasie sind (fast) keine Grenzen gesetzt!
Im Folgenden findest du zuerst eine Übersicht mit vielen Attributen und Attributwerten.
Danach findest du wichtige Erklärungen zu numerischen Angaben und Farben.
Übersicht
Schriftformatierung
Attribut | Attributwerte |
---|---|
font-family | serif (Serifenschrift), sans-serif (serifenlose Schrift) Spezielle Schriftnamen gehen auch, diese sind aber nicht auf jeden Rechner installiert (Times New Roman nur auf Windows) |
font-size | xx-small , x-small , small , medium , large , x-large , xx-large numerischer Wert |
color | Farbe |
Aufgabe
Textformatierung
Attribut | Attributwerte |
---|---|
text-transform | capitalize , Wortanfänge als Großbuchstaben, alle anderen Buchstaben werden nicht verändert.uppercase , nur Großbuchstaben lowercase , nur Kleinbuchstabennone , keine Text-Transformation |
Aufgabe
Textausrichtung
Attribut | Attributwerte |
---|---|
text-align | justify (Blocksatz)center (für zentrierte Ausrichtung)right (für rechtsbündige Ausrichtung)left (für linksbündige Ausrichtung)(gilt auch für Bilder) |
Aufgabe
äußere Gestaltung
Um hier als Experte agieren zu können, empfiehlt es sich diesen Artikel schon vorab zu lesen.
Attribut | Attributwerte |
---|---|
border-style | none (kein Rahmen bzw. unsichtbarer Rahmen)dotted (gepunktet)dashed (gestrichelt)solid (durchgezogen) |
border-color | Farbe |
border-width | thin (dünn),medium (mittelstark),thick (dick)Numerische Angabe |
Aufgabe
Wende die obigen Attribute auf den gegebenen Text an.
Hintergrundfarben und -bilder
Attribut | Attributwerte |
---|---|
background-image | url( Adresse zum Bild, wie bei img) |
background-color | Farbe |
Aufgabe
Öffne den Editor und färbe den Hintergrund in deiner Lieblingsfarbe ein.
Aufgabe
Experten: Probiere eine RGBA-Farbe aus. Was unterscheidet diese von den bisherigen Farben?
Experten: Ein Hintergrundbild wird mit background-image
festgelegt. Es lassen sich noch deutlich mehr Einstellungen festlegen:
body {
background-image: url("../img/backdrop1.jpg");
background-blend-mode:overlay;
background-size: 100%;
background-color: #c2f0f0;
background-repeat: no-repeat;
background-position:0px 66px;
}
Aufgabe
Ermittle, was die jeweiligen Attribute bewirken.
Animation
Dieser Bereich ist für Experten. Hier wird es deutlich komplizierter und rückt teilweise schon stark in die Nähe von Programmierung.
Aufgabe
Arbeite dich nach eigenen Ermessen in die Thematik ein. Viel Erfolg!
Farben
Am einfachsten ist es, wenn du den englischen Namen der Farbe kennst, dann kannst du diesen direkt verwenden.
Wie du schon gelernt hast, setzen sich Farben auf dem Bildschirm nach dem RGB-Modell zusammen. Das sind die 3 Grundfarben Rot, Grün und Blau. Jede Grundfarbe kann Werte von 0
bis 255
annehmen (Vielleicht erinnerst du dich sogar, dass 8 Bit als 1 Byte sind.)
Details
Farben kannst du dir z.B. mit einem Color-Picker gut raussuchen.
Die Farbe wird dabei je Grundfarbe angegeben: rgb(153,68,0)
. Kürzer ist die Angabe #de5410
, dabei wird die Farbe nicht dezimal, sondern hexadezimal geschrieben (Das #-Zeichen markiert dies) #RRGGBB
sind dabei die Farben.
Beispiel
numerische Angaben
In HTML-Webseiten gibt es neben festgelegten Größen 3 verschiedene Maßeinheiten:
Zahl in den Einheiten px
(Pixel), em
(x-fache Standardschriftgröße), %
(von der Standardschriftgröße)
Beispiel
Super! 🥳 Du hast die Grundlagen in CSS gelegt.
Aufgabe
Wende all dein Wissen und Geschick aus den vorangegangenen Kapiteln auf das Erstellen einer Filmwebseite in Aufgabe 8 und 9 an.