Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt
zurück: Kapitel 04 - Teil 2 - Hat es deine Augen oder meine? weiter: Kapitel 03 - Teil 4 - Pimp my Site Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten.     Status: Diskussion Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
10. Nov 2007, 19:26
Rufname:
Wohnort: Aachen

Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt - Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt

Nach oben
       

·Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt


Hallo zusammen,

Style Sheets oder CSS ist eine Scriptsprache zum Formatieren von HTML/XHTML Elementen.
Teilweise wurden diese schon in der Vergangenheit in HTML Seiten eingesetzt, z.B. für Texte und Farben. Jedoch bietet CSS weitergehende Möglichkeiten eine Webseite zu gestalten. Mit CSS können u.a. Inhalte positioniert, Hintergründe gestaltet, Schrift formatiert und Listen erstellt werden. Dies nur als eine kleine Auswahl der Möglichkeiten; in Kombination einiger CSS Auszeichnung lassen sich auch dynamische Menüs erstellen. Aber das Wichtigste an der Methode XHTML und CSS ist die Trennung von Gestaltung und Inhalten. Dies hat über die Erstellung der Seite hinaus den großen Vorteil, Inhalte problemlos auszuwechseln oder Gestaltungselemente zu ändern ohne dass der Inhalt davon berührt wird. Jeder, der schon mal ein Tabellenlayout erstellt hat, weiß wie mühsam und zeitaufwändig Änderungen werden können.

Selektoren, Eigenschaften und Werte

So, nun wissen wir welchen Vorteil CSS bietet und was man damit im Groben machen kann. Jetzt ist die Frage, wie kann das CSS die Inhalte in einer (X)HTML Datei formatieren? Damit die CSS Angaben auch zugeordnet werden können, brauchen sie einen so genannten Selektor. Der gibt an, auf welches HTML Element die Formatierung angewendet werden soll. Das kann z.B. eine Überschrift (h1) oder ein Absatz (p) sein. Der Selektor steht vorne an und die Angaben werden in einer geschweiften Klammer notiert. In geschweiften Klammern, der Deklaration, werden den Eigenschaften Werte zugewiesen. Diese werden mit einem Doppelpunkt getrennt und die Angabe mit einem Semikolon beendet. Bezüglich der Bezeichnungen halten wir mal kurz fest:



Ein Element (Selektor) hat in der Regel mehrere Eigenschaften, insofern kann eine Deklaration auch mehrere Anweisungen enthalten. Beispiel:

h1{ font-family: Verdana, Arial, sans-serif; font-size: 1.2em; color: #ffffff;}

h1 ist das Element Überschrift erster Ordnung. Eine Überschrift ist Text, also ist eine Eigenschaft der Überschrift die Schriftfamilie (font-family). Der Überschrift ist also die Schriftfamilie Verdana zugeordnet worden. Ist sie auf dem System nicht verfügbar, ist als Alternative die Schriftfamilie Arial angegeben. Ist auch die Arial nicht vorhanden, soll der Browser eine serifenlose Schriftfamilie des Systems verwenden. Der Eigenschaft font-family sind in diesem Beispiel also drei Werte zugeordnet worden. Diese werden mit einem Komma und Leerzeichen von einander getrennt. In diesem Fall ist es eine 'wenn nicht-dann' –Anweisung, wie oben beschrieben. Die nächste Eigenschaft ist die Schriftgröße (font-size). Ihr Wert bestimmt die Größe der Überschrift. Als letztes wird der Vordergrundfarbe, die die Farbe der Schrift definiert (color), der Wert weiß zugewiesen. Farbangaben werden meist mit einer Raute und als Hexadezimalzahl dargestellt. Alternativ können auch Schlüsselwörter nach der VGA-Farbtabelle - SelfHTML Farbtabelle - benutzt werden. Beispiel:

color: white;

Wie ihr seht, können Werte sehr unterschiedlich aussehen, je nachdem um welche Eigenschaft es sich handelt. Breiten und Höhen von Elementen haben numerische Werte, denen Einheiten folgen. Beispiel:

font-size: 0.8em;
width: 400px;


width ist die Eigenschaft Breite, deren Wert numerisch und mit einer Einheit, hier Pixel, angegeben wird. Die Einheit wird ohne Leerzeichen hinter die Zahl gestellt. Man kann mit unterschiedlichen Einheiten arbeiten, u.a.: px für Pixel, % für Prozent und em, eine relative Einheit, die aus dem Druckbereich stammt. Darauf werden aber später noch mal zurückkommen.

Es ist auch möglich, mehreren Selektoren die gleichen Style Angaben zuzuweisen, dabei werden die Selektoren mit einem Komma und einem Leerzeichen aufgezählt:

p, h1{ color: #cc0000;}

In diesem Beispiel erscheinen sowohl der Absatz als auch die Überschrift in roter Farbe.

CSS einbinden

So, nachdem wir CSS schon fast wie Profis scripten, stellt sich die Frage, wie kommen nun die Inhalte in der HTML Datei an die Formatierungsangaben?

Die direkte Formatierung kann natürlich da erfolgen, wo sie gerade gebraucht wird. z.B.:



Der Text dieses Absatzes p hat die Farbe rot zugewiesen bekommen. Die Formatierung kann aber noch weiter gehen:



span leitet einen allgemeinen Inline-Bereich ein und hat selbst keine Eigenschaften; Es bewirkt, für sich gestellt, auch nichts. Es ist nur dafür gedacht mit Hilfe von CSS den von ihm eingeschlossenen Bereich zu formatieren.

Insgesamt würde aber diese Vorgehensweise bei der Formatierung der Elemente nichts erleichtern. Möchte man mal den Inhalt ändern, so müsste der Code mühsam durchkämmt und entsprechend angepasst werden.

Eine leichtere Methode der Formatierung wäre die Eigenschaften zentral zu bündeln und innerhalb des Inhalts nur noch drauf zu verweisen. Dies erfolgt im Kopfbereich head der Datei. Die entsprechende Einleitung sieht so aus:



Damit der Browser weiß, dass CSS Anweisungen folgen, wird dies mit einem Extra-Tag eingeführt und zwar mit <style> ... </style>. Die Kommentarzeichen innerhalb des Tags verhindern, dass alte Browser, die kein CSS interpretieren können, diesen anzeigen.

Für den Inhalt sähe diese Änderung folgendermaßen aus:



Die spezifischen Angaben innerhalb des Textes fallen weg. Wie bei der obigen Formatierung habe ich wieder das eingesetzt. Aufmerksame Beobachter haben sicher festgestellt, dass sich etwas eingeschlichen hat, das nicht nach Selektor aussieht. Mit dem Punkt und einem eindeutigen Namen habe ich eben mal eine Klasse erzeugt und dieser Eigenschaften und Werte zugeordnet. Diese Klasse wird in dem span Bereich aufgerufen. Was es mit Klassen auf sich hat, wird im folgenden Kapitel erläutert. Bleiben wir noch einen Moment bei dem Einbinden der StyleSheets.

Der ultimative Weg zur Trennung von Layout und Inhalten ist natürlich die CSS Anweisungen in eine eigene Datei zu packen und auszulagern. Das geht ganz einfach. Wir öffnen eine einfache Textdatei, kopieren diese Anweisungen

p{ color: #CC0000;}
.fett{ color: #000000; font-weight: bold;}


hinein und speichern das ganze als meinerstescss.css. Wichtig ist die Dateiendung .css. Aus dem head Bereich werden die alten Styleangaben gelöscht und stattdessen auf die externe CSS Datei verlinkt:



Alternativ kann eine externe CSS Datei importiert werden. Das sieht dann folgendermaßen aus:



StyleSheets können sehr einfach auskommentiert werden; dies ist gelegentlich recht praktisch bei der Such nach Fehlern oder um mehrere Varianten zu testen: /* selektor{ eigenschaft: wert;} */

Jetzt wird es Zeit ein wenig mit den StyleSheet Angaben zu spielen. Kopiert euch den folgenden Code in eine Textdatei und speichert diese als erstes_style.html ab. Am besten ihr legt einen neuen Ordner an, in den ihr die CSS- und HTML Datei ablegt.



Nun könnt ihr die HTML Seite mit eurem Browser aufrufen und mal schauen wie’s aussieht.

Ich stelle euch hier einige Eigenschaften zur Verfügung mit denen ihr in der CSS Datei experimentieren könnt:

background-color (erwartet einen Farbwert)
font-family (versucht als Werte mal "Arial, Helvetica, sans-serif"," Times New Roman, Times, serif" oder "Courier New, Courier, mono")
font-size (erwartet eine numerische Angabe mit Einheit)


Weitere Eigenschaften könnt ihr auch in unserer CSS Referenz www.css.maninweb.de - Anm. der Red. : Yep, ganz frisch online - nachschauen. Sie ist zwar noch nicht komplett, aber für die Anfänge sollte es erstmal ausreichen.

Öffnet eure CSS Datei mit einem einfachen Texteditor und spielt ein wenig mit CSS rum. Bei einer Änderung speichert ihr kurz und aktualisiert den Browser zur Ansicht.

Viel Spaß beim Experimentieren!


Downloads...

Als Übungsdateien könnt ihr die Downloads aus dem Kapitel 02 - Teil 2 - Es lebt! verwenden.

Gruß

V 1.00 - (C) by Maninweb.de - All rights reserved··

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
maninweb
Microsoft Excel MVP 2014


Verfasst am:
21. Dez 2007, 17:01
Rufname: maninweb
Wohnort: Aachen


AW: Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezel - AW: Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezel

Nach oben
       

Dieser Beitrag dient nur zur Sortierung
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 1 - Mit HTML und XHTML ins Internet 1 womaninweb 7815 21. Dez 2007, 17:06
maninweb Kapitel 02 - Teil 1 - Mit HTML und XHTML ins Internet
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 3 - Es lebt immer noch! 1 womaninweb 5455 21. Dez 2007, 17:05
maninweb Kapitel 02 - Teil 3 - Es lebt immer noch!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 4 - Der Konformist – XHTML 1 womaninweb 5131 21. Dez 2007, 17:04
maninweb Kapitel 02 - Teil 4 - Der Konformist – XHTML
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 1 - Farbenrausch 2 womaninweb 6249 21. Dez 2007, 17:04
maninweb Kapitel 03 - Teil 1 - Farbenrausch
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 3 - Stein auf Stein ... 1 womaninweb 5232 21. Dez 2007, 17:03
maninweb Kapitel 03 - Teil 3 - Stein auf Stein ...
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 4 - Pimp my Site 1 womaninweb 5383 21. Dez 2007, 17:02
maninweb Kapitel 03 - Teil 4 - Pimp my Site
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 2 - Hat es deine Augen oder meine? 1 womaninweb 4361 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 2 - Hat es deine Augen oder meine?
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! 2 womaninweb 4348 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 2 - Butter bei die Fische 1 womaninweb 4459 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 2 - Butter bei die Fische
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 3 - Feingeschliffen 1 womaninweb 4240 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 3 - Feingeschliffen
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle 19 maninweb 6755 13. Sep 2008, 20:55
womaninweb Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! 5 maninweb 3753 03. Apr 2008, 12:05
voler Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: Microsoft Excel-Formeln