CSS2-Kurzreferenz_CSS/HTML

Seit das W3C (The World Wide Web Consortium) die Version 4.0 von HTML mit dem Codenamen Cougar formuliert hat, wurden die in Webseiten vorhandenen dynamischen Effekte zum ersten Mal offiziell anerkannt. Das W3C hat die Implementierung von dynamischem Hypertext (Dynamic HTML) unterteilt drei Abschnitte: Skripte, Browser, die dynamische Effekte unterstützen, und CSS. Sie verwenden möglicherweise häufig die ersten beiden, wissen aber möglicherweise nicht, was CSS ist. Wenn Sie Erfahrung mit der Erstellung von Webseiten haben, haben Sie möglicherweise schon einmal von Stylesheets oder Stylesheets gehört Wenn Sie Webseiten mit weiteren neuen Funktionen erstellen möchten, ist dieser Artikel auch für Sie geeignet.
1. Was ist CSS?
CSS ist die Abkürzung für Cascading Style Sheet. Einige Bücher übersetzen es als „Cascading Style Sheet“ oder „Cascading Style Sheet“ (im Folgenden als „Style Sheet“ bezeichnet). 1997 veröffentlichte das W3C gleichzeitig den HTML4-Standard Zeit. CSS1, der erste Standard für Stylesheets. Stylesheets sind eine wesentliche Neuerung in der Syntax früherer HTML-Versionen (HTML-Versionen vor 3.2), was auch dazu führte, dass verschiedene Browserhersteller absichtlich verschiedene Tags erstellen konnten werden nur von Ihrem eigenen Unternehmen unterstützt, um unterschiedliche Effekte zu erzielen. Wenn Sie beispielsweise einen Teil des Textes in einem Absatz rot machen möchten, sollte dies in HTML3.2 so aussehen:

Hier wird roter Text angezeigt

Im Stylesheet werden einige Tags (z. B. das „font“-Tag im obigen Beispiel) mithilfe des Stylesheets zugeordnet. Das obige Beispiel kann geändert werden Cheng:

Der rote Text wird hier angezeigt

​
Ist das alles die Funktion von Stylesheets? Weit gefehlt! Wie bereits erwähnt, sind Stylesheets Teil von DHTML. Die eigentliche Bedeutung der Einrichtung von Stylesheets besteht darin, Objekte tatsächlich in HTML einzuführen, sodass Skriptprogramme (wie Javascript und VBScript) zum Aufrufen von Objektattributen und zum Ändern von Objektattributen verwendet werden können Für dynamische Zwecke war dies in früheren HTML-Versionen nicht möglich. Wenn Sie objektorientierte Programmiertools wie VB verwendet haben, werden Sie schnell feststellen, wie einfach es ist, Stylesheets zur Erstellung von DHTML zu verwenden. Ein weiterer Beitrag von Stylesheets besteht darin, verschiedene umständliche Tags in HTML zu vereinfachen, wodurch die Attribute jedes Tags allgemeiner und vielseitiger werden. Stylesheets erweitern die ursprünglichen Tag-Funktionen und können mehr Effekte erzielen. Stylesheets gehen sogar über die Anzeigefunktion des Webs hinaus Seite selbst und erweitert den Stil auf eine Vielzahl von Medien und zeigt einen unwiderstehlichen Charme.​
Seit der CSS1-Version wurde im Mai 1998 die CSS2-Version veröffentlicht und das Stylesheet wurde weiter bereichert. Sowohl Internet Explorer 4 als auch Netscape Navigator 4 bieten Unterstützung für Stylesheets, aber in jeder Hinsicht ist IE4 effektiver als NE4. Dies liegt an der Oberfläche des Der Unterschied zwischen den beiden ist nicht sehr unterschiedlich, aber im Wesentlichen sind sie ziemlich unterschiedlich. Das IE4-Modell kann dynamische Effekte einfacher in Webseiten einführen. Obwohl das IE4-Modell derzeit nur von Microsoft selbst unterstützt wird, wurde es eindeutig geschrieben in den DHTML-Standard des W3C; das Stylesheet von NE4 kann die Eigenschaften von Objekten nicht über Skripte aufrufen. (Netscape hat ein Stylesheet namens J SSS entwickelt, das Javascript zum Definieren von Stilen verwendet, aber vom W3C nicht erkannt wird.)
2. Erfahren Sie mehr über Stylesheets
Cascading in Cascading Style Sheet ist „Cascading“ Das bedeutet, dass im selben Webdokument mehrere Stylesheets vorhanden sein können. Je höher die Priorität, desto mehr Stylesheets werden für die Anzeige verwendet. Aus Sicht der Form des Stylesheet-Einfügens kann es in drei Typen unterteilt werden:
Inline-Stylesheet: Es erleichtert vorhandene HTML-Tags und fügt den durch die Tags gesteuerten Informationen spezielle Stile hinzu, wie im Beispiel gerade.
Eingebettetes Stylesheet: Wie JavaScript kann es in den Header einer HTML-Datei eingebettet werden (zwischen den Tags und ) und mithilfe eines -Containers geladen werden, zum Beispiel: „“ , Dies gilt für alle

-Tags auf der Seite.
Ein externes Stylesheet ist eine extern gespeicherte Stylesheet-Datei. Die externe Datei hat die Erweiterung .CSS, z. B. „“.
Sie können die oben genannten drei Methoden je nach Bedarf während der Anwendung verwenden, in der Praxis werden jedoch häufiger Inline-Stylesheets und eingebettete Stylesheets verwendet.
3. Grammatische Merkmale von Stylesheets
Stylesheets haben ihre eigenen einzigartigen Schreibmethoden. Wenn Sie ihre grammatikalischen Merkmale beherrschen und ihre verschiedenen Eigenschaften verstehen, werden Sie feststellen, dass die Verwendung von Stylesheets in Webseiten wie entspannend ist. Es gibt zum Beispiel das einfachste HTML-Dokument:

Text goes here…

us-Stile können mithilfe eingebetteter Stylesheets angegeben werden.

  

Verwenden Sie
Klasse und
IDInhalt anzeigen.

Where.someclass repräsentiert die Klasse und #someID repräsentiert die ID. Klassen und IDs können auch mit Element-Tags verwendet werden, zum Beispiel:
p.bigFont {...}
bedeutet, dass das Stylesheet in einem P-Tag (
) der bigFont-Klasse ausgeführt werden muss. Das Gleiche gilt auch für ID.
Um die Tags zu vereinfachen, die bestimmte wiederholte Attribute deklarieren, können Sie "," verwenden, um verschiedene Selektoren zu trennen und anzuzeigen, dass sie alle dasselbe Attribut darstellen, wie zum Beispiel:

H1,H2 {color:red}

Div, p.mytext {……} Manchmal möchten wir das Stylesheet auch in einem bestimmten Bereich wirksam machen: p em {color:red} Element-Tags werden durch Leerzeichen getrennt, was darauf hinweist in und Die und dazwischen werden rot angezeigt. Darüber hinaus können Sie auch „~“ verwenden, um anzugeben, dass auf einen Selektor ein anderer Selektor folgt, und dieser ist auf beiden Seiten von „/“ umgeben:
/ Selector1 ~ Selector2/ {...}
zeigt an dass, wenn Selector2 Selector1 folgt, dieses Stylesheet verwendet wird.
2. Einheiten von Attributwerten
In Stylesheets sind die Einheiten von Attributen meist Längeneinheiten, einschließlich px (Pixel), pt (Pfund), em (eine Einheit im Schriftsatz, 1em=12pt), mm (Millimeter), cm (Zentimeter), pc (1pc=12pt), in (Zoll), diese Einheiten können durch ganze Zahlen (wie px) oder reelle Zahlen (wie em) und den logarithmischen Wert im Element ausgedrückt werden Es gibt auch eine Vererbungsbeziehung wie:
body {font-size:12pt;
text-indent:3em>}
H1 {font-size:15pt}
Dann Der Text -indent-Attribut von H1 in der Anzeige ist nicht 36pt, sondern 45pt.
Die Einheiten einiger Attribute können sogar negative Werte sein, z. B. der Rand, wodurch einige Spezialeffekte erzielt werden können, z. B. eine Überlappung zwischen Elementen.
Es gibt auch andere Einheiten wie den Winkel, dessen Einheiten deg (Grad), grad (Steigung) und rad (Bogenmaß) uns sehr vertraut sind.
3. Kommentare und Leerzeichen
Stylesheets haben auch Kommentaranweisungen: Sie können „/*...*/“ als Kommentar-Tags verwenden. Es gibt einen Analysator für Stylesheets, der für die Analyse zuständig ist Überprüfen Sie, ob der Analysator Inhalte zwischen Kommentar-Tags ignoriert. Leerzeichen sind in Stylesheets gültig. Wenn zwischen den Zeichen mehr als ein Leerzeichen steht, werden die verbleibenden Leerzeichen weggelassen und nur eines beibehalten. Insbesondere bei der Deklaration bestimmter Schriftarten dürfen Leerzeichen nicht weggelassen werden.
 Zu beachtende Dinge
Erstens wird bei Stylesheets die Groß- und Kleinschreibung beachtet. Achten Sie daher auf die Rechtschreibung. Zweitens ignoriert der Parser des Stylesheets deren Existenz, wenn nicht deklarierte Eigenschaften und Methoden in CSS2 verwendet werden :
H1 ,H2 {color:green}  
H3 ,H4 & H5  {color:red}  
P  {color:blue ;font-variant:small-caps}  
Wobei „&“ ist Das Stylesheet Die gesamte zweite Zeile wird vom Parser für die Beschriftung übersprungen, die nicht darin enthalten ist. Die Schriftartvariante in der dritten Zeile ist kein zulässiges Attribut und wird ebenfalls übersprungen („color:blue“ ist gültig).
Nachdem Sie die oben genannten Regeln verstanden haben, sind Sie bereits mit Stylesheets vertraut. Im Folgenden werde ich die verschiedenen Attribute und Attributwerte von Stylesheets im Detail vorstellen.

CSS2-Kurzreferenz 2
Schlüsselwörter: Andere
4. CSS-Eigenschaften:
1. Medientyp
Eines der wichtigsten Merkmale eines Stylesheets ist, dass es Funktioniert auf einer Vielzahl von Medien, z. B. Seiten, Bildschirmen, elektronischen Synthesizern und mehr. Bestimmte Eigenschaften können nur auf bestimmten Medien funktionieren. Beispielsweise ist die Eigenschaft „font-size“ nur auf scrollbaren Medientypen (Bildschirm) gültig.
Die Deklaration eines Medienattributs kann mit @import oder @media eingeführt werden:
@import url(loudvoice.css) Speech;
@media print {
/* Stylesheet für den Druck geht hier */
}
Sie können Medien auch in Dokument-Tags einführen:

Wie Sie sehen, besteht der Unterschied zwischen @import und @media darin, dass ersteres ein externes Stylesheet für Medientypen einführt , und letzteres führt direkt Medieneigenschaften ein. Die Methode zur Verwendung von @import besteht darin, die URL-Adresse der Stylesheet-Datei zu @import hinzuzufügen und dann den Medientyp hinzuzufügen. Mehrere Medien können ein Stylesheet gemeinsam nutzen, und die Medientypen werden durch Trennzeichen getrennt. Bei der Mediennutzung steht der Medientyp an erster Stelle, und die anderen Regeln entsprechen im Wesentlichen dem Regelsatz. Die verschiedenen Medientypen sind unten aufgeführt:
BILDSCHIRM: bezieht sich auf den Computerbildschirm.
DRUCKEN: Bezieht sich auf das undurchsichtige Medium, das für Drucker verwendet wird.
PROJEKTION: bezieht sich auf das zur Anzeige verwendete Projekt.
BRAILLE: Braille-System, bezieht sich auf Drucksachen mit taktilen Effekten.
AURAL: Bezieht sich auf einen elektronischen Sprachsynthesizer.
TV: bezieht sich auf fernsehähnliche Medien.
HANDHELD: Bezieht sich auf tragbare Anzeigegeräte (kleiner Bildschirm, monochrom)
ALLE: Geeignet für alle Medien.
2. Attribute des BOX-Modells (BOX-Modell)
Was ist BOX? CSS nennt den Teil, der in HTML mit
... beginnt, eine BOX (Container) mit drei Arten von Attributen: Polsterung, Rand und Rand.
Randattribut:
Das Randattribut ist in fünf Attribute unterteilt: Rand oben, Rand rechts, Rand unten, Rand links und Rand, die jeweils den Abstand zwischen dem Inhalt in der BOX und dem Rand darstellen. Der Attributwert ist ein numerischer Wert. Die Einheit kann Länge, Prozentsatz oder Auto sein. Der Rand kann sogar auf einen negativen Wert eingestellt werden, was zu einer überlappenden Anzeige zwischen B OX und BOX führt. Einzelheiten zu Randattributen finden Sie in der folgenden Tabelle Name: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
Attributwert:
Anfangswert: 0
Geeignete Objekte: alle Elemente
Ob vererbt werden soll: nein
Anmerkung zum Prozentsatz: relativ zur Breite der BOX
Zum Beispiel:
H1 { margin-top: 2em }
H2 { margin-right: 12,3 % }
Margin hat auch eine schnelle Möglichkeit, es zu schreiben, das heißt, verwenden Sie das Margin-Attribut direkt, zum Beispiel:
BODY { margin: 1em 2em 3em 2em}
entspricht:
BODY {
margin-top:1em;
margin-bottom:3em;
margin-left:2em;
Nach dem Rand können vier Werte stehen Attribut, getrennt durch Leerzeichen (nicht Kommas beachten), die Reihenfolge ist „oben, rechts, unten „Links“, natürlich können dem Rand auch weniger als vier Werte folgen, zum Beispiel:
BODY { margin: 2em } / * Alle Ränder sind auf 2em eingestellt */
BODY { margin: 1em 2em } /* Der obere und untere Rand sind 1em, der rechte und linke Rand sind 2em */
BODY { margin: 1em 2em 3em } / * Der obere Rand ist 1em, der rechte und linke Rand sind 2em und der untere Rand ist 3em*/
Padding-Attribut:
Padding-Attribut wird verwendet, um zu beschreiben, wie viel Platz zwischen dem Rand und dem Inhalt von eingefügt wird Das BOX-Attribut ähnelt dem Randattribut. Es ist außerdem in „oben“, „rechts“, „unten“ und „links“ unterteilt. Einzelheiten zu den Randattributen finden Sie in der folgenden Tabelle:
Attributname: „padding-top“. 'padding-right', 'padding-bottom', 'padding-left', 'padding'
Attributwert:

Anfangswert: 0
Geeignetes Objekt: alle Elemente Ob Vererbung : nein
Prozentsatz Hinweis: Relativ zur Breite der BOX
Zum Beispiel:
BLOCKQUOTE { padding-top: 0.3em }
Das padding-Attribut ähnelt margin und wird hier weggelassen.
Randattribut:
Wenn wir ein HTML-Dokument anzeigen und einen Text sehen, betrachten wir ihn normalerweise nicht als BOX. Tatsächlich hat die BOX einen Rand, der jedoch nicht normal angezeigt wird Attribut Es wird verwendet, um den BOX-Rahmen zu beschreiben. Randattribute sind in Randbreite, Randfarbe und Randstil unterteilt, und unter diesen Attributen gibt es Zweige.
border-width-Attribut:
border-width-Attribut ist unterteilt in: border-top-width, border-right-width, border-bottom-width, border-left-width und border-width Attribute, border-width Die Breite wird durch die Länge als „dünn/mittel/dick“ oder Längeneinheit dargestellt. Das Folgende ist eine detaillierte Liste der b-Order-Width-Attribute:
Attributname: „border-top-width“, „border-right-width“. ', 'border-bottom-width', 'border-left-width', 'border-width'
Attributwert:

Anfangswert: mittel
Geeignetes Objekt: alle Elemente Ob geerbt werden soll: nein
Prozentsatz Hinweis: Verboten
border-width ist eine Abkürzung, die Reihenfolge ist oben, rechts, unten, links und die Werte werden durch Leerzeichen getrennt.
border-color-Attribut:
border-color-Attribut wird verwendet, um die BOX-Randfarbe anzuzeigen, die in border-top-color, border-right-color, border-bottom-color, border-right-color unterteilt ist. Farb- und Rahmenfarbattribut, der Attributwert ist Farbe, der in Hexadezimalzahl oder rg b() ausgedrückt werden kann. Die Attribute werden unten angezeigt:
Attributname: 'border-top-color', 'border-right-'. color', 'border-bottom-color', 'border-left-color',
'border-color'
Attributwert:

Anfangswert: Anfangswert der Elementfarbe
Geeignetes Objekt: Alle Elemente Ob vererbt werden soll: nein
Prozentsatz Hinweis: Verboten
border-color ist eine Abkürzung, die Reihenfolge ist oben, rechts, unten, links und die Werte werden durch Leerzeichen getrennt .
border-style-Attribut:
border-style-Attribut wird verwendet, um den Stil des BOX-Objektrahmens festzulegen. Sein Attributwert ist das von CSS angegebene Schlüsselwort, da der Anfangswert „none“ ist.Siehe die folgenden Attribute:
Attributnamen: „border-top-style“, „border-right-style“, „border-bottom-style“, „border-left-style“, „border-style“
Attributwert:
Anfangswert: keiner
Anwendbare Objekte: alle Elemente
Ob vererbt werden soll: nein
Prozentangaben: verboten
border-color ist eine Abkürzung, die Reihenfolge ist Oben rechts Unten links werden die Werte durch Leerzeichen getrennt. Die Namen und Bedeutungen der
-Attributwerte lauten wie folgt:
none: Kein Rand.
gepunktet: Der Rand ist eine gepunktete Linie.
gestrichelt: Die Grenze ist eine lange und kurze Linie.
durchgezogen: Der Rand ist eine durchgezogene Linie.
doppelt: Der Rand ist eine doppelte Linie.
Nut, Grat, Einschub und Anfang: Zeigen Sie 3D-Ränder mit unterschiedlichen Effekten an (je nach Farbattribut).
Rahmenattribut:
Rahmenattribut ist eine Abkürzung für „Rahmen“. Die Attributwerte werden durch Leerzeichen getrennt. Die Reihenfolge lautet „Rahmenbreite, Rahmenstil, Rahmenfarbe“, zum Beispiel:

Hallo!

Sie können auch „Rand-oben“, „Rand-rechts“, „Rand-unten“ und „Rand-links“ als Abkürzungen für „oben“, „rechts“, „unten“ und „links“ verwenden. Die Reihenfolge der Attributwerte ist dieselbe wie das des Randattributs.
CSS2-Kurzreferenz Drei
Schlüsselwörter: Andere
3. Layout-Attribut (Layout):
In früherem HTML konnte die Position von Elementen nur durch die sequentielle Anordnung der Elemente bestimmt werden, während in CSS Here Sie können Elemente präziser positionieren. Netscape hat einmal das Layer-Tag vorgeschlagen, das sich sehr gut für ein präzises Layout eignet, aber vom W3C nicht erkannt wurde. Das W3C hat eine Funktion ähnlich dem Layer-Tag in CSS vorgeschlagen.
Positionsattribut:
Das Positionsattribut wird verwendet, um den Positionstyp des Elements zu bestimmen. Weitere Informationen finden Sie unter Attribute:
Attributwert: absolut | 🎜>Anfangswert: statisch
Geeignete Objekte: Alle Elemente
Ob vererbt werden soll: nein
Prozentangaben: Verboten
Die Attributwerte repräsentieren jeweils:
absolut: absolute Position auf dem Bildschirm .
relativ: relative Position auf dem Bildschirm.
statisch: Eigenposition.
Richtungsattribut:
Das Richtungsattribut bestimmt die Anordnungsrichtung der BOX. Einzelheiten finden Sie unter Attribute:
Attributname: 'Richtung'
Attributwert: ltr|
Anfangswert: ltr
Geeignetes Objekt: Alle Elemente
Ob vererbt werden soll: ja
Prozentsatz Hinweis: Verboten
Float- und Clear-Attribute:
In HTML können Sie die schwebende Position des Bildes auswählen Das BOX-Objekt kann auch durch den CSS-Speicherort schweben.改变BOX的float属性，BOX将飘浮在其他元素的左或右方：  
属性名称: 'float'  
属性值: left| right|none  
初始值: none  
适合对象: 所有元素  
是否继承: no  
百分比备注: 被禁止  
例如：  
  
  

  
  
Some sample text that has no other...  
  
相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：  
属性名称: 'clear'  
属性值: left| right|both|none  
初始值: none  
适合对象: 所有元素  
是否继承: no  
百分比备注: 被禁止  
绝对位置属性：  
绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数：  
属性名称: 'top'、'right'、'bottom'、'left'  
属性值: ||auto  
初始值: none  
适合对象: 所有元素  
是否继承: no  
百分比备注: 被禁止  
利用以上属性，用户就可以精确定义元素的位置，如：  

  
I used two red hyphens to serve as a change bar. They  
will "float" to the left of the line containing THIS  
--  
word.

Z-Index-Attribut:
Ermöglicht die überlappende Anzeige von Elementen in CSS, sodass ein Problem mit der Anzeigereihenfolge besteht. Das Z-Index-Attribut beschreibt die vordere und hintere Position des Elements eine X-Y-Ebene, dann ist die Z-Achse senkrecht zum Bildschirm, und der Z-Index verwendet eine Ganzzahl, um die vordere und hintere Position des Elements darzustellen. Je größer der Wert, desto relativ vorne wird es angezeigt, und CSS stimmt zu um negative Zahlen im Z-Index zu verwenden.
Attributname: 'z-index'
Attributwert: auto|
Anfangswert: auto
Geeignetes Objekt: Elemente, die das Positionsattribut verwenden
Ob vererbt werden soll: nein
Prozentangaben: Verboten
width attribute:
Gibt das width-Attribut von BOX an, sodass die Breite der BOX nicht vom darin enthaltenen Inhalt abhängt:
Attributname: 'width'
Attribut Wert: |. Die Eigenschaften „min-width“ und „max-width“ werden ebenfalls bereitgestellt, um die Breite der BOX zwischen der minimalen Breite und der maximalen Breite festzulegen. Attributname: 'min-width'
Attributwert:
|. Anfangswert: 0
Geeignete Objekte: alle
Ob vererbt werden soll: nein
Prozentsatz Anmerkungen: Hängt von der Breite des übergeordneten Elements ab
Attributname: 'max-width'
Attributwert: |
Anfangswert: 100%
Geeignete Objekte: alle
Ob vererbt werden soll: nein
Prozentsatz Hinweis: Hängt von der Breite des übergeordneten Elements ab
Höhenattribut:
Die gleiche BOX verfügt auch über ein Höhenattribut zur Steuerung ihrer eigenen Höhe: Attributname: 'height' Attributwert:
| Höhe des übergeordneten Elements
Die Eigenschaften „min-height“ und „max-height“ werden auch in CSS bereitgestellt, um die Höhe der BOX zwischen der minimalen Höhe und der maximalen Höhe festzulegen.
Attributname: 'min-height'
Attributwert:
| Anmerkungen: Hängt von der Höhe des übergeordneten Elements ab
Attributname: 'max-height'
Attributwert:
| Anfangswert: 100 %
Geeignetes Objekt: alle
Ob vererbt werden soll: nein
Prozentsatz Hinweis: Hängt von der Höhe des übergeordneten Elements ab
Überlaufattribut:
Bei der Angabe der Breite und Höhe eines Elements, wenn die Fläche des Elements nicht angegeben ist Es reicht aus, den gesamten Inhalt anzuzeigen. Attribute:
Attributname: 'overflow'
Attributwert: sichtbar | automatisch Geeignetes Objekt: Position des Elements Attribut Ob vererbt werden soll: nein
Prozentsatz Hinweis: Verboten
Die Bedeutung des Attributwerts ist wie folgt:
sichtbar: Erweitern Sie den Bereich, um den gesamten Inhalt anzuzeigen.
versteckt: Inhalte ausblenden, die außerhalb des Bereichs liegen.
scrollen: Zeigt eine Bildlaufleiste auf der rechten Seite des Elements an.
Auto: Wenn der Inhalt den Bereich des Elements überschreitet, wird die Bildlaufleiste angezeigt. Clip-Attribut: CSS bietet auch ein Clip-Attribut, das den Elementbereich in verschiedene Formen schneiden kann, aber derzeit ist nur ein quadratisches Attribut verfügbar:
Attributname: 'clip'
Attributwert:
|. auto
Anfangswert: auto
Geeignetes Element: Das Positionsattribut des Elements ist auf absolut gesetzt
Ob vererbt werden soll: nein
Prozentsatz Hinweis: Verboten

Das Der Wert ist rect(oben rechts unten links).
Attribute „line-height“ und „vertikale Ausrichtung“:
Das Attribut „line-height“ kann den Zeilenabstand innerhalb des Elements mithilfe von Längeneinheiten oder Prozentsätzen angeben:
Attributname: „line-height“
Attribut Wert: normal |. |. Im folgenden Beispiel ist das Ergebnis dasselbe: DIV { line-height: 1.2; DIV { Zeilenhöhe: 1,2em; Schriftgröße: 10pt }
DIV { Zeilenhöhe: 120%; Schriftgröße: 10pt }
Das Vertical-Alignment-Attribut bestimmt die Anzeige des Elements in der vertikalen Position:
Attributwert: baseline | 🎜>Anfangswert: Grundlinie
Geeignetes Objekt: Inline-Elemente
Geeignet für Vererbung: nein
Prozentsatz Hinweis: Hängt vom Zeilenhöhenattribut des Elements ab
Die Bedeutung des Attributwerts ist wie folgt folgt:
Grundlinie: An der Grundlinie des Elements ausgerichtet.
Mitte: An der Mitte des Elements ausgerichtet.
sub: Das Wort sinkt.
Super: Wort erhebt sich. text-top: Richtet den Text oben aus. text-bottom: Ausrichtung des Textes unten.
Oben: Ausgerichtet am höchsten Element in dieser Zeile.
Unten: Ausgerichtet am untersten Element in dieser Zeile.
Sichtbarkeitsattribut:
Dieses Attribut wird verwendet, um die Anzeige oder das Ausblenden von Elementen zu steuern:
Attributname: „Sichtbarkeit“
Attributwert: inherit | hide
Anfangswert: inherit
Geeignete Objekte: Alle Elemente
Ob vererbt werden soll: Wenn der Wert vererbt ist, werden die Attribute des übergeordneten Elements vererbt
Prozentsatz Hinweis: Verboten
4. Farb- und Hintergrundattribute (Farbe und Hintergrund):
Hier vorgestellt Informationen zum Festlegen der Vordergrundfarbe, Hintergrundfarbe und des Bildes in CSS.
Farbattribut:
Farbattribut wird verwendet, um die Vordergrundfarbe des Elements festzulegen:
Attributname: „Farbe“
Attributwert:

Anfangswert: basierend auf dem des Benutzers Anfangswert Definiert
Geeignete Objekte: Alle Elemente
Ob vererbt werden soll: ja
Prozentsatz Hinweis: Verboten
Der Wert des Farbattributs kann ein Hexadezimalwert, die Funktion rgb() oder ein Farbname sein Von CSS anerkannt. Zum Beispiel:
EM { color: red }
EM { color: rgb(255,0,0)}
Background-Attribut:
background-color Attribut wird verwendet, um die Hintergrundfarbe festzulegen Anfangswert ist Transparent:
Attributname: 'background-color' Attributwert:
| transparent
Anfangswert: transparent
Geeignetes Objekt: alle Elemente
Ob vererbt werden soll: Nein
Prozentsatz Hinweis: Verboten
Das backgroud-image-Attribut wird zum Festlegen des Hintergrundbilds verwendet:
Attributname: 'background-image'
Attributwert:
keiner
Anfangswert : keine
Geeignete Objekte: Alle Elemente Geerbt oder nicht: nein
Prozentangaben: Verboten
Die URL kann eine absolute Adresse oder eine relative Adresse sein, zum Beispiel:
BODY { Hintergrund- image: url( Marble.gif) }
P { background-image: none }
Die beiden oben genannten Attribute können auch mit gewöhnlichen HTML-Attributen erreicht werden. Die folgenden Attribute sind CSS-Erweiterungen des Original-HTML.
Das Attribut „background-repeat“ wird verwendet, um die wiederholte Anordnung von Hintergrundbildern zu beschreiben:
Attributwert: „repeat-x |“. 🎜>Anfangswert: Wiederholung Geeignete Objekte: alle Elemente
Ob vererbt werden soll: nein
Prozentangaben: verboten
Die Bedeutung des Attributwerts ist:
Wiederholung: zwei entlang der X-Achse und die Y-Achse Die Richtung wiederholt das Bild.
repeat-x: Wiederholen Sie das Bild entlang der X-Achsenrichtung.
repeat-y: Wiederholen Sie das Bild entlang der Y-Achsenrichtung.
keine: Keine doppelten Bilder.
Zum Beispiel:
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
/* bedeutet das Wiederholen des Bildes entlang der Y-Achse" Pendant.gif", und der Rest verwendet Rot als Hintergrundfarbe*/
Das Attribut „background-attachment“ gibt an, wie das Hintergrundbild angezeigt wird, wenn das gesamte Dokument gescrollt wird. Es verfügt über zwei Attributwerte: „Fixed“ und „Scroll Fixed“. Dies entspricht dem Wasserzeicheneffekt in IE4, was bedeutet, dass beim Ziehen des Dokuments der Hintergrund relativ statisch ist, während Scroll mit dem Dokument scrollt. Das Attribut
background-position wird verwendet, um die Position anzugeben, an der das Hintergrundbild angezeigt wird:
Attributname: 'background-position'
Attributwert: [
| ]{1, 2} |. [oben |. unten | : Beziehen Sie sich auf die Größe des Elements selbst Die Bedeutung des Attributwerts ist:
„oben links“ und „links oben“ bedeuten „0 % 0 %“. ​
„oben“, „oben in der Mitte“ und „Mitte oben“ bedeuten „50 % 0 %“.
„rechts oben“ und „oben rechts“ bedeuten beide „100 % 0 %“.
„links“, „links Mitte“ und „Mitte links“ bedeuten „0 % 50 %“.
„Mitte“ und „Mitte Mitte“ bedeuten „50 % 50 %“.
„rechts“, „rechts in der Mitte“ und „mitte rechts“ bedeuten alle „100 % 50 %“.
„unten links“ und „links unten“ bedeuten „0 % 100 %“.
„unten“, „unten Mitte“ und „Mitte unten“ bedeuten alle „50 % 100 %“
„unten rechts“ und „rechts unten“ bedeuten „100 % 100 %“.
Zum Beispiel:
BODY { Hintergrund: url(banner.jpeg) rechts oben } /* 100 % 0 % */
BODY { Hintergrund: url(banner.jpeg) oben in der Mitte } /* 50 % 0 % */
BODY { Hintergrund: url(banner.jpeg) Mitte } /* 50 % 50 % */
BODY { Hintergrund: url(banner.jpeg) unten } /* 50 % 100 % */
Das Hintergrundattribut ist eine Verknüpfung zu den oben genannten Hintergrundattributen:
Attributwert:
| > |. |. Geeignete Objekte: alle Elemente Prozentsatz: Nur in Hintergrundposition erlaubt CSS2-Kurzreferenz Nr. 4 Schlüsselwörter: Andere
5. Schriftart-Attribute (Schriftart):
Hier werden verschiedene Attribute zu Schriftarten definiert.
Das Attribut „font-family“ definiert den Namen der Schriftart, der der Name einer Schriftart oder der Name einer Schriftart sein kann. Der Name der Schriftart muss genau mit dem im Computersystem übereinstimmen:
Attributname: 'Schriftfamilie'
Attributwert: [[
],]* [
|
Anfangswert: Abhängig von der Benutzerdefinition
Geeignetes Objekt: alle Elemente
Ob vererbt werden soll: ja Prozentsatz Hinweis: Verboten Wenn das Stylesheet in einigen Computersystemen keine Schriftarten erfordert, können Sie für alle Fälle eine sekundäre Schriftart festlegen. Zum Beispiel: BODY { Schriftfamilie: Baskerville, „Heisi Mincho W3“, Symbol, Serif } Familienname bezieht sich auf eine bestimmte Schriftart, z. B. Heisi Mincho W3, generische Familie bezieht sich auf einen bestimmten Typ Schriftart, z. B. Serifen.
Das Attribut „font-style“ beschreibt den Neigungsgrad der Schriftart:
Attributname: „font-style“
Attributwert: normal | oblique
Anfangswert: normal
Geeignet Objekte: alle Elemente
Ob vererbt werden soll: ja
Prozentsatzbemerkungen: verboten
font-variant-Attribut:
Attributname: 'font-variant'
Attributwert: normal | Kapitälchen
Anfangswert: normal
Geeignet für: Alle Elemente
Ob vererbt werden soll: ja
Prozentsatz Hinweis: Verboten
Kleinbuchstaben in einem Element, das das Kapitälchen-Attribut verwendet, werden kleiner angezeigt als normale Großbuchstaben Manche.
Das Attribut „font-weight“ wird zur Beschreibung der Schriftstärke verwendet.
Attributwert: normal |. 200 |. 700 | 🎜>Geeignete Objekte: alle Elemente
Ob vererbt werden soll: ja
Anmerkungen zum Prozentsatz: verboten
100 bis 900 stehen für 9 verschiedene Schriftstärken, 400 steht für normal, 700 steht für fett und 900 ist die schwerste Schriftart, fetter oder heller gibt an, dass die Schriftstärke eine Stufe höher oder niedriger als die des übergeordneten Elements ist. Wenn das übergeordnete Element beispielsweise eine Schriftstärke von 400 hat, stellt „fetter“ eine Schriftstärke von 500 dar. Wenn das übergeordnete Element selbst eine Schriftstärke hat von 9 00, dann bleibt die Schriftstärke nach der Fettschrift immer noch 900, dasselbe gilt für die hellere Schrift. Einige Schriftarten verfügen nicht über den gesamten Strichstärkenbereich von 100 bis 900, möglicherweise von 300 bis 700, daher liegen die minimalen und maximalen Strichstärken ebenfalls bei 300 bis 700. Zum Beispiel:
P { Font-Weight: Normal } /* 400 */
H1 { Font-Weight: 700 } /* Bold */ Das
Font-Size-Attribut beschreibt die Größe der Schriftart:
Attributname: 'font-size'
Attributwert:
|.
Prozentsatz: relativ zur Schriftgröße des übergeordneten Elements
Dieses Attribut kann die absolute Größe verwenden oder relative Größe kann verwendet werden, wie durch die folgenden Schlüsselwörter gezeigt:
x-small |
Saiz relatif boleh diterangkan menggunakan: lebih besar atau lebih kecil.
Contohnya:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: greater }
EM { font-size: 150% }
EM { font-size: 1.5 em }
Atribut fon ialah pintasan kepada atribut di atas:
Nama atribut: 'font'
Nilai atribut: [ [ | ]? [/ fon: 12pt/14pt sans-serif } P { font: 80% sans-serif } P { font: x-large/110% "buku sekolah abad baru", serif } P { fon: huruf tebal italik besar Palatino, serif } P { fon: huruf kecil biasa 120%/120% fantasi }
6 Atribut Teks (Teks):
Atribut di sini akan menjejaskan paparan teks dalam dokumen WEB.
Atribut text-indent menerangkan tahap lekukan teks:
Nama atribut: 'text-indent'
Nilai atribut:
|

Nilai awal: 0
Sesuai untuk objek : Unsur bekas
Sama ada untuk mewarisi: ya
Peratusan Nota: Bergantung pada lebar elemen induk
Contoh berikut menunjukkan bahawa nilai inden perenggan ialah 3em:
P { teks -inden: 3em } Atribut penjajaran menunjukkan penjajaran teks: Nama atribut: 'penjajaran'
Nilai atribut: kiri | kanan | justify
Nilai awal: seperti yang ditakrifkan oleh pengguna
Objek yang sesuai: elemen peringkat blok
Sama ada hendak mewarisi: ya
Peratusan Nota: Dilarang
atribut hiasan teks menerangkan kaedah pengubahsuaian teks:
Nama atribut: 'hiasan teks'
Nilai atribut: tiada |. garis bawah |. Peratusan kenyataan: dilarang
Maksud nilai atribut ialah:
gariskan: garis bawah.
atas: garis bawah.
baris melalui: padamkan baris.
kelip: Kelip (seperti fungsi teg kelip dalam Navigator)
Atribut bayang teks boleh menambah kesan bayang pada teks:
Nama atribut: 'text-shadow'
Nilai atribut : tiada |.
[,
]*
Nilai awal: tiada
Objek yang sesuai: semua
Sama ada untuk diwarisi: Tidak
Nota Peratusan: Hanya sah apabila menerangkan ketelusan
Untuk contoh:
P { text-shadow: black }
Contoh di atas akan memaparkan bayang-bayang hitam di sebelah kanan bawah teks dan bayang-bayang akan menambah luas KOTAK.
Das Attribut „letter-spacing“ gibt den Wortabstand des Textes an: Attributname: 'letter-spacing'
Attributwert: normal | |. alle Elemente
Ob vererbt werden soll: ja
Prozentsatz Hinweis: Verbotener „Wortabstand“
Attributwert: normal |

Anfangswert: normal
Geeignete Objekte: alle Elemente
Ob vererbt werden soll: ja
Prozentangaben: verboten
Zum Beispiel: H1 { Wortabstand: 1em }
Das Texttransformationsattribut kann den Text im BOX-Feld in der angegebenen Groß- oder Kleinschreibung anzeigen Form:
Attributname: 'text-transform'
Attributwert: Großbuchstaben | 🎜>Prozentsatz: verboten
Die Bedeutung des Attributwerts ist:
Großschreibung: Den ersten Buchstaben jedes Satzes im KÄSTCHEN groß schreiben.
Großbuchstaben: Alle Buchstaben in BOX in Großbuchstaben ändern.
Kleinbuchstaben: Alle Buchstaben in BOX in Kleinbuchstaben umwandeln.
Das White-Space-Attribut beschreibt, wie Leerzeichen im Text angezeigt werden. In HTML werden Leerzeichen weggelassen, was bedeutet, dass es zwei Möglichkeiten gibt, egal wie viele Leerzeichen Sie am Anfang eingeben Um Leerzeichen einzugeben, gibt es zwei Methoden: Eine besteht darin, den Code des Leerzeichens „“ direkt einzugeben oder das Tag

 zu verwenden. Es gibt auch Attribute, die pre in CSS ähneln: 
Attributname: „white-“. space' 
Attributwert: normal | 🎜>PRE { Leerzeichen: Pre } 
P { Leerzeichen: Normal } 

CSS2-Kurzreferenz 5 
Schlüsselwörter: Andere 
7. Attribute auflisten: 
Die Attribute Hier werden zur Beschreibung von Listen (list) eine Reihe von Attributen verwendet. 
Listenstil-Typ-Attribut beschreibt das vor jedem Element in der Liste verwendete Symbol: 
Attributwert: Kreis-Dezimalzahl | |.upper-alpha |.upper-alpha |.keine 
Anfangswert: disc 
Geeignetes Objekt: ja 
Prozentsatzbemerkungen: verboten Die Bedeutung ist: 
Scheibe: runde Kuchenform. 
Kreis: Hohlkreis. 
Quadrat: Quadrat. 
dezimal: Dezimalwert. 
lower-roman: römische Kleinbuchstaben. 
upper-roman: Römische Ziffern in Großbuchstaben. 
Kleinbuchstaben: griechische Kleinbuchstaben. 
Großbuchstaben: griechische Großbuchstaben. 
Zum Beispiel: 
 

 

 

 Dies ist der erste Artikel 

 Dies ist der dritte Artikel 

 
Sie können auch Verwenden Sie list -style-image, um die Symbole am Anfang der Liste durch Grafiken zu ersetzen: 
Attributname: 'list-style-image' 
Attributwert: 
 keine 
Anfangswert: keine 
Geeignetes Objekt: Listenelement 
 Ob vererbt werden soll: ja  Prozentsatz Hinweis: Verboten 
 kann eine absolute Adresse oder eine relative Adresse sein.
Das Attribut list-style-position wird verwendet, um die Positionsanzeige der Liste zu beschreiben: 
Attributname: 'list-style-position' 
Attributwert: inside | 
Geeignetes Objekt: Listenelement 
 Ob vererbt werden soll: ja 
Prozentsatz Hinweis: Verboten 
 Die Attributwerte außerhalb und innerhalb repräsentieren die Anzeige außerhalb bzw. innerhalb der BOX, zum Beispiel: 
 
UL { list-style: external } UL.compact { list-style: inside }  
 
erstes Listenelement kommt erster 


zweiter Listenpunkt kommt an zweiter Stelle 


 
 
erster Listenpunkt kommt an erster Stelle 


zweiter Listenpunkt kommt an zweiter Stelle 


 
Liste – Das Stilattribut ist eine Abkürzung für die oben genannten Attribute: 
Attributwert: 
 | >Anfangswert: nein Geeignetes Objekt: Listenelement  Ob vererbt werden soll: ja Prozentsatz Hinweis: Verboten 
 Zum Beispiel: 
UL { list-style: Upper-Roman Inside } /* Gültig für alle UL*/ 
UL ~ UL { list-style: Circle Outside } /* Gültig für alle UL-Markierungen innerhalb von UL*/ 
8. Tabellenattribute: 
 Da die meisten Attribute in der Tabelle Oben wurden verschiedene Attribute besprochen, daher werden hier nur zwei Attribute vorgestellt: 
row-span-Attribut beschreibt die Anzahl der Zeilen, die von der Tabelle überspannt werden: 
Attributname: 'row-span' 
Attribut Wert: 
 
Anfangswert: 1 
Geeignete Objekte: Tabellenelemente 
Ob vererbt werden soll: nein Anmerkungen zum Prozentsatz: verboten 
Das Attribut „column-span“ beschreibt die Anzahl der Spalten, die von der Tabelle überspannt werden Tabelle: 
Attributname: 'column-span ' 
Attributwert: 
 
Anfangswert: 1 
Geeignetes Objekt: Tabellenelement 
Ob vererbt werden soll: nein Prozentsatzanmerkung : verboten 
9. Benutzeroberflächenattribute: 
Cursor-Attribut, der Benutzer kann die Cursorform angeben, die für ein Element verwendet werden soll: 
Attributname: „Cursor“ 
Attributwert: auto | default |. e-resize |. s-resize | Anfangswert: auto 
Geeignetes Objekt: alle Elemente 
Ob vererbt werden soll: ja 
Prozentsatzbemerkungen: verboten Animierter Cursor. 
Zu diesem Zeitpunkt wurden alle vorhandenen CSS-Eigenschaften vorgestellt (es gibt auch einige auditive Stylesheets, die nicht erneut vorgestellt werden, obwohl die Browsertypen derzeit Stil unterstützen). Es gibt noch nicht viele davon, aber die meisten werden früher oder später zu einem einheitlichen Standard für Browser werden. Dafür gibt es zwei Gründe: 1. Style Sheets sind die einzigen, die vom W3C akzeptiert werden Es gibt keine Anzeichen dafür, dass W3C JavaScript-Stylesheets als Standard verwenden wird. Zweitens löst CSS das Problem der Einführung von Ereignissen in Skripte. Versuchen Sie, Stylesheets zum Erstellen von Web zu verwenden Seiten, und Sie werden feststellen, dass es wirklich praktisch ist. Ich hoffe, dass meine Bemühungen Ihnen helfen können, das Stylesheet kompetent zu beherrschen.