HTML und CSS/CSS

Aus ZUM-Unterrichten
Die Druckversion wird nicht mehr unterstützt und kann Darstellungsfehler aufweisen. Bitte aktualisiere deine Browser-Lesezeichen und verwende stattdessen die Standard-Druckfunktion des Browsers.

Jetzt kommt Farbe ins Spiel! Du kannst das Aussehen Deiner Webseite verändern!

Aufgabe
  1. Lies den Text!
    1. Erkläre kurz in eigenen Worten, wozu man CSS verwendet.
  2. Analysiere das untenstehende Code-Beispiel!
    1. Analysiere und übersetze Dir die verwendeten Eigenschaften.
    2. Informiere Dich bei SELFHTML über erlaubte Werte!
  3. Verschönere Deine Webseite!

CSS

Cascading Style Sheets (engl. für stufenförmige oder (hintereinander) geschachtelte Formatfestlegungen), kurz CSS genannt, sind eine deklarative Sprache für Stilvorlagen (engl. stylesheets). Sie dienen dazu bei Markup-Sprachen wie HTML und XMLWikipedia-logo.png-Sprachen wie SVG Inhalt und Präsentation voneinander zu trennen.

Der Inhalt eines HTML-Dokuments wird durch Elemente ausgezeichnet und strukturiert. Diese Elemente haben browsereigene Stile, z.B. ist die Standardschriftfarbe schwarz und Überschriften werden z.B. größer als Text in Absätzen angezeigt.

CSS (Cascading Style Sheets) ermöglicht eine eigene Formatierung für HTML-Elemente. Solche Eigenschaften können beispielsweise Farben, Schriftgrößen, Hintergrundfarben, Abstände, Schriftarten und das Layout festlegen.

Hier ein Vergleich: Links ohne CSS, rechts mit einer CSS-Beispielformatierung.

Ein HTML-Dokument ohne CSS Ein HTML-Dokument mit CSS

Syntax

Eine Regel besteht aus dem Selektor für das Element, auf das die Regel wirken soll und CSS-Regelsätzen, die in geschweiften Klammern stehen und durch Semikolons voneinander getrennt sind.

Ein CSS-Regelsatz besteht aus Eigenschaften, denen ein Wert zugewiesen wird.

Beispiel:

p {
  color: white;
  background-color: blue;
}

Das Beispiel würde den Hintergrund des Absatzes blau färben und die Textfarbe weiß. Weitere Informationen finden sich in den Weblinks.

Selektoren

Damit CSS-Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren. Als Selektoren bezeichnet man die Teile einer CSS-Regel, die vor dem Abschnitt aus geschweiften Klammern stehen. Voneinander unabhängige Selektoren, denen dieselben Eigenschaften zugewiesen werden, können mit Kommata getrennt werden.

einfacher Selektor { 
  CSS-Eigenschaft: Wert;
}
erster Selektor, 
zweiter Selektor { 
  CSS-Eigenschaft: Wert;
}

Selektoren

Universalselektor

Der Universalselektor trifft auf alle Elemente zu und kann daher zumeist einfach weggelassen werden. Die beiden folgenden Regeln sind bedeutungsgleich.

* { 
  margin: 0; 
}
    
{ margin: 0; }


Typselektor

Der Typselektor spricht Elemente anhand des Elementnamens an. Die Regel wird auf alle Elemente des entsprechenden Typs angewandt, egal an welcher Stelle des Dokuments sie notiert sind und welcher Klasse sie angehören oder welchen Bezeichner sie tragen.

p { 
  margin: 0; 
}


Klassen- und ID-Selektor

Das Universalattribut class können Sie für fast alle Elemente vergeben. Sie sprechen es mit CSS über den Klassenselektor an, indem Sie den Klassennamen mit einem führenden Punkt ohne Leerzeichen direkt hinter den einfachen Selektor setzten. Die Regel

p.hinweis { 
  color: red; 
}

spricht alle Elemente vom Typ p an, deren Attribut class den Wert hinweis enthält, beispielsweise folgende:

<p class="hinweis">Bitte füllen Sie alle mit einem Asterisk (*) markierten Felder aus.</p>

<p class="fehler hinweis">Es ist ein Fehler aufgetreten.<p>

Der Selektor .hinweis spricht alle Elemente der Klasse hinweis an, egal welchen Typs, und ist äquivalent zu *.hinweis.

Der folgende kombinierte Klassenselektor spricht Elemente an, die sowohl zur Klasse fehler als auch zur Klasse hinweis gehören:

.fehler,
.hinweis { 
  margin: 0; 
  color: red;
}

Das Universalattribut id hat in HTML-Dokumenten eine besondere Bedeutung, weil sein Wert pro Dokument nur ein Mal auftreten darf und Elemente mit diesem Attribut als Zielanker eines Links dienen können. Aus der zweiten Eigenschaft ergibt sich auch die Notation des ID-Selektors in CSS: Es wird eine Raute (#) vorangestellt:

ul#navigation { 
  margin: 0; 
}




Code-Beispiel

<style>
h1 { 
  color: red;
  padding-left: 20%;
}
h2 {
  background-color: skyblue;
  border: 1px solid blue;
  border-radius: 10px;
}
p {
  width: 10em;
}
</style>


Interaktive Übungen

Mit CSS können Sie die Gestaltung von Webseiten festlegen. Diese interaktiven Übungen eignen sich, um die Fachbegriffe zu lernen und zu wiederholen.

Warum CSS

Setze die passenden Begriffe ein:.

CSS ist eine deklarative Sprache, mit der das Aussehen   von Webseiten festgelegt werden kann. Nach dem Grundsatz der Trennung zwischen Inhalt und Präsentation ist HTML nur für die Auszeichnung des Inhalts zuständig.

Sie können CSS in einem style-Bereich im head oder besser in einem externen Stylesheet notieren. So können viele Webseiten auf ein zentrales Stylesheet zugreifen, das schnell geändert werden kann.

CSS-Regeln

Setze die passenden Begriffe ein:.

Eine CSS-Regel besteht aus einem Selektor, der bestimmte Elemente einer Webseite auswählt, die dann verändert werden.

Ihm folgt ein Regelsatz (oder mehrere) innerhalb einer geschweiften Klammer, bestehend aus einer Eigenschaft und dem dazugehörenden wert notiert sind.

Am Ende jedes Regelsatzes muss ein Semikolon stehen.

Eigenschaften

Ordne die CSS-Eigenschaften den Beschreibungen zu.

letter-spacing Abstand der Buchstaben
padding Innenabstand
der zur Breite/Höhe dazugezählt wird
margin Außenabstand
border Rand
der zur Breite/Höhe dazugezählt wird
outline Außenlinie
die nicht zur Breite/Höhe dazugezählt wird
color Textfarbe
background-color Farbe des Hintergrunds
width Breite
height Höhe
font-size Textgröße

Weblinks

  • Selfhtml-Wiki: CSS
Portalseite mit deutschsprachiger Dokumentation und vielen Tutorials
Sehr ansprechendes Tutorial
Eigentlich eine Seite zu einem Buch. Hier gibt es auch Tipps und ein Forum zu CSS.
CSS-Workshop, Eigenschaften, CSS-Referenz Level 1 und 2, Tipps und Tricks (seit 2005 nicht mehr aktualisiert)
Tricks zu CSS(3) (und Javacript) auf Englisch