Kursplan

CSS-Advanced-Tutorial

• CSS-Buch für课外学习
• Einführung in CSS
• Grundgrammatik von CSS
• Erweiterte Grammatik von CSS
• Abgeleitete Auswahler von CSS
• ID-Auswahler von CSS
• Klassen-Auswahler von CSS
• Erstellung von CSS
• Hintergrund von CSS
• Text von CSS
• Schrift von CSS
• Liste von CSS

CSS-Box-Modell

• Übersicht über das Box-Modell von CSS
• Innenabstand von CSS
• Rand von CSS
• Außenabstand von CSS
• Kombination von Außenabständen von CSS

CSS-Positionierung

• Übersicht über die Positionierung von CSS
• Relativposition von CSS
• Absolutposition von CSS
• Schwimmende von CSS

CSS-Selektoren

• Element-Auswahler von CSS
• Gruppierung von Auswahlern von CSS
• Detailierte Erklärung des Klassen-Auswahlers von CSS
• Detailierte Erklärung des ID-Auswahlers von CSS
• Detailierte Erklärung des Attribut-Auswahlers von CSS
• Nachfolger-Auswahler von CSS
• Nachkommen-Auswahler von CSS
• Adjazenter Brüder-Auswahler von CSS

Wahlpflichtkurse

Kursempfehlung:

• CodeW3C.com-Box

CSS-Texteigenschaften definieren das Erscheinungsbild des Textes.

Durch Texteigenschaften können Sie die Farbe des Textes, den Zeilenabstand, die Ausrichtung des Textes, die Textdekoration, den Einzug des Textes und vieles mehr ändern.

Text einrücken

Das Einrücken der ersten Zeile eines Absatzes auf einer Webseite, dies ist eine der häufigsten Textformatierungseffekte.

CSS bietet Eigenschaft text-indentDiese Eigenschaft ermöglicht eine bequeme Implementierung des Texteinrückens.

Durch die Verwendung der Eigenschaft text-indent können die ersten Zeilen aller Elemente um einen bestimmten Wert eingerückt werden, sogar um einen negativen Wert.

Die häufigste Anwendung dieses Attributes ist die Einrückung der ersten Zeile eines Absatzes, die folgenden Regeln rücken alle Absätze um 5 em ein:

p {text-indent: 5em;}

Hinweis:Im Allgemeinen kann text-indent auf alle Block-Elemente angewendet werden, aber das Attribut kann nicht auf inline-Elemente, wie z.B. Bilder, angewendet werden. Wenn jedoch ein Block-Element (z.B. ein Absatz) eine Bild im ersten Absatz hat, bewegt sich das Bild mit dem Rest des Textes dieser Zeile.

Tipp:Wenn man die erste Zeile eines inline-Elements 'eingerückt' haben möchte, kann man durch die Erstellung einer linken Innen- oder Außenmarginalität dieses Effekt erzeugen.

Negative Werte verwenden

text-indent kann auch negative Werte haben. Mit dieser Technik können viele interessante Effekte erzielt werden, wie z.B. 'hanging indent', bei dem die erste Zeile über dem linken Rand des Elements hängt:

p {text-indent: -5em;}

Allerdings sollte bei negativen Werten für text-indent vorsichtig vorgegangen werden, da negative Werte für einen Abschnitt dazu führen können, dass einige Textzeilen des ersten Absatzes über den linken Rand des Browsersfensters hinausragen. Um dieses Displayproblem zu vermeiden, wird empfohlen, eine externe oder interne Marginalität für negative Einrückungen zu setzen:

p {text-indent: -5em; padding-left: 5em;}

Prozentwerte verwenden

text-indent kann alle Längenедини gen verwenden, einschließlich der Prozentsätze.

Prozentwerte müssen relativ zur Breite des übergeordneten Elements des Einrückungselements angegeben werden. Mit anderen Worten, wenn der Einrückungswert auf 20% gesetzt wird, wird die erste Zeile des betroffenen Elements um 20% der Breite des übergeordneten Elements eingerückt.

Im folgenden Beispiel ist der Einrückungswert 20% des übergeordneten Elements, d.h. 100 Pixel:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p> dies ist ein Absatz</p>
</div>

Vererbung

Das text-indent-Attribut kann vererbt werden, bitte beachten Sie die folgenden Markierungen:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner"> einiger Text. einiger Text. einiger Text.</div>
<p> dies ist ein Absatz.</p>
</div>
</div>

Die Absätze in diesen Markern werden ebenfalls um 50 Pixel eingerückt, da dieser Abschnitt den Einrückungswert des div-Elements mit der ID 'inner' vererbt.

horizontale Ausrichtung

text-align ist eine grundlegende Eigenschaft, die den Inhalt eines Elements beeinflusstTextzeileDie Ausrichtung untereinander. Die ersten drei Werte sind recht direkt, aber die vierte und fünfte sind etwas komplexer.

Die Werte left, right und center bewirken, dass der Text in einem Element linksbündig, rechtshändig und zentriert ausgerichtet wird.

Westliche Sprachen werden von links nach rechts gelesen, daher ist der Standardwert von text-align left. Der Text wird an der linken Kante ausgerichtet und die rechte Kante ist gezackt (genannt „von links nach rechts“ Text). Für Sprachen wie Hebräisch und Arabisch ist text-align standardmäßig right, da diese Sprachen von rechts nach links gelesen werden. Nicht überraschend macht center jede Textzeile im Element zentriert.

Tipp:Um Block- oder Tabellen-Elemente zuzentrieren, ist es erforderlich, angemessene linken und rechten Außenabstände auf diesen Elementen zu setzen.

text-align:center und <CENTER>

Sie könnten denken, dass text-align:center und der <CENTER>-Element die gleiche Wirkung haben, aber das ist nicht der Fall.

<CENTER> beeinflusst nicht nur den Text, sondern zentriert auch den gesamten Element. text-align kontrolliert nicht die Ausrichtung des Elements, sondern beeinflusst nur den Inhalt desselben. Das Element selbst bewegt sich nicht von einem Abschnitt zum anderen, nur der Text wird beeinflusst.

justify

Der letzte horizontale Ausrichtungseigenschaft ist justify.

In Blocksatztext wird sowohl der linke als auch der rechte Rand der Textzeilen an den inneren Grenzen des übergeordneten Elements platziert. Anschließend wird der Abstand zwischen den Wörtern und den Buchstaben angepasst, damit die Länge jeder Zeile gleich ist. Sie haben vielleicht bereits bemerkt, dass Blocksatztext im Druckbereich häufig vorkommt.

Zu beachten ist, dass der Benutzeragent (nicht CSS) bestimmen muss, wie der Ausgleich des Blocksatztextes, um den Raum zwischen den linken und rechten Grenzen des übergeordneten Elements zu füllen, erfolgen soll. Für Details lesen Sie bitte CSS text-align-Eigenschaft Referenzseite.

Zeichenabstand

word-spacing-AttributDer Abstand zwischen den Zeichen (Wörtern) kann geändert werden. Der Standardwert normal ist gleich dem Wert 0.

Das word-spacing-Attribut akzeptiert einen positiven oder negativen Längenwert. Wenn ein positiver Längenwert angegeben wird, wird der Abstand zwischen den Worten erhöht. Ein negativer Wert für word-spacing zieht die Wörter näher zusammen:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
Dies ist ein Absatz. Der Abstand zwischen den Wörtern wird erhöht.
</p>
<p class="tight">
Dies ist ein Absatz. Der Abstand zwischen den Wörtern wird verringert.
</p>

Beispiel TIY: Erhöhung oder Verringerung des Abstands zwischen Wörtern (Wortabstand)

Anmerkung:Für eine tiefere Verständnis der Definition von 'Wort' (word) in CSS, besuchen Sie CSS word-spacing Eigenschaft Referenzseite.

Buchstabenabstand

letter-spacing EigenschaftDer Unterschied zu word-spacing liegt darin, dass der Abstand zwischen Zeichen oder Buchstaben geändert wird.

Wie bei der word-spacing-Eigenschaft sind die möglichen Werte der letter-spacing-Eigenschaft alle Längen. Der Standardwert ist normal (das ist gleich letter-spacing:0). Der eingegebene Längenwert erhöht oder verringert den Abstand zwischen den Zeichen um die angegebene Menge:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

Beispiel TIY: Regelung des Abstands zwischen Zeichen (Buchstabenabstand)

Zeichenkonvertierung

text-transform EigenschaftDie Groß- und Kleinschreibung des Textes wird behandelt. Dieses Attribut hat 4 Werte:

• none
• uppercase
• lowercase
• capitalize

Der Standardwert none ändert den Text nicht und verwendet die ursprüngliche Groß- und Kleinschreibung aus dem Quelldokument. Wie der Name schon sagt, verwandelt uppercase und lowercase den Text in vollständige Groß- und Kleinschreibung. Schließlich macht capitalize nur die ersten Buchstaben jedes Wortes groß.

Als Eigenschaft ist text-transform möglicherweise nicht so wichtig, aber wenn Sie plötzlich beschließen, alle h1-Elemente in Großbuchstaben zu ändern, ist diese Eigenschaft sehr nützlich. Es ist nicht erforderlich, den Inhalt aller h1-Elemente einzeln zu ändern, sondern nur text-transform zu verwenden, um diese Änderung durchzuführen:

h1 {text-transform: uppercase}

Die Verwendung von text-transform hat zwei Vorteile. Zunächst kann eine einfache Regel verwendet werden, um diese Änderung durchzuführen, ohne dass die h1-Elemente selbst geändert werden müssen. Zweitens kann die Änderung leichter vorgenommen werden, wenn Sie später beschließen, alle Groß- und Kleinschreibungen wieder in den ursprünglichen Zustand zu ändern.

Beispiel TIY: Kontrolle der Groß- und Kleinschreibung von Buchstaben im Text

Textdekoration

Nächste, wir diskutieren text-decoration EigenschaftDies ist eine sehr interessante Eigenschaft, die viele sehr interessante Verhaltensweisen bietet.

text-decoration hat 5 Werte:

• none
• underline
• overline
• line-through
• blink

Unglaublich, underline gibt dem Element einen Unterstrich, genau wie der U-Element in HTML. Overline hat das Gegenteil, es zeichnet eine Oberstrichlinie am Textanfang. Der Wert line-through zeichnet eine durchgehende Linie in der Mitte des Textes, was äquivalent zum S- und strike-Element in HTML ist. Blink lässt den Text blinken, ähnlich wie der umstrittene blink-Tag von Netscape unterstützt.

Der Wert none schaltet alle auf einen Elemente angewendeten Dekorationen aus. In der Regel ist der Text ohne Dekoration das Standardaussehen, aber das ist nicht immer der Fall. Zum Beispiel haben Links standardmäßig einen Unterstrich. Wenn Sie den Unterstrich der Hyperlinks entfernen möchten, können Sie dies mit folgendem CSS tun:

a {text-decoration: none;}

Hinweis:Wenn eine solche Regel ausdrücklich verwendet wird, um die Unterstrich der Links zu entfernen, ist der einzige visuelle Unterschied zwischen dem Anker und dem normalen Text die Farbe (wenigstens ist dies der Fall, aber es kann nicht vollständig gewährleistet werden, dass die Farbe sicherlich unterschiedlich ist).

Es ist auch möglich, verschiedene Dekorationen in einer Regel zu kombinieren. Wenn alle Hyperlinks sowohl unterstrichen als auch überstrichen sein sollen, lautet die Regel wie folgt:

a:link a:visited {text-decoration: underline overline;}

Allerdings ist zu beachten, dass wenn zwei verschiedene Dekorationen auf dasselbe Element passen, der Siegerwerts die andere Wert vollständig ersetzt. Überlegen Sie sich folgende Regeln:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

Für die angegebenen Regeln hat jeder h2-Element mit der Klasse stricken nur eine durchgehende Liniendekoration, ohne Unter- und Oberstrich, weil Der Wert text-decoration ersetzt anstatt sich zu akkumulieren.

Verarbeitung von Leerzeichen

Eigenschaft white-spaceEs beeinflusst die Verarbeitung von Leerzeichen, Zeilenumbrüchen und Tabulatoren durch den Benutzeragenten im Quelldokument.

Durch die Verwendung dieser Eigenschaft kann beeinflusst werden, wie der Browser mit Leerzeichen zwischen Zeichen und Zeilenabständen umgeht. In gewisser Weise hat die Standardverarbeitung von XHTML die Leerzeichen bereits bearbeitet: Es wird alle Leerzeichen zu einem Leerzeichen zusammengefasst. Daher wird das folgende Markenzeichen im Webbrowser angezeigt, wobei zwischen den Zeichen nur ein Leerzeichen angezeigt wird und Zeilenumbrüche im Element ignoriert werden:

<p>This     paragraph has    many
    spaces           in it.</p>

Diese Standardverhalten kann explizit mit folgendem Statement gesetzt werden:

p {white-space: normal;}

Die obigen Regeln tellen dem Browser, wie er normalerweise vorgeht: Überflüssige Leerzeichen werden weggeworfen. Wenn dieser Wert gegeben ist, werden Zeilenumbruchzeichen (Eingaben) in Leerzeichen umgewandelt, und eine Reihe von mehreren Leerzeichen in einer Zeile wird in ein Leerzeichen umgewandelt.

Beispiel TIY: white-space: normal

Wert pre

Wenn jedoch white-space auf pre gesetzt wird, wird die Verarbeitung der Leerzeichen im von diesem Attribut betroffenen Elementen unterschiedlich sein, das Verhalten ist wie das des XHTML-Elements pre; Leerzeichen werden nicht ignoriert.

Wenn der Wert des white-space-Attributs pre ist, beachtet der Browser zusätzliche Leerzeichen und sogar Zeilenumbrüche. In dieser Hinsicht und nur in dieser Hinsicht kann jeder Element eine pre-Element sein.

Beispiel TIY: white-space: pre

Hinweis:Nach Tests wird der Wert von IE 7 und älteren Browsern nicht unterstützt, daher verwenden Sie bitte Browser außer IE, um die obigen Beispiele anzuzeigen.

Wert nowrap

Der entgegengesetzte Wert ist nowrap, der das Umbruch des Textes im Element verhindert, es sei denn, ein br-Element wird verwendet. Die Verwendung von nowrap in CSS ähnelt sehr der Verwendung von <td nowrap> in HTML 4, um eine Tabellenzelle so zu setzen, dass sie nicht umgebrochen werden kann, obwohl der white-space-Wert auf beliebige Elemente angewendet werden kann.

Beispiel TIY: white-space: nowrap

Werte pre-wrap und pre-line

CSS2.1 führte die Werte pre-wrap und pre-line ein, die in früheren Versionen von CSS nicht vorhanden waren. Diese Werte dienen dazu, den Inhalt der Weißzeichenverarbeitung besser zu kontrollieren.

Wenn das white-space-Eigenschaftswert des Elements auf pre-wrap gesetzt ist, werden die Leerzeichenfolgen im Text des Elements beibehalten, aber die Textzeilen werden normal umgebrochen. Wenn dieser Wert gesetzt ist, werden die Zeilenumbruchzeichen sowohl im Quelltext als auch in den generierten Zeilenumbruchzeichen beibehalten. pre-line ist das Gegenteil von pre-wrap und fügt Leerzeichenfolgen wie im normalen Text zusammen, behält jedoch die Zeilenumbruchzeichen bei.

Beispiel TIY: white-space: pre-wrap

Beispiel TIY: white-space: pre-line

Hinweis:Wir haben die beiden obigen Beispiele in den Browsern IE7 und FireFox2.0 getestet, aber das Ergebnis ist, dass die Werte pre-wrap und pre-line nicht gut unterstützt werden.

Zusammenfassung

Die folgende Tabelle zusammenfasst das Verhalten der white-space-Eigenschaft:

Textrichtung

Wenn Sie ein englischsprachiges Buch lesen, lesen Sie von links nach rechts und von oben nach unten, das ist der Fluss der englischen Sprache. Nicht alle Sprachen sind so. Wir wissen, dass die alte chinesische Sprache von rechts nach links gelesen wird, natürlich einschließlich Hebräisch und Arabisch usw. CSS2 führte eine Eigenschaft ein, um ihre Richtung zu beschreiben.

direction-EigenschaftBeeinflusst die Schreibrichtung des Textes in blockartigen Elementen, die Ausrichtung der Spalten in Tabellen, die Richtung der horizontalen Ausfüllung ihres Elements und die Position der letzten Zeile in Blockelementen mit beiden Seiten ausgerichtet.

Anmerkung:Für inline-Elemente gilt nur, wenn unicode-bidi-EigenschaftDie direction-Eigenschaft wird nur dann angewendet, wenn sie auf embed oder bidi-override gesetzt wird.

Die direction-Eigenschaft hat zwei Werte: ltr und rtl. In den meisten Fällen ist der Standardwert ltr, der Text wird von links nach rechts angezeigt. Wenn Text von rechts nach links angezeigt werden soll, sollte der Wert rtl verwendet werden.

CSS-Texteigenschaften

Werkzeugkasten

CSS-Referenzhandbuch

CSS-Beispiel

CSS-Quiz

CSS-Tutorials

Sponsorenlinks