CSS ist ein wichtiger Bestandteil des Webdesigns. Es kann zur Steuerung des Stils und Layouts von Webseiten verwendet werden. Beim Webdesign kann die Verwendung von CSS dafür sorgen, dass Webseiten schöner, ordentlicher und leichter lesbar aussehen. In diesem Artikel wird die grundlegende Verwendung von CSS vorgestellt.

1. Was ist CSS?

Der vollständige Name von CSS ist Cascading Style Sheets (Cascading Style Sheets). Es handelt sich um eine Auszeichnungssprache, die zum Ändern des Anzeigestils von HTML- oder XML-Dokumenten verwendet wird. Die Grundfunktion von CSS-Stylesheets besteht darin, verschiedene Attribute wie Schriftarten, Farben, Hintergründe usw. auf verschiedene Webseitenelemente anzuwenden, um unterschiedliche visuelle Effekte zu erzielen.

2. Grundlegende Syntax von CSS

Die grundlegende Syntax von CSS besteht aus Selektoren, Attributen und Werten. Mit dem Selektor wird das HTML-Element ausgewählt, auf das der Stil angewendet werden soll. Das Attribut gibt das festzulegende Attribut an, und der Wert ist der spezifische Wert des Attributs.

Wenn wir beispielsweise die Farbe eines Absatzes in einem HTML-Dokument auf Rot setzen möchten, können wir den folgenden Code verwenden:

p { color: red; }

p im Code ist der Selektor, was bedeutet dass alle Absatzelemente ausgewählt werden sollen, Farbe ist ein Attribut, das angibt, dass die Farbe festgelegt werden soll, und Rot ist ein Wert, der angibt, dass die Farbe auf Rot festgelegt werden soll.

3. CSS-Selektor

Der CSS-Selektor wird verwendet, um die HTML-Elemente auszuwählen, die gestaltet werden müssen. Es kann basierend auf dem Tag-Namen, der Klasse, der ID und anderen Attributen des Elements ausgewählt werden.

1. Tag-Selektor

Tag-Selektor bezieht sich auf die Auswahl aller Absatzelemente. Zum Beispiel können Sie den folgenden Code verwenden:

p { color: red }

2 Selektor

Klassenselektor bezieht sich auf die Auswahl von Elementen basierend auf dem Klassenattribut von HTML-Elementen. Um beispielsweise alle Elemente mit dem Klassennamen „intro“ auszuwählen, können Sie den folgenden Code verwenden:

.intro { color: red }.

3. ID-Selektor

ID-Selektor bezieht sich auf die Auswahl von Elementen basierend auf dem ID-Attribut von HTML-Elementen. Das ID-Attribut von HTML-Elementen ist eindeutig und es können nicht zwei identische ID-Attribute auf einer Seite vorhanden sein. Um beispielsweise das Element mit der ID „intro“ auszuwählen, können Sie den folgenden Code verwenden:

intro { color: red }

4. CSS-Attribute und -Werte werden verwendet Um den Stil des Elements zu steuern, können viele Eigenschaften und Werte verwendet werden, um verschiedene Stileffekte festzulegen.

1. Schriftattribute

Schriftattribute können zum Festlegen der Schriftart, -größe, -farbe und anderer Textattribute verwendet werden, zum Beispiel:

Schriftfamilie: Arial, Verdana, Sans-Serif;

Schriftgröße/Farbe: #333; /
Schriftfarbe/
Das Hintergrundattribut kann zum Festlegen der Hintergrundfarbe, des Bildes, der Position usw. verwendet werden . des Elements, zum Beispiel: Hintergrundfarbe: #f8f8f8; /

/

Hintergrundbild

Hintergrundwiederholung: nein- wiederholen; / Hintergrund wiederholt sich nicht/
Hintergrundposition: Mitte Mitte; / Hintergrundposition/
3. Die Randattribute können verwendet werden, um den Rahmenstil, die Dicke, die Farbe usw. festzulegen. des Elements, zum Beispiel:
Rahmenstil: einfarbig; /Rahmenbreite: 1px; /Rahmenbreite

Rahmenfarbe: #ccc; /

/

4. Größenattribut: Das Größenattribut kann verwendet werden, um die Breite, Höhe und maximale Höhe des Elements usw. festzulegen, zum Beispiel: Breite: 500 Pixel; /
Elementbreite/Höhe : 300px; /
Elementhöhe/maximale Breite: 100 %; /

/

5. CSS-Priorität

Wenn ein Wenn ein Element von mehreren Selektoren ausgewählt wird, bestimmt die CSS-Priorität, welcher Stil darauf angewendet wird. Die Prioritäten von CSS von hoch nach niedrig sind: !important, Inline-Stil, ID-Selektor, Klassen-Selektor und Tag-Selektor. Wenn die Prioritäten gleich sind, überschreiben spätere Stile die vorherigen Stile. Zum Beispiel, wenn es ein Stylesheet wie dieses gibt:
p { color: blue; }.intro { color: red;}
Dann, wenn es ein Element wie Dies:
< p class="intro" id="intro" style="color:orange">Dies ist ein Absatz

6. CSS-Vererbung

Vererbung bezieht sich auf die Funktion, dass ein Element die Stilattribute seines übergeordneten Elements erben kann. Mit dieser Funktion kann das Stylesheet erheblich reduziert werden, wodurch die Dateigröße verringert und die Lesbarkeit verbessert wird. Zum Beispiel:

body { Schriftgröße: 14px; }

Auf diese Weise beträgt die Schriftgröße 14px und die Farbe ist #333 Das Element erbt die Schriftgröße des Körperelements.

7. So führen Sie CSS ein

CSS kann auf drei Arten eingeführt werden: inline, intern und extern. Der Inline-Stil gilt für ein einzelnes Element, während externe und interne Stile verwendet werden, um das Stylesheet der gesamten HTML-Seite zu definieren.

1. Inline-Stil

Der Inline-Stil kann das Stilattribut direkt verwenden, um den Stil im HTML-Element zu definieren, zum Beispiel:

This ist ein Absatz

2. Interner Stil

Der interne Stil bezieht sich auf die Definition des CSS-Stylesheets im Head-Tag des HTML-Dokuments, zum Beispiel:

<style>
    p { color: red; }
</style>

3.外部式

外部式是指将CSS样式表定义在一个单独的.css文件中，然后在HTML文档中引入，例如：

<link rel="stylesheet" type="text/css" href="style.css">

以上三种引入方式中，外部式是推荐使用的方式。这种方式可以使CSS样式表单独存放，方便维护和修改，也可以提高页面加载速度。

总结：

CSS是网页设计中的重要组成部分，它可以用来控制网页中的样式和布局。CSS的基本语法由选择器、属性和值组成，选择器用来选择要应用样式的HTML元素，属性指定要设置的属性，值是属性的具体数值。当同一个元素被多个选择器选中时，CSS的优先级决定它应用哪一个样式。CSS有三种引入方式：内联式、内部式和外部式，而外部式是推荐使用的方式。

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