CSS Syntax kleine Einführung Teil 1

Im diesem Artikel wollen wir uns in Fortsetzung des vorherigen die Syntax von CSS-Regeln weiter anschauen.

Wir hatten ja schon die Klasse eingeführt. Eine CSS-Klasse können wir innerhalb einer Seite so oft benutzen wie wir wollen.

<p class=“blau“>Text TextTextTextText Text Text</p>

und

.blau {color:#0000ff;font-size:12pt}

Dies gilt im Gegensatz zu den sog. ID-Selektoren.  Diese dürfen auf einer HTML-Seite nur einmal auftreten. Sie werden dargestellt durch

#blauid {color:#0000ff;font-size:12pt}

Mit diesen ID-Selektoren kann man auf die Elemente einer HTML-Seite zugreifen und diese beschreiben.

Sie werden oft für die Beschreibung von Bereichen innerhalb einer Seite benutzt.  Z.B.  <div id=“#blauid“> ….. </div>.

Auf diese  ID-Selektoren können Sie auch noch mit Javascript zugreifen und bspw. Ihren Inhalt untersuchen. Es gibt in JavaScript dafür eine Funktion getElementById(„blauid“), die Sie das Seitenobjekt bearbeitbar macht. (Aber davon viel später)

In CSS  können Sie bspw. festlegen, dass  ein einziger Bereich einen blauen Hintergrund und weisse Farbe haben soll. Die CSS-Regel würde dann folgendermaßen aussehen:

#bereich1 {background-color:#0000ff; font-color:#FFFFFF}

und mit

<div id=“bereich1″>

<p>text&nbsp;text&nbsp;text&nbsp;text&nbsp;text&nbsp;text</p><p>text&nbsp;text&nbsp;text&nbsp;text&nbsp;text&nbsp;text</p>
</div>

Kann ich dann den Bereich auf blau setzen:

 

So kann man dann alle Bereiche einer Seite auf der Seite setzen und einfärben. Man kann diese Bereiche sogar überlagern und justieren. Damit entfallen die ins Gerede gekommenen Tabellen, die nur zur Struktur der Seite früher gebraucht wurden.

Bei wirklich kompliziert aufgebauten Seiten, wusste man schlicht nicht mehr, welche Tabelle für welches Konstrukt auf in der Browserdarstellung zuständig war. Das war auch der Grund für die Entwicklung von CSS und letztlich von Web 2.0. Wenn man sich mit Composern wie z.B. NVU oder Dreamweaver die Seitenlayouts anschaut, werden die meist mit diesen Tabellen noch generiert.

Kommen wir aber einmal zum Inhalt der geschweiften Klammern in den CSS – Regeln.  Hier gibt es eine Fülle von unterschiedlichen Anweisungen. Ein paar – wie „background-color“, „color“ und „font-size“,  haben wir ja schon gesehen.

Sie können alle Regelangaben mit den Erklärungen hier anschauen.  Ich werde hier nur einige Beispiele angeben.

Fontvereinbarungen

Bei den Schriftarten können Sie im Prinzip alle möglichen Schriftarten angeben. Nur müssen Sie sicherstellen, dass diese Schriftarten dem Browser des Benuters auch bekann sind. Deshalb habe sich einige Schriftarten für das Internet als international anwendbar gezeigt. Diese sind z.B. Arial, Verdana etc.  Wenn nun aber ein Browser genau diese Schriftart nicht hat, dann kann man in CSS eine sog. Font-Family angeben:

p {font-family:Arial, Helvetica, Courier New,Georgia, Sans-Serif;}

Der Sinn der Font-Familie ist der, dass der Browser schaut, ob er die 1. Schriftart hat, wenn nicht geht er zur 2. über usw.  Sie sollten immer mehrere Schriftarten angeben, damit der Browser auch eine richtige finden kann.

Neben den Schriftarten kann man die font-size angeben.  Diese kann man in px (Pixel) oder in pt (entspricht in etwa den Größen wie in Windows die Schriftgröße) angeben. Sie können Schriftarten aber auch relativ zu den vorherigen angeben in dem sie font-size:30% angeben! (Wer noch mehr darüber wissen will, der schaue in die Erkärungen bei http://www.css4you.de/einheiten.html über die relativen Schriftgrößen.)

Neben der Größe lassen sich auch die Breite der Schrift einstellen. Dazu ist font-weight anzugeben, oder für Kursiv-Schrift u.ä ist font-style zuständig. (Ich persönlich verwende allerdings <i>..</i> lieber außerhalb von CSS, weil das kürzer ist.)

CSS unterscheidet Schrift-Steuerungen von Text-Steuerungen:

Textformatierungen

Auch hier gibt es eine Fülle von Anweisungen. Eine gerade für Marketer wichtige ist die Formatierung text -decoration:line-through, die einen gebenen Text durchstreicht. Anwenden können Sie das bspw. bei Preisen:

„Preis nicht 12,85, nein zum Sonderangebot von nur“

Und hier das Coding dazu (ohne eine Klasse einzuführen):

Preis nicht <span style=“text-decoration: line-through;“>12,85</span>, nein zum Sonderangebot von nur“

Auch sehr hilfreich ist die Angabe text-transform:uppercase, das alle Wörter (also Texte) eines Bereiches in Großschrift schreibt.

Um diese Formatierungen anzuwenden, ist es notwendig, den Text in einen Bereich zu klemmen! Das HTML-Mittel dazu ist entweder das Tag <span>..</span>, <p>…</p> oder auch <div>..</div>, je nachdem, ob man nur innerhalb eines Absatzes (<span>) einen Teil formatieren will, oder die ganze Zeilen <p> oder <div>!

Mit diesem Wissen können Sie schon eine ganze Menge an zusätzlichen Formatierungen in eine Seite einbauen. Sie müssen nur den Mut haben, auch mal in den HTML-Teil innerhalb des NVU zu schauen. Alle Änderungen die Sie dort vornehmen, werden übernommen:

Beispiel mit NVU:

NVU-Beispiel1

 

Wir schreiben einen beliebigen Text und gehen dann in die Quelltext-Anzeige des NVU

 

NVU-Beispiel2

 

Hierdrin verändern wir jetzt den Text mit unseren Style-Anweisungen:

 

NVU-Beispiel3

 

Jetzt gehen wir zurück und schauen nach wie die Seite nun aussieht

 

NVU-Beispiel4

 

Sie sehen, ist alles ganz einfach!

Wie man nun eine Stylesheet-Datei in NVU einbindet, werde ich Ihnen im nächsten Teil der Einfürhung zeigen. Dies bringt uns wieder ein Stück näher zu unserem Ziel: Der Seite mit dem Menü!

Bis bald

Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar