Elemente, Styles, Typografie

Graffiti

Das wird wieder teuer – Mieten rauf!

Textformate

Normale Textabsätze <p> erscheinen eingerückt im Blocksatz. Das birgt ein gewisses Risiko, dass große Lücken im Text entstehen. Die modernen Browser unterstützen aber mittlerweile die Silbentrennung so gut, dass eine „lückenlose“ Textdarstellung einigermaßen gewährleistet sein sollte. Leider hängt das von vielen verschiedenen Faktoren ab (Browser, Betriebssystem, Sprache u.a.), die man nicht weiter beeinflussen kann.

Hier sehen wir einen Absatz mit einem besonders hervorgehobenen Textteil: span.highlightedText. Dieses Format kann auch auf ganze Absätze oder DIVs angewendet werden.

Ein Sticker oder Badge kann erreicht werden mit span.sticker und sieht dann so aus: Sticker

Das ist bold und das ist strong. Das ist italic und das ist emphasized. Das nächste Wort ist unterstrichen. Ein wenig Code im Text sieht so aus: for (;;) { ... }. Letztendlich folgt noch ein normaler Link.


Überschrift h2

Ned gscheit Ohrwaschl anbandeln is nackata glacht Milli. Schaung kost nix vui huift vui allerweil Charivari Schdeckalfisch Baamwach, in da und sei. Vui baddscher Charivari, da Kini moand sog i Prosd Goaßmaß.

Überschrift h3

Allerweil wiavui pfenningguat des is hoid aso dei oans, zwoa, gsuffa, abfieseln fensdaln Heimatland. So schee Habedehre guad hogg ma uns zamm, dei Sauwedda und Ledahosn Schdarmbeaga See! Sog i gwihss allerweil, bitt hogg ma uns zamm hod.

Überschrift h4

Haferl oans hoam a ganze ned a fescha Bua hawadere midananda Auffisteign schaugn. Middn a bravs des muas ma hoid kenna Griasnoggalsubbm schoo, naa obandln wolpern!

Überschrift h5

A Prosit der Gmiadlichkeit Weiznglasl samma um Godds wujn zua oamoi, mi Engelgwand heid!

Überschrift h6

Moand guad Resi Graudwiggal Biazelt.

[Blindtext Quelle: bavaria-ipsum.de]


Listen

  • Ungeordnete Listen müssen die CSS-Klasse ul.listUnordered erhalten. wichtig!
  • Listen werden in voller Breite dargestellt.
  • Donec ullamcorper, nulla eu faucibus sagittis, wisi risus, a ornare purus metus eget elit.
    • Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat.
      • Fusce pulvinar ante non sapien.
      • Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna.
    • Vivamus posuere.
    • Quisque cursus, mauris nec sagittis dictum.
  • Donec ullamcorper, nulla faucibus sagittis elit.
  • Sed a leo. Suspendisse nisl tellus.
  1. Geordnete Listen können ohne CSS-Klasse angelegt werden
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  3. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus, a ornare purus metus eget elit.
    1. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat.
      1. Fusce pulvinar ante non sapien.
      2. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna.
    2. Vivamus posuere.
    3. Quisque cursus, mauris nec sagittis dictum.
  4. Donec ullamcorper, nulla faucibus sagittis elit.
  5. Sed a leo. Suspendisse nisl tellus.

Code

#big-bang::before {
    content: "";
}
#tower-of-pisa {
    font-style: italic;
}
#moses > #sea {
    column-count: 2;
    column-gap: normal;
}

Quelle CSS-Code: saijogeorge.com

Zitate / Blockquote

Man schreibt das Zitat in einen normalen Absatz. Darunter setzt man, ebenfalls in einen normalen Absatz, die Quelle des Zitates oder den Autor. Der Quellen-Absatz erhält die CSS-Klasse p.source. Abschließend werden beide Absätze markiert und über Formate → Absatzformate → Zitat  formatiert.

„Ich und die Welt – wir passen nicht zusammen. Vielleicht habe ich deshalb angefangen, die Dinge mit anderen Augen zu sehen. Leute, die versuchen, etwas total idiotensicher zu gestalten, unterschätzen oftmals den Einfallsreichtum totaler Idioten.“

Douglas Adams

Responsive Tabellen

Wird diese Art Tabelle gewünscht, dann muss man ihr die CSS-Klasse table.respTable zuweisen. Tabellen werden (schon aus Platzgründen) in voller Breite dargestellt.

Tabellen-Überschrift (caption)
Name First name Street Postcode Location Age Eye color Shoe size
Shannon Cheyenne Ap #239-2170 Phasellus Av. 94075 Berlin 32 green
Lindsey Tanner 511-635 Malesuada Rd. 77791 Beaconsfield 27 grey 6
Luna Xanthus 771-4058 Et Rd. 61855 Pontypridd 99 blue-grey
Donaldson Anika 2821 Orci. Road 71078 Oosterhout 11 brown 4
Langley Bruce Ap #376-2978 Diam. Avenue 05691 Ravenstein 54 orange 7
Leon Petra 776-8330 Sem St. 72540 Cervinara 43 grey 6
Everett Ulla P.O. Box 786, 1462 Id, St. 06815 Banff 33 violet
Bishop Wayne Ap #619-6021 Aliquet, Road 47719 Saint-Mard 74 grey-brown 9
Mccullough Audra 4758 Vel, St. 22972 Leipzig 23 blue 7
Nelson Jillian P.O. Box 548, 7968 Quis St. 30075 Vernole 48

Bilder und Bildunterschriften

Ausstellungsraum - weißer Raum

Die Asiaten haben’s einfach drauf, das mit den weißen Räumen

Bilder werden einfach in einen normalen Absatz eingefügt. Anschließend muss dem Absatz die Klasse p.imgNormal zugewiesen werden.

Wird eine Bildunterschrift benötigt, so setzt man diese ebenfalls in einen normalen Absatz direkt unter dem Bild. Danach erhält dieser Absatz die Klasse p.imgCaption.

Alle Bilder werden immer links ausgerichtet. Rechts ausgerichtete Bilder sind nicht vorgesehen. Der Absatz mit dem Bild wird immer die volle verfügbare Breite einnehmen, also ist auch kein Text rechts neben dem Bild möglich. Die Bild-Breiten und -Höhen werden durch die tatsächlichen Bildmaße bestimmt, wobei die Breite nicht größer als der verfügbare Platz werden kann. Man beachte, dass die Editoren automatisch Bildmaße in den Quellcode setzen. Das kann u.U. Probleme verursachen, weshalb man diese entfernen sollte.

Weißer Schwan

Eine Ausnahme stellen kleine Bilder dar, die man unbedingt links neben dem Text haben will. Dafür setzt man wieder in einen normalen Absatz das Bild und gibt diesem die CSS-Klasse p.imgLeft. Beachte: Das Bild kann auf kleinen Viewports sehr klein werden.

Tipp: Mit dem Bildformat *.webp erreicht man hervorragende Komprimierungsraten (Schnelligkeit) bei meist sehr guter Qualität. Kleiner Nachteil dabei: CMSimple_XH und die Editoren bieten derzeit beim Einfügen für dieses Bildformat keine Vorschau.