So rufen Sie CSS auf

CSS是网页设计的重要组成部分，它用于定义HTML标记的显示效果，包括字体、颜色、布局和动画效果等。在编写HTML文件时，通常需要使用CSS来设置样式，让页面更加美观、易于阅读。

下面是关于如何调用CSS的详细讲解：

一、CSS样式的书写方式

CSS有三种不同的书写方式，分别是：内部样式表、外部样式表和内联样式，每种样式都有各自的优缺点，适用于不同的设计需求。下面我们分别来看一下。

1. 内部样式表

内部样式表是将CSS样式嵌入到HTML文件的头部区域内。使用内部样式表能够使得页面的样式更加紧凑，且不需要为每个标签单独设置样式。使用此方式时，在HTML的93f0f5c25f18dab9d176bd4f6de5d30e标签内部，添加c9ccee2e6ea535a969eb3f532ad9fe89标记，然后在里面写上CSS代码即可。示例如下：

93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7页面标题6e916e0f7d1e588d4f442bf645aedb2f
9a6c6593cd224a767d2b5172bc71b53a

/* 内部样式表 */
body {
  background-color: #f8f8f8;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

2. 外部样式表

外部样式表是将CSS样式写在单独的CSS文件中，使用2cdf5bf648cf2f33323966d7f58a7f3f标记将CSS文件引入到HTML文件中。使用外部样式表可以使得CSS代码的复用更加方便，而且可以让页面结构与样式分离，便于维护。此方式一般适用于多个页面使用同一个样式文件的情况。示例如下：

93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7页面标题6e916e0f7d1e588d4f442bf645aedb2f
f1bd87cd5d064ae899f27ec95bf0109f
9c3bca370b5104690d9ef395f2c5f8d1

在上述代码中，href属性指定了样式文件的路径，可以是相对路径或者绝对路径。在样式文件中，只需要编写CSS代码即可。

3. 内联样式

内联样式是在HTML标记中直接设置CSS样式，一般作为临时解决方案，适用于临时修改某个元素的样式的情况。使用此方式，需要在标记中添加style属性，然后写入CSS代码。示例如下：

c4ebac0e05997cc4f34e3d07e0471540文字16b28748ea4df4d9c2150843fecfba68

2. CSS-Selektor

Der CSS-Selektor wird verwendet, um Elemente im HTML-Dokument auszuwählen und CSS-Stile anzuwenden. Verwenden Sie Selektoren, um jedes Element auf der Seite flexibel zu steuern und so das Stildesign zu verfeinern. Häufig verwendete Selektortypen sind:

1. Klassenselektor

Der Klassenselektor verwendet ein Punktsymbol (.), gefolgt vom Klassennamen kann verwendet werden, um den gleichen Stil für eine Gruppe von Elementen festzulegen. Ein Beispiel ist wie folgt:

.button {
Hintergrundfarbe: #4CAF50;
Farbe: Weiß;
Polsterung: 12px;
Rand- Radius: 4px ;
Schriftgröße: 16px;
}

2. ID-Selektor

Der ID-Selektor verwendet a Rautezeichen (#), gefolgt vom ID-Namen. Jeder ID-Name sollte im gesamten Dokument eindeutig sein. Der ID-Selektor kann zum Festlegen von Stilen für ein bestimmtes Element und zum Hinzufügen von JavaScript-Ereignishandlern verwendet werden. Ein Beispiel ist wie folgt:

header {

background-color: #333;
color: white;
height: 50px;#🎜🎜 # padding: 5px;
}

Tag-Selektor

Der Tag-Selektor wählt alle angegebenen HTML-Tag-Elemente aus und kann dazu verwendet werden Legen Sie den Stil für ein bestimmtes Etikett fest. Ein Beispiel ist wie folgt:

p {

Schriftgröße: 16px;
Zeilenhöhe: 1,4;
}

3 . CSS aufrufen Die Regeln von

Es gibt zwei Hauptmethoden zum Aufrufen von CSS in HTML-Dateien:

Eingeführt durch Tags
1. # 🎜🎜# Verwenden Sie das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag, um CSS-Dateien in HTML-Dateien einzuführen. Ein Beispiel lautet wie folgt:

93f0f5c25f18dab9d176bd4f6de5d30e

b2386ffb911b14667cb8f0f91ea547a7Seitentitel6e916e0f7d1e588d4f442bf645aedb2f

9c3bca370b5104690d9ef395f2c5f8d1

Stile im 93f0f5c25f18dab9d176bd4f6de5d30e-Bereich definieren

2. im

   93f0f5c25f18dab9d176bd4f6de5d30e

   < ;title>Seitentitelb25a9407cfe693f10872c2a72988c045

   080b747a20f9163200dd0a7d304ba388
   

   /* 内部样式表 */
   body {
     background-color: #f8f8f8;
     font-family: Arial, sans-serif;
     font-size: 16px;
   }

   
   531ac245ce3e4fe3d50054a55f265927
   9c3bca370b5104690d9ef395f2c5f8d1#🎜 🎜#

   4. Anwendung von CSS
   

   CSS kann auf alle Aspekte von Seitenelementen angewendet werden, einschließlich, aber nicht beschränkt auf die folgenden Aspekte:
   #🎜🎜 #Textstil
   Sie können Attribute wie Schriftart, Schriftgröße, Schriftstärke und Farbe festlegen.
   Layoutstil
   Sie können die Breite, Höhe, Polsterung, Ränder und andere Attribute des Boxmodells sowie Attribute wie z als Schweben und Positionieren.
   Hintergrundstil
   Sie können das Hintergrundbild, die Hintergrundfarbe, die Hintergrundwiederholung, die Kantenausrichtung und andere Attribute festlegen.
   Rahmenstil
   Sie können den Stil, die Breite, die Farbe und andere Eigenschaften des Rahmens festlegen.
   Listenstil
   Sie können den Stil der Liste festlegen, einschließlich geordneter Liste und ungeordneter Liste.
   Tabellenstil
   Sie können den Tabellenrand, die Farbe, die Zellenausrichtung und andere Attribute festlegen.
   6. Kurz gesagt: Die Verwendung von CSS für Webdesign kann die Lesbarkeit und Ästhetik von Webseiten erheblich verbessern und das Webdesign attraktiver und interaktiver machen. Sie können die geeignete Schreibmethode und Stilauswahl entsprechend Ihren Anforderungen auswählen und die Vorteile von CSS voll ausschöpfen, um den Benutzern ein besseres Erlebnis zu bieten.

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