Styles, Elemente, Typografie

Heutzutage genügt es nicht mehr, die Darstellung bestimmter HTML-Tags allein den Browsern zu überlassen. Um in allen Browsern und auf allen Systemen (annähernd) einheitliches Aussehen zu erreichen, müssen bestimmten Elementen CSS-Klassen zugeordnet werden. Das geschieht im Editor über das „Format“-Menü, was manchmal etwas Mehrarbeit bedeutet. Im Folgenden werden die CSS-Klassen erläutert, die dieses Template zur Verfügung stellt.

Textformate

Normale Textabsätze <p> erscheinen im Blocksatz mit automatischer Silbentrennung. Die modernen Browser unterstützen 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!

• 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.

Geordnete Listen können ohne CSS-Klasse angelegt werden

1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
2. 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.
3. Donec ullamcorper, nulla faucibus sagittis elit.
4. 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.

Elon Musk buys the UN Security Council and gives himself sole veto power. Jeff Bezos, Mark Zuckerberg and Bill Gates get vice presidencies.

Even if this quote came from the brain of a conspiracy theorist who wishes to remain anonymous, it still gives food for thought in many respects. Humanity – where are you going?

Responsive Tabellen

Wird diese Art Tabelle gewünscht, dann muss man ihr die CSS-Klasse table.respTable zuweisen. Die Tabellen werden dann horizontal scrollbar, falls sie zu breit sind.

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	8½
Lindsey	Tanner	511-635 Malesuada Rd.	77791	Beaconsfield	27	grey	6
Luna	Xanthus	771-4058 Et Rd.	61855	Pontypridd	99	blue-grey	7¾
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	6¼
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	—	8½

Bilder und Bildunterschriften

Child on the sky swing.

Bilder werden einfach in einen normalen Absatz eingefügt. Anschließend muss dem Absatz die Klasse p.imgNormal zugewiesen werden. Wird hier eine Bildunterschrift benötigt (wie im Beispiel oben), dann setzt man diese ebenfalls in einen normalen Absatz direkt unter dem Bild. Danach erhält dieser Absatz die Klasse p.imgCaption.

Sollen Bilder im Text links stehen und vom Text rechts umflossen werden, dann erhalten sie die CSS-Klasse img.imgLeft.

Will man auch hier eine Bildunterschrift haben (wie im Beispiel), dann muss das Bild und der Absatz mit der Bildunterschrift von einem DIV umschlossen sein. Jetzt muss dieser DIV die CSS-Klasse div.imgLeft erhalten (nicht das Bild!).

Natürlich funktioniert das alles auch mit Bildern im Text rechts (siehe unten). Entsprechend verwendet man dazu die CSS-Klassen img.imgRight und div.imgRight. Am besten untersucht man mit der Browserkonsole die Bilder-Anordnung hier auf dieser Seite. So wird das schneller deutlich, als durch tausend Worte.

Noch ein kleiner Tipp am Rande: Mit dem Bildformat *.webp erreicht man hervorragende Komprimierungsraten (Schnelligkeit) bei meist sehr guter Qualität. Für die meisten Bildbearbeitungsprogramme finden sich im WWW entsprechende Plugins, um dieses Bildformat zu bearbeiten und zu speichern. Befrage dazu deine Lieblings-Suchmaschine.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam.