Stylesheet

• Was ist ein Stylesheet? Wo werden Styles definiert?

Was ist ein Stylesheet?

• Legt das Design einer Webseite fest
• Trennt Dateninhalte von der Anzeige
• Ermöglicht schnellere Änderung des Layouts
• Dynamische Anpassung an unterschiedliche Anzeigegräte

CSS-Regeln in einer externen CSS-Datei

<!-- Andere HTML-Elemente -->
  <link href="dateiname.css" rel="stylesheet" type="text/css">

Als HTML Element

<!-- Andere HTML-Elemente -->
  <style type="text/css">
    body { background-color: yellow; /* nur für diese Webseite */ }
  </style>

Als Attribut

<p style="background-color: #c0c0c0; color: red;">
Rot auf grau!</p>

Regeln

• Aufbau einer Regel? Selektoren? ID und class?

Aufbau einer Regel?

h5.schrift {
    margin: 0;
    padding-left: 5%;
    border: 0;
    font-size: 60%;
    text-align: left;
}

Selektor

h5.schrift

Deklaration

margin: 0;
    padding-left: 5%;
    border: 0;
    font-size: 60%;
    text-align: left;

Aufbau einer Regel?

h5.schrift {
    margin: 0;
    padding-left: 5%;
    border: 0;
    font-size: 60%;
    text-align: left;
}

Eigenschaft

padding-left:

Wert

5%;

ID und class?

ID

<h5 id="einBestimmterText">Ein Text</h5>

h5#einBestimmterText { ... }

class

<h5 class="schrift">class</h5>

h5.schrift {
    margin: 0;
    padding-left: 5%;
    border: 0;
    font-size: 60%;
    text-align: left;
}

Vererbung

• Wie funktioniert die Vererbung in CSS? Was kann vererbt werden? Was nicht?

Beispiel

Mit Vererbung

body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
}

Ohne Vererbung

body, h1, h2, p, ul, li {
   font-family: Verdana, Arial, Helvetica, sans-serif;
}

Was kann nicht vererbt werden?

• Eigenschaften der Box Modelle
• padding, border und margin
• Eigenschaften für background
• width und height
• position, top, right, bottom, left
• float und clear
• display

Vererbung erzwingen

h3 { text-align: inherit; }

Vererbung auflösen

h3 { text-align: initial; }

Spezifität

• Was versteht man unter Spezifität? !important?

Was versteht man unter Spezifität?

!important

h1 { color: red !important; }