Lektion 7: CSS - Einführung | Wie designe ich meine eigene Homepage? |

Este vídeo pertenece al curso Wie designe ich meine eigene Homepage? de openHPI. ¿Quiere ver más?

Lektion 7: CSS - Einführung

Duración: aproximada 20 minutes

An error occurred while loading the video player, or it takes a long time to initialize. You can try clearing your browser cache. Please try again later and contact the helpdesk if the problem persists.

Scroll to current position

00:00Beim letzten Mal haben wir euch gezeigt,
00:01wie ihr in CSS Elemente aus einem HTML-Dokument auswählen könnt
00:05und wie ihr den Hintergrund verändern könnt.
00:07Jetzt wollen wir euch noch mehr zeigen, was man mit CSS so machen kann.
00:10Dabei beginnen wir mit den Schriften.
00:13Bei den Schriften kann man zum Beispiel die Schriftgröße mit font-size ändern
00:17oder die Schriftart mit font-family.
00:19Genau, das zeigen wir euch direkt am Beispiel.
00:22Machen wir zuerst mal die Webseite vom letzten Mal auf.
00:26Da sehen wir, hier haben wir eine Überschrift erster Ordnung und hier eine zweiter Ordnung.
00:32Und wir verändern jetzt deren Aussehen im CSS Dokument.
00:36Dazu wollen wir zunächst einmal die Überschrift erster Ordnung anpassen.
00:40Das heißt, wir wählen h1 aus und schreiben jetzt hier
00:44in die geschweifte Klammer, was damit passieren soll.
00:47Zunächst einmal ändern wir die Schriftgröße,
00:50schreiben dazu font-size und können nun angeben,
00:53wie groß die Überschrift sein soll.
00:55In unserem Beispiel wählen wir 50 Pixel und ihr
00:58seht, wie die Schrift jetzt größer geworden ist.
01:01Außerdem können wir auch die Schriftart ändern. Das machen wir mit font-family.
01:09Und dort können wir jetzt unterschiedliche Schriftarten ändern,
01:12wie ihr sie vielleicht auch von anderen Programmen kennt.
01:15Zum Beispiel Arial, in einfachen Anführungszeichen geschrieben, und ihr seht,
01:21jetzt hat sich die Schriftart von der Überschrift verändert.
01:26Weitere Einstellungen, die man machen kann, sind,
01:29dass man die Farbe von der Schrift ändert mit
01:31color oder dass man den font-style ändert,
01:36indem man zum Beispiel die Schrift schräg schreibt, also kursiv.
01:41Das zeigen wir auch direkt.
01:43Ich geh wieder ins CSS-Dokument zu unserer Webseite, wie sie denn aussieht.
01:48Mit color kann man, wie gesagt, die Farbe der Schrift verändern.
01:53Brackets schlägt euch immer schon eine Liste von bekannten Farbwörtern vor,
01:57da können wir jetzt einfach mal eine auswählen,
01:59zum Beispiel aqua und ihr seht eure Schrift hat die Farbe geändert.
02:05Außerdem können wir auch den Style verändern und damit jetzt
02:10zum Beispiel eure Überschriften alle kursiv schreiben.
02:17Und zwei andere Änderungen, die man machen kann, ist z.B. mit font-weight,
02:22dass man die Schriftstärke ändert,
02:24also dass man die Schrift fett schreibt oder mit font-variant,
02:28dass man zum Beispiel bei der Schriftvariante small-caps einstellt,
02:33das heißt, dass eure Kleinbuchstaben wie Großbuchstaben geschrieben werden,
02:37aber in einer kleineren Größe als die eigentlichen Großbuchstaben.
02:41Klingt verwirrend vielleicht jetzt, aber das zeigt euch jetzt Amadeus.
02:44Und das gucken wir uns jetzt am besten am Beispiel an.
02:48Zunächst einmal tippen wir font-weight. Dort könnt ihr auch Zahlen angeben,
02:56aber wir verwenden jetzt einfach mal das Wort lighter und ihr seht,
03:02eure Überschrift ist jetzt nicht mehr ganz so fett gedruckt.
03:05Außerdem auch noch die font-variant und dann sehen wir,
03:11jetzt haben wir zur Auswahl small-caps und ihr seht in der Überschrift
03:16sind jetzt die Kleinbuchstaben ersetzt durch Großbuchstaben,
03:18die aber kleiner geschrieben sind.
03:20Das war es zu Schriften. Jetzt kommen wir zur Textgestaltung.
03:23Und bei der Textgestaltung kann man z.B. den Text
03:27unterstreichen oder durchstreichen oder blinkend machen.
03:32Und das zeigen wir euch jetzt erst mal mit text-decoration.
03:35Damit wieder ins CSS-Dokument. Und wir verändern jetzt mal die andere Überschrift.
03:44Dazu wählen wir h2 aus und ändern die text-decoration.
03:51Und wir können diese z.B. einmal überstreichen,
03:59um diese auf eine besondere Art und Weise hervorzuheben, d.h.
04:03ihr seht hier oben ist jetzt ein Strich über der Überschrift.
04:07Andererseits gäbe es natürlich auch underline, um sie ganz normal zu unterstreichen.
04:14Was man als Nächstes machen kann, ist, den Text ausrichten.
04:18Bei uns wird das jetzt standardmäßig erst mal links ausgerichtet.
04:21Aber das können wir jetzt z.B. ändern, dass wir das rechts ausrichten mit text-align.
04:27Dazu schreiben wir text-align, ich habs mir anders
04:34überlegt, wir ändern das jetzt in dem Textabsatz,
04:37dadurch sehen wir ein bisschen mehr davon.
04:39Das heißt wir schreiben p, um die Textabsätze zu verändern in ihrer Formatierung
04:44und schreiben jetzt text-align und können diese jetzt zum Beispiel zentrieren
04:49und ihr seht jetzt hat sich der Text zentriert auf eurer Webseite.
04:55Als Nächstes kann man den Zeichenabstand der Buchstaben ändern, d.h.
05:00sozusagen der Abstand zwischen den Buchstaben der kann breiter werden,
05:05wenn das nötig ist. Das kann man mit letter-spacing machen.
05:08Genauso kann man aber auch den Abstand zwischen den einzelnen Wörtern ändern,
05:12das kann man mit word-spacing machen. Beides zeigen wir euch jetzt mal.
05:18Dazu bearbeiten wir jetzt weiter den Textabsatz.
05:21Ich habe hier ein Semikolon vergessen, das solltet ihr nicht tun.
05:25Zunächst einmal ändern wir das letter-spacing,
05:28um den Buchstabenabstand zu vergrößern und
05:30wählen jetzt einfach mal einen größeren Abstand,
05:33z.B. 10 Pixel. Und ihr seht, jetzt sind alle
05:36Buchstaben ein bisschen weiter auseinandergerückt.
05:38Dadurch ist es jetzt vielleicht ein bisschen
05:40schwerer, die einzelnen Wörter zu erkennen.
05:42Deshalb ändern wir gleich noch das word-spacing und
05:47setzen das auf einen noch höheren Wert und ihr seht,
05:51jetzt sind die Wörter auch noch ein Stück auseinandergerückt.
05:55Zwei weitere Einstellungen, die man noch machen kann,
05:58ist z.B. den Zeilenabstand zu ändern mit line-height
06:02oder die Texteinrückung zu verändern.
06:09Und das macht man mit text-indent und das zeigen wir euch jetzt auch mal.
06:16Dazu machen wir wieder die Webseite auf und wir
06:20ändern jetzt zunächst einmal die line-height
06:25und können jetzt wieder den Abstand auswählen, der uns gefällt, zum Beispiel 30 Pixel.
06:36Und das Letzte, was man machen könnte, wäre dann die Schriftart zu ändern.
06:41Großgeschrieben, kleingeschrieben, und das macht man mit text-transform.
06:50Das können wir auch direkt noch zeigen.
06:53Das heißt, wir schreiben text-transform und können jetzt z.B. capitalize auswählen.
07:02Damit sind jetzt alle Anfänge von den Wörtern groß geschrieben.
07:06Das können wir uns jetzt auch noch mal angucken, wie sich das verändert,
07:09indem ich es noch mal kurz raus lösche.
07:10Damit sind jetzt zum Beispiel die ganzen "Sind"s im Text
07:13kleingeschrieben und wenn ich das dann wieder hinzufüge,
07:18dann werden diese ganzen Sind's z.B. auch groß geschrieben.
07:26Das wars dann erst mal zur Textgestaltung. Und das nächste sind Rahmen.
07:33Wir hatten ja in der vorigen Lektion uns einzelne Blöcke definiert
07:38und man kann diesen Blöcken einen Rahmen geben. Dafür gibt es die Eigenschaft border.
07:47Und dort kann man entweder alles auf einmal schreiben,
07:51dann schreibt ihr als erstes die Farbe, z.B. in rgb,
07:54dann schreibt er die Borderbreite in Pixel zum Beispiel und danach schreibt ihr,
08:01wie dieser Rahmen aussehen soll.
08:03Da seht ihr jetzt rechts auf der Folie über der
08:06Spinne, welche Einstellungen man da machen kann.
08:08Da kann man solid für durchgezogen machen oder double
08:12für eine doppelte Linie oder dotted für gepunktet.
08:16Natürlich kann man auch alle Einstellungen einzeln machen.
08:19Das heißt, ihr schreibt erst border-color: und setzt dann den Farbwert,
08:23dann border-width: und setzt den Wert oder border-style: und setzt dann den Wert.
08:28Das zeigen wir euch jetzt erst mal.
08:32Dazu wieder in Brackets. Und wir ändern jetzt einfach mal
08:37die entsprechenden Eigenschaften für das Textelement.
08:43Und setzen zunächst einmal die Rahmenbreite,
08:49also die border-width und wählen dort jetzt einen Wert,
08:52z.B. 2 Pixel und außerdem setzen wir noch die border-color
09:01und können da zum Beispiel jetzt black auswählen
09:05und außerdem noch den border-style und wir wählen
09:15jetzt dort einfach double aus und damit seht ihr,
09:24hat euer Textelement einen Rahmen bekommen,
09:26wir können hier auch noch unterschiedliche Varianten ausprobieren,
09:29z.B. dotted, jetzt seht ihr einen gepunkteten Rahmen
09:33und wir können auch die Breite von dem Rahmen noch mal verändern,
09:37damit habt ihr jetzt dickere Punkte und ihr könnt auch hier die Farbe wieder ändern,
09:42z.B. zu rot und damit habt ihr einen roten Rahmen.
09:48Und wie gesagt, man kann auch alles in eine Zeile schreiben.
09:57Dann muss man natürlich auch alles angeben.
09:59Des Weiteren kann man auch einzeln zugreifen.
10:03Man kann einzeln auf den Rahmen oben zugreifen, den
10:06Rahmen rechts, den Rahmen links, den Rahmen unten.
10:10Dafür schreibt man dann border-top und dahinter
10:15dann auf welche Eigenschaft man zugreifen möchte,
10:19also dann -style, -width oder -color. Und das zeigen wir euch jetzt auch mal.
10:25Dazu verändern wir einmal das Erscheinungsbild von der oberen Linie.
10:36Dazu wählen wir border-top und verändern dort jetzt
10:42zum Beispiel den Style und setzen den auf solid,
10:48so dass wir dort eine ganz normale Linie durchgezogen haben.
10:54Und das nächste ist, ihr habt gesehen, der Rahmen ist eckig,
10:58man kann natürlich auch einen runden Rahmen machen.
11:00Dafür schreibt ihr border-radius und dort schreibt
11:03ihr dann einen Wert hin wie 20 Pixel oder so.
11:05Dann bekommt ihr runde Ecken, die sozusagen
11:09in x und in y Richtung jeweils 20 Pixel sind.
11:13Das können wir auch direkt zeigen, d.h. wir schreiben weiter,
11:22border-radius und wählen jetzt z.B. 5 Pixel, ich mache es mal bisschen größer,
11:30damit man es deutlicher sieht, 20 Pixel und ihr seht,
11:33jetzt sind die Ecken von dem Rahmen abgerundet.
11:37Das wars zu den Spielereien mit Rahmen. Als Nächstes zeigen wir euch das Box-Modell.
11:43Ihr seht da bei der Spinne eine ganz gute Grafik.
11:46In der Mitte habt ihr sozusagen den Inhalt, danach
11:49habt ihr das padding, also den Innenabstand,
11:53danach den Rahmen mit border, das haben wir euch ja grade gezeigt
11:58und danach wäre dann der Außenabstand, den man einstellen kann mit margin.
12:04Und das zeigen wir euch jetzt erst mal.
12:06Anzumerken ist, wenn ihr das einstellt, könnt ihr
12:09immer die Höhe und die Breite mit angeben.
12:12Dazu bearbeiten wir jetzt einfach weiter unser Textfeld.
12:21Und können jetzt zum Beispiel einmal das padding angeben
12:25und können dort jetzt einfach nur einen Wert angeben,
12:31der dann auf alle Richtungen gleichmäßig angewendet
12:34wird, zum Beispiel 50 Pixel und ihr seht jetzt,
12:38der Abstand von dem Text innen zu dem Rahmen ist jetzt größer geworden.
12:43Außerdem kann man noch den margin angeben.
12:49Dazu wähle ich jetzt eine andere Zahl und ihr werdet sehen,
12:56dass man vielleicht nicht so viel davon sieht.
12:58Doch, der Abstand zu den anderen Elementen hat sich vergrößert.
13:01Ich wollte es noch mal bisschen größer machen,
13:03damit man es noch einmal deutlicher sieht.
13:04Damit hat sich jetzt der Rahmen von der Überschrift noch weiter abgehoben.
13:11Und man kann halt die Rahmenhöhe und die Rahmenbreite auch angeben mit height / width.
13:19Und das zeigen wir euch jetzt auch noch mal.
13:26Im Moment wird die Größe von dem Textfeld automatisch angepasst.
13:30Das könnt ihr jetzt beeinflussen, indem wir z.B. die width eingeben, z.B. 300 Pixel.
13:40Aber das würde ich nicht machen. Wir sollten das im Vollbildmodus machen.
13:45Die Sache ist, 300 Pixel ist zu schmal, um hier alle Wörter reinzukriegen.
13:52Ihr solltet da auf jeden Fall aufpassen, dass das wirklich zu eurer Webseite passt,
13:57wenn ihr die Breite fix angebt.
14:00Ansonsten könnt ihr das auch einfach rauslassen
14:04und dann wird der Inhalt entsprechend angepasst,
14:08so dass alles reinpasst.
14:11Als Nächstes könnt ihr die Deckkraft zum Beispiel anpassen von eurem Rahmen oder von eurer Schriftfarbe.
14:23Bei 0 seht ihr keinen Text mehr, weil die Deckkraft nicht existiert.
14:28Bei 1 seht ihr Text, also könnten wir jetzt beispielsweise mal zur Hälfte einstellen mit opacity.
14:38Dazu schreiben wir opacity und wählen jetzt einen Wert zwischen 0 und 1,
14:45also zum Beispiel 0,5 und ihr seht, der ganze Textbereich ist jetzt etwas blasser geworden
14:51und wenn dahinter sich noch andere Elemente befinden würden,
14:55könnte man die jetzt leicht durchsehen.
14:59Als Nächstes könnte man einen Schatten dem Text geben oder der Box.
15:06Dazu müsst ihr mit x und y angeben, in welche Richtung ihr das haben wollt.
15:11Wenn x und y positiv sind, heißt das standardmäßig nach rechts und nach unten.
15:16Ihr könnt die natürlich auch negativ einstellen.
15:18Wenn beide jetzt negativ wären, heißt das nach links und nach oben soll der Schatten sein.
15:22Mit Übergang ist gemeint, dass ihr einstellen könnt,
15:26wie stark der Schatten ist, also je höher ihr das einstellt,
15:29desto weicher ist der Übergang und desto blasser.
15:32Und mit Farbe könnt ihr sogar die Schattenfarbe angeben.
15:37Das zeigen wir euch jetzt mal.
15:41Zunächst einmal nehme ich die opacity Veränderung raus,
15:47das wir unser Textelement schön deutlich sehen können.
15:49Und jetzt stellen wir einmal den box-shadow ein.
15:53Zunächst einmal der Versatz nach rechts, da können wir zum Beispiel 3 Pixel wählen,
16:00nach unten verschiebe ich den jetzt auch um 3 Pixel und wir sehen schon,
16:06wir haben da jetzt einen Schatten bekommen, den man unten rechts als schwarzen Bereich erkennen kann.
16:12Man kann den jetzt noch etwas weicher verblenden lassen, z.B. über einen Bereich von 5 Pixeln
16:20oder um es deutlicher zu zeigen über 10 Pixel und ihr seht,
16:25der ist jetzt so leicht verschwommen nach außen und sieht ein bisschen weicher aus.
16:29Ihr könnt jetzt die Farbe noch verändern, standardmäßig ist jetzt gerade schwarz.
16:33Ihr könnt aber auch beliebige andere Farben wählen,
16:36z.B. rot, damit habt ihr jetzt einen roten Schatten für die Box.
16:44Und wir hatten ja in unserem Ausgangselement jetzt,
16:48in unserem Ausgangs-HTML-Dokument, eine nummerierte Liste.
16:53Dort stand jetzt 1, 2, 3, 4 und jeweils Apfel und wir können das jetzt auch ändern,
16:59indem wir aus dieser nummerierten Liste eine unsortierte machen.
17:02Und dann diese Listenpunkte, die dort angezeigt werden, ersetzen durch ein Bild.
17:09Wir haben da so eine Sterndatei vorbereitet und wir ersetzen jetzt die Punkte damit.
17:15Da unten ist die Liste, über die wir gerade geredet haben.
17:21Das ist im Moment eine nummerierte Liste, d.h. es stehen da Zahlen davor.
17:27Das wollen wir zunächst mal ändern, dass das eine unnummerierte Liste ist,
17:32d.h. nur solche Aufzählungszeichen davor sind.
17:36D.h. wir ändern jetzt im HTML Dokument das ol zu ul natürlich auch einem schließenden Tag.
17:44Wir sehen zunächst erst mal hat sich die Liste zu einer unnummerierten Liste verändert.
17:49Jetzt können wir anpassen, wie unnummerierte Listen bei uns aussehen.
17:54Dazu wählen wir im CSS 'ul' aus und können jetzt dort mit list-style die URL angeben.
18:04Zunächst einmal schreiben wir list-style, um den list-style zu verändern,
18:09wir können auch erst mal 'none' auswählen, dann würden die Aufzählungszeichen verschwinden.
18:15Man gibt dann die url an wie beim Bild und dann Klammer auf und dort den Dateipfad.
18:25Und dort haben wir eine Datei vorbereitet, das ist stern.png und wir sehen,
18:31jetzt wurden die einzelnen Aufzählungszeichen durch Sternchen ersetzt.
18:36Und das wars schon zu dieser Lektion. Ich empfehle euch,
18:40dass ihr einfach das jetzt selber ausprobiert,
18:42euch durchprobiert und Spaß daran haben werdet.
18:45Wir sehen uns dann in der nächsten Lektion.

Sobre este vídeo

In dieser Lektion bekommt ihr weitere Möglichkeiten mit CSS gezeigt.