ReLast - Klassik

Cascading StyleSheets

Grundlagen

Kommentare

Kommentare (einzeilig und mehrzeilig möglich, immer von-bis)

/* ... */

Einbinden

Einbinden als Referenz

<link rel="stylesheet" href="datei.css" type="text/css" media="screen" charset="utf-8" />

Einbinden in Dateikopf

<style type="text/css" media="screen"> ... </style>

Einbinden in Elemente

<p style="..."> ... </p>

Box-Modell

Es gibt vier Eigenschaften die in CSS dafür verantwortlich sind wie viel Platz ein Element einnimmt: size, padding, border, margin. In dieser Reihenfolge.

Die Größe eines Elements wird nur scheinbar durch die Angaben zu width und height bestimmt. In Wirklichkeit beschreiben diese Angaben bei den meisten Elementen die Größ des Inhalts. Wenn das Element noch Angaben zu padding hat, wird dieser Abstand hinzu gerechnet. Hat es einen border kommt auch dieser hinzu. Zu guter letzt können Angaben zu margin ebenfalls dafür sorgen das unser Element auf dem Bildschirm mehr Platz einimmt als erwartet.

Die Berechnung der Größe kann nach zwei Kriterien erfolgen:

box-sizing:content-box;
box-sizing:border-box;

Bei box-sizing:content-box; beziehen sich die angaben zu Höhe und Breite auf den Content, und somit wird die Größe des gesamten Elements wie oben beschrieben berechnet (element-width = content-width + padding-left + padding-right + border-left + border-right). Angaben zu margin vergrößern den Platzbedarf des Elements.

Bei box-sizing:border-box; werden die Angaben zu Höhe und Breite auf das Element inklusive Rahmen angewendet, die Größe des Content ergibt sich also durch Abzug von Rahmen und Innenabstand (content-width = width - padding-left - padding-right - border-left - border-right). Angaben zu margin vergrößern den Platzbedarf des Elements.

Per default wird box-sizing:content-box; angewendet, die Angaben zu Breite und Höhe beziehen sich also auf die Content-Box und alles weitere wird hinzu gerechnet.

Anmerkung:

Die Formular-Elemente input und select haben unterschiedliche default-Werte zum box-sizing. Für einheitliches Layout muss box-sizing für beide gleich gesetzt werden.

Selektoren

  • Alle Elemente ansprechen
    • * {}
  • Element über ID ansprechen
    • #bezeichner {}
  • Alle Elemente mit einer Klasse
    • .bezeichner {}
  • Pseudo-Klassen
    • :link {}
    • :visited {}
    • :hover {}
    • :focus {}
    • :active {}
    • :target {}
    • :before {}
    • :after {}
    • :first-letter {} /* das erste Zeichen */
      p:first-letter { font-size:300%; float:left; color:red; margin:10px; }
    • :first-line {} /* die erste Textzeile */
      p:first-line { text-transform:uppercase; }
    • :first-child {} /* das erste Kindelement */
    • :last-child {} /* das letzte Kindelement */
  • Nachfahrenkombinator (alle Elemente die irgendwo als Nachfahre dieser Elemente auftreten)
    • body * {}
    • ul li {}
    • ol li {}
  • Kindkombinator (alle p die direkt als Kind eines div kommen, und nur diese p, nicht deren Kinder)
    • div > p {}
  • Direkter Nachbarkombinator (ein p das direkt nach einem div auf gleicher Ebene kommt)
    • div + p {}
  • Indirekter Nachbarkombinator (alle p die direkt nach einem div auf gleicher Ebene kommen)
    • div ~ p {}

Eigenschaften

Mehrfachangaben

Wenn eine Element mehrere Angaben entgegen nehmen kann, zum Beispiel einen Rahmen oben, unten, links und rechts, dann verteilen sich die Angane wie folgt:

  • Ein Wert: gilt für alle vier Seiten
  • Zwei Werte: erste Wert für oben und unten, zweite für rechts und links
  • Drei Werte: erste Wert oben, zweite Wert rechts und links, dritte Wert unten
  • Vier Werte: oben, rechts, unten, links

width und height (Breite und Höhe)

Die Angaben zu width und height beschreiben die Größe der Box des Elements. Es können Angaben zum Minimum und Maximum gemacht werden, um minimale und maximale Größen zu erzwingen. Angaben ohne Minimum und Maximum überlassen dem Browser einen Handlungsspielraum.

width:70em;
height:30em;
  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height

padding (Innenabstand)

Padding beschreibt den inneren Abstand, also den Abstand den Kind-Elemente von der eigenen Box haben sollen. Der Abstand kann allgemein gültig oder für spezifische Seiten definiert werden (padding[-top|-right|-bottom|-left]).

padding:1em;
  • padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

border (Rahmen)

Die Angaben zum Rahmen unterteilen sich in die Stärke des Rahmens (border-width), den Stil (border-style), die Farbe (border-color) und die Angaben zu den Ecken (border-radius).

  • border-width
    • thin = dünn
    • medium = mittelstark
    • thick = dick
  • border-style
    • none = kein Rahmen (bzw. unsichtbarer Rahmen)
    • hidden = kein Rahmen (bzw. unsichtbarer Rahmen)
    • dotted = gepunktet
    • dashed = gestrichelt
    • solid = durchgezogen
    • double = doppelt durchgezogen
    • groove = 3D-Effekt
    • ridge = 3D-Effekt
    • inset = 3D-Effekt
    • outset = 3D-Effekt
  • border-color
    • Numerische (hexadezimale) Angaben (#RRGGBB)
    • Namensangaben (red, silver, ...)
  • border-radius
    • border-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
    • Radius eines Kreises:
      border-radius: 10px;
    • Radien einer Ellipse:
      border-radius: 10px 20px;

Möglich sind auch kombinierte Angaben:

  • border[-top|-right|-bottom|-left]
border: 3px solid silver; /* Rahmen an allen Seiten, 3 Pixel stark, durchgehend, silber */

margin (Außenabstand)

Margin beschreibt den äußeren Abstand, also den Abstand den umlaufende Elemente von der eigenen Box haben sollen. Der Abstand kann allgemein gültig oder für spezifische Seiten definiert werden (margin[-top|-right|-bottom|-left]).

margin:1em;
  • margin
  • margin-top
  • margin-right
  • maring-bottom
  • margin-left

overflow

  • overflow:visible; /* Inhalt überall sichtbar, überragt das Element notfalls */
  • overflow:hidden; /* Inhalt nur im Element sichtbar, Überstand wird abgeschnitten */
  • overflow:scroll; /* Inhalt nur im Element sichtbar, Überstand per Scrollbalken sichtbar */
  • overflow:auto; /* Der Browser entscheidet */
  • overflow:inherit; /* Erbt die Eigenschaft vom Eltern-Element */

float

bestimmt wie nachfolgende Elemente dieses Element umfließen sollen

  • left = Element steht links und wird rechts umflossen
  • right = Element steht rechts und wird links umflossen
  • none = Kein Umfluss (Standardeinstellung)
  • inherit = erbt vom Eltern-Element

clear

beendet den Umlauf der vorhergehenden Elemente

  • clear:none;
  • clear:left;
  • clear:right;
  • clear:both;

text-transform

text-transform:capitalize;
  • capitalize = Wortanfänge als Großbuchstaben.
  • uppercase = Nur Großbuchstaben.
  • lowercase = Nur Kleinbuchstaben.
  • none = normal (keine Text-Transformation).

Schatten

Die ersten beiden Werte beschreiben den horizontalen und vertikalen Versatz des Schattens, für den man positive wie negative Werte eintragen kann. Der letzte Wert legt die Farbe des Schattens fest. Mit einer weiteren Angabe kann man den Radius des Schattens kontrollieren, hier können auch negative Werte eingetragen werden, um einen kleineren Schatten zu erzeugen. Es ist auch möglich, einem Element beliebig viele verschiedene Schatten auf einmal zuzuweisen. Mehrfache Schatten notiert man einfach, jeweils getrennt durch ein Komma, hintereinander. Dabei liegt der zuerst definierte Schatten über allen anderen und der zuletzt definierte ganz unten. Und schließlich gibt es noch die Möglichkeit, einem Element einen inneren Schatten zuzuweisen. Dazu muss man einfach lediglich das inset-Schlüsselwort irgendwo in der Schattendefinition unterbringen.

  • box-shadow:[inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color]
    • [inset] = definiert den Schatten innen liegend oder außen liegend (default).
    • [offset-x] = vertikaler Versatz
    • [offset-y] = horizontaler Versatz
    • [blur-radius] = Auslauf-Radius (verwaschen)
    • [spread-radius] = Ausbreitungs-Radius am Element
    • [color] = Farbe
  • Einfacher Schatten (x,y,color) 
    box-shadow:8px 8px #666;
  • Weicher Schatten (x,y,blur,color) 
    box-shadow:8px 8px 8px #666;
  • Schatten mit modifiziertem Radius (x,y,blur,spread,color) 
    box-shadow:8px 8px 8px 8px #666;
  • Mehrere Schatten 
    box-shadow:  8px 8px 8px red,
    -8px 8px 8px green,
    8px -8px 8px blue,
    -8px -8px 8px yellow;
  • Innerer Schatten 
    box-shadow:inset 8px 8px 8px #666;

Farbverlauf

background: grey; /* Old browsers */
background: linear-gradient(to bottom, white 0%, silver 20%, grey 50%, silver 80%, white 100%); /* W3C */

/* Browser-Anpassungen, kann man machen, muss man aber nicht */
background: -moz-linear-gradient(top, white 0%, silver 20%, grey 50%, silver 80%, white 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(20%,#d2d3d8), color-stop(50%,#b8bac6), color-stop(80%,#d4d5d8), color-stop(100%,#f5f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f5f6f6 0%,#d2d3d8 20%,#b8bac6 50%,#d4d5d8 80%,#f5f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f5f6f6 0%,#d2d3d8 20%,#b8bac6 50%,#d4d5d8 80%,#f5f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f5f6f6 0%,#d2d3d8 20%,#b8bac6 50%,#d4d5d8 80%,#f5f6f6 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */

Hintergrundbilder

Einbinden eines Hintergrundbildes

body {
	background-image: url(...);
}

Hintergrundbild skaliert immer mit Breite und Höhe des Elternelement (wird aber entsprechend verzerrt).

body {
	background-image: url(...);
	background-size: 100% 100%;
}

Hintergrundbild skaliert immer mit Breite des Elternelement, Höhe passt sich der Bildbreite an (geht auch umgekehrt).

body {
	background-image: url(...);
	background-size: 100% auto;
}

Hintergrundbild skaliert immer mit dem Elternelement so das die Grafik nicht verzerrt wird, also immer so das die Grafik in den Container passt (dabei können Freiräume entstehen wenn das Seitenverhältniss des Bildes nicht mit dem des Containers übereinstimmt).

body {
	background-image: url(...);
	background-size: contain;
}

Hintergrundbild skaliert immer mit dem Elternelement so das der Container immer mit dem Bild gefüllt wird (Bild wird bei Bedarf beschnitten wenn das Seitenverhältnis des Bildes nicht mit dem des Containers übereinstimmt).

body {
	background-image: url(...);
	background-size: cover;
}

Fonts einbinden

@font-face { font-family: 'Philosopher';
             src: url('fonts/Philosopher-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Philosopher';
             src: url('fonts/Philosopher-Italic.ttf') format('truetype');
             font-style: italic; }
@font-face { font-family: 'Philosopher';
             src: url('fonts/Philosopher-Bold.ttf') format('truetype');
             font-weight: bold; }
@font-face { font-family: 'Philosopher';
             src: url('fonts/Philosopher-BoldItalic.ttf') format('truetype');
             font-weight: bold;
             font-style: italic; }
@font-face { font-family: 'PTSans';
             src: url('fonts/PT_Sans-Web-Regular.ttf') format('truetype'); }
@font-face { font-family: 'PTSans';
             src: url('fonts/PT_Sans-Web-Italic.ttf') format('truetype');
             font-style: italic; }
@font-face { font-family: 'PTSans';
             src: url('fonts/PT_Sans-Web-Bold.ttf') format('truetype');
             font-weight: bold; }
@font-face { font-family: 'PTSans';
             src: url('fonts/PT_Sans-Web-BoldItalic.ttf') format('truetype');
             font-weight: bold;
             font-style: italic; }


h1, h2, h3, h4, h5 {
    font-family:Philosopher;
}
p {
    font-family:PTSans;
}

Automatisches Einfügen von Inhalten

Kapitel nummerieren

h1 {
    counter-increment: h1counter;
    counter-reset: h2counter;
}
h1:before {
    content: counter(h1counter) ' ';
}
h2 {
    counter-increment: h2counter;
    counter-reset: h3counter;
}
h2:before {
    content: counter(h1counter) '.' counter(h2counter) ' ';
}
h3 {
    counter-increment: h3counter;
    counter-reset: h4counter;
}
h3:before {
    content: counter(h1counter) '.' counter(h2counter) '.' counter(h3counter) ' ';
}

Anführungszeichen einfügen, für quotes und quotes innerhalb von quotes

q:before { content:open-quote; }
q:after { content:close-quote; }
q q:before { content:open-quote; }
q q:after { content:close-quote; }

Beispiele

Transparenter Hintergrund

Wenn man den Hintergrund Transparent haben möchte, wird die Eigenschaft Opacity an die Kindelemente vererbt. Ein Elternelement mit Opacity 0.5 und ein Kindelement mit Opacity 1 führt zu einem Kindelement das trotzdem durchlässig ist. Man kann sich vorstellen das die opacity relativ zum Elternelement berechnet wird. Das Kindelement wird also das Elternelement vollständig verdecken (wegen opacity=1), aber genau wie sein Elternelement den datunter liegenden Hintergrund durch lassen.

Dieser Effekt ist oft nicht erwünscht und kann umgangen werden. Wenn das Elternelement keine generelle opacity sondern einen transparenten Hintergrund bekommt.

Statt:

color:white;
opacity:0.5;

Besser:

background: rgba(255,255,255,0.5);

Copyright © 2024

Datenschutz | Impressum