Primer

Grundlegendes Markup und typografische Stile

Die Kopfzeile der Hauptseite ist hier ein h1 Element. Alle Header-Elemente können Links enthalten, wie im Beispiel dargestellt.

Abschnitte Verbunden

Der sekundäre Header oben ist ein h2 -Element, das für jede Art von wichtiger Kopfzeile auf Seitenebene verwendet werden kann. Es können mehrere pro Seite verwendet werden. Erwägen Sie die Verwendung von an h2 Es sei denn, Sie benötigen eine weniger wichtige Überschriftsebene oder als untergeordnete Überschrift zu einer vorhandenen h2 Element.

Kopfzeile der dritten Ebene Verbunden

Die Überschrift oben ist eine h3 -Element, das für jede Art von Kopfzeile auf Seitenebene verwendet werden kann, die unterhalb von liegt h2 Kopfzeile in einer Dokumenthierarchie.

Kopfzeile der vierten Ebene Verbunden

Die Überschrift oben ist eine h4 -Element, das für jede Art von Kopfzeile auf Seitenebene verwendet werden kann, die unterhalb von liegt h3 Kopfzeile in einer Dokumenthierarchie.

Kopfzeile der fünften Ebene Verbunden

Die Überschrift oben ist eine h5 -Element, das für jede Art von Kopfzeile auf Seitenebene verwendet werden kann, die unterhalb von liegt h4 Kopfzeile in einer Dokumenthierarchie.

Kopfzeile der sechsten Ebene Verbunden

Die Überschrift oben ist eine h6 -Element, das für jede Art von Kopfzeile auf Seitenebene verwendet werden kann, die unterhalb von liegt h5 Kopfzeile in einer Dokumenthierarchie.

Inhalte gruppieren

Absätze

Alle Absätze werden umbrochen p Stichworte. Zusätzlich, p Elemente können mit a umschlossen werden Blockzitat Element wenn die p Element ist in der Tat ein Zitat. Historisch, Blockzitat wurde nur verwendet, um Einzüge zu erzwingen, aber dies wird jetzt mit CSS erreicht. Reservieren Blockzitat für Zitate.

Horizontale Regel

das Std -Element stellt einen thematischen Bruch auf Absatzebene dar, z. B. einen Szenenwechsel in einer Geschichte oder einen Übergang zu einem anderen Thema innerhalb eines Abschnitts eines Nachschlagewerks. Der folgende Auszug aus Pandoras Stern von Peter F. Hamilton zeigt zwei Absätze, die einem Szenenwechsel vorangehen, und den darauf folgenden Absatz:

Dudley war zweiundneunzig, in seinem zweiten Leben, und die Zeit für eine weitere Verjüngung rückte schnell näher. Obwohl sein Körper das physische Alter eines gewöhnlichen Fünfzigjährigen hatte, betrachtete er die Aussicht auf eine lange erniedrigende Kampagne in der akademischen Welt mit Furcht. Für eine angeblich fortgeschrittene Zivilisation konnte die Intersolar Commonwearth manchmal entsetzlich rückständig sein, ganz zu schweigen von der Grausamkeit.

Vielleicht wird es gar nicht so schlimmsagte er sich. Die Lüge war beruhigend genug, um ihn durch den Rest der Nachtschicht zu bringen.


Der Carlton AllLander fuhr Dudley kurz nach Sonnenaufgang nach Hause. Wie der Astronom war auch das Fahrzeug alt und abgenutzt, aber durchaus in der Lage, seine Aufgabe zu erfüllen. Es hatte einen billigen Dieselmotor, der auf einer Halbgrenzwelt wie Gralmond durchaus üblich war, obwohl seine Antriebseinheit ein durch und durch moderner photoneuraler Prozessor war. Mit seiner hohen Federung und den grobstolligen Reifen konnte er bei jedem Wetter und jeder Jahreszeit den Feldweg zum Observatorium entlangpflügen, einschließlich des metertiefen Schnees von Gralmonds Wintern.

Vorformatierter Text

das Vor element stellt einen vorformatierten Textblock dar, in dem die Struktur durch typografische Konventionen und nicht durch Elemente dargestellt wird. Solche Beispiele sind eine E-Mail (mit Absätzen, die durch Leerzeilen gekennzeichnet sind, Listen, die durch Zeilen gekennzeichnet sind, denen ein Aufzählungszeichen vorangestellt ist), Fragmente eines Computercodes (mit einer Struktur, die gemäß den Konventionen dieser Sprache angegeben ist) oder eine Anzeige ASCII Kunst. Hier ist ein Beispiel, das die druckbaren Zeichen von zeigt ASCII:

! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ ABCDEFGHIJKLMNO PQRSTUVWXYZ [ \ ] ^ _ ` abcdefghijklmno pqrstuvwxyz { | } ~

Block Zitate

das Blockzitat -Element stellt einen Abschnitt dar, der aus einer anderen Quelle zitiert wird.

Viele Regierungsformen wurden erprobt und werden in dieser Welt der Sünde und des Leids erprobt. Niemand behauptet, dass die Demokratie perfekt oder allweise ist. Tatsächlich wurde gesagt, dass die Demokratie die schlechteste Regierungsform ist, abgesehen von all den anderen Formen, die von Zeit zu Zeit versucht wurden.

Bestellliste

das ol element bezeichnet eine geordnete Liste, und verschiedene Nummerierungsschemata sind über das CSS verfügbar (einschließlich 1,2,3… a,b,c… i,ii,iii… und so weiter). Jeder Gegenstand benötigt eine Umgebung

  • und
  • -Tag, um einzelne Elemente in der Liste zu kennzeichnen (wie Sie vielleicht erraten haben, dort steht für Listenelemente).

    1. Dies ist eine geordnete Liste.
    2. Dies ist das zweite Element, das eine Unterliste enthält
      1. Dies ist die Unterliste, die auch geordnet ist.
      2. Es hat zwei Elemente.
    3. Dies ist der letzte Punkt auf dieser Liste.

    Ungeordnete Liste

    das Ul element bezeichnet eine ungeordnete Liste (dh eine Liste loser Elemente, die keine Nummerierung erfordern, oder eine Liste mit Aufzählungszeichen). Auch hier benötigt jeder Gegenstand eine Umgebung

  • und
  • Tag, um einzelne Artikel zu kennzeichnen. Hier ist eine Beispielliste, die die Bestandteile der Britischen Inseln zeigt:

    • Vereinigtes Königreich Großbritannien und Nordirland:
      • England
      • Schottland
      • Wales
      • Nordirland
    • Irische Republik
    • Isle of Man
    • Kanalinseln:
      • Vogtei von Guernsey
      • Vogtei von Jersey

    Manchmal möchten wir vielleicht, dass jedes Listenelement Blockelemente enthält, normalerweise ein oder zwei Absätze.

    • Die Britischen Inseln sind ein Archipel, der aus den beiden großen Inseln Großbritannien und Irland und vielen kleineren umliegenden Inseln besteht.

    • Großbritannien ist die größte Insel des Archipels. Irland ist die zweitgrößte Insel des Archipels und liegt direkt westlich von Großbritannien.

    • Die vollständige Liste der Inseln der Britischen Inseln umfasst über 1.000 Inseln, von denen 51 eine Fläche von mehr als 20 km haben2.

    Definitionsliste

    das dl element ist für einen anderen Listentyp, der als Definitionsliste bezeichnet wird. Anstelle von Listenelementen wird der Inhalt von a dl besteht aus dt (Definitionsbegriff) und dd (Definitionsbeschreibung) Paare. Obwohl es als „Definitionsliste“ bezeichnet werden kann, dl kann auf andere Szenarios angewendet werden, in denen eine Eltern/Kind-Beziehung anwendbar ist. Beispielsweise kann es zum Markieren von Dialogen mit each verwendet werden dt Benennung eines Sprechers, und jeder dd mit seinen oder ihren Worten.

    Dies ist ein Begriff.
    Dies ist die Definition dieses Begriffs, die beide in einem leben dl.
    Hier ist ein weiterer Begriff.
    Und es bekommt auch eine Definition, nämlich diese Zeile.
    Hier ist ein Begriff, der eine Definition mit dem folgenden Begriff teilt.
    Hier ist ein definierter Begriff.
    dt Begriffe können ohne Begleitwort allein stehen dd, aber in diesem Fall sie Teilen Beschreibungen mit den nächsten verfügbaren dt. Möglicherweise haben Sie keine dd ohne Eltern dt.

    Figuren

    Zahlen werden normalerweise verwendet, um auf Bilder zu verweisen:

    Beispielbild
    Dies ist ein Platzhalterbild mit unterstützender Bildunterschrift.

    Hier wird ein Teil eines Gedichts mit einer Figur gekennzeichnet:

    'Twas brillant, und die slithy Toves
    Kreiselte und gimbelte in der Woge;
    Alle mimsy waren die borogoves,
    Und der Name ist zu übertreffen.

    Jabberwocky (erster Vers). Lewis Caroll, 1832-98

    Wenn Sie die Quelle eines Zitats angeben möchten, sollten Sie dies auch mit einer Abbildung tun:

    Viele Regierungsformen wurden erprobt und werden in dieser Welt der Sünde und des Leids erprobt. Niemand behauptet, dass die Demokratie perfekt oder allweise ist. Tatsächlich wurde gesagt, dass die Demokratie die schlechteste Regierungsform ist, abgesehen von all den anderen Formen, die von Zeit zu Zeit versucht wurden.

    Winston Churchill, In eine Rede vor dem Unterhaus. 11. November 1947

    Semantik auf Textebene

    Es gibt eine Reihe von Online HTML Elemente, die Sie überall innerhalb anderer Elemente verwenden können.

    Links und Anker

    das zu -Element wird verwendet, um Text zu verlinken, sei es zu einer anderen Seite, einem benannten Fragment auf der aktuellen Seite oder einer anderen Stelle im Web. Beispiel:

    Betonte Betonung

    das em -Element wird verwendet, um Text mit betonter Betonung zu kennzeichnen, dh etwas, das Sie anders aussprechen würden. Wo Kursivschrift zur stilistischen Differenzierung erforderlich ist, wird die das Element kann vorzuziehen sein. Beispiel:

    Sie einfach muss Probieren Sie das Negitoro Maki!

    Starke Bedeutung

    das stark -Element wird verwendet, um Text mit starker Wichtigkeit zu kennzeichnen. Wo Fettschrift zur stilistischen Differenzierung verwendet wird, wird die b Element kann vorzuziehen sein. Beispiel:

    Nicht Nägel in die Steckdose stecken.

    Kleingedrucktes

    das klein -Element wird verwendet, um Haftungsausschlüsse, Vorbehalte, gesetzliche Einschränkungen oder Urheberrechte darzustellen (allgemein als „Kleingedrucktes“ bezeichnet). Es kann auch für Zuschreibungen oder die Erfüllung von Lizenzanforderungen verwendet werden. Beispiel:

    Copyright © 1922-2011 Acme Corporation. Alle Rechte vorbehalten.

    Durchgestrichen

    das s -Element wird verwendet, um Inhalte darzustellen, die nicht mehr genau oder relevant sind. Wenn Sie Dokumentbearbeitungen anzeigen, dh einen Textabschnitt als aus einem Dokument entfernt markieren, verwenden Sie das des Element statt. Beispiel:

    Empfohlener Verkaufspreis: 3,99 £ pro Flasche
    Jetzt für nur 2,99€ pro Flasche!

    Zitate

    das zitieren Element wird verwendet, um den Titel eines Werks darzustellen (z. B. ein Buch, Essay, Gedicht, Lied, Film, Fernsehsendung, Skulptur, Gemälde, Musical, Ausstellung usw.). Dies kann eine Arbeit sein, die ausführlich zitiert oder referenziert wird (dh ein Zitat), oder es kann eine Arbeit sein, die nur am Rande erwähnt wird. Beispiel:

    Allgemeine Erklärung der Menschenrechte, Vereinte Nationen, Dezember 1948. Angenommen durch Resolution 217 A (III) der Generalversammlung.

    Online-Zitate

    das q -Element wird zum Inline-Zitaten von Text verwendet. Beispiel für verschachtelte Anführungszeichen:

    Johannes sagte, Ich habe Lucy beim Mittagessen gesehen, hat sie mir erzählt Mary möchte, dass du dir auf dem Heimweg ein Eis holst. Ich denke, ich werde welche bei Ben and Jerry's in der Gloucester Road kaufen.

    Definition

    das dfn -Element wird verwendet, um die erste Verwendung eines Begriffs hervorzuheben. das Titel Attribut kann verwendet werden, um den Begriff zu beschreiben. Beispiel:

    Bobs Eckzahn Mutter und Pferde- Vater setzte ihn hin und erklärte vorsichtig, dass er ein sei allopolyploid Organismus.

    Abkürzung

    das Abk -Element wird für jeden abgekürzten Text verwendet, unabhängig davon, ob es sich um ein Akronym, einen Initialismus oder etwas anderes handelt. Im Allgemeinen ist es weniger Arbeit und nützlich (genug), nur das erste Vorkommen einer bestimmten Abkürzung auf einer Seite zu markieren und den Rest zu ignorieren. Jeder Text in der Titel Das Attribut wird angezeigt, wenn der Benutzer mit der Maus über die Abkürzung schwebt (obwohl dies insbesondere im Internet Explorer für Windows nicht funktioniert). Beispiel Abkürzungen:

    BBC, HTML, und Mitarbeiter.

    Zeit

    das Zeit -Element wird verwendet, um entweder eine Zeit auf einer 24-Stunden-Uhr oder ein genaues Datum im proleptischen gregorianischen Kalender darzustellen, optional mit einer Zeit- und Zeitzonenverschiebung. Beispiel:

    Königin Elizabeth II. wurde zur Souveränin jedes Commonwealth-Reichs proklamiert und , nach dem Tod ihres Vaters, König Georg VI.

    Warteschlangen

    das Schwänze -Element wird verwendet, um Fragmente von Computercode darzustellen. Nützlich für technologieorientierte Websites, ansonsten nicht so nützlich. Beispiel:

    Wenn Sie die anrufen aktivieren Sie() Methode auf der RoboterSchneemann Gegenstand, die Augen leuchten.

    Verwendet in Verbindung mit der Vor Elemente:

    Funktion getJelly () { Echo $aDeliciousSnack; }

    Variable

    das Var element wird verwendet, um eine Variable in einem mathematischen Ausdruck oder Programmierkontext zu bezeichnen, kann aber auch verwendet werden, um einen Platzhalter anzugeben, wo der Inhalt durch Ihren eigenen Wert ersetzt werden soll. Beispiel:

    Wenn es gibt nein Rohre, die dann zur Eisfabrik führen, rechnen ich mit an am wenigsten nein Eissorten zum Kauf erhältlich!

    Beispielausgabe

    das Probe -Element wird verwendet, um die (Beispiel-)Ausgabe eines Programms oder Computersystems darzustellen. Nützlich für technologieorientierte Websites, ansonsten nicht so nützlich. Beispiel:

    Sagte der Computer Zu viel Käse in Fach zwei aber ich wusste nicht, was das bedeutete.

    Tastatureingabe

    das kbd -Element wird verwendet, um Benutzereingaben zu bezeichnen (normalerweise über eine Tastatur, obwohl es auch verwendet werden kann, um andere Eingabemethoden wie Sprachbefehle darzustellen). Beispiel:

    Um einen Screenshot auf Ihrem Mac zu machen, drücken Sie ⌘ Bef + ⇧ Verschiebung + 3.

    Hochgestellter und tiefgestellter Text

    das sup Das Element steht für ein hochgestelltes Zeichen und das Element sub für ein sub. Diese Elemente dürfen nur verwendet werden, um typografische Konventionen mit bestimmten Bedeutungen zu kennzeichnen, nicht für die typografische Präsentation. Verwenden Sie diese Elemente als Richtlinie nur, wenn ihre Abwesenheit die Bedeutung des Inhalts verändern würde. Beispiel:

    Die Koordinaten der dasPunkt ist (xdas, jdas). Zum Beispiel hat der 10. Punkt Koordinaten (x10, j10).

    f(x, nein) = Protokoll4xnein

    Kursiv

    das das Element wird für Text in einer alternativen Stimme oder Stimmung verwendet oder anderweitig von der normalen Prosa abgesetzt. Beispiele sind taxonomische Bezeichnungen, Fachbegriffe, Redewendungen aus einer anderen Sprache, der Name eines Schiffes oder andere Textpassagen, deren typografische Darstellung typischerweise kursiv ist. Beispiel:

    Es gibt eine bestimmte je ne sais quoi in der Luft.

    eingebettet

    das b -Element wird für Text verwendet, der stilistisch von normaler Prosa abgesetzt ist, ohne zusätzliche Bedeutung zu vermitteln, wie z. Beispiel:

    Du betrittst einen kleinen Raum. Dein Schwert leuchtet heller. ZU Ratte huscht an der Eckwand vorbei.

    Markierter oder hervorgehobener Text

    das Kennzeichen -Element wird verwendet, um einen zu Referenzzwecken markierten oder hervorgehobenen Textverlauf darzustellen. Wenn es in einem Zitat verwendet wird, weist es auf eine Hervorhebung hin, die ursprünglich nicht vorhanden war, aber hinzugefügt wurde, um die Aufmerksamkeit des Lesers auf diesen Teil des Textes zu lenken. Wenn es im Hauptteil eines Dokuments verwendet wird, zeigt es einen Teil des Dokuments an, der aufgrund seiner Relevanz für die aktuelle Aktivität des Benutzers hervorgehoben wurde. Beispiel:

    Ich habe auch welche Kätzchens, die mich in diesen Tagen besuchen. Sie sind wirklich süß. Ich glaube, sie mögen meinen Garten! Vielleicht sollte ich eine adoptieren Kätzchen.

    bearbeitet

    das des -Element wird verwendet, um gelöschten oder zurückgezogenen Text darzustellen, der aus irgendeinem Grund immer noch auf der Seite verbleiben muss. Inzwischen sein Gegenstück, die eins -Element, wird verwendet, um eingefügten Text darzustellen. Beide des und eins haben eine Terminzeit -Attribut, mit dem Sie einen Zeitstempel direkt in das Element einfügen können. Beispiel für eingefügten Text und Verwendung:

    Sie kaufte zwei fünf ein Paar Schuhe.

    Tabellendaten

    Tabellen sollten verwendet werden, wenn tabellarische Daten angezeigt werden. das Kopf, tfuß und tbody -Elemente ermöglichen es Ihnen, Zeilen innerhalb jeder Tabelle zu gruppieren.

    Wenn Sie diese Elemente verwenden, müssen Sie jedes Element verwenden. Sie sollten in dieser Reihenfolge erscheinen: Kopf, tfuß und tbody, damit Browser den Fuß rendern können, bevor sie alle Daten erhalten. Sie müssen diese Tags innerhalb des Tabellenelements verwenden.

    Der allerbeste Eierlikör
    ZutatenServiert 12Dienst 24
    Milch1 Viertel2 Liter
    Zimtstangen21
    Vanilleschote, Split12
    Nelken510
    Morgenstern10 Klingen20 Klingen
    Eigelb1224
    Tassen Zucker1½ Tassen3 Tassen
    Dunkler Rum1½ Tassen3 Tassen
    Brandy1½ Tassen3 Tassen
    Vanille1 EL2 EL
    Half-and-half oder Light Cream1 Viertel2 Liter
    Frisch geriebene Muskatnuss nach Geschmack

    Farben

    Designfarben

    $color-main

    $color-ui

    $color-link

    $color-link-alt

    $Farbkörper | $color-Überschriften

    $Farbtaste-primär

    $Farbtaste-sekundär

    $Farbtaste-Tertiär

    $Farbtastenalarm

    $Color-Button-Erfolg

    $Farbtastenfehler

    Bibliotheksfarben

    $color-isabelline

    $color-Babypuder

    $Farbe-Eierschale

    Kopfzeilen und Körper

    Curabitur blandit ullam corper nulla non metus auctor fringilla {H1}

    Curabitur blandit ullam corper nulla non metus auctor fringilla {H2}

    Curabitur blandit ullam corper nulla non metus auctor fringilla {H3}

    Curabitur blandit ullam corper nulla non metus auctor fringilla {H4}

    Curabitur blandit ullam corper nulla non metus auctor fringilla {H5}
    Curabitur blandit ullam corper nulla non metus auctor fringilla {H6}
    Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. {Karosserie}

    Schriftarten

    Schriftart, die auf der gesamten Website verwendet wird

    Nimbus ohne Licht | $nimbus-sans-light | .u-font-light
    Nimbus Sans Light Italic | $nimbus-sans-light-it | .u-font-light-italic
    Nimbus Sans Regular | $nimbus-sans-regulär | .u-Schriftart-regulär
    Nimbus Sans Medium | $nimbus-ohne-mittel | .u-font-medium
    Nimbus Sans Halbfett | $nimbus-ohne-halbfett | .u-Schrift halbfett
    Nimbus Sans Bold | $nimbus-sans-fett | .u-Schriftart-fett
    Nimbus Sans Condensed | $nimbus-cond | .u-font-condensed
    Nimbus Sans Condensed Medium | $nimbus-cond-medium | .u-font-condensed-medium
    Nimbus Sans Condensed Semi Bold | $nimbus-cond-halbfett | .u-font-condensed-semibold
    Nimbus Sans Condensed Bold | $nimbus-cond-fett | .u-font-condensed-fett

    Dienstprogramme - Text und Links

    .u-fatlink

    Fatlinks sind mit einer robusteren Unterstreichung verknüpft. Wir verwenden einige Hintergrundfarben-Tricks und sammeln jeden in einer einzigen Gebrauchsklasse.

    Sie können überall für alle Site-Links verwendet werden, sind aber besonders für Blog-Posts geeignet

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam Venenatis Vestibulum. Etiam bringt Samen alle Farblinks mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    Objekt - Titel und Körper

    Txt-Held

    .o-txt-hero-giga

    SMS-Held Giga

    .o-txt-hero-mega

    Textheld mega

    .o-txt-hero-kilo

    SMS Heldenkilo

    .o-txt-hero-beta

    Textheld Beta

    .o-txt-hero-gamma

    Text-Hero-Bereich

    .o-txt-hero-delta

    Text-Helden-Delta

    .o-txt-hero-epsilon

    Textheld epsilon

    Txt-Head (basierend auf der Schriftart der Überschriften)

    .o-txt-Kopf-Kilo

    Textkopf Kilo

    .o-txt-head-alpha

    Textkopf Alpha

    .o-txt-head-beta

    Textkopf Beta

    .o-txt-Kopfbereich

    Bereich des Textkopfes

    .o-txt-head-delta

    Textkopf-Delta

    .o-txt-head-epsilon

    Textkopf epsilon

    .o-txt-head-zeta

    Textkopf zeta

    .o-txt-head-body

    Textkopfkörper

    .o-txt-head-milli

    Textkopf Milli

    .o-txt-head-micro

    Textkopf Mikro

    Txt-Untertitel

    .o-txt-subhead-kilo

    Textuntertitel Kilo

    .o-txt-subhead-alpha

    Text-Zwischenüberschrift Alpha

    .o-txt-subhead-gamma

    Text-Subhead-Beta

    .o-txt-subhead-delta

    Textunterkopf-Delta

    .o-txt-subhead-epsilon

    Textuntertitel epsilon

    .o-txt-subhead-zeta

    Textuntertitel zeta

    Txt-Nachricht

    .o-txt-Nachricht-Kilo

    SMS-Kilo

    .o-txt-nachricht-alpha

    SMS Alpha

    .o-txt-message-beta

    Betaversion von Textnachrichten

    .o-txt-Nachrichtenbereich

    Bereich für Textnachrichten

    .o-txt-message-delta

    SMS-Delta

    .o-txt-Nachricht-Epsilon

    SMS-Epsilon

    .o-txt-Nachricht-zeta

    Zeta-SMS

    .o-txt-Nachrichtentext

    SMS-Text

    Txt-Body (basierend auf Body-Schrift)

    .o-txt-body-alpha

    Textkörper Alpha

    .o-txt-body-beta

    Textkörper Beta

    .o-txt-body-range

    Bereich des Textkörpers

    .o-txt-body-delta

    Textkörper-Delta

    .o-txt-body-epsilon

    Epsilon des Textkörpers

    .o-txt-body-zeta

    Textkörper Zeta

    .o-txt-body

    Textkörper

    .o-txt-milli

    Textkörper Milli

    .o-txt-micro

    Textkörper Mikro

    Txt-Info

    .o-txt-info-beta

    Textinfo Beta

    .o-txt-Infobereich

    Bereichsinfotext

    .o-txt-info-epsilon

    Textinfo epsilon

    .o-txt-info-zeta

    Textinfo zeta

    .o-txt-info-milli

    Textinfo Milli

    Txt-Begriff

    .o-txt-notion-beta

    Textbegriff Beta

    .o-txt-Begriffsbereich

    Bereich des Textbegriffs

    .o-txt-Begriff-Delta

    Textbegriff Delta

    .o-txt-notion-epsilon

    Textbegriff Epsilon

    .o-txt-notion-zeta

    Textbegriff zeta

    .o-txt-Begriffskörper

    Körper des Textbegriffs

    .o-txt-notion-milli

    Textbegriff Milli

    .o-txt-notion-micro

    Textbegriff Mikro

    Andere Objekte

    Kicker

    .o-Kicker

    TSein Element heißt "Kicker". Es ist Absatztext, der den Rest des Textes einleitet. Es ist nützlich, um Ihr Thema zu skizzieren. Erstellen Sie einfach ein div mit Klasse = "Kicker" Vivamus tempor ipsum quis mauris. Fusce ante pede, pretium id, viverra at, gravida ac, ipsum. Etiam dictum ipsum sit amet diam. Sed placerat ipsum ut sem. Cras bibendum justo in erat. Quiske metus. Nam elit nisl, tincidunt sed, aliquet non, sollicitudin quis, turpis. Nullam sodales convallis sapien. Duis nec lorem sit amet velit gravida hendrerit. Pellentesque blandit pulvinar leo. Vivamus tempor ipsum quis mauris. Fusce ante pede, pretium id, viverra at, gravida ac, ipsum. Etiam dictum ipsum sit amet diam. Sed placerat ipsum ut sem. Cras bibendum justo in erat.

    .o-Kicker | .o-kicker--primär

    TSein Element heißt "Kicker". Es ist Absatztext, der den Rest des Textes einleitet. Es ist nützlich, um Ihr Thema zu skizzieren. Erstellen Sie einfach ein div mit Klasse = "Kicker" Vivamus tempor ipsum quis mauris. Fusce ante pede, pretium id, viverra at, gravida ac, ipsum. Etiam dictum ipsum sit amet diam. Sed placerat ipsum ut sem. Cras bibendum justo in erat. Quiske metus. Nam elit nisl, tincidunt sed, aliquet non, sollicitudin quis, turpis. Nullam sodales convallis sapien. Duis nec lorem sit amet velit gravida hendrerit. Pellentesque blandit pulvinar leo. Vivamus tempor ipsum quis mauris. Fusce ante pede, pretium id, viverra at, gravida ac, ipsum. Etiam dictum ipsum sit amet diam. Sed placerat ipsum ut sem. Cras bibendum justo in erat.

    Notiz

    .o-Notizen

    Anmerkungen zu Lorem ipsum: Lorem ipsum dolor sit amet.

    .o-Notizen | .o-notes--primär

    Anmerkungen zu Lorem ipsum: Lorem ipsum dolor sit amet.

    .o-Notizen | .o-notes--inline | .o-notes--primär

    Anmerkungen zu Lorem ipsum: Lorem ipsum dolor sit amet.

    Objektschw

    .o-schwarz

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-schwarz | .o-blk – eingeschränkt

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-schwarz | .o-schwarz – vergrößert

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-schwarz | .o-schwarz – beabstandet

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-schwarz | .o-schwarz – hart

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-schwarz | .o-schwarz – gerundet

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-schwarz | .o-schwarz – glatt

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-schwarz | .o-schwarz – unschattiert

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-schwarz | .o-blk--primär

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-schwarz | .o-schwarz – durchscheinend

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-schwarz | .o-blk – beraten

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-schwarz | .o-blk--Alarm

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-schwarz | .o-blk – Erfolg

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-schwarz | .o-blk--Fehler

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Objektschw

    .o-blk-Überschrift

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-blk-Überschrift | .o-blk-heading--eingeschränkt

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-blk-Überschrift | .o-blk-heading--vergrößert

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-blk-Überschrift | .o-blk-heading--spaced

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-blk-Überschrift | .o-blk-heading--hart

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    .o-blk-Überschrift | .o-blk-heading--primär

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Skins Txt

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Felle Bkg

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Skins Schwarz

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Skins Brd

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Skins raus

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Skins Schwarz Grd

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Vestibulum consectetur

    Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

    Verschiedene

    ZahnKreuzSpeisekarteChevron-Down