| Einstieg CSS |  |      |
|
|
 HOME |
 CSS-Code  ZURÜCK SITEMAP |
Anhand der Formatierungsanweisungen für die Überschrift der Kategorie 1 erkläre ich nun, wie eine CSS-Formatierung für Text, der innerhalb <h1>-Tags steht, aufgebaut ist.
In HTML-Dokumenten wird ein h1-Tag eingesetzt, um eine Überschrift der Größe 1 zu deklarieren. Nun hat der Webmaster leider keinen Einfluss darauf, ob der Browser das in einer Schriftgröße von 28 oder 26 Punkten darstellt. Demo h1-Überschrift
Überlassen sie die Textdarstellung nicht dem Browser sondern bestimmen sie das Erscheinungsbild selbst - mit CSS! Überschrift Kategorie H1 - HTML formatiert Fest steht für <h1> lediglich, der Text wird
Das werden wir nun ändern. Mit CSS können sie weit mehr Einfluss nehmen. Ein erster Schritt ist, für Überschriften der Kategorie 1 eine generell gültige Formatierung festzulegen. Das bedeutet dann, das innerhalb der Seite alle Texte in <h1>-Tags so dargestellt werden. Ein Text in einer serifenlosen Schriftart sieht besser aus und ist, ganz bestimmt bei kleinen Schrifthöhen, wesentlich besser zu lesen. Und warum soll man beim langweiligen schwarz bleiben? Wie wärs mit einer serifenlosen Schrifttype, einem kleineren Schriftgrad und einem Blauton? CSS-Beispiel für <h1>-Texte mit CSS formatiert Im Head-Bereich des HTML-Dokuments notieren sie CSS-Angaben, die dann für die Darstellung aller <h1>-Texte in dieser Datei gültig sind.
<style type="text/css">
<!--
h1{
font-size: 18px;
font-family: Verdana,Arial,Helvetica;
color: #846ADD;
font-weight: bold;
text-align: center;
}
-->
</style>
So sieht von nun an jeder <h1>-formatierte Text innerhalb dieser Seite aus: Das ist eine h1-Überschrift
Das wurde festgelegt: font-size: 18px; Texthöhe: 18 Pixel font-family: Verdana,Arial,Helvetica; Font: Verdana (1.Option) color: #846ADD; Farbe: #846ADD font-weight: bold; Gewichtung: fett text-align: center; Textausrichtung: zentriert Das war ein erster Einstieg ... ... eine Demonstation anhand eines Beispiels. Nun gehen wir Schritt für Schritt durch die Erklärungen des logischen Aufbaus von CSS-Anweisungen. 
Auf zum nächsten Schritt, nein, wir machen einen großen Sprung. Wie sie nun wissen, kann man h1-Texte mit CSS formatieren, Das gilt natürlich auch für alle anderen HTML-Formatierungen für h2 bis h5, für Abschnitte (<p>) oder Inhalte von Tabellenzellen (<td>).
Sie würden nun CSS-Anweisungen für all diese HTML-Tags festlegen, dort (jedesmal neu) auch Angaben für die zu verwendende Schrifttype machen. Das muss aber nicht sein, wenn die Schrifttype immer gleich sein soll! Interessant: Das Prinzip der Vererbung Die 'Vererbungslehre' ist ein sehr komplexes Thema, in der Grundstruktur aufgebaut wie eine Abstufung (Treppe). In der Bildchensprache der Entwickler auch als 'Caskade' bezeichnet (dazu müsste natürlich Wasser über diese Stufen plätschern). Nun wissen sie zumindest, wo der Begriff CSS (Caskading Style Sheet) herkommt.
Daraus folgt: Würden sie eine CSS-Formatierung lediglich für den <body> festlegen, 'pofitieren' auch alle untergeordneten HTML-Tags (also auch h1-Tags) von den Anweisungen. Ein einziger CSS-Eintrag für den Body ...
<style type="text/css">
<!--
body{
font-family: Verdana,Arial,Helvetica;
}
-->
</style>
... beeinflusst auch sämtliche anderen Bereiche wie <h1> bis <h5>, <p>, <b>, <i>, usw. , die nun alle in der Schrift 'Verdana' (falls nicht verfügbar in 'Arial' oder 'Helvetica') angezeigt werden.
Die Body-Eigenschaft wird auf die Kindelemente vererbt. Das bedeutet, für die oben festgelegte h1-Formatierung könnte man die Angaben für die Schrifttype weglassen, wenn vorher für den Body bereits 'Verdana,Arial,Helvetica' festgelegt wurde:
<style type="text/css">
<!--
body{
font-family: Verdana,Arial,Helvetica;
}
h1{
font-size: 18px;
color: #846ADD;
font-weight: bold;
text-align: center;
}
-->
</style>
Zwischenbemerkung: Die Profies unter ihnen bemerken auch, das ich für die Gewichtung der h1-Überschriften 'bold' (fett) eingetragen habe. Auch das wäre nicht unbedingt nötig, denn für Überschriften ist Fettschrift ohnehin Standard. Wenn sie möchten tragen sie statt 'bold' einma 'normal' ein und die Überschriften erscheinen in einer normalen Gewichtung. Weiter zur Seite:  2) Deklaration von CSS-Anweisungen
| ||||||||
|
1) Einstieg CSS