Von den Grundlagen zur Kompetenz: CSS-Praxis-Tutorial (2)

Sieben. Steuern des Textstils

Der Stil der Textsteuerung besteht aus zwei Teilen: Groß-/Kleinschreibung und Textänderung.

1． Text-Groß-/Kleinschreibung

Mit der Text-Groß-/Kleinschreibung können Webdesigner die Groß-/Kleinschreibung von Text beim Eingeben vermeiden. Stattdessen können sie die Groß-/Kleinschreibung von Textteilen nach der Eingabe festlegen.

Das Grundformat ist wie folgt:

text-transform: Parameter

Parameterwertebereich:

·uppercase: Der gesamte Text wird in Großbuchstaben angezeigt

·Kleinbuchstaben: Der gesamte Text wird in Kleinbuchstaben angezeigt

·Großbuchstaben: Der erste Buchstabe jedes Wortes wird in Großbuchstaben angezeigt

·Keine: Textverformungsparameter des übergeordneten Elements sind nicht vererbt

Hinweis: Vererbung Dies bedeutet, dass HTML-Bezeichner von Parametern geerbt werden, die ihre eigenen Bezeichner enthalten.

2． Textänderung

Der Hauptzweck der Textänderung besteht darin, die Unterstreichung zu ändern, wenn der Browser Textlinks anzeigt.

Das Grundformat ist wie folgt:

text-decoration: Parameter

Parameterwertebereich:

·underline: Unterstreichen Sie den Text

·Überstreichen: Den Text unterstreichen

·Durchgestrichen: Den Text durchstreichen

·Blinken: Den Text blinken lassen

·Keine: Obiges nicht anzeigen Beliebig Wirkung

8. Steuern des Textstils

Der Stil zum Steuern von Text umfasst sechs Teile: Wortabstand, Buchstabenabstand, Textzeilenabstand, horizontale Textausrichtung, vertikale Textausrichtung und Texteinzug.

1． Wortabstand

Wortabstand bezieht sich auf den Abstand zwischen den einzelnen Wörtern im Englischen, mit Ausnahme chinesischer Schriftzeichen.

Das Grundformat ist wie folgt:

Wortabstand: Abstandsabstand

Der Wert des Abstandsabstands: Punkte, Geviert, Pixel, Zoll, cm, mm, PC , ex, normal usw.

2． Buchstabenabstand

Der Buchstabenabstand bezieht sich auf den Abstand zwischen englischen Buchstaben. Die Funktionen, Verwendung und Parametereinstellungen sind dem Wortabstand sehr ähnlich.

Das Grundformat ist wie folgt:

letter-spacing: Buchstabenabstand

3. Leitabstand

Der Leitabstand bezieht sich auf den vertikalen Abstand zwischen der oberen und unteren Grundlinie. Im Allgemeinen betrachtet der Computer in englischen Übungsbüchern mit fünf Zeilen die dritte horizontale Zeile von oben nach unten als Grundlinie dieser Zeile.

Das Grundformat ist wie folgt:

Linienhöhe: Abstand zwischen Linien

Wert des Abstands zwischen Linien:

·Zahlen ohne Einheiten: 1 ist die Basiszahl, die 100 % der proportionalen Beziehung entspricht

·Zahlen mit Längeneinheiten: beziehen sich auf die spezifischen Einheiten

·Proportionale Beziehung

Hinweis: Wenn der Text Die Schriftart ist sehr klein. Wenn der Zeilenabstand relativ klein ist, können sich die oberen und unteren Textzeilen überlappen.

4． Horizontale Textausrichtung

Die horizontale Textausrichtung kann die horizontale Ausrichtung von Text steuern und bezieht sich nicht nur auf Textinhalte, sondern umfasst auch die Festlegung der Ausrichtung von Bildern und Bildmaterialien.

Das Grundformat ist wie folgt:

text-align: Parameter

Parameterwert:

·left: linksbündig

· rechts: rechte Ausrichtung

·mitte: zentrierte Ausrichtung

·justify: relative linke und rechte Ausrichtung

Es sollte jedoch beachtet werden, dass text-alight ein Block ist. level-Attribut und kann nur in Bezeichnern wie <

5． Vertikale Ausrichtung des Textes

Die vertikale Ausrichtung des Textes sollte relativ zur Position des übergeordneten Textes erfolgen, nicht zur vertikalen Ausrichtung des Textes auf der Webseite. Befindet sich beispielsweise ein Textabschnitt in einer Tabellenzelle, wird die vertikale Zentrierung dieses Texts anhand der Zelle gemessen. Das heißt, der Text wird in der Mitte der Zelle und nicht in der Mitte angezeigt die gesamte Webseite.

Das Grundformat ist wie folgt:

vertikal-align: Parameter

Parameterwert:

·top: obere Ausrichtung

·bottom: untere Ausrichtung

·text-top: relative obere Textausrichtung

·text-bottom: relative untere Textausrichtung

·baseline: Grundlinienausrichtung

·middle: zentrierte Ausrichtung

·sub: wird in tiefgestellter Form angezeigt

·super: wird in hochgestellter Form angezeigt

6. Texteinzug

Der Texteinzug ermöglicht die Anzeige von Text in einem schmaleren Bereich als der Standardwert. Er wird hauptsächlich zum Einrücken der ersten Zeile im chinesischen Stil oder zum Einrücken großer Absätze von zitiertem Text und Notizen verwendet .

Das Grundformat ist wie folgt:

text-indent: Einrückungsabstand

Einrückungsabstandswert:

·Zahl mit Längeneinheit

·Proportionale Beziehung

Es sollte jedoch beachtet werden, dass einige Leute bei Verwendung der proportionalen Beziehung denken könnten, dass das Standardverhältnis des Browsers relativ zur Breite des Absatzes ist. Tatsächlich ist dies nicht der Fall Der Fall ist der gesamte Browser. Das Fenster ist die Standardreferenz des Browsers.

Darüber hinaus ist text-indent ein Attribut auf Blockebene und kann nur in Bezeichnern wie < ;.

Neun. Stile zur Steuerung von Farbe und Hintergrund

Stile zur Steuerung von Farbe und Hintergrund umfassen sechs Teile: Farbattribut, Hintergrundfarbe, Hintergrundbild, Hintergrundbildwiederholung, Hintergrundbildfixierung und Hintergrundpositionierung.

1． Das Grundformat des Farbattributs

lautet wie folgt:

Farbe: Parameter

Wertebereich des Farbparameters:

·Dargestellt durch RGB-Wert

·Dargestellt durch einen hexadezimalen (hex) Farbwert

·Dargestellt durch den englischen Namen der Standardfarbe

Es ist zweifellos am bequemsten, die Standardfarbe mit ihrem englischen Namen auszudrücken, aber da es zu wenige vordefinierte Farbtypen gibt, bevorzugen immer mehr Webdesigner die Verwendung von RGB. Die RGB-Methode bietet nicht nur eine genaue Darstellung von Farben in digitaler Form, sondern ist auch die Standardspezifikation, die in vielen Bildproduktionsprogrammen (z. B. Photoshop) verwendet wird. Dadurch wird eine solide Grundlage für eine bessere Integration von Bildern und Webseiten gelegt . .

2． Hintergrundfarbe

In HTML gibt es nur eine Möglichkeit, einem Objekt eine Hintergrundfarbe hinzuzufügen: Zuerst eine Tabelle erstellen, die Hintergrundfarbe in der Tabelle festlegen und dann das Objekt in die Zelle einfügen . Dies ist nicht nur problematischer, sondern erfordert auch einige Probleme mit der Größe und Positionierung der Tabelle. Jetzt ist es einfach, dies direkt mit CSS zu tun, und der Objektbereich ist sehr groß, es kann ein Textstück oder nur ein Wort oder ein Buchstabe sein.

Das Grundformat ist wie folgt:

Hintergrundfarbe: Parameter

Der Parameterwert ist derselbe wie das Farbattribut.

3． Das Grundformat des Hintergrundbilds

ist wie folgt:

Hintergrundbild: URL(URL)

URL ist der Speicherpfad des Hintergrundbilds. Wenn anstelle des Speicherpfads für das Hintergrundbild „none“ verwendet wird, wird nichts angezeigt.

4． Hintergrundbildwiederholung

Hintergrundbildwiederholung steuert, ob das Hintergrundbild gekachelt ist oder nicht. Mit anderen Worten: In Kombination mit der Steuerung der Hintergrundpositionierung kann ein Hintergrundbild separat irgendwo auf der Webseite angezeigt werden.

Das Grundformat ist wie folgt:

background-repeat: Parameter

Parameterwertebereich:

·no-repeat: Gekachelten Hintergrund nicht wiederholen Bilder

·repeat-x: Das Bild nur in horizontaler Richtung kacheln lassen

·repeat-y: Das Bild nur in vertikaler Richtung kacheln lassen

Wenn kein Hintergrund vorhanden ist Bild ist angegeben. Für wiederholte Attribute ist die Standardeinstellung des Browsers, dass das Hintergrundbild sowohl in horizontaler als auch in vertikaler Richtung gekachelt wird.

5． Hintergrundbild behoben

Hintergrundbild behoben steuert, ob das Hintergrundbild beim Scrollen der Webseite mitscrollt. Wenn Sie das Attribut „Hintergrundbild fest“ nicht festlegen, scrollt das Standardhintergrundbild des Browsers beim Scrollen der Webseite mit. Um zu verhindern, dass allzu ausgefallene Hintergrundbilder die Sehkraft des Betrachters beim Scrollen schädigen, können Sie Hintergrundbild und Textinhalt entbündeln, die mit dem Browserfenster gebündelt werden sollen.

Das Grundformat ist wie folgt:

Hintergrundanhang: Parameter

Parameterwertebereich:

·fest: Wenn die Webseite gescrollt wird, Das Hintergrundbild ist relativ zum Browser. Für das Browserfenster ist es festgelegt

·scrollen: Wenn die Webseite gescrollt wird, scrollt das Hintergrundbild zusammen mit dem Browserfenster

6. Hintergrundpositionierung

Hintergrundpositionierung wird verwendet, um die Position des auf der Webseite angezeigten Hintergrundbilds zu steuern.

Das Grundformat ist wie folgt:

Hintergrundposition: Parametertabelle

Parameterwertebereich:

·Numerischer Parameter mit Längeneinheit

·oben: obere Ausrichtung relativ zum Vordergrundobjekt

·unten: untere Ausrichtung relativ zum Vordergrundobjekt

·links: linke Ausrichtung relativ zum Vordergrundobjekt

·rechts: relativ zum Vordergrundobjekt Rechte Ausrichtung

·Mitte: Mittenausrichtung relativ zum Vordergrundobjekt

·Proportionale Beziehung

Wenn die Mitte im Parameter verwendet wird vor einem anderen Parameter bedeutet es horizontale Zentrierung; wenn es hinter einem anderen Parameter verwendet wird, bedeutet es vertikale Zentrierung.

10. Steuern Sie den Stil der Liste

Liste ist eine sehr nützliche Anzeigemethode in HTML. Sie kann zusammengehörige parallele Inhalte vertikal ordentlich anordnen, wodurch die Webseite ordentlich und professionell aussieht und den Betrachtern ein klares Gefühl vermittelt.

Das Stylesheet fügt der Liste einige Funktionen hinzu. Der Stil der Kontrollliste besteht aus drei Teilen: Listenstil, Grafiksymbol und Listenposition.

1． Listensymbole

Listensymbole beziehen sich auf die Symbole, die vor jedem Listenelement angezeigt werden.

Das Grundformat ist wie folgt:

list-style-type: Parameter

Parameterwertebereich:

·Disc: Kreis

·Kreis: Hohlkreis

·Quadrat: Quadrat

·dezimal: Dezimalzahl

·lower-roman: kleine römische Zahl

·upper - römisch: römische Großbuchstaben

· Kleinbuchstaben: griechische Kleinbuchstaben

· Großbuchstaben: griechische Großbuchstaben

· keine: keine Symbolanzeige

disk im Parameter ist die Standardoption.

2． Grafische Symbole

Grafische Symbole bedeuten, dass die Aufzählungszeichen in der Originalliste durch Grafiken ersetzt werden können.

Das Grundformat ist wie folgt:

list-style-image: URL

URL ist die Adresse der Grafikdatei, die zum Ersetzen des Aufzählungszeichens verwendet wird und die Sie verwenden können eine relative Adresse oder eine absolute Adresse.

3． Listenposition

Listenposition beschreibt, wo die Liste angezeigt wird.

Das Grundformat ist wie folgt:

list-style-position: Parameter

Parameterwertebereich:

·inside: wird im BOX-Modell angezeigt

·außen: außerhalb des BOX-Modells angezeigt

Hier erscheint ein neues Konzept: das BOX-Modell. BOX bezieht sich auf einen Container, der Objekte enthält, auf die Stilregeln angewendet werden. Die detaillierte Einführung erfolgt später.

Elf. Steuern Sie den Stil der Benutzeroberfläche

Auf einer Webseite hat die Maus normalerweise die Form eines Pfeils, nimmt die Form einer Hand an, wenn sie auf einen Link zeigt, und nimmt die Form einer Sanduhr an, wenn sie darauf wartet, dass die Webseite heruntergeladen wird ... Das scheint so zu sein eine Konvention. Obwohl dieses Design es uns ermöglicht, den aktuellen Status des Browsers oder seine Fähigkeiten zu kennen, scheint es, dass es unsere Anforderungen nicht vollständig erfüllen kann. Nehmen Sie zum Beispiel einen Link, der auf eine Hilfedatei verweisen kann oder eine Seite vorwärts oder rückwärts gehen kann. Bei so vielen Funktionen kann die gleiche handförmige Maus allein das Problem nicht erklären. Glücklicherweise bietet CSS bis zu 13 Mausformen zur Auswahl.

Das Grundformat ist wie folgt:

Cursor: Mausformparameter

CSS-Mausformparametertabelle:

CSS-Code

Mausform

style="cursor:hand"

Handform

style="cursor:crosshair"

Kreuzform

style="cursor:text"

Textform

style="cursor:wait"

Sanduhrform

style="cursor:move"

Kreuzpfeilform

style="cursor:help"

Fragezeichenform

style="cursor:e-resize"

Rechte Pfeilform

style="cursor:n-resize"

Aufwärtspfeilform

style="cursor:nw-resize"

Nach oben Pfeilform nach links

style="cursor:w-resize"

Pfeilform nach links

style="cursor:s-resize"

Nach unten pfeilförmig

style="cursor:se-resize"

Pfeilform nach unten rechts

style="cursor:sw-resize"

Nach unten Pfeilform nach links

Das Obige ist der Inhalt von From Basics to Mastery: CSS Practical Tutorial (2). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (). www.php.cn)!