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

(https://eule27.de/t/8Vr8m)

Textformatierung

Attribut	Attributwerte
text-transform	capitalize, Wortanfänge als Großbuchstaben, alle anderen Buchstaben werden nicht verändert. uppercase, nur Großbuchstaben lowercase, nur Kleinbuchstaben none, keine Text-Transformation

Aufgabe

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

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

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

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.