CSS-Tutorial - Inhaltsverzeichnis

Einführung
Eine kurze Präsentation des Tutorials und was Sie darin lernen werden.
Lektion 1: Was ist CSS?
Eine kleine Geschichte über die Entstehung von CSS und die Gründe, warum es sinnvoll ist, dass
CSS gegenüber HTML für das Layout und die Präsentation bevorzugen.
Lektion 2: Wie funktioniert CSS?
Die grundlegende Syntax von CSS lernen und das erste Stylesheet erstellen.
Lektion 3: Die Farben und die Hintergründe
Lernen, wie man Farben und Hintergrundfarben auf seiner Website anwendet und wie
Hintergrundbilder verwenden.
Lektion 4: Die Schriften
In dieser Lektion lernen Sie, was Schriftarten sind und wie man sie anwendet mit
CSS.
Lektion 5: Der Text
Diese Lektion führt in die erstaunlichen Möglichkeiten von CSS ein, um eine Präsentation hinzuzufügen.
texte.
Lektion 6: Die Verbindungen
Wie man angenehme und nützliche Effekte zu Links hinzufügt und Pseudoklassen verwendet.
Lektionen 7: Die Identifizierung und Gruppierung von Elementen (Klasse und ID)
Ansatz zur Nutzung von AttributenKlasseetidum die Eigenschaften zu definieren
ausgewählte Elemente.
Lektion 8 : Die Gruppierung von Elementen (span und div)
Ein Ansatz zur Verwendung von ElementenSpanetdiv, und die zentrale Rolle dieser beiden
HTML-Elemente für CSS.
Lektion 9: Das Boxenmodell
Das Box-Modell in CSS beschreibt die für HTML-Elemente erzeugten Boxen.
Lektion 10: Das Boxmodell: Margin & Padding
Ändern Sie die Darstellung der Elemente mit den EigenschaftenMargeetPolsterung.
Lektion 11 : Das Box-Modell : die Ränder
Lernen Sie die unbegrenzten Möglichkeiten der Verwendung von Rahmen in Ihren Seiten mit CSS.
Lektion 12: Das Boxmodell: die Höhe und die Breite
In dieser Lektion werden wir lernen, wie man die Höhe und die Breite eines einfach festlegt.
Element.
Lehre 13: Die fließenden Elemente (die Fließenden)
Ein Element kann mit der Eigenschaft nach rechts oder nach links [Link].
Lektionen 14 : Die Positionierung der Elemente
Das CSS-Positionieren ermöglicht es, ein Element auf der Seite genau dort zu platzieren, wo man möchte.
will.
Lektion 15 : Eine Schicht über einer Schicht mit z-index (die Schichten)
Diese Lektion wird uns beibringen, wie man verschiedene Elemente übereinanderlegen kann.
Eigentumz-Index.
 Lektion 16: Die Standards des Webs und die Validierung
Die letzte Lektion behandelt die Standards des W3C und wie man die Genauigkeit davon überprüft.
CSS-Code.

Ein kostenloses CSS-Tutorial

Cascading Style Sheets (CSS) sind ein fantastisches Werkzeug für die
Präsentation Ihrer Websites. Sie können viel Zeit sparen und sie ermöglichen
websites auf ganz neue Art und Weise zu erstellen. CSS ist ein Muss für jeden, der sich mit
Web-Erstellung.

Dieses Tutorial bringt Sie in nur wenigen Stunden mit CSS auf den Weg. Es ist leicht verständlich und es wird Ihnen ...
wird alle raffinierten Techniken lehren.

CSS lernen macht Spaß. Nehmen Sie sich während des Tutorials Zeit.
um korrekt zu experimentieren, was Sie in jeder Lektion gelernt haben.

Die Verwendung von CSS erfordert Grundkenntnisse in HTML. Wenn Ihnen HTML nicht vertraut ist.
vertraut, bitte beginnen Sie mitunser HTML-Tutorialbevor wir zu CSS übergehen.

Welche Software benötige ich?

Bitte vermeiden Sie Software wie FrontPage, DreamWeaver oder Word für dieses Tutorial.
Fortgeschrittene Software wird Ihnen nicht helfen, CSS zu lernen. Im Gegenteil, es wird Sie einschränken und
wird Ihre Lernkurve erheblich steigern.

Alles, was Sie brauchen, ist ein einfacher und kostenloser Texteditor.

Zum Beispiel kommt Windows von Microsoft mit einem Programm namens Notepad. Man findet es
findet man normalerweise in den "Zubehör" der Rubrik "Alle Programme" in der
Menü « Start ». Andernfalls können Sie einen ähnlichen Texteditor verwenden, zum Beispiel,
Pico unter Linux oder TextEdit auf Macintosh.
Ein einfacher Texteditor ist ideal, um HTML und CSS zu lernen, da er nicht beeinflusst oder ändert
den Code, den Sie eingeben. So können Sie Ihren Erfolg und Ihre Fehler nur sich selbst zuschreiben.
selbst, und nicht an die Software.

Sie können jeden Browser mit dem Tutorial verwenden. Wir empfehlen Ihnen, ...
Halten Sie immer Ihren Browser auf dem neuesten Stand und verwenden Sie die neueste Version.

Ein Browser und ein einfacher Texteditor sind alles, was Sie brauchen.

Lass uns anfangen!

Lektionen 1: Was ist CSS?

Vielleicht haben Sie schon einmal von CSS gehört, ohne wirklich zu wissen, worum es dabei geht? In
In dieser Lektion werden Sie mehr über CSS erfahren und was Sie daraus ziehen können.

CSS ist die Abkürzung für "Cascading Style Sheets".

Was kann man mit CSS machen?

CSS ist eine Stylesheet-Sprache, die die Präsentation von HTML-Dokumenten definiert. Zum Beispiel, CSS
Deck die Schriftarten, die Farben, die Ränder, die Linien, die Höhe, die Breite, die Hintergrundbilder,
Plan, die fortgeschrittenen Positionierungen und viele andere Dinge. Wartet ab, um zu sehen!

HTML kann (miss)braucht werden, um Websites zu gestalten. Aber CSS bietet mehr Optionen und
zeigt sich präziser und ausgefeilter. CSS wird von allen aktuellen Browsern unterstützt.

Nach nur wenigen Lektionen in diesem Tutorial werden Sie in der Lage sein, Ihre eigenen Blätter herzustellen.
Stil mit CSS, um Ihrer Website ein ganz neues Aussehen zu verleihen.

Was ist der Unterschied zwischen CSS und HTML?

HTML dient dazu, den Inhalt zu strukturieren, CSS dient dazu, einen strukturierten Inhalt zu formatieren.

Gut, das klingt ein bisschen technisch und verwirrend. Aber lesen Sie weiter, es wird bald Sinn machen.

Rückkehr zu den guten alten Zeiten, als Madonna eine Jungfrau war und ein Typ namens Tim Berners Lee.
Als das World Wide Web erfunden wurde, wurde die Sprache HTML nur verwendet, um Text zu strukturieren.
Ein Autor konnte seinen Text kennzeichnen, indem er erklärte: "Hier ist ein Titel" oder "Hier ist ein Absatz", mit
die HTML-Tags<h1>, oder<p>.
Die wachsende Popularität des Webs führte dazu, dass Designer nach Möglichkeiten suchten, um hinzuzufügen
von der Präsentation zu den Online-Dokumenten. Um dieser Anfrage gerecht zu werden, die Herausgeber von
Browser (zu dieser Zeit Netscape und Microsoft) erfanden neue HTML-Tags,
wie zum Beispiel<schrift>, die sich von den Originalelementen dadurch unterschieden, dass sie definierten
eine Präsentation und keine Struktur.

Dies führte auch zu einer Situation, in der die ursprünglichen Strukturmarkierungen, wie <table>,
wurden zunehmend fälschlicherweise verwendet, um die Seiten darzustellen und nicht, um eine Struktur hinzuzufügen
texte. Viele neue Präsentationstags, wie <blink>, wurden nur erkannt
durch einen bestimmten Typ von Browser. "Sie müssen den Browser X verwenden, um diese Seite zu sehen" wurde ein
aktuelle Warnung auf Websites.

CSS wurde erfunden, um diese Situation zu beheben, indem es Webdesignern Möglichkeiten bietet.
von ausgeklügelten Präsentationen, die von allen Browsern verwaltet werden. Gleichzeitig den Stil trennen
Die Präsentation der Dokumente ihres Inhalts macht ihre Pflege viel einfacher.

Was sind die Vorteile von CSS?

CSS war eine Revolution im Universum des Webdesigns. Die konkreten Vorteile von CSS sind
die folgenden :

Die Steuerung der Präsentation mehrerer Dokumente durch ein einziges Stylesheet;
Eine genauere Kontrolle der Präsentation;
Verschiedene Präsentationen, die auf unterschiedliche Medientypen angewendet werden (auf dem Bildschirm, auf
der Druck, usw. ;
Zahlreiche fortgeschrittene und ausgeklügelte Techniken.

In dernächste Lektion, wir werden sehen, wie CSS tatsächlich funktioniert und wie
anfangen.

Lektionen 2: Wie funktioniert CSS?

In dieser Lektion lernen Sie, Ihr erstes Stylesheet zu erstellen. Sie werden wissen, was
Was ist das grundlegende CSS-Modell und welche Codes sind notwendig, um CSS in einem
Dokument HTML.

Viele Eigenschaften von Cascading Style Sheets (CSS) sind ähnlich wie die von HTML.
Wenn Sie es gewohnt sind, HTML für die Darstellung zu verwenden, werden Sie also viel wiedererkennen.
von diesen Codes. Lassen Sie uns ein konkretes Beispiel ansehen.

Die grundlegende CSS-Syntax

Angenommen, wir möchten, dass der Hintergrund einer Webseite in einem schönen Rot ist:

Mit HTML hätten wir es so gemacht:

<body bgcolor="#FF0000">

Mit CSS kann man dasselbe Ergebnis so erzielen:

Körper {Hintergrundfarbe: #FF0000;}

Wie Sie bemerkt haben, sind die Codes mehr oder weniger identisch für HTML und CSS. Dieses
Das Beispiel veranschaulicht auch das grundlegende Modell von CSS:

Aber wo platziert man den CSS-Code? Genau das werden wir jetzt sehen.

CSS auf ein HTML-Dokument anwenden

Es gibt drei Möglichkeiten, CSS-Stile auf ein HTML-Dokument anzuwenden. Alle sind hier erklärt.
Darunter. Wir empfehlen Ihnen, die dritte Methode zu überprüfen, nämlich die externe.

Methode 1: In der Zeile (das Attribut Stil)

Eine Möglichkeit, CSS auf HTML anzuwenden, ist die Verwendung des [Link]. Indem man wieder aufgreift
Das vorherige Beispiel mit dem roten Hintergrund können wir wie folgt anwenden:

<html>
<Kopf>
Beispiel
</Kopf>
<body style="background-color: #FF0000;">
<pDiese Seite ist rot</p>
 </body>
</html>

Methode 2 : Intern (das Stil-Element)

Eine andere Methode besteht darin, den CSS-Code mit dem HTML-Tag einzufügen.<style>. Zum Beispiel,
so wie dies :

<html>
<kopf>
Beispiel
<style type="text/css">
körper {hintergrund-farbe: #FF0000;}
</style>
</kopf>
<body>
<pDiese Seite ist rot</p>
</body>
</html>

Methode 3: Extern (ein Link zu einem Stylesheet)

Die empfohlene Methode ist die mit einem Link zu dem genannten externen Stylesheet. Für den Rest
In diesem Tutorial werden wir diese Methode für alle Beispiele verwenden.

Ein externes Stylesheet ist einfach eine Textdatei mit der Endung „.css“.
Jede beliebige Datei, das Stylesheet kann auf einem Webserver oder auf einer Festplatte gespeichert werden
dauer.

Zum Beispiel, sagen wir, dass Ihr Stylesheet "[Link]" heißt und sich in einem Ordner befindet.
genannt „Stil“. Man kann diese Situation wie folgt veranschaulichen:

Der Trick besteht darin, einen Link vom HTML-Dokument ([Link]) zur Stylesheet zu erstellen.
([Link]). Dieser Link kann in einer Zeile HTML-Code erstellt werden:

<link rel="stylesheet" type="text/css" href="style/[Link]" />

Beachten Sie, wie der Pfad zur Stylesheet mit dem Attribut angegeben [Link].
Die Codezeile muss im Header-Bereich des HTML-Codes eingeschrieben werden, das heißt zwischen den
Tags<kopf>et</Kopf>. So wie das:

<html>
<kopf>
Mein Dokument
<link rel="stylesheet" type="text/css"
href="style/[Link]" />
</kopf>
body
...

Dieser Link weist den Browser an, das CSS-Datei-Layout zu verwenden, um die Datei anzuzeigen.
HTML.
Was wirklich clever ist, ist dass mehrere HTML-Dokumente mit demselben verbunden werden können.
Stylesheet. Mit anderen Worten, man kann eine einzige CSS-Datei verwenden, um die
Präsentation mehrerer HTML-Dokumente.

Diese Technik könnte viel Mühe sparen. Zum Beispiel, wenn Sie wollen
Ändern Sie die Hintergrundfarbe einer Website mit 100 Seiten, eine Stylesheet kann
Sie sparen die manuelle Änderung der 100 HTML-Dokumente. Mit CSS, die Änderung
kann innerhalb von Sekunden eingreifen, indem nur eine einzige Zeile Code im Blatt geändert wird
zentraler Stil.

Lassen Sie uns also in die Praxis umsetzen, was wir gerade gelernt haben.

Versuchen Sie es selbst

Öffnen Sie den Editor (oder Ihren gewohnten Texteditor) und erstellen Sie zwei Dateien, eine HTML-Datei und
eine CSS-Datei mit den folgenden Inhalten:
[Link]
<html>
<kopf>
Mein Dokument
<link rel="stylesheet" type="text/css" href="[Link]" />
</kopf>
<body>
<h1>Mein erstes Stylesheet</h1>
</body>
</html>

[Link]
körper {
Hintergrundfarbe: #FF0000;
}

Legen Sie jetzt die beiden Dateien im selben Ordner ab. Denken Sie daran, die Dateien zu speichern mit
die guten Erweiterungen (jeweils „.htm“ und „.css“)

Öffnen Sie „[Link]“ in Ihrem Browser und stellen Sie den roten Hintergrund der Seite fest.
Herzlichen Glückwunsch! Sie haben Ihr erstes Stylesheet erstellt!

Schnell auf dienächste Lektionwo wir einige CSS-Eigenschaften studieren werden.

Lekcion 3: Die Farben und die Hintergründe

In dieser Lektion lernen Sie, wie man Farben und Hintergrundfarben anwendet.
auf Ihren Websites. Wir werden auch fortschrittliche Methoden untersuchen, um zu positionieren und zu steuern
Die Hintergrundbilder. Die folgenden CSS-Eigenschaften werden erklärt:

Farbe
Hintergrundfarbe
Hintergrundbild
Hintergrundwiederholung
Hintergrund-Anhang
Hintergrundposition
Hintergrund

Die Vordergrundfarbe: die Eigenschaft 'Farbe'

Das EigentumFarbebeschreibt die Vordergrundfarbe eines Elements.

Zum Beispiel nehmen wir an, dass wir alle Titel des Dokuments in Dunkelrot haben wollen. Die Titel
sind alle mit dem HTML-Element gekennzeichnet<h1>. Der folgende Code gibt den Elementen<h1> </h1>eine
rote Farbe.

h1 {
#ff0000;
}

Ein Beispiel anzeigen

Man kann Farben mit hexadezimalen Werten definieren, wie im vorherigen Beispiel.
(#ff0000), oder mit den Farbnamen ("rot"), oder mit RGB-Werten (rgb(255,0,0)).

Die Eigenschaft 'background-color'

Das EigentumHintergrundfarbebeschreibe die Hintergrundfarbe der Elemente.

Das Element<body>ist der Behälter für den gesamten Inhalt des HTML-Dokuments. Um zu ändern die
Farbe des Hintergrunds einer gesamten Seite, daher sollte die Eigenschaft 'Hintergrund-
Farbe zum Element<body>.

Man kann auch eine Hintergrundfarbe auf andere Elemente anwenden, einschließlich der Titel und die
Texte. Im folgenden Beispiel werden verschiedene Hintergrundfarben angewendet auf
Elemente<body>et<h1>.

körper {
#FFCC66
}

h1 {
#990000
#FC9804
}

Ein Beispiel anzeigen

Beachten Sie, dass wir zwei Eigenschaften auf angewendet haben<h1>indem man sie durch ein Semikolon trennt.

Die Hintergrundbilder [background-image]

Die CSS-EigenschaftHintergrundbilddient dazu, ein Hintergrundbild einzufügen.

Als Beispiel für ein Hintergrundbild verwenden wir den Schmetterling unten. Sie können
Laden Sie das Bild herunter, um es auf Ihrem eigenen Computer zu verwenden (indem Sie mit der rechten Maustaste auf die Schaltfläche klicken
von der Maus und durch Auswahl von „Bild speichern unter“ oder Sie können eine andere verwenden
Bild, wenn Sie möchten.

Um das Bild des Schmetterlings im Hintergrund einer Webseite einzufügen, wenden Sie einfach die
Eigenschaft background-image für das Element<body>und geben Sie den Pfad zum Bild an.

body {
#FFCC66
url("[Link]")
}

h1 {
#990000
#FC9804
}

Ein Beispiel anzeigen

Beachten Sie, wie wir den Pfad zum Bild mit url("[Link]") angegeben haben.
Das bedeutet, dass sich das Bild im selben Ordner wie das Stylesheet befindet. Man kann auch
Bilder aus anderen Ordnern mit url("../images/[Link]") aufrufen, oder sogar auf
Internet, indem Sie die vollständige Adresse der Datei angeben: url("[Link]

Hintergrundbild wiederholen [background-repeat]

Haben Sie im obigen Beispiel bemerkt, dass der Schmetterling standardmäßig wiederholt wurde?
horizontal und vertikal, um den gesamten Bildschirm abzudecken? Dieses Verhalten ist
kontrolliert durch das EigentumHintergrund-Wiederholung.

Die folgende Tabelle beschreibt die vier verschiedenen Werte vonHintergrund-Wiederholung.

Wert Beschreibung Beispiel

Hintergrund-Wiederholung: Anzeigen eines
wiederholen-x Das Bild wiederholt sich horizontal
Beispiel
background-repeat Einblenden
wiederholen-y Das Bild wiederholt sich vertikal
beispiel
wiederholen
Das Bild wiederholt sich horizontal und Anzeigen eines
vertikal Beispiel
Hintergrund-Wiederholung: nein-
Das Bild wiederholt sich nicht
ANZEIGEN EIN
wiederholen Beispiel

Zum Beispiel sollte der Code, um die Wiederholung eines Hintergrundbildes zu vermeiden, folgendermaßen aussehen
dies:

körper {
#FFCC66
url("[Link]")
Hintergrund-Wiederholung: keine-Wiederholung;
}

{
#990000
#FC9804
}

Ein Beispiel anzeigen

Hintergrundbild blockieren [background-attachment]

Das EigentumHintergrund-Anheftungbestimme, ob das Hintergrundbild fest ist oder scrollt
das Container-Element.
Ein gehindertes Hintergrundbild wird sich nicht mit dem Text bewegen, wenn der Leser scrollt.
Seite, im Gegensatz zu einem nicht blockierten Hintergrundbild, das mit dem Text der Seite scrollt.
Web.

Die folgende Tabelle beschreibt die beiden unterschiedlichen Werte vonHintergrund-Anheftung. Klicken Sie auf
die Beispiele, um den Unterschied zwischen defilieren und fixieren zu sehen.

Wert Beschreibung Beispiel

Background-attachment Das Bild scrollt mit der Seite (nicht Anzeigen Sie ein
scrollen blockiert) Beispiel
Zeige ein
Hintergrund-Anhaftung: fest Das Bild ist blockiert
Beispiel

Zum Beispiel wird der folgende Code das Hintergrundbild blockieren.

{}
#FFCC66
Hintergrundbild: url("[Link]");
Hintergrund-Wiederholung: keine Wiederholung;
Hintergrund-Anhaftung: fest;
}

h1 {
#990000
#FC9804
}

Ein Beispiel anzeigen

Hintergrundbild positionieren [background-position]

Standardmäßig wird das Hintergrundbild in der oberen linken Ecke des Bildschirms positioniert.
EigentumHintergrund-Positionermöglicht es, diese vordefinierte Position zu ändern und das Bild zu platzieren
Hintergrund irgendwo auf dem Bildschirm.

Es gibt mehrere Methoden, um den Wert vonHintergrundposition. Im Gegensatz dazu, sie sich
präsentieren alle in Form eines Koordinatenspiels. Zum Beispiel der Wert '100px 200px'
Positioniere das Hintergrundbild 100px von links und 200px von oben im Fenster.
der Navigator.

Die Koordinaten können in Prozent der Breite des Bildschirms oder in festen Einheiten ausgedrückt werden.
(Pixel, Zentimeter usw.), oder man kann die Schlüsselwörter "oben", "unten", "Mitte", "links" oder
„richtig“. Das folgende Modell veranschaulicht dieses System:
Die folgende Tabelle liefert einige Beispiele.

Wert Beschreibung Beispiel

Hintergrund-Position: Das Bild ist 2 cm von der linken Seite positioniert undAnzeige eines
2cm 2cm 2 cm vom oberen Rand der Seite Beispiel
background-position Das Bild ist zentriert und ein Viertel vonEinblenden
50% die Seite nach unten Beispiel
Hintergrund-Position: Das Bild ist in der oberen rechten Ecke [Link] eines
obere rechte Ecke die Seite Beispiel

Das folgende Codebeispiel positioniert das Hintergrundbild in der unteren rechten Ecke des
Seite :

körper {
#FFCC66
Hintergrundbild: url("[Link]");
Hintergrund-Wiederholung: keine Wiederholung;
Hintergrund-Anheftung: fest;
Hintergrund-Position: rechts unten;
}

h1 {
#990000
#FC9804
}
 Ein Beispiel anzeigen

Konzision [Hintergrund]
Das EigentumHintergrundist eine Abkürzung für alle in dieser Lektion aufgeführten Eigenschaften.

MitHintergrund, man kann mehrere Eigenschaften komprimieren und somit ein stilblatt kürzer schreiben
kurz, was das Lesen erleichtert.

Zum Beispiel die folgenden fünf Zeilen:

#FFCC66
url("[Link]")
Hintergrund-Wiederholung: keine Wiederholung;
Hintergrund-Anlage: fest;
Hintergrundposition: rechts unten;

Man kann dasselbe Ergebnis mitHintergrundin einer einzigen Codezeile:

Hintergrund: #FFCC66 url("[Link]") nicht wiederholen fest rechts unten;

Die Bestellliste lautet wie folgt:

Hintergrundfarbe| Hintergrundbild| Hintergrundwiederholung| background

Anhang| Hintergrund-Position

Wenn eine Eigenschaft fehlt, erhält sie automatisch ihren Standardwert. Zum Beispiel, wenn man
löschenHintergrund-AnheftenetHintergrundpositionvom Beispiel :

Hintergrund: #FFCC66 url("[Link]") keine Wiederholung;

Diese beiden nicht definierten Eigenschaften übernehmen einfach ihre Standardwerte, die sind
Wie jeder weiß, 'scroll' und 'oben links'.

Lebenslauf
In dieser Lektion haben Sie bereits neue Techniken gelernt, die ohne ... unmöglich wären.
HTML. Das Abenteuer geht weiter in dernächste Lektionder die breite Palette von Möglichkeiten untersucht
CSS zur Beschreibung von Schriftarten.

Lektionen 3: Die Farben und die Hintergründe

In dieser Lektion lernen Sie, wie Sie Farben und Hintergrundfarben anwenden.
auf Ihren Websites. Wir werden auch fortgeschrittene Methoden untersuchen, um zu positionieren und zu steuern
Die Hintergrundbilder. Die folgenden CSS-Eigenschaften werden erklärt:

Farbe
Hintergrundfarbe
Hintergrundbild
Hintergrund-Wiederholung
Hintergrund-Anhang
Hintergrund-Position
Hintergrund

Die Vordergrundfarbe: die Eigenschaft 'color'

Das EigentumFarbebeschreibt die Vordergrundfarbe eines Elements.

Zum Beispiel, nehmen wir an, wir möchten alle Titel des Dokuments in Dunkelrot. Die Titel
sind alle mit dem HTML-Element gekennzeichnet<h1>. Der folgende Code gibt den Elementen<h1> </h1>eine
rote Farbe.

h1 {
#ff0000
}

Ein Beispiel anzeigen

Man kann Farben mit hexadezimalen Werten definieren, wie im vorherigen Beispiel.
(#ff0000), oder mit den Farbnamen ("rot"), oder mit RGB-Werten (rgb(255,0,0)).

Die Eigenschaft 'background-color'

Das EigentumHintergrundfarbebeschreibe die Hintergrundfarbe der Elemente.
Das Element<body>ist der Behälter für den gesamten Inhalt des HTML-Dokuments. Um zu ändern die
Hintergrundfarbe einer gesamten Seite, daher sollte die Eigenschaft 'background-' angewendet werden.
Farbe zum Element<körper>.

Man kann auch eine Hintergrundfarbe auf andere Elemente anwenden, einschließlich der Titel und das
texte. Im folgenden Beispiel werden verschiedene Hintergrundfarben angewendet auf
Elemente<Körper>et<h1>.

body {
#FFCC66
}

h1 {
#990000
#FC9804
}

Ein Beispiel anzeigen

Beachten Sie, dass wir zwei Eigenschaften auf angewendet haben<h1>indem sie durch ein Semikolon getrennt werden.

Die Hintergrundbilder [background-image]

Die CSS-EigenschaftHintergrundbilddient dazu, ein Hintergrundbild einzufügen.

Als Beispiel für ein Hintergrundbild verwenden wir den Schmetterling unten. Sie können
Laden Sie das Bild herunter, um es auf Ihrem eigenen Computer zu verwenden (indem Sie auf die rechte Taste klicken)
von der Maus und „Bild speichern unter“ auswählen, oder Sie können eine andere verwenden
Bild, wenn Sie möchten.
Um das Bild des Schmetterlings im Hintergrund einer Webseite einzufügen, wenden Sie einfach die an
Hintergrundbild-Eigenschaft zum Element<body>und geben Sie den Pfad des Bildes an.

{
Hintergrundfarbe: #FFCC66;
url("[Link]")
}

{
#990000
#FC9804
}

Ein Beispiel anzeigen

Beachten Sie, wie wir den Pfad des Bildes mit url("[Link]") angegeben haben.
Das bedeutet, dass sich das Bild im selben Ordner wie das Stylesheet befindet. Man kann auch
Bilder aus anderen Ordnern mit url("../images/[Link]") aufrufen, oder sogar auf
Internet und die vollständige Adresse der Datei angeben :url("[Link]

Hintergrundbild wiederholen [background-repeat]

Haben Sie im vorherigen Beispiel bemerkt, dass der Schmetterling standardmäßig wiederholt wurde?
horizontal und vertikal, um den gesamten Bildschirm abzudecken? Dieses Verhalten ist
kontrolliert durch das EigentumHintergrund-Wiederholung.

Die folgende Tabelle beschreibt die vier verschiedenen Werte vonHintergrund-Wiederholung.

Wert Beschreibung Beispiel

Hintergrund-Wiederholung Ein anzeigen
wiederholen-x Das Bild wiederholt sich horizontal
Beispiel
background-repeat Zeige ein
wiederholen-y Das Bild wiederholt sich vertikal
Beispiel
Das Bild wiederholt sich horizontal und
Hintergrund-Wiederholung: wiederholen
Zeige ein
vertikal Beispiel
Hintergrund-Wiederholung: keine-
Das Bild wird nicht wiederholt
Zeige ein
wiederholen Beispiel

Zum Beispiel sollte der Code, um die Wiederholung eines Hintergrundbildes zu vermeiden, folgendermaßen aussehen
dies

{
#FFCC66
 url("[Link]")
Hintergrund-Wiederholung: keine Wiederholung;
}

h1 {
#990000
#FC9804
}

Ein Beispiel anzeigen

Hintergrundbild blockieren [background-attachment]

Das EigentumHintergrund-Anhangbestimme, ob das Hintergrundbild fix oder scrollend ist
das Behälterelement.

Ein festes Hintergrundbild wird sich nicht mit dem Text bewegen, wenn der Leser scrollt.
Seite, im Gegensatz zu einem nicht fixierten Hintergrundbild, das mit dem Text der Seite scrollen wird
Web.

Die folgende Tabelle beschreibt die beiden unterschiedlichen Werte vonHintergrund-Anhaftung. Klicken Sie auf
die Beispiele, um den Unterschied zwischen durchlaufen und festgelegt zu sehen.

Wert Beschreibung Beispiel

Hintergrund-Anheftung Das Bild scrollt mit der Seite (nein Eine anzeigen
scrollen blockiert) Beispiel
Einblenden
Hintergrund-Anheftung: fest Das Bild ist blockiert
Beispiel

Zum Beispiel wird der folgende Code das Hintergrundbild blockieren.

körper {
#FFCC66
Hintergrundbild: url("[Link]");
Hintergrund-Wiederholung: keine Wiederholung;
Hintergrund-Anlage: fest;
}

h1 {
#990000
Hintergrundfarbe: #FC9804;
}

Ein Beispiel anzeigen

Hintergrundbild positionieren [background-position]
Standardmäßig wird das Hintergrundbild in der oberen linken Ecke des Bildschirms positioniert.
EigentumHintergrundpositionermöglicht es, diese vordefinierte Position zu ändern und das Bild zu platzieren
Hintergrund irgendwo auf dem Bildschirm.

Es gibt mehrere Methoden, um den Wert vonHintergrundposition. Im Gegensatz dazu, sie sich
präsentieren alle in Form eines Koordinatenspiels. Zum Beispiel der Wert '100px 200px'
Positioniere das Hintergrundbild 100px von links und 200px von oben im Fenster.
der Browser.

Die Koordinaten können als Prozentsätze der Bildschirmbreite oder in festen Einheiten angegeben werden.
(Pixel, Zentimeter usw.), oder man kann die Schlüsselwörter "oben", "unten", "zentriert", "links" oder
"richtig". Das folgende Modell veranschaulicht dieses System:

Die folgende Tabelle enthält einige Beispiele.

Wert Beschreibung Beispiel

background-position Das Bild ist 2 cm von links positioniert undEinblenden
2cm 2cm 2 cm vom oberen Rand der Seite Beispiel
Hintergrundposition: Das Bild ist zentriert und auf einem Viertel vonEinblenden eines
50 % 25 % die Seite nach unten Beispiel
Hintergrundposition: Das Bild ist in der oberen rechten Ecke [Link]
oben rechts
 die Seite Beispiel

Das folgende Codebeispiel positioniert das Hintergrundbild in der unteren rechten Ecke der
Seite :

körper {
#FFCC66
url("[Link]")
Hintergrund-Wiederholung: keine Wiederholung;
Hintergrund-Anbringung: fest;
Hintergrund-Position: rechts unten;
}

h1 {
#990000
#FC9804
}

Ein Beispiel anzeigen

Prägnanz [Hintergrund]
Das EigentumHintergrundist eine Abkürzung für alle in dieser Lektion aufgelisteten Eigenschaften.

MitHintergrund, man kann mehrere Eigenschaften komprimieren und somit ein Stylesheet effektiver schreiben.
kurz, was das Lesen erleichtert.

Zum Beispiel die folgenden fünf Zeilen:

#FFCC66
url("[Link]")
Hintergrund-Wiederholung: keine-Wiederholung;
Hintergrund-Anheftung: fest;
Hintergrund-Position: rechts unten;

Man kann das gleiche Ergebnis mitHintergrundin einer einzigen Codezeile:

Hintergrund: #FFCC66 url("[Link]") kein Wiederholen fest rechts unten;

Die Bestellliste lautet wie folgt:

Hintergrundfarbe| [Hintergrundbild]| Hintergrund-Wiederholung| [Hintergrund-
Anlage| Hintergrund-Position

Wenn eine Eigenschaft fehlt, erhält sie automatisch ihren Standardwert. Zum Beispiel, wenn man
löschenHintergrund-AnlageetHintergrundpositionvom Beispiel:

Hintergrund: #FFCC66 url("[Link]") kein-Wiederholen;

Diese beiden undefinierten Eigenschaften werden einfach ihre Standardwerte annehmen, die sind
Wie jeder weiß, "scroll" und "oben links".

Lebenslauf
In dieser Lektion haben Sie bereits neue Techniken gelernt, die ohne ... unmöglich wären.
HTML. Das Abenteuer geht weiter in dernächste Lektionder die breite Palette von Möglichkeiten untersucht
CSS zur Beschreibung von Schriftarten.

Lektion 4: Die Schriftarten

In dieser Lektion lernen Sie, was Schriftarten sind und wie man sie mit CSS anwendet.
Wir werden auch untersuchen, wie man das Problem der spezifisch gewählten Schriftarten umgehen kann.
für eine Website, die nur sichtbar ist, wenn sie auf dem verwendeten Computer installiert ist
Zugriff auf die Website. Die folgenden CSS-Eigenschaften werden beschrieben:

Schriftart
Schriftstil
Schriftvariation
schriftgewicht
Schriftgröße
Schriftart

Die Schriftfamilie [font-family]

Das EigentumSchriftartdient dazu, die priorisierte Liste der Schriftarten anzugeben, die für die Anzeige verwendet werden sollen
einem bestimmten Element oder einer Webseite. Wenn die erste Schriftart in der Liste nicht verfügbar ist auf
Der Computer, der verwendet wird, um auf die Seite zuzugreifen, wird die folgende Schriftart ausprobiert und so weiter, bis dies geschieht.
dass es eine gibt, die passt.
Es gibt zwei Arten von Namen, um Schriftarten zu kategorisieren: Familiennamen und Familien.
Generika. Die beiden Begriffe werden unten erklärt.

Der Nachname
Als Beispiele für Nachnamen (oft als "Schriften" bezeichnet) findet man "Arial",
"Times New Roman" oder "Tahoma".
Die generische Familie
Man kann generische Familien als Gruppen von Nachnamen beschreiben, die
einheitliche Aspekte. Ein Beispiel ist die serifenlose Familie, die eine Reihe von
Schriften ohne "Serifen".

Man kann diesen Unterschied wie folgt veranschaulichen:

Wenn man Schriftarten für eine Website auflistet, beginnt man natürlich mit der bevorzugten Schriftart.
gefolgt von Ersatzschriften. Es wird empfohlen, die Liste mit einer Familie zu beenden.
Allgemein. So wird die Seite mindestens mit einer Schriftart derselben Familie angezeigt, wenn keine der
Die angegebenen Richtlinien waren nicht verfügbar.

Ein Beispiel für eine priorisierte Liste von Schriften würde folgendermaßen aussehen:

h1 {Schriftart: arial, verdana, sans-serif;}

h2 {Schriftfamilie: "Times New Roman", Serifenschnitt;}
 Ein Beispiel anzeigen

Die Titel, die durch Elemente gekennzeichnet sind<h1> </h1>werden in der Schriftart "Arial" angezeigt. Wenn sie nicht
Installiert auf dem Computer des Benutzers, wird die Schriftart "Verdana" als Ersatz verwendet. Wenn diese beiden
Schriften sind nicht verfügbar, die Titel werden in einer serifenlosen Schriftart angezeigt.

Beachten Sie, dass der Schriftartname "Times New Roman" Leerzeichen enthält, und sie daher
listée entre des guillemets.

Der Stil der Schriftarten [Schriftstil]

Das EigentumSchriftstilBestimmen Sie, ob der Stil der betreffenden Schriftart normal, kursiv oder ...
schräg. Im folgenden Beispiel sind alle Titel, die durch Elemente markiert sind<h2>werden angezeigt in
Italics.

h1 {schriftart: arial, verdana, sans-serif;}

h2 {Schriftart: "Times New Roman", Serif; Schriftartstil: kursiv;}

Ein Beispiel anzeigen

Die Schriftvarianten [font-variant]

Das EigentumSchriftvariationdient dazu, zwischen den Varianten normal und small-caps zu wählen
(N.d.T. petites capitales) d'une police. Une police small-caps utilise des lettres en capitales de
Größe reduziert anstelle von Buchstaben in Kleinbuchstaben. Verwirrt? Studieren Sie diese Beispiele:

Wenn das EigentumSchriftvariantevautsmall-capset qu'aucune police en petites capitales n'est

Wenn verfügbar, wird der Browser wahrscheinlich den Text in Großbuchstaben anzeigen.

h1 {font-variant: kleine Großbuchstaben;}

h2 {Schriftvariante: normal;}

Ein Beispiel anzeigen

Die Schriftstärke [font-weight]

Das EigentumSchriftstärkebeschreiben Sie mit welchem Grad an Fett (oder « Schwarz ») die Schriftart dargestellt werden soll.
Sie kann eine graissenormaloubold(N.d.T. fettgedruckt) haben. Einige Browser
ermöglichen sogar die Verwendung von Zahlen zwischen 100 und 900 (den Hundertern), um das Fett zu beschreiben
die Polizei.

p {font-family: arial, verdana, sans-serif;}

td {Schriftart: arial, verdana, sans-serif; Schriftgewicht: fett;}

Ein Beispiel anzeigen

Der Polizeikörper [Schriftgröße]

Der Körper einer Polizei wird durch das Eigentum [Link]öße.

Man kann aus vielen verschiedenen Einheiten wählen (zum Beispiel Pixel und Prozentsätze) für
beschreiben Sie die Polizeikorps. In diesem Tutorial werden wir uns auf die wichtigsten Einheiten konzentrieren.
aktuell und angemessen. Beispiele sind:

h1 {font-size:30px;}
h2 {Schriftgröße:12pt;}
h3 {Schriftgröße:120%;}
p {Schriftgröße:1em;}

Ein Beispiel anzeigen

Es gibt einen wesentlichen Unterschied zwischen den vier vorherigen Einheiten. Die Einheiten „px“ und „pt“
die Schriftgröße absolut ist, während "%" und "em" dem Benutzer ermöglichen,
das bei Bedarf anzupassen. Viele Benutzer haben Behinderungen, sind älter oder einfach
unter einer schlechten Sicht oder der schlechten Qualität ihres Monitors leiden. Um Ihre Website zu verbessern
Web zugänglich für alle, sollten Sie anpassbare Einheiten wie "%" oder "em" verwenden.

Hier ist eine Illustration, wie man die Schriftgröße in Mozilla Firefox und im Internet anpasst.
Entdecker. Probieren Sie es selbst aus (super, nicht wahr?)
Kürze [schrift]
Mit der AbkürzungseigenschaftSchriftart, es ist möglich, alle verschiedenen Eigenschaften von
Polizei in einem Schlag.

Zum Beispiel nehmen wir diese vier Codezeilen, die die Schriftschnitt-Eigenschaften beschreiben.<p> :

p {
schriftstil: kursiv;
Schriftgewicht: fett;
Schriftgröße: 30px;
 Schriftart: Arial, sans-serif;
}

Mit der verkürzten Eigenschaft können wir den Code vereinfachen:

p {
Schriftart: kursiv fett 30px Arial, sans-serif;
}

Die Reihenfolge der Werte der EigenschaftSchriftartist das folgende:

Schriftstil| Schrift-Variante| Schriftgewicht| Schriftgröße| Schriftfamilie

Lebenslauf
Sie haben gerade einige der Möglichkeiten im Zusammenhang mit Schriften gelernt. Denken Sie daran, dass eines
Ein wesentlicher Vorteil von CSS zur Festlegung von Schriftarten ist, dass Sie jederzeit
Ändern Sie die Schriftarten einer gesamten Website. CSS spart Zeit und erleichtert das Leben. In derUnterricht
nächste, wir werden den Text sehen.

Lektion 5: Der Text

Das Formatieren und Hinzufügen von Stil zum Text ist für jeden Webdesigner von entscheidender Bedeutung. Diese Lektion wird Ihnen
einführen in die erstaunlichen Möglichkeiten, die CSS für die Textpräsentation bietet. Die
Die folgenden Eigenschaften werden beschrieben:

Text-Einzug
Textausrichtung
Textdekoration
Buchstabenabstand
Textumwandlung

Die Einrückung des Textes [text-indent]

Das EigentumText-Einzugerlaubt es, den Absätzen von Text eine Prise Eleganz hinzuzufügen
indem man der ersten Zeile des Absatzes einen Einzug gibt. Im folgenden Beispiel ein Absatz
de30px wird auf alle Absätze angewendet, die von einem Element markiert sind<p> </p>:
 p {
text-einzug: 30px;
}

Ein Beispiel anzeigen

Die Ausrichtung des Textes [text-align]

Die CSS-Eigenschafttext-ausrichtenentspricht dem Attribut align, das in älteren Versionen von
HTML. Der Text kann links (left), rechts (right) oder zentriert (center) ausgerichtet werden. Darüber hinaus,
Wertjustify wird jede Zeile so ziehen, dass die Ränder links und rechts gerade sind.
beide. Dieses Layout ist üblich, zum Beispiel in Zeitungen und Zeitschriften.

Im folgenden Beispiel der Text der Tabellenüberschriften<th>ist rechtsbündig, während die

Daten der Tabelle<td>sind zentriert. Schließlich sind die normalen Textabsätze rechtsbündig:

th
text-align:right;
}

td {
text-align:pulse;
}

p {
text-align:justify;
}

Ein Beispiel anzeigen

Die Textdekoration [text-decoration]

Das EigentumText-Dekorationermöglicht das Hinzufügen von "Dekorationen" oder "effekten" zu
Texte. Zum Beispiel kann man den Text unterstreichen, durchstreichen oder einen Strich darüber ziehen, usw. In
das folgende Beispiel, die Elemente<h1> </h1>sind unterstrichene Titel, die Elemente<h2>sind Titel
mit einem Strich darüber und den Elementen<h3>durchgestrichene Titel.

h1 {
text-decoration:unterstrichen;
}

h2 {
 Text-Dekoration: Überstrich;
}

h3 {
text-decoration: durchgestrichen;
}

Ein Beispiel anzeigen

Der Buchstabenabstand [letter-spacing]

Der Abstand zwischen den Zeichen des Textes kann mit der Eigenschaft definiert werdenBuchstabenabstand. Die
Der Wert der Eigenschaft ist einfach der gewünschte Abstand. Zum Beispiel, wenn Sie ein
3px Abstand zwischen den Buchstaben eines Textabsatzes<p>, und de6px zwischen den Buchstaben der
Titel<h1>, hier ist der zu verwendende Code:

h1 {
Buchstabenabstand: 6px;
}

p {
Buchstabenabstand: 3px;
}

Ein Beispiel anzeigen

Die Texttransformation [text-transform]

Das EigentumTextumwandlungKontrolliere die Großschreibung des Textes. Man kann eine wählen.
Großschreibung, eine Großschreibung oder eine Kleinschreibung, unabhängig
vom Aussehen des ursprünglichen Textes im HTML-Code.

Hier ist ein Beispiel mit dem Wort "Titel", das dem Benutzer als "TITEL" präsentiert werden kann oder
TitelText-Transformationnimmt vier mögliche Werte an:

Großschreiben
Sie kapitalisiert den ersten Buchstaben jedes Wortes. Zum Beispiel, „Marcel Dupond“
wird „Marcel Dupond“.
GROSSBUCHSTABEN
MARCE DU POND
MARSEL DUPOND
kleingeschrieben
 Sie wandelt alle Buchstaben in Kleinbuchstaben um. Zum Beispiel: „marcel dupond“
wird "Marcel Dupond".
keine
Keine Transformation, und der Text erscheint so, wie er im HTML-Code dargestellt wird.

Zum Beispiel verwenden wir eine Liste von Namen, die mit Elementen markiert sind.<li>(Listenpunkt).
Disons, dass wir wollen, dass die Namen großgeschrieben und die Titel in Großbuchstaben sind.

Untersuchen Sie den HTML-Code dieses Beispiels, und Sie werden feststellen, dass der Text tatsächlich in
minuskel

h1 {
text-transform:uppercase;
}

li {
text-transform:capitalize;
}

Ein Beispiel anzeigen

Lebenslauf
Mit den letzten drei Lektionen haben wir bereits viele CSS-Eigenschaften gelernt, aber es gibt
noch mehr. In dernächste Lektion, wir werden die Verbindungen ansprechen

Lektion 6 : Die Links

Sie können die Links so anwenden, wie Sie es bereits in den vorherigen Lektionen gesehen haben (das ist...
sagen, die Farben und Schriftarten, die Unterstreichungen usw. zu ändern). Die Neuheit ist, dass CSS erlaubt
um diese Eigenschaften unterschiedlich festzulegen, je nachdem, ob der Link besucht, nicht besucht, aktiviert ist oder ob der
Mauszeiger überfahren. Dies ermöglicht es, angenehme und nützliche Effekte zu Ihren Websites hinzuzufügen. Für
Um diese Effekte zu steuern, verwenden wir das, was man Pseudo-Klassen nennt.

Was ist eine Pseudo-Klasse?

Eine Pseudoklasse ermöglicht es, verschiedene Bedingungen und Ereignisse für die zu berücksichtigen.
Definition einer Eigenschaft auf einem HTML-Tag.

Lass uns ein Beispiel ansehen. Wie Sie wissen, werden Links in HTML mit Tags definiert.<a>.
Man kann also verwendenaals Selektor in CSS:
 a
blau
}

Ein Link kann mehrere Zustände haben. Zum Beispiel kann er besucht oder nicht besucht sein.
Sie können Pseudoklassen verwenden, um verschiedene Stile für besuchte und unbesuchte Links zuzuweisen.
Besuche.

a:link {
Farbe: blau;
}

a:besucht {
rot
}

Verwenden Sie respektivea:linketa:besuchtfür die nicht besuchten Links und für die besuchten. Die
Aktive Links haben die Pseudoklassea:aktiv, und die Pseudoklassea:hovergreift ein, wenn der
Der Cursor fährt über den Link.

Wir werden nun jede der vier Pseudoklassen mit Beispielen und ...
zusätzliche Erklärungen.

Die Pseudo-Klasse :link

Die Pseudoklasse:linkwird für Links zu Seiten verwendet, die der Benutzer nicht hat
besucht.

Im folgenden Code werden nicht besuchte Links in Hellblau angezeigt.

a:link {
Farbe: #6699CC;
}

Ein Beispiel anzeigen

Die Pseudoklasse :visited

Die Pseudo-Klasse:besuchtwird für die Links verwendet, die zu den Seiten führen, die der Benutzer hat
besucht. Zum Beispiel gibt der folgende Code allen besuchten Links die Farbe dunkelviolett:
 a:visited {
#660099
}

Ein Beispiel anzeigen

Die Pseudoklasse :active

Die Pseudo-Klasse:aktivwird für aktivierte Links verwendet.

Dieses Beispiel zeigt aktivierte Links, deren Hintergrundfarbe gelb ist:

a:active {
#FFFF00
}

Ein Beispiel anzeigen

Die Pseudoklasse :hover

Die Pseudo-Klasse:hoverwird verwendet, wenn der Mauszeiger über einen Link schwebt.

Man kann es benutzen, um interessante Effekte zu erzeugen. Zum Beispiel, wenn wir wollen, dass unsere Links
soient orange und kursiv bei Hover des Zeigers, sollte der CSS-Code wie folgt aussehen:

a:hover {
orange
Schriftart-Stil: kursiv;
}

Ein Beispiel anzeigen

Beispiel 1: Effekt beim Überfahren des Links mit dem Mauszeiger

Es ist sehr beliebt, verschiedene Effekte für das Überfahren von Links mit dem Mauszeiger zu erstellen. Wir
Lassen Sie uns also einige weitere Beispiele für die Pseudoklasse untersuchen.:hover.

Beabstandung der Buchstaben

Wie angegeben in derLektion 5Man kann den Abstand zwischen den Buchstaben mit der Eigenschaft anpassen
BuchstabenabstandDies gilt für Links für einen Spezialeffekt:

a:hover {
Buchstabenabstand: 10px;
Schriftgewicht: fett;
rot
}

Ein Beispiel anzeigen

Beispiel 1b: GROSSBUCHSTABEN und kleinbuchstaben

In derlektion 5, wir haben die Immobilie gesehenText-Transformationder es ermöglicht, zwischen zu wechseln

Groß- und Kleinbuchstaben. Sie kann auch verwendet werden, um einen Effekt auf Links zu erstellen:

a:hover {
text-transform: großschreibung;
Schriftstärke: fett;
blau
Hintergrundfarbe: gelb;
}

Ein Beispiel anzeigen

Die beiden Beispiele geben einen Überblick über die Kombinationsmöglichkeiten der verschiedenen Eigenschaften.
fast unbegrenzt. Sie können Ihre eigenen Effekte erstellen, versuchen Sie es doch!

Beispiel 2: Den Strich unter den Links entfernen

Man fragt sich oft: „Wie entfernt man die Linie unter den Links?“

Sie sollten sorgfältig prüfen, ob es notwendig ist, die Unterstreichung zu entfernen, da dies
könnte die Benutzerfreundlichkeit Ihrer Website erheblich beeinträchtigen. Das Publikum ist es gewohnt
auf den blauen, unterstrichenen Links von Webseiten und weiß, dass man darauf klicken kann. Sogar meine Mama
sait ! Wenn Sie die Unterstreichung und die Farbe der Links ändern, stehen die Chancen gut, dass der Benutzer
verwirrt sich und nutzt daher nicht den gesamten Inhalt Ihrer Website.

Das gesagt, ist es sehr einfach, die Unterstreichung von Links zu entfernen. Wie Sie sich erinnern können.
Lektion 5man kann die Eigenschaft verwendenTextdekorationum den Text hervorzuheben oder
Nein. Um die Unterstreichung zu entfernen, muss man ihr einfach den Wert none geben.
 a
text-decoration:none;
}

Andernfalls können Sie den Wert vonTextdekorationzur gleichen Zeit wie die anderer
Eigenschaften für die vier Pseudo-Klassen.

a:link {
Farbe: Blau;
text-decoration:none;
}

a:besucht {
lila
text-decoration:none;
}

a:active {
Hintergrundfarbe: gelb;
text-decoration:none;
}

a:hover {
rot
text-decoration:none;
}

Ein Beispiel anzeigen

Zusammenfassung
In dieser Lektion haben Sie die Pseudoklassen gelernt, indem Sie einige Eigenschaften verwendet haben, die Sie gesehen haben.
die vorherigen Lektionen. Das sollte Ihnen eine Vorstellung von den Möglichkeiten geben, die CSS bietet.

In dernächste LektionWir werden Ihnen zeigen, wie Sie die Eigenschaften von Elementen und
Gruppen spezifischer Elemente.

Lektion 7: Die Identifikation und Gruppierung

d'Elemente (Klasse und ID)
Manchmal möchte man einem bestimmten Element oder einer Gruppe von bestimmten Elementen einen speziellen Stil verleihen.
In dieser Lektion werden wir lernen, wie man die Attribute [Link] die zu definieren
Eigenschaften der ausgewählten Elemente.

Wie gibt man einem bestimmten Titel eine andere Farbe als die anderen Titel der Website?
Wie man Links in verschiedene Kategorien unterteilen und jeder einen speziellen Stil geben kann? Das
sind die Arten von Fragen, auf die wir hier antworten werden.

Die Zusammenfassung von Elementen in einer Klasse

Angenommen, wir haben zwei Listen von Links zu den verschiedenen Rebsorten, die für Weine verwendet werden.
weiße und rote Weine. Hier ist, wie der HTML-Code aussieht:

<p>Rebsorten für Weißweine:</p>

<ul>
<li><a href="[Link]">Riesling</a></li>
<li><a href="[Link]">Chardonnay</a></li>
<li><a href="[Link]">Pinot Blanc</a></li>
</ul>

<p>Rebsorten von Rotweinen :</p>

<ul>
<li><a href="[Link]">Cabernet Sauvignon</a></li>
<li><a href="[Link]">Merlot</a></li>
<li><a href="[Link]">Pinot Noir</a></li>
</ul>

Ein Beispiel anzeigen

Wir möchten dann, dass die Links der Weißweine gelb sind, die der Rotweine
rot, und dass die anderen Links auf der Webseite blau bleiben.

Um dies zu erreichen, teilen wir die Links in zwei Kategorien ein. Wir weisen jeder einen Klasse zu.
Link mit dem AttributKlasse.

Lass uns versuchen, einige Klassen für das vorherige Beispiel zu definieren:

<p>Rebsorten von Weißweinen :</p>

<ul>
<li><a href="[Link]" class="whitewine">Riesling</a></li>
<li><a href="[Link]" class="whitewine">Chardonnay</a></li>
<li><a href="[Link]" class="whitewine">Pinot Blanc</a></li>
</ul>

Rebsorten für Rotweine:

<ul>
 <li><a href="[Link]" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="[Link]" class="redwine">Merlot</a></li>
<li><a href="[Link]" class="redwine">Pinot Noir</a></li>
</ul>

Anschließend können spezielle Eigenschaften für die Links definiert werden, die jeweils zu gehören.
Kategorien „Weißwein“ und „Rotwein“.

a
Farbe: blau;
}

[Link] {
#FFBB00
}

[Link] {
#800000
}

Ein Beispiel anzeigen

Wie im Beispiel gezeigt, können die Eigenschaften der Elemente, die zu einer
bestimmte Klasse unter Verwendung_des_Namens_der_gesagten_klasse_in_der_Stylesheet_des_Dokuments.

Die Identifikation eines Elements mit der ID

Neben der Gruppierung von Elementen kann es notwendig sein, ein einzigartiges Element zu identifizieren. Dafür,
man verwendet das Attributid.

Das Attributides gibt etwas Besonderes daran, dass es nicht zwei Elemente mit dem selben geben kannidim
Dokument. Jederidmuss einzigartig sein. Andernfalls müsste das Attribut verwendet [Link]à
der Platz. Lassen Sie uns nun ein mögliches Anwendungsbeispiel vonId:

<h1>Kapitel 1</h1>
....
<h2>Kapitel 1.1</h2>
....
<h2>Kapitel 1.2</h2>
....
<h1>Kapitel 2</h1>
....
<h2>Kapitel 2.1</h2>
....
<h3>Kapitel 2.1.2</h3>
 ....

Es könnte sich um die Überschriften eines Dokuments handeln, das in Kapitel oder Absätze gegliedert ist. Es scheint
Natürlich zuweisenidIn jedem Kapitel so:

<h1 id="c1">Kapitel 1</h1>

....
<h2 id="c1-1">Kapitel 1.1</h2>
....
<h2 id="c1-2">Kapitel 1.2</h2>
....
<h1 id="c2">Kapitel 2</h1>
....
<h2 id="c2-1">Kapitel 2.1</h2>
....
<h3 id="c2-1-2">Kapitel 2.1.2</h3>
....

Angenommen, der Titel des Kapitels 1.2 soll in Rot erscheinen. Mit CSS ergibt das:

#c1-2
rot
}

Ein Beispiel anzeigen

Wie im vorherigen Beispiel dargestellt, können die Eigenschaften eines bestimmten Elements definiert werden.
unter Verwendung #des_namen_dessen_id_in_der_stilvorlage_des_dokuments.

Lebenslauf
In dieser Lektion haben wir gesehen, dass man die Eigenschaften von spezifischen Elementen definieren konnte.
die Hilfe der SelektorenKlasseetFrau.

In dernächste Lektion, wir werden uns näher mit zwei weit verbreiteten HTML-Elementen beschäftigen
mit CSS :<span> </span>und<div>.
Lektion 8 : Die Gruppierung von Elementen (span
et div)
Die Elemente <span> und <div> dienen dazu, ein Dokument zu gruppieren und zu strukturieren und werden oft
verwendet mit den AttributenKlasseetid.

In dieser Lektion werden wir uns näher mit der Verwendung der beiden Elemente <span> und <div> befassen, und
ihre zentrale Bedeutung für CSS.

Die Zusammenführung mit<span>

Die Zusammenführung mit<div>

Die Zusammenführung mit <span>

Das Element<span>Könnte man ein neutrales Element nennen, das dem Dokument nichts hinzufügt?
in sich selbst. Aber CSS kann das Element verwenden<span>um visuelle Merkmale hinzuzufügen
zu spezifischen Teilen des Textes von Dokumenten.

Dieses Zitat von Benjamin Franklin ist ein Beispiel dafür:

Früh schlafen und früh aufstehen

stärkt, bereichert und macht weise.

Angenommen, die Vorteile, die Herr Franklin darin sieht, seinen Schlaf nicht zu verschwenden, sind
in Rot akzentuiert. Zu diesem Zweck können wir die Vorteile mit Elementen kennzeichnen.<span>.
JederSpanerhält dann ein AttributKlasseso definiert in der Stylesheet:

Früh schlafen und früh aufstehen

<span class="benefit">stärkt</span>

<span class="benefit">bereichert</span>
et rend avisé.

Der zugehörige CSS-Code:

[Link]
Farbe:rot;
}
 Ein Beispiel anzeigen

Natürlich können Sie auch das Attribut verwendenidum den Elementen Stil hinzuzufügen<span>, so viel
dass Sie jedem der drei Elemente eine eindeutige ID zuweisen<span>, wie in der Lektion gelernt
vorherige.

Die Gruppierung mit <div>

Während<span>wird in einem Blockelement verwendet, wie zuvor gesehen,<div> dient zu
Gruppieren Sie ein oder mehrere Elemente vom Typ Block.

Abgesehen von diesem Unterschied erfolgt die Zusammenlegung mit<div>funktioniert mehr oder weniger gleich
Weise. Lassen Sie uns ein Beispiel mit zwei Listen von Präsidenten der Vereinigten Staaten ansehen, die nach ihrer
politische Zugehörigkeit

Demokraten
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>

<div id="republikaner">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>

In unserem Stylesheet können wir die Gruppierung genau auf die gleiche Weise verwenden.
wie zuvor :

#democrats {
Hintergrund:blau;
}
 #republicans {
Hintergrund:rot;
}

Ein Beispiel anzeigen

In den vorherigen Beispielen haben wir die Elemente verwendet<div>et<span>für Dinge

sehr einfach wie die Farben des Textes und des Hintergrunds. Diese beiden Elemente haben das Potenzial
für viel fortgeschrittenere Dinge, aber wir sprechen sie hier nicht an. Das wird eintreten
Weiter im Tutorial.

Lebenslauf
In denLektionen 7Und 8, haben Sie die Selektoren gesehen?IDetKlasse, und die ElementeSpanetdiv.

Sie sind jetzt in der Lage, alle Teile eines

Dokument, was einen großen Schritt zur Beherrschung von CSS darstellt. In derLektion 9, wir
Wir werden das Modell der Boxen einführen.

Lektion 9 : Das Boxenmodell

Das Box-Modell von CSS beschreibt die Boxen, die für HTML-Elemente generiert werden. Es enthält
auch detaillierte Optionen für die Anpassung von Rändern, Rahmen, Abständen und
der Inhalt jedes Elements. Das folgende Diagramm zeigt die Struktur des Boxenmodells:

Das Boxmodell in CSS

Die obige Abbildung mag sehr theoretisch erscheinen, lass uns also versuchen, das Modell in einem
cas réel avec un titre et du texte. Le code HTML de notre exemple est le suivant (d'après la
Allgemeine Erklärung der Menschenrechte

Artikel 1:

Alle Menschen werden frei geboren

und gleich in Würde und Rechten.
Sie sind mit Vernunft und Gewissen ausgestattet.
und sollte einander gegenüber handeln in einer
Geist der Brüderlichkeit

Durch das Hinzufügen von Farbe und Schriftinformationen könnte das Beispiel so aussehen.
Anzug
Das Beispiel enthält zwei Elemente:<h1>et<p>Man kann das Boxenmodell der beiden veranschaulichen.
Elemente auf folgende Weise :

Obwohl es etwas kompliziert erscheinen mag, zeigt das Diagramm jedes HTML-Element.
Umgeben von Kästen. Kästen, die wir mit CSS anpassen können.

<% '

Die Eigenschaften, die die verschiedenen Boxen regeln, sindPolsterung, MargeundGrenzeDie beiden
Die nächsten Lektionen behandeln genau diese drei Eigenschaften:

'
'

Lektion 10: Das Boxenmodell:Marge & Polsterung

'

Lektion 11 : Das Kastenmodell :Grenze

'
'

Am Ende dieser beiden Lektionen werden Sie das Box-Modell beherrschen und in der Lage sein, Ihre
Dokumente mit mehr Finesse und Präzision als in der alten Methode mit Tabellen in
HTML.

%>

Lebenslauf
Diese Lektion führte das Boxen-Modell ein. In den drei folgenden Lektionen werden wir das Thema weiter untersuchen.
Erstellung und Kontrolle der Elemente im Box-Modell.

Lektion 10 : Margin und Padding

In der vorherigen Lektion haben wir das Modell der Kisten eingeführt. In dieser Lektion werden wir sehen
Wie man die Darstellung der Elemente mit den Eigenschaften ändertMargeetPolsterung.

Die Marge eines Elements festlegen

Den Abstand in einem Element einstellen

Die Marge eines Elements festlegen

Ein Element hat vier Seiten: rechts, links, oben und unten
(„unten“). Der Rand ist der Abstand zwischen jeder Seite und dem angrenzenden Element (oder den Rändern des
Dokument). Siehe auch die Abbildung in derLektion 9.

Als erstes Beispiel werden wir sehen, wie man die Ränder des Dokuments selbst definiert, das heißt -
zu sagen vom Element<Körper>Die folgende Abbildung zeigt die gewünschten Ränder für die Seiten.

Der CSS-Code wäre wie folgt:

 {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

Oder eleganter und prägnanter:

{}
100px 40px 10px 70px;
}

Ein Beispiel anzeigen

Sie können die Ränder ebenso für fast alle Elemente festlegen. Zum Beispiel kann man
wählen Sie aus, die Ränder aller mit markierten Textabsätzen festzulegen:

körper {
100px 40px 10px 70px;
}

p{
Marge: 5px 50px 5px 50px;
}

Ein Beispiel anzeigen

Den Abstand in einem Element festlegen

Der Abstand kann auch als "Füllung" angesehen werden. Das kann man verstehen in der
Maß, bei dem der Abstand die Entfernung des Elements zu anderen Elementen nicht beeinflusst, sondern definiert
nur der innere Abstand zwischen dem Rand und dem Inhalt des Elements.

Die Verwendung von Abstand kann durch dieses einfache Beispiel veranschaulicht werden, bei dem alle Titel haben
Hintergrundfarben

h1 {
Hintergrund: gelb;
}
 h2 {
orange
}

Ein Beispiel anzeigen

Durch das Festlegen des Abstands der Überschriften ändern wir die Auffüllung um den Text in jedem
titre

h1 {
Hintergrund: Gelb;
Polsterung: 20px 20px 20px 80px;
}

h2 {
orange
padding-left:120px;
}

Ein Beispiel anzeigen

Lebenslauf
Sie beginnen, das Box-Modell in CSS zu beherrschen. In der nächsten Lektion werden wir
werden näher untersuchen, wie man die verschiedenen Ränder färbt und wie man die Kontur zeichnet
Elemente.

Lektion 11 : Die Rahmen

Man kann Rahmen für viele Dinge verwenden, zum Beispiel als dekoratives Element oder
um die Trennung von zwei Dingen zu verdeutlichen. CSS bietet unendlich viele Optionen für
die Verwendung von Rahmen in Ihren Seiten.

Rahmendicke
Rahmenfarbe
Randstil
Beispiele für Definitionen von Grenzen
Grenze
Die Dicke der Ränder [border-width]
Die Dicke der Ränder wird durch die Eigenschaft definiertRandbreite, deren Werte sein können
„dünn“, „mittel“ und „dick“, oder einen numerischen Wert in Pixeln. Die folgende Abbildung veranschaulicht die
System

Die Farbe der Ränder [border-color]

Das EigentumRandfarbedefiniert die Farbe eines Rahmens. Normale Farbwerte

sind zum Beispiel „#123456“, „rgb(123,123,123)“ oder „gelb“.

Die Arten von Rahmen [border-style]

Man kann aus mehreren Arten von Rahmen wählen. Hier sind acht verschiedene Arten von Rahmen:
dass Internet Explorer 5.5 sie interpretiert. Alle Rahmen haben die Farbe "gold" und eine Dicke
Valant "dick", aber sie können sich natürlich in anderen Farben und Dicken zeigen.

Man kann die Werte "none" oder "hidden" verwenden, wenn man keine Rahmen möchte.
Beispiele für Definitionen von Grenzen
Die drei zuvor beschriebenen Eigenschaften können für jedes Element zusammengefasst werden und daher
verschiedene Rahmen erzeugen. Um dies zu veranschaulichen, schauen wir uns ein Dokument an, in dem wir definieren
verschiedene Rahmen für<h1>, <h2>, <ul>etDas Ergebnis ist vielleicht nicht sehr schön
aber es zeigt einige der vielen Möglichkeiten:

h1 {
Rahmenbreite: dick;
Randstil: punktiert;
Rahmenfarbe: Gold;
}

h2 {
Ränder-Breite: 20px;
Rahmenstil: hervorgehoben;
Randfarbe: rot;
}

p {
Rahmenbreite: 1px;
Randstil: gestrichelt;
Rahmenfarbe: blau;
}
 ul {
dünn
Rahmenstil: durchgezogen;
orange
}

Ein Beispiel anzeigen

Es ist auch möglich, spezielle Eigenschaften für obere Ränder zu deklarieren,

unteren, linken oder rechten. Das folgende Beispiel zeigt, wie man es macht:

h1 {
border-top-width: dick;
fest
border-top-color: rot;

border-bottom-width: dick;
border-bottom-style: solid;
border-bottom-color: blau;

dick
durchgezogen
grün

dick
border-left-style: solide;
border-left-color: orange;
}

Ein Beispiel anzeigen

Kürze [Grenze]
Wie bei vielen anderen Eigenschaften kann man mehrere Eigenschaften in einer einzigen konzentrieren.
mitGrenze. Hier ist ein Beispiel :

p {
1px;
durchgezogen
Randfarbe: blau;
}
Er kann sich konzentrieren auf:

p {
1px durchgezogen blau
}

Lebenslauf
In dieser Lektion haben Sie einen Überblick über die unbegrenzten Möglichkeiten erhalten, die CSS bietet für die
Rand Ihrer Seiten.

In der nächsten Lektion werden wir sehen, wie man die Höhe und die Breite im Modell definiert.
Kästen.

Lektion 12 : Die Höhe und die Breite

Wir haben uns bis jetzt nicht viel um die Dimensionen gekümmert,
Elemente, mit denen wir gearbeitet haben. In dieser Lektion werden wir sehen, wie man definiert
leicht die Höhe und die Breite eines Elements.

Fixieren Sie die Breite [width]

Die Höhe [height] festlegen

Fixieren Sie die Breite [width]

Das EigentumBreiteerlaubt es, die Breite eines Elements festzulegen.

Das vereinfachte Beispiel unten zeigt uns eine Box, in die man Text eingeben kann:

[Link] {
Breite: 200px;
Rand: 1px durchgezogen schwarz;
Hintergrund: orange;
}

Ein Beispiel anzeigen

Die Höhe [height] festlegen
Im vorherigen Beispiel, beachten Sie die Höhe der Kiste, die durch ihren Inhalt bestimmt wird. Man kann
die Höhe eines Elements mit der Eigenschaft festlegenHöheVersuchen wir, die Box von
das Beispiel hoch von 500px :

[Link] {
500px
Breite: 200px;
Rand: 1px durchgezogen schwarz;
Hintergrund: orange;
}

Ein Beispiel anzeigen

Lebenslauf
Die Lektionen9, 10, 11et12Es wurde das Box-Modell in CSS eingeführt. Wie Sie können...
Feststellen, dass das Modell der Boxen viele neue Optionen bietet. Sie hätten verwenden können
Tabellen-HTML für Ihre Layouts, aber mit CSS und dem Box-Modell müssen Sie
jetzt in der Lage sein, elegante, präzisere und konforme Präsentationen zu erstellen
Empfehlungen des W3C.

Lektion 13: Die schwebenden Elemente (die

flottants)
Ein Element kann eine schwebende Position nach rechts oder links mit der Eigenschaft habenfloat. Es ist-
d.h. dass die Box und ihr Inhalt entweder rechts oder links in einem Dokument schwimmen können (oder
in der Containerbox), siehe die Beschreibung des Modells der Boxen in derLektion 9. Die Figur
Die folgende illustriert das Prinzip:
Wenn wir zum Beispiel möchten, dass ein Text sich um ein Bild wickelt, wäre das Ergebnis das
nächste

Wie funktioniert das?

Hier ist der HTML-Code des vorherigen Beispiels:

Bild
<img src="[Link]" alt="Bill Gates">
</div>

natürliche Ursachen und Vorgeschichte,

idciro etiam nostrarum voluntatum...
Damit das Bild links schwebt und der Text es umgibt, reicht es aus, die Breite der Box festzulegen.
das Bild umgebend, dann die Eigenschaft gebenfloatder Wert "links"

#picture {
float:links;
breite: 100px;
}

Ein Beispiel anzeigen

Ein weiteres Beispiel mit Spalten

Die Float-Elemente können auch zur Spaltenbildung eines Dokuments verwendet werden. Um die Spalten zu erstellen, ...
Es genügt, sie im HTML-Code mit Elementen zu strukturieren.<div>auf folgende Weise :

column1
Über das, worum es hier geht, spricht man.
und in welchem Grund der Grund besteht, sieht nicht...
</div>

<div id="column2">
natürliche Ursachen und Vorgeschichte,
idciro etiam nostrarum voluntatum...
</div>

<div id="column3">
nichts wäre in unserem
wenn die Sache so beschaffen wäre...
</div>

Sobald die Breite der Spalten festgelegt ist (zum Beispiel auf 33 %), lässt man einfach jede
Spalte links definieren die EigenschaftFloat:

#column1 {
float:left;
Breite: 33%;
}

#column2 {
float:left;
Breite: 33%;
}

#column3 {
 float:left;
Breite: 33%;
}

Ein Beispiel anzeigen

Das Eigentumfloatakzeptiert die Werte "links", "rechts" oder "keine".

Die Eigenschaft clear

das Eigentumklardient dazu, das Verhalten der Elemente zu steuern, die nach den Elementen kommen
schwebend im Dokument.

Standardmäßig rücken die zu verfolgende Elemente nach, um den freigewordenen verfügbaren Platz zu füllen, wenn ein
Box schwimmt auf einer Seite. Überprüfen Sie das vorherige Beispiel, in dem der Text platziert wird.
automatisch unter dem Foto von Bill Gates.

Das EigentumklarAkzeptiert die Werte "left", "right", "both" oder "none". Das Prinzip ist so, dass,
zum Beispiel, wenn der Wert vonklarEine Box ist auf "beide" festgelegt, die obere Kante der
Der Rand dieser Box wird immer unter der unteren Rand der Boxen liegen.
eventuelle Flüsse von oben.

Bild
<img src="[Link]" alt="Bill Gates">
</div>

<h1>Bill Gates</h1>

<pclass="floatstop">natürliche Ursachen und Hintergründe,

idciro etiam nostrarum voluntatum...

Um zu verhindern, dass der Text neben dem Bild schwebt, können wir den CSS-Code hinzufügen
nächster :

#picture {
float:left;
Breite: 100px;
}

.floatstop {
klar:beide;
}
 Ein Beispiel anzeigen

Lebenslauf
Die Fließkommazahlen sind in vielen Situationen sehr nützlich, und man wird sie oft gleichzeitig verwenden.
temps qu'un positionnement. Dans lanächste Lektion, wir werden studieren, wie man eine Box platziert
in relativer oder absoluter Position.

Lektion 14: Die Positionierung der Elemente

Die CSS-Positionierung ermöglicht es, ein Element genau dort zu platzieren, wo man es auf der Seite haben möchte. Mit
die Fließenden (vgl. dieLektion 13), die Positionierung bietet zahlreiche Möglichkeiten zur Gestaltung
eine komplexe und präzise Präsentation.

Diese Lektion behandelt die folgenden Themen:

Das Prinzip des CSS-Positionierens

Die absolute Positionierung
Die relative Positionierung

Das Prinzip des CSS-Positionierens

Stellen wir uns das Browserfenster als ein Koordinatensystem vor:
Der Grundsatz des CSS-Positionierens ermöglicht es, eine Box überall im
Koordinatensystem.

Nehmen wir an, dass wir einen Titel positionieren wollen. Laut dem Box-Modell (vgl. dasLektion 9) le
der Titel wird folgendermaßen erscheinen:

Wenn wir diesen Titel 100px vom oberen Rand und 200px vom linken Rand des Dokuments positionieren wollen, unser
Der CSS-Code könnte folgendermaßen aussehen:

h1 {
position:absolute;
oben: 100px;
links: 200px;
}

Das Ergebnis wird wie folgt sein:

Wie Sie sehen können, ist das CSS-Positionieren eine sehr effektive Platzierungstechnik.
Präzise Elemente. Sie ist viel einfacher als die Verwendung von Tabellen, Bildern.
transparente oder andere Dinge.

Die absolute Positionierung

Ein Element mit absoluter Position erhält keinen Platz im Dokument. Das bedeutet, dass es nicht ...
lasse keinen leeren Raum, nachdem er positioniert ist.

Man platziert ein Element in absoluter Position, indem man den Wert der Eigenschaft [Link]à
"absolut". Man kann dann die Eigenschaften links, rechts, oben und unten verwenden, um die Box zu platzieren.

Als Beispiel für absolute Positionierung haben wir gewählt, vier Kästen an jeder zu platzieren
Ecke des Dokuments :

#box1 {
position:absolute;
50px
links: 50px;
}

#box2 {
Position: absolut;
oben: 50px;
rechts: 50px;
}
 #box3 {
position:absolute;
unten: 50px;
rechts: 50px;
}

#box4 {
position:absolute;
50px;
links: 50px;
}

Ein Beispiel anzeigen

Die relative Positionierung

Man setzt ein Element in relativer Position, indem man den Wert der Eigenschaft [Link]
Der Unterschied zwischen absoluter Position und relativer Position liegt in der Art und Weise, wie die Position ist
berechnet.

Für ein Element mit relativer Positionierung wird sie basierend auf seiner ursprünglichen Position im
Dokument. Das bedeutet, dass man das Element nach rechts, links, oben oder unten bewegt.
Somit erhält das Element immer einen Platz im Dokument, nachdem es positioniert wurde.

Als Beispiel für relative Positionierung können wir drei Fotos relativ zu
ihre ursprüngliche Position auf der Seite. Beachten Sie die leeren Räume, die sie an ihren
ursprüngliche Positionen im Dokument :

#dog1 {
position:relative;
links: 350px;
unten: 150px;
}
#dog2 {
position:relativ;
links: 150px;
unten: 500px;
}

#dog3 {
position:relative;
links: 50px;
unten: 700px;
}

Ein Beispiel anzeigen

Zusammenfassung
In den beiden vorherigen Lektionen haben Sie gelernt, Elemente zu flotten und zu positionieren.
Diese beiden Methoden bieten viele Möglichkeiten zum Erstellen von Seiten, ohne die zu verwenden
veraltete Methoden mit Tabellen und transparenten Bildern in HTML. Verwenden Sie CSS für die
platz: es ist präziser, vorteilhafter und auch einfacher zu pflegen.

Lektion 15: Eine Schicht über einer Schicht mit z-

Index (die Schichten)
CSS wirkt in drei Dimensionen: Höhe, Breite und Tiefe. Wir haben die beiden gesehen.
erste Dimensionen in den vorherigen Lektionen. In dieser werden wir lernen, zu ordnen
die Elemente in Schichten. Kurz gesagt, die Reihenfolge, in der die Elemente die anderen überdecken.

Dafür können wir eine Nummer zuweisen (z-Index) zu jedem Element. Das System ist so, dass ein
Element mit höherer Nummer deckt die mit niedrigerer Nummer ab.

Sei eine königliche Folge in einer Pokerhand. Man kann sie so präsentieren, dass jede Karte
hat eine Nummerz-Index:

Hier folgen die Nummern (von 1 bis 5), aber man kann dasselbe Ergebnis mit fünf Nummern erzielen.
verschiedene. Es ist die chronologische Reihenfolge der Zahlen (die Ordnung), die zählt.

Der Code im Beispiel mit den Karten könnte folgendermaßen aussehen:

Zehn der Karo

position: absolut;
links: 100px;
oben: 100px;
 1;
}

#jack_of_diamonds {
Position: absolut;
links: 115px;
oben: 115px;
z-index: 2;
}

#queen_of_diamonds {
Position: absolut;
links: 130px;
oben: 130px;
z-index: 3;
}

#king_of_diamonds {
Position: absolut;
links: 145px;
oben: 145px;
z-index: 4;
}

#ace_of_diamonds {
position: absolut;
links: 160px;
oben: 160px;
z-index: 5;
}

Ein Beispiel anzeigen

Die Methode ist relativ einfach, aber die Möglichkeiten sind zahlreich. Man kann Bilder platzieren.
auf Text oder Text auf Text usw.

Lebenslauf
Windeln können in vielen Situationen nützlich sein. Versuchen Sie zum Beispiel, sie zu verwenden.z-Index
um Effekte in den Titeln zu erstellen, anstatt sie als Bild zu machen. Erstens ist das Laden des Textes
schneller, und zweitens sorgt es für eine bessere Platzierung in den Suchmaschinen.

Lektion 16: Die Standards des Webs und die

Validierung
Das W3C, fürWorld Wide Web Consortium, ist eine unabhängige Organisation, die verwaltet
Standards des Webs (zum Beispiel, HTML, CSS, XML und andere). Microsoft, The Mozilla
Foundation und viele andere sind Teil des W3C und stimmen über zukünftige Entwicklungen überein
des Standards.

Wenn Sie sich auch nur ein wenig mit Webentwicklung beschäftigt haben, wissen Sie wahrscheinlich, dass es
Es kann große Unterschiede in der Darstellung von Web-Seiten zwischen verschiedenen Browsern geben.
verschiedene. Die Erstellung einer Webseite kann viel Frustration verursachen und verbrauchen
viel Zeit, damit sie in Mozilla, Internet Explorer, Opera und den
andere vorhandene Browser.

Das Konzept der Standards besteht darin, einen gemeinsamen Nenner für die Verwendung von zu finden
Web-Technologien. Das bedeutet, dass ein Webentwickler, der die Standards einhält, die
Die Gewissheit, dass sein Code besser zwischen verschiedenen Plattformen funktionieren wird. Wir
Wir empfehlen Ihnen daher, sich auf die Arbeiten des W3C zu stützen und Ihren CSS-Code zu validieren.
um den Standard zu erfüllen.

Der CSS-Validator
Um die Einhaltung desStandard-CSS, das W3C hat einen entwickeltValidator, welcher die Blätter liest
de Stil und gibt einen Zustand zurück, der Fehler und Warnungen auflistet, falls Ihr CSS-Code nicht
wäre nicht gültig.

Um Ihre Stylesheets zu validieren, können Sie dies direkt von dieser Seite aus tun. Ersetzen Sie
einfach die URL, die hier erscheint, durch die Ihrer Stylesheet ersetzen und klicken, um sie zu
valider. Die Website des W3C wird Sie dann über die dort vorhandenen Fehler informieren.

[Link]

Überprüfen Sie das Stylesheet

Wenn der Validator keinen Fehler findet, wird das folgende Bild angezeigt, und Sie können es platzieren auf
Ihre Website, um zu zeigen, dass Ihr Code validiert ist:

Der direkte Link des Validators:[Link]