Was bedeutet CSS?

css steht für Cascading Style Sheets und der vollständige englische Name lautet „Cascading Style Sheets“. Es handelt sich um eine Computersprache, mit der Dateistile wie HTML oder XML ausgedrückt werden können. CSS kann Webseiten nicht nur statisch ändern, sondern auch dynamisch koordinieren mit verschiedenen Skriptsprachen. Formatieren Sie verschiedene Elemente der Webseite.

Die Betriebsumgebung dieses Artikels: Windows7-System, CSS3-Version, Dell G3-Computer.

Cascading Style Sheets (vollständiger englischer Name: Cascading Style Sheets) ist eine Computersprache, die zum Ausdrücken von Dateistilen wie HTML (eine Anwendung der Standard Generalized Markup Language) oder XML (eine Teilmenge der Standard Generalized Markup Language) verwendet wird. CSS kann Webseiten nicht nur statisch ändern, sondern auch mit verschiedenen Skriptsprachen zusammenarbeiten, um verschiedene Elemente von Webseiten dynamisch zu formatieren.

CSS kann das Layout von Elementpositionen in Webseiten präzise auf Pixelebene steuern, unterstützt fast alle Schriftgrößenstile und verfügt über die Möglichkeit, Webseitenobjekte und Modellstile zu bearbeiten.

Sprachfunktionen

CSS bietet eine Stilbeschreibung für die HTML-Auszeichnungssprache, die definiert, wie die Elemente angezeigt werden. CSS ist ein Durchbruch im Bereich Webdesign. Es kann verwendet werden, um einen kleinen Stil zu ändern, um alle damit verbundenen Seitenelemente zu aktualisieren.

Im Allgemeinen verfügt CSS über die folgenden Funktionen:

• Umfangreiche Stildefinitionen

CSS bietet ein reichhaltiges Erscheinungsbild im Dokumentstil sowie die Möglichkeit, Text- und Hintergrundeigenschaften festzulegen und Rahmen für jedes Element zu erstellen , sowie Elemente Der Abstand zwischen dem Rand und anderen Elementen sowie der Abstand zwischen dem Elementrand und dem Elementinhalt, sodass Sie die Großschreibung, Dekoration und andere Seiteneffekte des Textes nach Belieben ändern können.

• Einfach zu verwenden und zu ändern

CSS kann den Stil im Stilattribut des HTML-Elements definieren, Sie können ihn auch im Header-Teil des HTML-Dokuments definieren oder den Stil in einem speziellen deklarieren CSS-Datei, als Referenz auf HTML-Seiten. Kurz gesagt, CSS-Stylesheets können alle Stildeklarationen auf einheitliche Weise speichern und verwalten.

Darüber hinaus können Elemente desselben Stils mit demselben Stil klassifiziert und definiert werden. Sie können auch einen bestimmten Stil auf alle HTML-Tags mit demselben Namen anwenden oder einem bestimmten Seitenelement einen CSS-Stil zuweisen. Wenn wir den Stil ändern möchten, müssen wir nur die entsprechende Stilanweisung in der Stilliste finden und ändern.

• Mehrseitige Anwendung

CSS-Stylesheet kann in einer separaten CSS-Datei gespeichert werden, sodass wir dasselbe CSS-Stylesheet auf mehreren Seiten verwenden können. Theoretisch gehören CSS-Stylesheets zu keiner Seitendatei und können in jeder Seitendatei referenziert werden. Auf diese Weise können die Stile mehrerer Seiten vereinheitlicht werden.

• Kaskadierung

Einfach ausgedrückt besteht Kaskadierung darin, denselben Stil mehrmals für ein Element festzulegen, wobei der zuletzt festgelegte Attributwert verwendet wird. Wenn Sie beispielsweise denselben Satz von CSS-Stylesheets für mehrere Seiten einer Website verwenden und für einige Elemente auf einigen Seiten andere Stile verwenden möchten, können Sie für diese Stile ein separates Stylesheet definieren und diese auf die anwenden Seite. Diese später definierten Stile überschreiben die vorherigen Stileinstellungen und was Sie im Browser sehen, ist der zuletzt festgelegte Stileffekt.

• Seitenkomprimierung

Auf Websites, die HTML zum Definieren von Seiteneffekten verwenden, ist häufig eine große Anzahl oder wiederholter Tabellen und Schriftartelemente erforderlich, um Textstile mit unterschiedlichen Spezifikationen zu bilden Es werden HTML-Tags generiert. Dadurch wird die Größe der Seitendatei erhöht. Durch das separate Einfügen der Stildeklaration in das CSS-Stylesheet kann die Größe der Seite erheblich reduziert werden, sodass auch die Zeit, die für das Laden der Seite aufgewendet wird, erheblich reduziert wird. Darüber hinaus wird durch die Wiederverwendung von CSS-Stylesheets die Größe der Seite stärker reduziert und die Downloadzeit verkürzt.

【Empfohlenes Lernen: CSS-Video-Tutorial】

Sprachgrundlagen

Attribute und Attributwerte

Attribute

Der Name des Attributs ist eine gültige Kennung, sie sind in der CSS-Syntax s . Ein Attribut gibt einen Aspekt der Formatierung an. Beispiel: „color“ ist das Farbattribut des Texts und „text-indent“ gibt den Einzug des Absatzes an.

Um die Verwendung eines Attributs zu beherrschen, müssen sechs Aspekte verstanden werden. Die spezifische Beschreibung lautet wie folgt:

①Der legale Wert dieses Attributs (legaler Wert). Offensichtlich kann dem Absatzeinzugsattribut text-indent nur ein Wert zugewiesen werden, der die Länge angibt, und der Wert, der das Hintergrundmuster angibt. Das Bildattribut sollte einen Wert annehmen, der den Link zur Bildposition angibt, oder das Schlüsselwort none, um anzugeben, dass kein Hintergrundmuster vorhanden ist.

②Der Standardwert dieses Attributs (Anfangswert). Wenn dieses Attribut nicht im Stylesheet angegeben ist und das Attribut nicht von seinem übergeordneten Element geerbt werden kann, geht der Browser davon aus, dass das Attribut seinen Standardwert annimmt.

③Die Elemente, für die dieses Attribut gilt (Gilt für). Einige Attribute gelten nur für bestimmte einzelne Elemente. Beispielsweise gilt das Leerraumattribut nur für Elemente auf Blockebene. Das Leerraumattribut kann drei Werte annehmen: normal, pre und nowrap. Bei der Einstellung „Normal“ ignoriert der Browser aufeinanderfolgende Leerzeichen und zeigt nur ein Leerzeichen an. Wenn pre verwendet wird, bleiben aufeinanderfolgende Leerzeichen erhalten. Bei Nowrap werden aufeinanderfolgende Leerzeichen ignoriert und Zeilen werden nicht automatisch umbrochen.

④Ob der Wert dieses Attributs von der nächsten Ebene geerbt wird.

⑤ Wenn dieses Attribut einen Prozentwert annehmen kann, wie wird der Prozentwert interpretiert? Das heißt, was ist der Standard im Verhältnis zum Prozentwert? Beispielsweise kann das Randattribut einen Prozentwert annehmen, der die Breite des Containers im Verhältnis zu dem Element angibt, in dem der Rand gespeichert ist.

⑥Die Mediengruppen, zu denen dieses Attribut gehört.

Attributwert

①Ganzzahlen und reelle Zahlen

Dies unterscheidet sich nicht wesentlich von ganzen Zahlen und reellen Zahlen im gewöhnlichen Sinne. In CSS können nur Gleitkomma-Dezimalzahlen verwendet werden, und die wissenschaftliche Notation kann nicht wie andere Programmiersprachen zur Darstellung reeller Zahlen verwendet werden. Das heißt, 1.2E3 ist in CSS illegal. Hier ein paar korrekte Beispiele, ganze Zahlen: 128, -313, reelle Zahlen: 12,20, 1415, -12,03.

②Längenmenge

Eine Längenmenge besteht aus einer ganzen oder reellen Zahl plus der entsprechenden Längeneinheit. Zur Positionierung von Elementen werden häufig Längengrößen verwendet. Die Positionierung ist in absolute Positionierung und relative Positionierung unterteilt, sodass die Längeneinheit auch in relative Längeneinheit und absolute Längeneinheit unterteilt ist.

Die relativen Längeneinheiten sind: em – die Höhe der aktuellen Schriftart, die der Wert des Attributs „font.size“ ist; ex – die Höhe des Kleinbuchstabens x in der aktuellen Schriftart; Die tatsächliche Länge wird vom Monitor durch die Einstellungen bestimmt.

Ein weiterer erwähnenswerter Punkt ist, dass untergeordnete Elemente nicht die relativen Längenwerte der übergeordneten Elemente erben, sondern nur deren tatsächlich berechnete Werte.

③Prozentangaben

Prozentangaben sind Zahlen plus ein Prozentzeichen. Offensichtlich sind Prozentsätze immer relativ, daher werden Prozentsätze ebenso wie relative Längen nicht von untergeordneten Elementen vererbt. [10]

Selektor

Typselektor

Ein Selektortyp in CSS ist der Name des Elementtyps. Mit diesem Selektor (Typselektor genannt) kann eine Deklaration auf jede Instanz dieses Elementtyps angewendet werden. Der Selektor der folgenden einfachen Regel ist beispielsweise H1, sodass die Regel für alle H1-Elemente im Dokument gilt:

H1 {color:red}

Einfacher Attributselektor

CLASS-Attribut

CLASS-Attribut ermöglicht die Auswahl einer Gruppe von Elementen die auf dem CLASS-Attribut Elemente mit demselben Wert haben, wenden die Deklaration an. Alle Elemente innerhalb von BODY haben das CLASS-Attribut. Im Wesentlichen verwenden Sie das CLASS-Attribut, um Elemente zu klassifizieren, erstellen Regeln in Ihrem Stylesheet, um auf den Wert des CLASS-Attributs zu verweisen, und dann wendet der Browser diese Attribute automatisch auf diese Gruppe von Elementen an.

Klassenselektoren beginnen mit einer Kennung (Punkt), die verwendet wird, um anzugeben, welcher Selektortyp folgt. Für den Klassenselektor wurde der Punkt gewählt, da er in vielen Programmiersprachen mit dem Begriff „Klasse“ verbunden ist. Ins Englische übersetzt bedeutet ein Bezeichner „ein Element mit einem Klassennamen“.

ID-Attribut

Die Funktionsweise des ID-Attributs ähnelt der des CLASS-Attributs, es gibt jedoch einen wichtigen Unterschied: Der Wert des ID-Attributs muss im gesamten Dokument eindeutig sein. Dadurch können mit dem ID-Attribut Stilregeln für einzelne Elemente festgelegt werden. Ein Selektor, der ein ID-Attribut enthält, wird als ID-Selektor bezeichnet.

Es ist zu beachten, dass die Kennung des ID-Selektors das Rautesymbol (#) ist. Der Bezeichner wird verwendet, um den Browser daran zu erinnern, dass es sich bei dem nächsten Schritt um einen ID-Wert handelt.

STYLE-Attribut

Obwohl CLASS- und ID-Attributwerte in Selektoren verwendet werden können, kann das STYLE-Attribut tatsächlich den gesamten Selektormechanismus ersetzen. Anstatt nur einen Wert zu haben, auf den in einem Selektor verwiesen werden kann (was bei ID und CLASS der Fall ist), besteht der Wert des STYLE-Attributs tatsächlich aus einer oder mehreren CSS-Deklarationen.

Normalerweise legt der Designer mit CSS alle Stilregeln in einem Stylesheet ab, das sich im STYLE-Element oben im Dokument befindet (oder extern verlinkt ist). Durch die Verwendung des STYLE-Attributs können Sie jedoch das Stylesheet umgehen und die Deklaration direkt im Eröffnungstag des Dokuments platzieren.

Kombinierte Selektortypen

Typselektoren, ID-Selektoren und Klassenselektoren können zu verschiedenen Selektortypen kombiniert werden, um komplexere Selektoren zu bilden. Durch die Kombination von Selektoren können Sie die Elemente, denen Sie eine bestimmte Darstellung geben möchten, präziser bestimmen. Um beispielsweise einen Typselektor und einen Klassenselektor zu kombinieren, muss ein Element zwei Anforderungen erfüllen: Es muss den richtigen Typ und die richtige Klasse haben, damit Stilregeln darauf reagieren können.

Externe Informationen: Pseudoklassen und Pseudoelemente

In CSS1 basierten Stile normalerweise auf Tags und Attributen, die im HTML-Quellcode auftauchten. Dieser Ansatz ist für viele Designsituationen vollkommen in Ordnung, er erzielt jedoch keine allgemeinen Designeffekte, die Designer erreichen möchten.

Durch das Entwerfen von Pseudoklassen und Pseudoelementen können einige dieser Effekte erzielt werden. Diese beiden Mechanismen erweitern die Ausdrucksmöglichkeiten von CSS. In CSS1 wurden Pseudoklassen verwendet, um den Stil von Links in einem Dokument basierend auf Situationen zu ändern, z. B. ob auf den Link zugegriffen wurde, wann darauf zugegriffen wurde und wie der Benutzer mit dem Dokument interagierte. Mithilfe von Pseudoelementen können Sie den Stil des ersten Buchstabens und der ersten Zeile eines Elements ändern oder Elemente hinzufügen, die im Quelldokument nicht vorkommen.

In HTML gibt es weder Pseudoklassen noch Pseudoelemente, das heißt, sie sind im HTML-Code nicht sichtbar. Beide Mechanismen wurden sorgfältig entwickelt, um in zukünftigen CSS-Versionen weiter ausgebaut zu werden, d. h. um mehr Effekte zu erzielen.

Das obige ist der detaillierte Inhalt vonWas bedeutet CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!