Schriften anpassen per CSS

Quellen:

 

Eine feine Methode, Schriftgrößen innerhalb einer Seite und unabhängig von den übergeordneten Schriftgrößeneinstellungen (Style-Schaltfläche) zu verändern, funktioniert über die Vergabe von Klassen oder IDs im CSS-Bereich.

 

Absätze inline-Formatieren

Natürlich ist es möglich, für einzelne Absätze im html-Modus eine Schriftgrößenänderung zu definieren, indem man den html-tag für Standard-Absatz <p> ersetzt:

 

<small> Dieser Absatz bekommt eine kleiner Schrift<small>
<big>Dieser Absatz bekommt eine grössere Schrift</big>
 

Formatieren eines Bereichs per CSS

Wenn ich einem ganzen Bereich eine bestimmte Schriftgrösse zuweisen möchte, empfiehlt es sich, anders vorzugehen:

 

  1. Anlegen eine CSS Style-Anweisung im Head-Bereich der Webseite (hier: ID für Standardabsatz, Tabellenfeld und Liste sowie Klasse für einzelne Absätze)

<style type="text/css">

#smaller p, #smaller td, #smaller li,
.smaller {font-size:80%}
#bigger p, #bigger td, #bigger li,

.bigger  {font-size:110%}

</style>

  1. ausgeblendet
  2. Text schreiben
  3. In den HTML-Modus wechseln
  4. CSS ID für den Bereich definieren bzw. Klasse für den einzelnen Absatz:

<div id="smaller">

<p> Standardabsatz </p>

<i class="smaller"> Text in Italics</i>

</div>

Ergebnis:

 

Standardabsatz <p>

Text in italics <i>

 

In einem mit der id="smaller" formatierten Bereich werden alle HTML-Absätze <p>, alle Tabelleninhalte <td> und alle Listenabsätze automatisch kleiner dargestellt.

 

 testabsatz mit id="smaller"

  •  testabsatz "smaller"
  •  testabsatz "smaller"
  1.  testabsatz "smaller"
  2.  testabsatz "smaller"
  3.  testabsatz "smaller"

Testtabelle "smaller"

Name Vorname Telefon
Max Muster 12345-12345
Minni Maus 0123-12345

 

Kommentar schreiben

Kommentare: 0