"Persönliche Studiennotizen 13"
erben
- Stilvererbung, der Stil, den wir für ein Element festgelegt haben, wird auch auf die untergeordneten Elemente angewendet.
- Die Vererbung erfolgt zwischen aufeinanderfolgenden Generationen von Vorfahren.
- Das ererbte Design soll unsere Entwicklung erleichtern.
- Mithilfe der Vererbung können wir einige gemeinsame Stile einheitlich auf gemeinsame Vorfahrenelemente festlegen. Dies muss nur einmal festgelegt werden, damit alle Elemente diesen Stil haben.
- Hinweis: Nicht alle Stile werden vererbt, z. B. Hintergrund- und Layoutstile usw. Diese Stile werden nicht vererbt.
Wahlgewicht
Stilkonflikte
Wenn wir dasselbe Element über verschiedene Selektoren auswählen und unterschiedliche Werte für denselben Stil festlegen, tritt ein Stilkonflikt auf.
Wenn ein Stilkonflikt auftritt, wird der angewendete Stil durch das Gewicht (die Priorität) des Selektors bestimmt.
Wahlgewicht
| Wähler | Priorität |
|---|---|
| Inline-Stil | 1,0,0,0 |
| ID-Auswahl | 0,1,0,0 |
| Klassen- und Pseudoklassenselektor | 0,0,1,0 |
| Elementauswahl | 0,0,0,1 |
| Platzhalterauswahl | 0,0,0,0 |
| Vererbter Stil | Keine Priorität |
- Wenn Sie Prioritäten vergleichen, müssen Sie die Prioritäten aller Selektoren addieren. Je höher die Priorität, desto mehr Priorität wird sie angezeigt (Gruppenauswahl wird aber nicht berechnet) und die Ansammlung von Selektoren wird ihr Maximum nicht überschreiten In der Größenordnung ist der Klassenselektor nicht höher als der ID-Selektor.
- Wenn Sie! Important nach einem Stil hinzufügen, erhält dieser Stil die höchste Priorität und übertrifft sogar den Inline-Stil. (Hinweis: Verwenden Sie es während der Entwicklung mit Vorsicht. Es ist nicht bequem, Änderungen vorzunehmen.)
Pixel und Prozentsätze
Längeneinheit:
- Pixel
Die Anzeige besteht tatsächlich aus kleinen Punkten. Die
Pixelgröße verschiedener Bildschirme ist unterschiedlich. Je kleiner das Pixel, desto deutlicher der Bildschirmanzeigeeffekt.
Daher ist der gleiche 200px-Anzeigeeffekt auf verschiedenen Geräten unterschiedlich.
- Prozentsatz
Sie können den Attributwert auch als Prozentsatz relativ zum Attribut des übergeordneten Elements festlegen.
Durch Festlegen des Prozentsatzes kann das untergeordnete Element der Änderung des übergeordneten Elements folgen.
Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 200px;
width: 200px;
background-color: blue;
}
.box2 {
height: 50%;
/* 宽和高为box1的一半 */
width: 50%;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
zeige Ergebnis:
em und rem
Diese beiden sind auch Längeneinheiten.
- im
Das em wird relativ zur Schriftgröße des Elements berechnet.
1em = 1 Schriftgröße
em ändert sich je nach Schriftgröße.
- rem
Rem wird relativ zur Schriftgröße des Stammelements berechnet.
Beispiel 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
font-size: 2px;
height: 200em;
width: 200em;
background-color: blue;
}
.box2 {
font-size: 1px;
height: 200em;
width: 200em;
background-color: firebrick;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
</html>
Zeigen Sie das Ergebnis an:
Beispiel 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
font-size: 1px;
}
.box1 {
height: 200rem;
width: 200rem;
background-color: blue;
}
.box2 {
height: 100rem;
width: 100rem;
background-color: firebrick;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
</html>
zeige Ergebnis:
RGB-Wert
Farbeinheit:
- Sie können den Farbnamen direkt verwenden, um verschiedene Farben in CSS festzulegen.
- Zum Beispiel: rot, orange, gelb, blau, grün, pink usw.
- Es ist jedoch sehr unpraktisch, Farbnamen direkt in CSS zu verwenden.
RGB-Wert:
- RGB soll verschiedene Farben R rot, G grün, B blau durch verschiedene Konzentrationen von drei Farben mischen
- Der Bereich jeder Farbe liegt zwischen 0 und 255 (0% -100%).
- Syntax: RGB (rot, grün, blau)
RGBA:
- Es ist ein a hinzuzufügen, um die Opazität auf der Basis des RGA-Werts anzuzeigen.
- Es sind vier Werte erforderlich, die ersten drei entsprechen rgb und der vierte steht für die Deckkraft.
- 1 bedeutet vollständig undurchsichtig 0 bedeutet vollständig transparent 0,5 bedeutet halbtransparent.
RGB-Wert hexadezimal
- Syntax: #rot grün blau
- Farbdichtebereich 00-ff
- Wenn die Farbe mit zwei
Ziffern wiederholt wird , kann sie mit #aabbcc abgekürzt mit #abc abgekürzt werden
Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 100px;
width: 100px;
background-color: red;
}
.box2 {
height: 100px;
width: 100px;
background-color: rgb(0, 255, 0);
}
.box3 {
height: 50px;
width: 100px;
background-color: rgba(0, 255, 0, .5);
}
.box4 {
height: 100px;
width: 100px;
background-color: #0000ff;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
Die Ergebnisse zeigen, dass:
HSL-Wert HSLA-Wert
- Farbton (0-360)
- Sättigung, die Dichte der Farbe 0% -100%
- L Helligkeit, Farbhelligkeit 0% -100%
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 100px;
width: 100px;
background-color: hsl(88, 40%, 50%);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
Die Erklärung lautet wie folgt:
