Benutzer-Werkzeuge

Webseiten-Werkzeuge


 [[htmlcss:html4.1]] 

View page as slide show

HTML/CSS Lektion 4

Lektion 5 - CSS Teil 2

Gruppierende Elemente in HTML

Um Bereiche in HTML zu begrenzen, bzw. mehrere Elemente zusammen zu fassen, werden die beiden Tags DIV und SPAN verwendet. Zusammen mit css-Elementen wird ihr Einsatz klar.

Teste folgende Beispiele selbst aus, um zu erkennen, wie div und span funktionieren. Dir wird dann sicher auch bewusst, was mit Block-Element bzw. mit Inline-Element gemeint ist.

Beispiel: Block-Element DIV

 <div style="background-color:lightgrey;">
   <h1> Überschrift </h1>
   <p> Textabsatz </p>
 </div>

Beispiel: Inline-Element SPAN

 <p> ein Text mit <span style="background-color:yellow;">Textmarker</span> markiert.</p>
 

Es ist allerdings unschön, die style-Attribute in HTML zu verwenden, da es dem Prinzip der Trennung von Inhalt und Layout widerspricht. Vgl. Übung in Lektion 4

Im Folgenden werden wir style nicht weiter verwenden und mit den nun vorgestellten Attributen id und class arbeiten.

Wichtige Attribute in HTML ...

…zur Layoutgestaltung mit CSS:

  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 Lektion 4

Selektoren im CSS

Mit Selektoren werden css-Angaben zugeordnet. Die Deklarationen eines Selektors stehen in einer geschweiften Klammer.

 p {
   background-color:lightred;
   text-align:center;
   font-size:80%;   
 }

→ alle Abschnitte werden mit hellrotem Hintergrund, zentrierter Ausrichtung und Textgröße 80% dargestellt:

Man kann auch neue Selektoren definieren:

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;
 }

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

Nimm den Quellcode aus dem Textbeispiel bearbeite folgende Aufgaben:

  1. Betrachte den Quelltext der Beispielseite in deinem Browser und speichere den Inhalt in einer neuen HTML-Datei.
  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.
  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.
  5. Verwende nun auch den SPAN-Tag und markiere wichtige Textpassagen mit Textmarker (andere Farbe als die Hintergrundfarbe des Textes).

Abschlussübung HTML

 [[htmlcss:html4.1]] htmlcss/html4.1.txt · Zuletzt geändert: 2011/10/18 10:34 von gaum