Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- htmlcss:html_css_lektion_07 [31.08.2014 11:16] – angelegt Stefan Gaum
+++ htmlcss:html_css_lektion_07 [24.10.2014 13:24] (aktuell) – Stefan Gaum
@@ Zeile 1: / Zeile 1: @@
 ~~NOTOC~~
-====== Lektion 7:  ======
+[[htmlcss:html_css_lektion_06|=> Lektion 6: DIVs als gruppierende Elemente]]
+====== Lektion 7: Attribute in HTML sprechen Selektoren im CSS an ======
@@ Zeile 7: / Zeile 8: @@
 ...zur Layoutgestaltung mit CSS:
+In der HTML-Datei muss man entsprechend kennzeichnen, welche Stil-Elemente man verwenden möchte. Dafür gibt es verschiedene Attribute, welche in den [[htmlcss:html_css_lektion_02|=> Tags]] eingetragen werden.
    - ''id''
@@ Zeile 16: / Zeile 18: @@
      * Bsp.: ''class="anmerkung"'' oder ''class="topmenue"'' oder beide ''class="topmenue anmerkung"''
    - ''style'' -> siehe Übung in [[htmlcss:html_css_lektion_05|=> Übung in Lektion 5]]
 ===== Selektoren im CSS =====
 Mit Selektoren werden css-Angaben zugeordnet. Die Deklarationen eines Selektors stehen in einer geschweiften Klammer.
+=== Vordefinierte Selektoren des HTML im CSS verändern ===
+   h1 {
+     text-align:right;
+   }
@@ Zeile 30: / Zeile 37: @@
 -> alle Abschnitte werden mit hellrotem Hintergrund, zentrierter Ausrichtung und Textgröße 80% dargestellt:
+=== Neue Selektoren definieren und einsetzen ===
-=== Man kann auch neue Selektoren definieren: ===
 ein ''id''-Selektor wird mit einer //Raute// **''#''** eingeleitet:
@@ Zeile 47: / Zeile 52: @@
    }
-Mögliche Anwendung (externes CSS):
+   .divs {
+     text-align:center;
+     border:solid;
+     background-color:green;
+   }
+==== 2 Anwendungsbeispiele ====
+Mögliche Anwendung (**externes CSS**):
    <p> ein Text mit <span class="textmarkergelb">Textmarker</span> markiert.</p>
 gleichbedeutend mit der unschönen Variante
    <p> ein Text mit <span style="background-color:yellow;">Textmarker</span> markiert.</p>
-welches in HTML definiert wird und das Layout vom Inhalt nicht trennt.
+welches **in HTML** definiert wird und das Layout vom Inhalt nicht trennt.
+{{  :work.png|}}
+===== Übung 9 =====
+  * Wie verändert sich deine HTML-Datei aus Lektion 6, wenn du die Klasse ''.divs'' mit einbindest.
+  * Du musst die entsprechende CSS-Datei im ''head'' der HTML-Datei einbinden!
+  * Was passiert mit der Hintergrundfarbe?
+<note tip>Für die nächste Übung solltest du die bisherigen CSS-Informationen verstanden haben!</note>
 {{  :htmlcss:work_64.png|}}
-===== Übung =====
-Nimm den Quellcode aus dem {{:htmlcss:bsptextds3.html|Textbeispiel}} bearbeite folgende Aufgaben:
+===== Übung 10 =====
-  - Betrachte den Quelltext (rechte Maustaste "Seitenquelltext anzeigen") der Beispielseite in deinem Browser und speichere den Inhalt in einer neuen HTML-Datei.
+Nimm den Quellcode aus dem {{:htmlcss:bsptextds3.html|Textbeispiel}} und bearbeite folgende Aufgaben:
+  - Betrachte den Quelltext (im Browser: rechte Maustaste "Seitenquelltext anzeigen") der Beispielseite und speichere den Inhalt in einer neuen HTML-Datei ab oder lade die Datei entsprechend herunter. Nenne die Datei ''textbeispiel.html''.
   - Ersetze die ''style''-Anweisung im ''head'' durch einen Link auf eine von dir erstellte CSS-Datei, übernehme den vorgegebenen Deklarationsblock zum Seitenbereich.
-  - Ersetze auch die ''style''-Anweisungen im ''body'' mit eigens erstellten Selektoren.
+  - Ersetze auch die ''style''-Anweisungen im ''body'' mit eigens erstellten Selektoren in der CSS-Datei, so dass sich das Layout zunächst nicht ändert.
-  - Erstelle weitere Selektoren inklusive Deklarationsblock, so dass du die Textabschnitte hellgrün(lightgreen) und orangerot(orangered) einfärben kannst -> beachte, dass du die Abschnitte ggf. neu gruppieren musst und die Farben im [[http://html-color-codes.info/webfarben_hexcodes/|Hexacode]] schreibst.
+  - Erstelle weitere Selektoren inklusive Deklarationsblock, so dass du die Textabschnitte hellgrün(lightgreen) und orangerot(orangered) einfärben kannst => beachte, dass du die Abschnitte ggf. neu gruppieren musst und die Farben stets im [[http://html-color-codes.info/webfarben_hexcodes/|Hexacode]] schreibst, um Fehlermeldungen zu vermeiden.
   - Verwende nun auch den SPAN-Tag und markiere wichtige Textpassagen mit Textmarker (andere Farbe als die Hintergrundfarbe des Textes).
+----
+[[htmlcss:html_css_lektion_08|=> Lektion 8 - Besonderheiten der Positionierung]]\\
+[[htmlcss:start|=> Übersicht HTML und CSS]]