... just another site around the web ...





Cascading StyleSheets


Grundlagen

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

/* ... */

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>

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 {}
    • :first-line {}
    • :first-child {}
    • :last-child {}
  • 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

  • Mehrfache Angaben zu einer Eigenschaft
    • Ein Wert: alle vier Seiten
    • Zwei Werte: oben und unten, rechts und links
    • Drei Werte: oben, rechts und links, unten
    • Vier Werte: oben, rechts, unten, links
  • margin (Außenabstand)
  • border (Rahmen)
    border: 3px solid silver;
    • border[-top|-right|-bottom|-left]
    • 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, ...)
  • padding (Innenabstand)
  • 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)
  • text-transform
    text-transform:capitalize
    • capitalize = Wortanfänge als Großbuchstaben.
    • uppercase = Nur Großbuchstaben.
    • lowercase = Nur Kleinbuchstaben.
    • none = normal (keine Text-Transformation).
  • :first-child, :first-line, :first-letter
    • :first-child (Pseudoklasse) = das Element, das das erste Kindelement eines anderen Elements ist erhält die CSS-Eigenschaften
    • :first-line (Pseudoelement) = die erste Textzeile des Elements erhält die CSS-Eigenschaften
      p:first-line { text-transform:uppercase; }
    • :first-letter (Pseudoelement) = das erste Zeichen des Textes erhält die CSS-Eigenschaften
      p:first-letter { font-size:300%; float:left; color:red; margin:10px; }
  • Runde Ecken
    • 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;

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 (zumindest im Firefox 3.5) die Möglichkeit, einem Element einen inneren Schatten zuzuweisen. Dazu muss man einfach lediglich das inset-Schlüsselwort irgendwo in der Schattendefinition unterbringen.

  • Einfacher Schatten
    box-shadow:8px 8px #666;
  • Weicher Schatten
    box-shadow:8px 8px 8px #666;
  • Schatten mit modifiziertem Radius
    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; }








Copyright © 2017

Impressum