In diesem Artikel werden CSS-Stylesheets, Vererbung, Kaskadierung und der Wert von Attributen analysiert.
Stylesheets erstellen und hinzufügen Hinweise
1. CSS verfügt über Eigenschaften, die das Grundformat steuern (z. B. Schriftgröße und Farbe usw.), und es gibt Eigenschaften, die Steuerlayout (wie Position und Float usw.) sowie Drucksteuerelemente, die bestimmen, wo der Besucher beim Drucken die Seiten wechselt. Darüber hinaus gibt es viele weitere Attribute.
2. Das Stylesheet enthält Regeln, die das Erscheinungsbild der Webseite definieren. Jede Regel besteht aus zwei Hauptteilen: Selektor (Auswahl) und Deklarationsblock (Deklaration). Selektoren bestimmen, welche Elemente betroffen sind, und Deklarationsblöcke bestehen aus einem oder mehreren Attribut-Wert-Paaren, die angeben, was getan werden soll.
3. Kommentare sind von „/*和*/“ umgeben.
Vererbung verstehen
1. Vererbung kann so verstanden werden, als würde man das CSS-Attribut auf ein Element anwenden , wirken sich diese Eigenschaften nicht nur auf dieses Element aus, sondern auch auf die darunter liegenden Zweigelemente.
<body>
<p>
<h1>The Ephemeral Blue Flax</h1>
<img src="img/blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
<p>I am continually <em>amazed</em> at the beautiful, delicate Blue Flax that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p>
<p><small>© Blue Flax Society.</small></p>
</p>
</body>
Nach dem Login kopieren
Wie in Programm 1 sind alle Inhaltselemente Nachkommen des body-Elements, verwenden Sie ein p umschließt den gesamten Inhalt. Darüber hinaus sind die Elemente em und small beide in einem Element p enthalten, sodass sie Nachkommen von p (und Nachkommen von p und body) sind.
body {
font-family: Verdana, Geneva, sans-serif;
}
p {
border: 1px solid black;
overflow: hidden;
padding: 0 1em .25em;
}
p {
color: #36c; /* a blue color */
font-weight: bold;
}
img {
float: left;
margin-right: 1em;
}Nach dem Login kopieren
Programm 2 ist die CSS-Stileinstellung. Dieses Stylesheet legt den Stil für den HTML-Code in Programm 1 fest. Geerbt Eigenschaften spiegeln sich bei der Einstellung wider. Sie sehen, dass es in Programm 2 nur Stilregeln für die Elemente body, p und p gibt, aber keine Regeln für die Elemente h1, em und small. Wenn die Seite dann angezeigt wird, werden die Vererbungsmerkmale in den Elementen h1, em und small widergespiegelt.
2. Die folgenden CSS-Eigenschaften werden vererbt und hier systematisch aufgelistet:
Text
| Attributname |
Attributfunktion |
| Farbe |
Farbe , außer einem Element |
|
Richtung
|
Richtung |
| Schriftart |
Schriftart |
| Schriftfamilie |
Schriftfamilie |
| Schriftgröße |
Schriftgröße |
| font-style |
wird verwendet, um Kursivschrift zu setzen |
font-variant
|
Wird verwendet, um kleine Großbuchstaben festzulegen Buchstaben |
| font-weight |
wird verwendet, um Fettschrift festzulegen |
| letter-spacing |
Buchstabenabstand |
| Linienhöhe
|
Linienhöhe |
| text-align |
wird verwendet Ausrichtung festlegen |
| text-indent |
Wird verwendet, um den Einzug der ersten Zeile festzulegen |
| text-transform |
Wird zum Ändern der Groß- und Kleinschreibung verwendet |
|
Sichtbarkeit
|
Sichtbarkeit |
| white-space |
wird verwendet, um anzugeben, wie mit Leerzeichen umgegangen wird |
| Wortabstand
|
Wortabstand |
Liste
| Attributname |
Attributfunktion |
| Listenstil |
Listenstil |
| list-style-image |
Wird zur Entwicklung benutzerdefinierter Tags für Listen verwendet |
| list-style-position |
Wird verwendet, um die Position der Listenmarkierung zu bestimmen |
| list-style-type td > |
Tag, der zum Festlegen der Liste verwendet wird |
Tabelle
| Attributname |
Attributfunktion |
|
border-collapse
|
Wird verwendet, um zu steuern, ob die Ränder benachbarter Zellen in der Tabelle zu einem einzigen Rand zusammengeführt werden |
| border-spacing
|
Wird verwendet, um die Lückengröße zwischen Tabellenrändern anzugeben td> |
caption-side
| Wird verwendet, um die Position des Tabellentitels festzulegen
| leere Zellen |
wird verwendet, um festzulegen, ob leere Zellen in der Tabelle angezeigt werden sollen |
| 属性名称 |
属性作用 |
| orphans |
用于设置当元素内部发生分页时在页面底部需要保留的最少行数 |
| page-break-inside |
用于设置元素内部的分页方式 |
| widows |
用于设置当元素内部发生分页时在页面顶部需要保留的最少行数 |
Seiteneinrichtung (für Drucksachen)
| 属性名称 |
属性作用 |
| cursor |
鼠标指针 |
| quotes |
用于指定引号样式 |
Andere
Kaskadierung: Wenn eine Regel einen Konflikt auslöst
Wenn der von Ihnen geschriebene Stil mit dem Standardstil des Browsers in Konflikt steht, hat der von Ihnen geschriebene Stil Vorrang. Auf dieser Grundlage nutzt CSS das Prinzip der Kaskadierung, um Spezifität, Reihenfolge und Wichtigkeit zu berücksichtigen und zu bestimmen, welche der widersprüchlichen Regeln wirksam werden soll.
Spezifität
| 选择器 |
对应的HTML |
p { ... } |
<p>...</p> |
.some<a href="http://www.php.cn/wiki/164.html" target="_blank">Class</a> { ... } |
<p class="someClass">...</p> |
#someID { ... } |
<p id="someID">...</p>
<p id="someID" class="someClass">...</p>
<p id="someID" class="someOtherClass">...</p>
<p id="someID" class="someClass someOtherClass">...</p>
|
Spezifitätsregeln geben an, wie spezifisch ein Selektor ist. Je spezifischer der Selektor ist, desto stärker ist die Regel. Im Konfliktfall kommen zunächst die spezifischeren Regeln zur Anwendung. Listen Sie einige Selektoren auf: (von niedriger bis hoher Spezifität geordnet)
| Selektor |
entsprechendes HTML |
p { ... |
<p>..</p> ; |
.some<a href="http://www.php.cn/wiki/164.html " target="_blank" >Klasse<🎜> { ... | <p class="someClass">...</p> code> |
#someID { ... |
<p id="someID"> p><p id="someID" class="someClass">...</p><p id= "someID" class="someOtherClass">...</p><p id="someID" class="someClass someOtherClass"> p>
|
Reihenfolge
Wenn die Spezifität nicht ausreicht, um zu bestimmen, welche der widersprüchlichen Regeln Vorrang haben sollen. Zu diesem Zeitpunkt tritt die Reihenfolgeregel in Kraft, das heißt, das später erscheinende hat eine höhere Priorität .
Wichtigkeit
Wenn die oben genannten Regeln nicht ausreichen, können Sie eine Sonderregel deklarieren, um die Regeln im gesamten System abzudecken . Sie können auch ！important am Ende einer Anweisung hinzufügen, z. B. p{ color: o<a href="http://www.php.cn/wiki/1078.html" target="_blank"> range<code>p{ color: o<a href="http://www.php.cn/wiki/1078.html" target="_blank">range</a> !important; } !important; (Diese Methode wird nicht empfohlen, es sei denn, es liegen besondere Umstände vor).
Der Wert des Attributs
erben
Für jedes Attribut, wenn Sie möchten anzeigen Um anzuzeigen, dass der Wert des Attributs mit dem vom übergeordneten Element des entsprechenden Elements festgelegten Wert übereinstimmt, können Sie den Wert inherit verwenden. Angenommen, Sie haben ein article-Element, das mehrere Absätze enthält. Das article-Element legt einen Rahmen fest, und normalerweise werden Rahmen nicht vererbt, daher ermöglicht die p { border: inherit; }-Regel, dass diese Absätze denselben Rahmenstil erhalten.
Länge und Prozentsatz
1 Der Wert vieler CSS-Eigenschaften ist die Länge. Einige Längen beziehen sich auf andere Werte. Die Länge eines em entspricht ungefähr der Schriftgröße des entsprechenden Elements. Das Festlegen von <a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left<code><a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left</a>: 2em: 2em für ein Element bedeutet beispielsweise dass das Element den linken Rand auf die doppelte Schriftgröße des Elements setzt. Wenn em verwendet wird, um das font-size-Attribut des Elements selbst festzulegen, wird sein Wert von der Schriftgröße des übergeordneten Elements des entsprechenden Elements geerbt. Diese Relativität von em ist für die heutigen Bemühungen zur Website-Erstellung von entscheidender Bedeutung, insbesondere für solche, die sich an unterschiedliche Bildschirmgrößen anpassen müssen (eine Praxis, die als responsives Webdesign bekannt ist).
2. Prozente funktionieren ähnlich wie em, Prozentsätze beziehen sich normalerweise auf das übergeordnete Element.
Reine Zahlen
Es gibt nur wenige CSS-Eigenschaften, die Zahlen ohne Einheiten akzeptieren, die häufigsten sind line-height , <a href="http://www.php.cn/wiki/903.html" target="_blank">z-index<code><a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a> und opacity, z. B.:line-height: 1.5; Der Wert in diesem Beispiel wird mit der Schriftgröße auf die Zeilenhöhe multipliziert.
URL
Es gibt CSS-Eigenschaften, die es Entwicklern ermöglichen, die URL einer anderen Datei (insbesondere eines Bildes) anzugeben, Hintergrundbild ist ein solches Attribut. Verwenden Sie in diesem Fall url(file.ext), wobei file.ext der Pfad und Dateiname der Zielressource ist. Beachten Sie, dass die Spezifikation besagt, dass relative URLs relativ zur Position des Stylesheets und nicht relativ zur Position des HTML-Dokuments sein sollten, z. B.:background: url(bg-pattern.png). Hinweis: URLs in CSS-Eigenschaften müssen nicht in Anführungszeichen gesetzt werden.
CSS-Farbe
Sechzehn grundlegende Farbschlüsselwörter
| 颜色 |
关键字 |
| aqua（水绿） |
#00FFFF |
| black（黑） |
#000000 |
| blue（蓝） |
#0000FF |
| fuchsia（紫红） |
#FF00FF |
| gray（灰） |
#808080 |
| green（绿） |
#008000 |
| lime（浅绿） |
#00FF00 |
| maroon（褐） |
#800000 |
| navy（深蓝） |
#000080 |
| olive（橄榄） |
#808000 |
| purple（紫） |
#8000080 |
| red（红） |
#FF0000 |
| silver（银） |
#C0C0C0 |
| teal（深青） |
#008080 |
| white（白） |
#FFFFFF |
| yellow（黄） |
#FFFF00 |
RGB
Sie können Ihre eigene Farbe erstellen, indem Sie den Anteil von Rot, Grün und Blau angeben. Sie können Prozentsätze zwischen 0 und 0 verwenden 255 Zahlen zur Angabe der Werte dieser drei Farben, z. B.: color: rgb(89, 0, 127); oder color: rgb(35%, 0%, 50%);, denn 89 ist 35 % von 255.
Hex
Dies ist die gebräuchlichste Art, Farben in CSS zu definieren, z. B.: color: #59007F. Wenn #FF3344, kann es mit #F34 abgekürzt werden.
Weitere CSS3-Farbspezifikationsmethoden
RGBA, HSLA und HSL.
CSS3 führte eine Möglichkeit ein, Farben über HSL anzugeben und die Möglichkeit, Alpha-Transparenz über RGBA und HSLA festzulegen.
RGBA fügt RGB eine Alpha-Transparenz (Alpha-Transparenz) A hinzu. Transparenz kann durch Hinzufügen einer Dezimalzahl von 0 bis 1 nach RGB angegeben werden. zB:<a href="http://www.php.cn/wiki/894.html" target="_blank">background-color</a>: rgba(89,0,127,0.75).
HSL und HSLA sind neu hinzugefügt in CSS3. HSLA ist neben RGBA eine weitere Möglichkeit, die Transparenz für Farben festzulegen. Die Methode zur Angabe der Transparenz mithilfe von HSLA stimmt mit RGBA überein, z. B.:color: hsla(282,100%,25%,0.75).
HSL steht für Farbton, Sättigung und Helligkeit. Der Wertebereich des Farbtons liegt zwischen 0 und 360, und die Werte für Sättigung und Helligkeit sind Prozentsätze im Bereich von 0 bis 100 %. 0 und 360 treffen sich oben, das heißt, 0 und 360 repräsentieren die gleiche Farbe: Rot, z. B.: color: hsl(282,100%,25%).
Denken Sie an HSL, wählen Sie einen Farbton zwischen 0 und 360, stellen Sie die Sättigung auf 100 % und die Helligkeit auf 50 % ein, Sie erhalten die reinste Form dieser Farbe. Reduzieren Sie die Sättigung und die Farbe wechselt in Richtung Grau. Erhöhen Sie die Helligkeit und die Farbe ändert sich in eine farberhaltende Farbe; verringern Sie die Helligkeit und die Farbe ändert sich in eine schwarze Farbe.
Zum Beispiel einige der wichtigeren Farben unten:
| 颜色 |
hsl数据 |
| 红色 |
hsl(0,100%,50%); |
| 黄色 |
hsl(60,100%,50%); |
| 绿色 |
hsl(120,100%,50%); |
| 青色 |
hsl(180,100%,50%); |
| 蓝色 |
hsl(240,100%,50%); |
| 紫色 |
hsl(300,100%,50%); |
Das obige ist der detaillierte Inhalt vonAnalysieren Sie CSS-Stylesheets, Vererbung, Kaskadierung und Eigenschaftswerte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
