So sieht der html Code mit oder ohne CSS aus
Am besten ist, sie legen einen x-beliebigen Ordner an, benennen ihn, und legen in diesen Ordner die html 5 Datei und die Css Datei dazu. Mit einem Link im Quellcode der html 5 Struktur wird der Ordner mit der CSS Datei angegeben und verlinkt. Die Html Struktur mit dem Link sieht jetzt so aus! Die einzige Stelle im Code, die Sie noch nicht verstehen können. Die Zeile nach dem Tag, an dem das Wort steht: Link href"style1.css" relstyle1css" reltypetext/css" Aber versuchen Sie doch einfach, sich selbst einen Reim darauf zu machen.Bevor ich Ihnen alles erkläre, mache ich etwas. Es ist bekannt. Diese Zeile teilt dem Browser mit: Links: "Hier ist eine Verknüpfung zu einem anderen Dokument."'style1.css' ist der relative Pfad zu diesem Dokument. Das kommt Ihnen doch sicher bekannt vor. Stimmt, das passt genau. Dieses Attribut stammt aus dem ersten Studienheft vom a-Tag. Die Kennzeichnung von Hyperlinks/Verweisen kennen! Das Attribut rel definiert, in welcher Relation die Relation steht. Die HTML-Datei und die mit ihr verknüpfte Datei Style1.css sind miteinander verbunden. Der Attributwert stylesheet bedeutet, dass style1.css die für das HTML-Dokument bevorzugten Stilvorlagen enthält, die automatisch immer angewandt werden sollen.“ type="text/css": „Das ist der sog. MIME-Typ und bedeutet: Das Dokument enthält lesbaren Text in Form von CSS-Angaben.“ Wie Sie am Beispielcode in Abb. 2 auch erkennen können, muss die Zeile <link ...> im head-Bereich des HTML-Dokuments direkt nach dem title-Tag eingefügt werden.
Das Bild ist im Browser mit und ohne CSS.
Die Zeile link... verbindet offensichtlich die Menschen miteinander. HTML-Datei und Style1.css-Datei. Diese Datei enthält die Regeln für das Spielen. Im vorigen Kapitel haben wir schon über die Muster gesprochen. Schauen wir uns das an Zuerst schauen wir uns das Beispieldokument ohne diese Zeile an. Wie es im Firefox aussehen würde:
Es ist erwartungsgemäß keine besonders interessante HTML-Seite. Jetzt schauen wir uns das Dokument mit dem kompletten Quellcode aus Abb. 2 im Firefox an:
|
3.2 Der CSS-Code
Aber nun müssen wir endlich den Inhalt dieses neuen Dokuments style1.css untersuchen:
Die Gestaltungsregel, die Sie wahrscheinlich zunächst einmal ohne große Erklärung verstehen können, wird nach jedem Tag in geschweiften Klammern geschrieben. Wie Sie bereits richtig angenommen haben, stellt die erste Zeile dieser Datei erneut den Zeichensatz UTF-8 fest, der verwendet werden soll.
3.3 Im Browser sind Stilvorlagen eingebaut
Betrachten wir noch einmal Abbildung 3: Diese Schriftarten und Schriftgrößen sind Ihnen bekannt, wenn Sie mit dem vorherigen Studienheft arbeiten. Ob Sie die Beispiele damals mit Firefox, Internet Explorer oder einem anderen Browser betrachtet haben, ist dabei nicht wichtig. Eine h1-Überschrift, eine h2-Überschrift, ein Absatz oder eine Liste müssen eindeutig von allen Brow- sern dargestellt werden. So etwas wie eine „eingebaute Stilvorlage“ haben Browser.
4 Regeln: Die CSS-Syntax
Ja, in der vorangegangenen Übung haben Sie bereits einige CSS-Regeln in das Notepad eingetragen. Daher werden Sie jetzt keine Schwierigkeiten haben, die Syntax zu erlernen. Eine Regel setzt sich aus zwei Teilen zusammen, nämlich Selektor und Deklaration: • h1 {font-family:Helvetica;} Die Auswahl ist stets ein HTML-Tag. Er informiert den Browser darüber, dass die interne Standard-Stilvorlage für diesen Tag nicht mehr gültig ist. Die Deklaration beschreibt, wie der Brow- ser das Tag nun darstellen muss. Sie haben bereits in unserem Beispiel festgestellt, dass es möglich ist, mehrere Erklärungen hintereinander zu schreiben. Danach müssen sie mithilfe eines Semikolons voneinander abgegrenzt werden: • h1 {font-family:Helvetica; font-weight: bold;}
• h1 { font-family:Helvetica; text-weight: bold; }
4.1 Gruppierte Selektoren Selektoren lassen sich ebenfalls gruppieren, was bedeutet, dass eine Erklärung für mehrere Selektoren gleichzeitig gültig ist:
• h1, h2, h3 {font-weight: bold; Farbe: grün;}
4.2 Kontextabhängige Selektoren
Die CSS-Regel würde also bei folgendem HTML-Code zur Wirkung kommen:
Wenn Texte mit em in einem anderen Kontext hervorgehoben werden, hat diese Stilvorlage keinen Einfluss auf sie:
Ich muss Sie darauf hinweisen: Die Syntax von gruppierten und kontextabhängigen Selektoren unterscheidet sich nur durch ein Komma (anstelle eines Leerzeichens). Vergleichen Sie dann erneut die Beispiele für CSS aus den Kapiteln 4.1 und 4.2.
4.3 CSS-Kommentare Sind Ihnen die Kommentare im HTML-Code noch in Erinnerung geblieben? Damals erklärte ich Ihnen die Bedeutung der Ergänzung des Quellcodes um Kommentare, damit er auch nach längerer Zeit wieder verständlich wird. So ist es auch bei Style Sheets der Fall. In dieser Situation entstehen Kommentare mithilfe des Slash „/“, der bereits im HTML vorhanden ist, und einem Stern: • /* Dies ist ein CSS-Kommentar */.
4.4 Typografie für Webseitenorientierte Texte Typografie bedeutet, wie man Texte und Schriften richtig schreibt. Im Druck-Bereich. In diesem Bereich ist Typografie sehr wichtig. Denn das Drucken von Text ist wichtig. Das ist eine alte Kultur-Tradition. Grafikdesigner, der im Bereich Grafikdesign arbeitet Die Leute, die mit Printmedien arbeiten, tun oft sehr viel. Suche nach guten Schriften. Es gibt heute Tausende von ihnen. Was passiert mit der Typografie im Webdesign? Leider ist es nicht so toll, wie man denkt. Ich würde es als anspruchsvollen Grafiker wünschen. Es liegt einfach daran, dass Man darf als Webdesigner nur die Schriften einsetzen, die auch auf der Website verwendet werden. Die Webseite ist auf dem Computer des Besuchers installiert. Das ist der Grund. Deshalb benutzt man oft CSS-Regeln für die Auswahl von Schriftarten. Wie in Abb. dargestellt Das könnte so aussehen:
• body {font-family: Geneva, Arial, sans-serif;}
Um diese Erklärung zu verstehen, musst du wissen: Sie wissen nichts über die Person oder den Menschen auf der Webseite. Sie designen gerade etwas. Sie wissen nicht, was Sie tun sollen. Welches Betriebssystem Sie verwenden (Windows, Mac und Linux)Welche Schriften sind auf dem entsprechenden Rechner installiert? Welchen Browser sie/er benutzt Welche Größe des Browserfensters will sie/er haben? Bitte benutze das ganze Körper-Bereich. Die Schrift Geneva auf der Rückseite. Wenn diese nicht auf deinem Computer ist, nimm diese bitte weg. Arial heißt die Schrift. Wenn du das nicht finden kannst, suche bitte eine andere Möglichkeit. „Fixe Schrift“ Geneva ist auf allen Macs verfügbar. Der Arial sieht dem Arial sehr ähnlich. Es gibt einen dows-PC. Für alle Fälle gibt es dann auch noch eine spezielle Lösung. Es wird die Schriftart "sans-serif" angegeben.Die Schrift heißt "Serifen". Diese "Verzierungen" sind an den Buchstaben. z. B. bei diesem großen T. Dagegen hat dieses große T keine Serifen.
5 Klassen Bleiben wir bei diesem Fall: Der Browser zeigt dann alle Absätze in dem entsprechenden HTML-Dokument mit roter Schrift mit 12 Punkten an. Aber was wäre, wenn Sie in demselben Dokument gelegentlich auch einen Absatz in kleiner Schrift brauchen? Sieh dir dieses Studienheft an: Hier benutze ich gewöhnlichen „Fließtext“, aber manchmal schreibe ich auch einen Hinweis (Marginalie) in kleinerer Schrift am rechten Rand. Auf welche Weise können wir das auf einer Website umsetzen? Wenn wir in unserem Dokument mehrere Absätze mit verschiedenen Stilen verwenden wollen, können Sie verschiedene Klassen für denselben Selektor festlegen. Eine einfache Methode zur Bildung von Klassen ist es, einen beliebigen Namen hinter dem Selektor nach einem Punkt anzugeben. Ein Beispiel dafür sind die willkürlichen Klassennamen „typ1“ und „typ2“ für zwei unterschiedliche Absatztypen:
•p.typ1{color:blue;font-family:Courier;}
Der Verweis auf diese Klassen würde dann im HTML-Code wie folgt lauten: •<pclass="typ1">Courier Wie Sie sehen können, handelt es sich bei der Klasse um ein gewöhnliches HTML-Attribut (vgl. width, src, href usw.). In diesem Fall wird das Attribut als class bezeichnet, und als Wert wird der Klassenname angezeigt. Das ist einfach, nicht wahr? Das hat uns genau das gebracht, was wir wollten!
5.1 Klassen ohne Selektor: Wenn eine Klasse ohne Selektor definiert wird, kann sie als Attribut in beliebigen HTML-Tags verwendet werden: •.blautext {color:blau;} •<h3 class="blautext">Hier ist eine blaue Überschrift</h3>
Wenn Sie später mit Dreamweaver oder Microsoft Expression Web arbeiten, werden Sie feststellen, dass diese modernen Webeditoren Klassen ohne Selektor generieren. Tatsächlich wird diese Form der Klassen sogar überwiegend verwendet.
5.2 Pseudoklassen
Pseudoklassen ermöglichen die Definition von CSS-Stilvorlagen für HTML-Komponenten, die nicht mit einem eindeutigen HTML-Element ausgedrückt werden können. Es gibt dafür eine besondere Syntax. Hier möchte ich mich auf die Pseudoklassen konzentrieren, die für die verschiedenen Arten von Links existieren, etwa „ein noch nicht besuchter Link“ oder „ein bereits besuchter Link“.
Für diese Pseudoklassen muss zunächst das betreffende HTML-Element aufgeschrieben werden. Das ist bei den Referenzen bekanntlich der a-Tag. Anschließend folgt ein Doppelpunkt, danach wird ein erlaubtes Schlüsselwort angegeben. Im Einzelnen sind die Pseudoklassen für Links wie folgt: • a:link Bitte denken Sie daran, dass die Reihenfolge beim Formatieren mit Pseudoklassen wichtig ist. Um sicherzustellen, dass alles genau so läuft, wie Sie es sich vorstellen, müssen Sie sich an die Reihenfolge der oben genannten Liste halten! Natürlich können unnötige Pseudoklassen nicht berücksichtigt werden. Ein konkretes Beispiel dafür ist: Nehmen wir an, Sie wollen, dass Ihre Links, die Sie noch nicht besucht haben, rot und ohne die übliche Unterstreichung angezeigt werden. Wenn sie von einer Maus berührt werden, erscheinen sie blau und unterstrichen. Die dafür erforderlichen CSS-Regeln sollten wie folgt sein:
•a:link {color:red; text-decoration:none;}
Die Gestaltung der Links durch diese Pseudoklassen wird in nahezu allen zeitgemäßen Websites intensiv genutzt. Auf diese Weise lassen sich Effekte erzielen, die zuvor viele Grafiken und viel JavaScript-Programmierung erforderten. |
6 Verknüpfung mit HTML Lernziel: 6.1 Externe Style Sheets Bei unserem Beispiel in Kapitel 3 haben wir ja ein externes Style Sheet bereits kennengelernt. Dazu müssen folgende Voraussetzungen erfüllt sein: Die Style-Sheeet-Datei muss als Textdatei mit der Extension .css abgespeichert werden.
Vielleicht ist Ihnen die Tragweite dieser Methode beim Lesen von Kapitel 3 noch nicht bewusst. Sie haben sich nicht so richtig bewusst, da Sie mit so vielen neuen Konzepten konfrontiert sind. Eine externe Style-Sheet-Datei stellt die optimale Lösung dar. Die Lösung liegt in einem einzigen Satz von Regeln, d.h. einer einzigen CSS-Regel. Das Programm kann beliebig viele HTML-Dokumente gleichzeitig formatieren. Es ist wichtig. In allen HTML-Dateien wird lediglich die Zeile link... mit dem richtigen Link angegeben. Die Eingabe des Pfads zur CSS-Datei ist bereits erfolgt. Wie eine Pfeife. Dies führt zu einer Änderung der Formatierungsdetails selbst. Hunderte von HTML-Seiten, die an einer zentralen Stelle in wenigen Augenblicken verfügbar sind. Das Problem ist gelöst. Ich möchte Sie noch einmal auf die Syntaxunterschiede zwischen den beiden Sprachen hinweisen. HTML und XHTML. Die Zeile mit der Verknüpfung sollte in XHTML enthalten sein. Zum externen Style-Sheet lautet Folgendes: • <link rel="stylesheet" href="/pfad/name.css" type="text/css" /> Bitte beachten Sie, dass es hier am Ende eine schließende Klammer gibt. Es gibt Schrägstriche. Sie haben bereits aus dem Studienheft zu HTML erfahren. Dieser zusätzliche Schrägstrich ist notwendig, um die strengen Syntaxregeln zu erfüllen. XHTML ist nicht verletzt worden. Er sorgt dafür, dass das Links-Tag entsteht. Die internen Abteilungen werden geschlossen. Sollten Sie bereits mit bestehenden Web-Projekten arbeiten? Die Aufgaben, die nach der XHTML-Spezifikation zu erledigen sind, werden nach der XHTML-Spezifikation bearbeitet. Sie finden diese Schreibweise auf den XHTML-Seiten. 6.2 Interne Style Sheets Eine HTML-Seite kann mit Hilfe von CSS formatiert werden. Die CSS-Regeln imhead-Bereich unterbringen. Für diesen Zweck ist der spezielle HTML-Code erforderlich.
Wie Sie in Abb.6 sehen können Sie können die CSS-Regeln bei einem eingebetteten Programm lesen. Style Sheet lässt sich durch den Style-Tag in einer eigenen „Sandwich-Struktur“ unterbringen. Das hat mir geholfen. Im geöffneten Tag wird mit typetext/css“ der MIME-Typ angeglichen. Ein Attribut, das wir bereits bei der Verlinkung mit dem externen Style verwenden. Sie haben sich kennengelernt. Innerhalb der Style-Struktur werden die eigenen Merkmale definiert. Die CSS-Regeln sollten weiterhin mit HTML-Kommentaren ergänzt werden. “ Das ist noch ein Relikt aus den Zeiten, als manche ältere Brow-Techniken verwendet wurden. Sie konnten den Style-Tag nicht interpretieren. Solche Browser hätten den Vorteil. CSS-Code wird einfach als Text ausgegeben, das geschieht durch diese Kommentare. |
6.3 Inline Styles Inline Styles erlauben die lokale Anwendung von Regeln mit dem Attribut. Design direkt im HTML-Tag, wie das folgende Code-Beispiel zeigt. Das Attribut erlaubt die lokale Anwendung von Regeln durch das Attribut. style direkt in dem betreffenden HTML-Tag. In der Mitte 7 ist ein Inline Style. |
7 Vererbung und Hierarchie CSS-Regeln sind eine besonders wichtige Eigenschaft von CSS-Regeln. Die Erbschaft kann erben werden. Hier ist das Style Sheet und das zu verwendende Design: Das folgende Beispiel ist ein HTML-Beispiel. h1 {color: green;} Der HTML-Code, für den diese Regel wirksam ist, lautet: <h1>Style Sheets sind<em>toll</em></h1> Obwohl für den Selektor „em“ keine explizite Deklaration angegeben wurde, wird er dennoch erwähnt. Der Browser hat das Wort „toll“ auch in grün dargestellt. H1-Tags stehen für den Stil des Selektors. Die Überschrift ist in uns. Zum Beispiel das Eltern-Element – das Kind-Element. Die CSS-Methode h1 em {color: red;} 7.2 Die Kaskade Das Konzept der „Cascading Style Sheets“ erlaubt die Integration von Stilinformationen von mehreren Quellen. Ein realistisches Beispiel für die Website einer Firma.
8 Voraussetzungen für CSS-basiertes Layout Zunächst möchte ich Sie auf einen Punkt hinweisen, an dem Sie sich wohl fühlen könnten. Übrigens: Man bezeichnet diese beiden Elemente-Typen oft auch nur kurz als block-Elemente bzw. inline-Elemente. Jetzt kommt das Box-Modell ins Spiel: Es definiert, wie bei diesen block-Elementen die Breite und Höhe berechnet wird. Die Gesamtbreite eines solchen Elements ergibt sich nämlich aus der Addition folgender Einzelwerte (in Klammern steht jeweils der Name der entsprechenden CSS-Eigenschaft): Der Rahmen wird in der CSS-Sprache border bezeichnet und umfasst mehrere Einzelteile. |