Teil 2
Es tut mir wirklich leid:
Der Webeditor ist leider nicht in der lage,
HTML-ELemente als Code darzustellen.
Leider werden alle HTML-Elemente vom Editor autmatisch
in die Seite eingebunden und nicht als text dargestellt.
Falls es hilft:
Ich habe den Inhalt der Seite trotz extremer Unübersichtlichkeit
nicht gelöscht..
CSS ist eigentlich ziemlich leicht.ID-Elemente werden mit #name-der-id angesprochen,
Class-Elemente werden mit .name-der-klasse angesprochen.
Class-Elemente werden mit .name-der-klasse angesprochen.
Normale HTML-Elemente können so angesprochen werden: name-des-elements
Beispiel:
Test.html:
Dieser Text wird rot und Unterstrichen dargestellt
Test.css:
p {
color: red;
text-decoration: underline;
}
Beispiel 2:
Test2.html:
Dieser Text wird normal dargestellt
Dieser Text ist rot
Test2.css:
#bitterot {
color: red;
}
Beispiel 3:
Test3.html:
Großer Text
Kleiner Text
Normaler Text
Normaler Text
Tes3.css:
#container .gross {
font-size: 20pt;
}
#container .klein {
font-size: 8pt;
}
Erklärung:
Der Div-Container mit der ID "Container" enthält zwei Klassen: "gross" und "klein".
Der Text der Klasse "gross" wird in der Größe 20 Point dargestellt,
der Text der Klasse "klein" wird in der Größe 8 Point dargestellt, und
der Text ohne Klasse wird ganz normal dargestellt.
Außerhalb des Div-Containers befindet sich nochmal ein Text mit der Klasse "gross".
Warum wird dieser Text nicht groß dargestellt, sondern ganz normal?
Ganz einfach: Wir haben die Größe nur für die Klassen "gross" und "klein" innerhalb des Div-Containers angegeben. Außerhalb dieses Div-Contains verliert die Klasse "gross" ihre wirkung.
Beispiel 4:
Test4.html:
Großer Text
Kleiner Text
Normaler Text
Großer Text
Test4.css:
.gross {
font-size: 20pt;
}
.klein {
font-size: 8pt;
}
Nun wird auch der Text außerhalb des Div-Containers groß geschrieben.
Warum? Weil wir diesmal das #container weggelassen haben,
gilt die Formatierung der Klasse "gross" für das ganze Element
(Solange die Klasse "gross" nicht überschrieben wird).