Big Header Picture

Vorsicht, Zugriff !

Sie befinden sich hier: Startseite > Styles, Elemente, Typografie

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

Girl on swing

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.

Clock

It’s five minutes to twelve.

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.

Gear

The gears don’t stand still.

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.

 
Bitte JavaScript aktivieren!

» Inhalt