Was ist CSS?

0 | 16820 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Was ist CSS?" mit Ihrem Wissen!

Anzeige Hier werben

CSS (Abkürzung für Cascading Style Sheets) ist eine Auszeichnungssprache mit der (X)HTML- Dokumente (Allgemein auch XML, z.B. OpenDocument) formatiert werden können.

Mit CSS verändert man die Darstellung bestimmter Elemente, indem man sie mittels eines Selektors auswählt und dann bestimmte Eigenschaften zuweist.

Vorteile

Die Verwendung von CSS bietet einige Vorteil gegenüber Formatierungen direkt im Dokument:

  • Trennung von Inhalt und Darstellung
  • Formatierung abhängig vom Ausgabemedium (Bildschirm, Druck, Handy, Sprache, Präsentation)

Aufbau

Eine CSS-Regel hat grob folgenden Aufbau:

 
css
1
2
3
4
5
selektor {
    name-einer-eigenschaft: wert;
    name-einer-weiteren-eigenschaft: wert2;
    ...
}

Der Selektor gibt an auf welche Elemente die Eigenschaften angewendet werden.

Die Eigenschaften sind zum Beispiel Farbe, Größe oder Position.

Warum man CSS nutzen sollte

Jede Internetseite soll ein ansprechendes Layout haben. Dazu zählt das Menü, der eventuell mehrspaltige Inhaltsbereich, graphische Boxen, der Footer oder jegliches anderes Element.

Um nun zum Beispiel die komplette Internetseite zu zentrieren wurde oft ein solches oder ähnliches Markup verwendet:

Tabelle zum zentrieren  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<html>
  <head>...</head>
  <body>
    <table width="100%" border="0">
      <td>&nbsp;</td>
      <td>
... Inhalt der kompletten Seite ...
      </td>
      <td>&nbsp;</td>
    </table>
  </body>
</html>

Jetzt haben sich schon etliche Schulklassen gefragt (und fragen sich immer noch): "Warum benötige ich für eine zentrierte Webseite Tabellen?"
Auch wenn Lehrer anderes weis machen wollen ist diese Frage sehr berechtigt - Wer tippt Texte schon mit Excel nur damit sie nicht am linken Seitenrand kleben?

In der Fachsprache redet man von einem semantisch inkorrektem Einsatz der Tabelle. Im Grunde kann man aber einfach sagen: Es werden keine tabellarischen Daten angezeigt, also macht eine Tabelle auch keinen Sinn.

Per CSS zentriert man eine Internetseite folgendermaßen:

CSS zum zentrieren  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<html>
  <head>
    <style type="text/css">
      html{
        width:100%;
        text-align:center;}
      body{
        width:800px;
        margin:0px auto;
        text-align:left;}
    </style>
  </head>
  <body>
... Inhalt der kompletten Seite ...
  </body>
</html>

Hier werden alle Angaben zum zentrieren in einen Extra CSS-Block zusammengefasst. Die normale HTML-Auszeichnung wird dabei nicht angetastet, weshalb der Inhalt auch direkt innerhalb der <body> -Tags eingebaut werden kann.

Einbinden von CSS

CSS kann man auf drei verschiedene weisen in (X)HTML- Seiten einbauen:

  • Direkt in den entsprechenden Tags mit Hilfe des -Attributs
  • In dem <head> -Bereich der (X)HTML -Datei können Stylesheets direkt unter dem <style> -Tag definiert werden
  • In dem <head> -Bereich der (X)HTML -Datei können externe CSS-Dateien mit Hilfe des <link> -Tags oder per @import in dem <style> -Bereich angegeben werden

All diese Möglichkeiten lassen sich auch mischen. Für das zentrieren einer Webseite könnte das folgendermaßen aussehen:

Verschiedene Methoden zum Einbinden von CSS  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<html>
  <head>
    <link type="text/css" href="extern1.css" />
    <style type="text/css">
      @import url("extern2.css");
      html{
        width:100%;
        text-align:center;}
      body{
        margin:0px auto;}
    </style>
  </head>
  <body style="width:800px; text-align:left;">
... Inhalt der kompletten Seite ...
  </body>
</html>

In den Dateien extern1.css und extern2.css können nun weitere CSS-Definitionen stehen, die auch auf die Seite angewandt werden.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "Was ist CSS?" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Was ist CSS?" hier bearbeiten.

Mitarbeiter