inf-schule | Formatierung mit CSS » Eigenschaften und Werte

Eigenschaften und Werte

Es gibt sehr viele CSS-Eigenschaften und mögliche Werte dazu, ein paar davon lernst du unten auf dieser Seite kennen.

Aufgabe

Gestalte den Steckbrief nach deinen Vorstellungen.
Unter dieser Aufgabe stehen verschiedene Werte, die du verwenden kannst.

Schriftgröße

Bei den Schriftgrößen hast du schon absolute Werte, wie x-small, kennen gelernt. Man kann die Schriftgröße allerdings auch mit Pixeln, z.B. 12px (was bei mobiler Ansicht allerdings sehr ungünstig ist), oder Prozent angeben:

Absolut:	`font-size: small;`	`font-size: medium;`	`font-size: large;`
Pixel:	`font-size: 12px;`	`font-size: 20px;`	`font-size: 36px;`
Prozent:	`font-size: 100%;`	`font-size: 80%;`	`font-size: 200%;`

Schrifteffekt

Bei den Schrifteffekten, hast du zum Beispiel bold (= fettgedruckt) kennen gelernt. Man kann diese auch numerisch (mit Zahlen) angeben. Dabei entspricht der Wert 700 dem Wert bold.

Absolut:	`font-weight: lighter;`	`font-weight: normal;`	`font-weight: bold;`
Numerisch:	`font-weight: 200;`	`font-weight: 400;`	`font-weight: 900;`

Schriftfamilie

Bisher wurde in unserem Editor eine Schrift mit Serifen, das sind diese kleinen Häkchen an den Buchstaben, verwendet. Man kann allerdings auch serifenlose Schriftarten oder andere Schriftfamilien auswählen.

`font-family: serif;`	Mein Text
`font-family: sans-serif;`	Mein Text
`font-family: cursive;`	Mein Text
`font-family: fantasy ;`	Mein Text
`font-family: monospace ;`	Mein Text

Farbangaben

Farben kann man mit dem englischen Farbnamen, z.B. yellow angeben. In dem Kapitel Alle meine Farben hast du auch Farbangaben im RGB Format kennen gelernt, so kann man diese hier auch angeben:

Farbnamen:	`color: purple;`	`color: lightgreen;`	`background-color: red;`
RGB-Werte:	`color: rgb(120,180,120);`	`color: rgb(150,60,0);`	`color: rgb(80%,20%,0%);`

Weitere Farbangaben findest du hier.

←Zurück Weiter→