~~NOTOC~~

[[htmlcss:html_css_lektion_06|=> Lektion 6: DIVs als gruppierende Elemente]]
====== Lektion 7: Attribute in HTML sprechen Selektoren im CSS an ======


===== Wichtige Attribute in HTML ... =====

...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''
     * identifiziert ein Element eindeutig und darf deswegen nur einmal pro Seite verwendet werden
     * Bsp.: ''id="header"'' oder ''id="foot"''
   - ''class''
     * klassifiziert Elemente, es darf mehrfach verwendet werden
     * ein Element kann durch mehrere Klassen ausgezeichnet werden
     * 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;
   }


   p {
     background-color:lightred;
     text-align:center;
     font-size:80%;   
   }
-> alle Abschnitte werden mit hellrotem Hintergrund, zentrierter Ausrichtung und Textgröße 80% dargestellt:

=== Neue Selektoren definieren und einsetzen ===

ein ''id''-Selektor wird mit einer //Raute// **''#''** eingeleitet:
   #topmenue {
     color: darkred;
     text-align:center;
     font-size:150%;
   }


ein ''class''-Selektor wird einem //Punkt// **''.''** eingeleitet:
   .textmarkergelb {
     background-color:yellow;
   }

   .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.


{{  :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 10 =====

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 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 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]]