Heim > Artikel > Web-Frontend > Welche drei Möglichkeiten gibt es, CSS3 zu verwenden?
Welche drei Möglichkeiten gibt es, CSS3 zu verwenden?
- WBOYOriginal
- 2022-01-24 11:15:382818Durchsuche
Drei Möglichkeiten, CSS3 zu verwenden: 1. Inline-Stil, die Syntax ist „
“; 2. Interner Stil, die Syntax ist „"; 3. Externer Stil, die Syntax lautet "".
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Welche drei Möglichkeiten gibt es, CSS3 zu verwenden? 1. Inline-Stil
Der Inline-Stil wird über das Stilattribut festgelegt und der Attributwert kann ein beliebiger CSS-Stil sein.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联样式</title>
</head>
<body>
<p style="background: red"> I love China!</p>
</body>
</html>Anzeigeeffekt:
2. Interner Stil
Der interne Stil wird im Kopfteil des Dokuments definiert und über das Style-Tag festgelegt. Sie müssen den Elementselektor (p) verwenden, um den Stil mit dem zu formatierenden Tag (p-Tag) zu verknüpfen.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联样式</title>
<style type="text/css">
p{
background: green;
}
</style>
</head>
<body>
<p> I love China!</p>
</body>
</html>Wirkung:
3. Externer Stil
Definieren Sie den CSS-Stil in *.css außerhalb des Dokuments und führen Sie ihn dann über das Link-Element im Kopfteil des Dokuments ein.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p> I love China!</p>
</body>
</html>Inhalt der Style.css-Datei:
p{
background: yellow;
}Anzeigeeffekt:
a. Importieren Sie die Stile anderer Stylesheets in ein externes Stylesheet
Importieren Sie die obige style.css
@import "style.css";
body{
background: red;
}in die Combine.css Datei Combine.css-Datei in HTML-Datei einführen
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<link rel="stylesheet" href="combine.css">
</head>
<body>
<p> I <span>love</span> China!</p>
</body>
</html> Wirkung:
(Lernvideo-Sharing:
Das obige ist der detaillierte Inhalt vonWelche drei Möglichkeiten gibt es, CSS3 zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!