htmlcss:html_css_lektion_07 - Informatik 2015

=> 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 => Tags eingetragen werden.

  1. id
    • identifiziert ein Element eindeutig und darf deswegen nur einmal pro Seite verwendet werden
    • Bsp.: id=„header“ oder id=„foot“
  2. 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“
  3. style → siehe Übung in => Ü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.

Ü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?

Für die nächste Übung solltest du die bisherigen CSS-Informationen verstanden haben!

Übung 10

Nimm den Quellcode aus dem Textbeispiel und bearbeite folgende Aufgaben:

  1. 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.
  2. Ersetze die style-Anweisung im head durch einen Link auf eine von dir erstellte CSS-Datei, übernehme den vorgegebenen Deklarationsblock zum Seitenbereich.
  3. Ersetze auch die style-Anweisungen im body mit eigens erstellten Selektoren in der CSS-Datei, so dass sich das Layout zunächst nicht ändert.
  4. 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 Hexacode schreibst, um Fehlermeldungen zu vermeiden.
  5. Verwende nun auch den SPAN-Tag und markiere wichtige Textpassagen mit Textmarker (andere Farbe als die Hintergrundfarbe des Textes).

=> Lektion 8 - Besonderheiten der Positionierung
=> Übersicht HTML und CSS

Drucken/exportieren