1.1 Stilstildefinition: Inline-Stilattribut, einzelne Seite <style> -Tag, mehrseitiger <style>-Tag
Artikelverzeichnis
Erstellen Sie zunächst eine
staic
Ordner, der zum Speichern von Ordnerressourcen wie Bildern, Audio und Video sowie CSS verwendet wird:
1. Inline-Stilattribut: Wirkt sich nur auf das aktuelle Tag aus
Das Definieren von Stilen wie Länge und Breite im style-Attribut eines bestimmten Tags wirkt sich nur auf das aktuelle Tag aus, wie zum Beispiel:
<img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;">
Die Pixeleinheit px kann stilistisch nicht weggelassen werden
Zwei Möglichkeiten, Attribute zu definieren:
Kein Style:
Stil verwenden:
2. Einzelne Seite <style> Tag: Betrifft einen/mehrere Elementtypen auf derselben Seite
Derzeit ist <style> im Allgemeinen im <head>-Tag definiert:
styleDer Stil im Tag kann sich auf denselben oder mehrere Elementtypen auf der Seite auswirken:
Neben der direkten einheitlichen Festlegung von Stilen für bestimmte Tag-Typen können Sie Stile auch durch die Kombination von Klassenattributen festlegen:
Klassenklassennamen können in mehreren Kombinationen kombiniert werden:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--style 标签一般写在 head 标签里-->
<style>
img {
width: 200px;
height: 200px;
border-radius: 50%;/* 边角弧度 */
}
</style>
<style type="text/css">/* type="text/css"可以不写 */
p {
width: 50px;
height: 50px;
background-color: lightblue;
}
.blue-p {
/* style 引用 class 分组的组名前面要加. */
background-color: lightgreen;
}
.big {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- class 分组要写在第一组<>里面 -->
<img class="big" src="/static/images/mountain.jpg" alt="">
<p>段落一</p>
<p class="blue-p">段落二</p>
<p class="blue-p big">段落三</p>
</body>
</html>
3.Mehrere Seiten<style> Tag: Betrifft mehrere Seiten
Erstellen Sie eine neue style.css-Datei im CSS-Ordner, schneiden Sie den Inhalt im <style>-Tag für eine einzelne Seite aus und kehren Sie dann zu < zurück Das Hinzufügen des -Tags innerhalb des a i=3>-Tags kann sich auf mehrere Seiten auswirken. <head><link>
dient dazu, die Stile in <style> in einer neuen CSS-Datei zu speichern und dann mit <link> darauf zu verweisen.
<style> Die Stile in können in mehreren CSS-Dateien gespeichert werden. <link> kann mehrere Tags haben:
<link rel="stylesheet" href="/static/css/style.css">
<link rel="stylesheet" href="/static/css/style1.css">
<link>Das -Tag erleichtert die Batch-Änderung von Seitenstilen für mehrere Seiten erheblich.<style> Nachdem Sie den entsprechenden Stil definiert haben, müssen Sie ihn nur über das Link-Tag auf der Seite referenzieren, auf der der Stil erforderlich ist geändert werden:
4. Mehrzeilige Kommentare: /* */
/* 注释内容 */
Mehrzeilige CSS-Kommentare sind mit C++ identisch
