Heim > Artikel > Web-Frontend > Analysieren Sie CSS-Stylesheets, Vererbung, Kaskadierung und Eigenschaftswerte

Analysieren Sie CSS-Stylesheets, Vererbung, Kaskadierung und Eigenschaftswerte

高洛峰Original: 2017-03-13 14:57:001492Durchsuche

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.

Programm 1

<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>&copy; Blue Flax Society.</small></p>
</p>
</body>

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.

Programm 2

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;
}

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

属性名称	属性作用
color	颜色，a元素除外
direction	方向
font	字体
font-family	字体系列
font-size	字体大小
font-style	用于设置斜体
font-variant	用于设置小型大写字母
font-weight	用于设置粗体
letter-spacing	字母间距
line-height	行高
text-align	用于设置对齐方式
text-indent	用于设置首行缩进
text-transform	用于修改大小写
visibility	可见性
white-space	用于指定如何处理空格
word-spacing	字间距

Richtung

Schriftart

Schriftfamilie

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

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

属性名称	属性作用
list-style	列表样式
list-style-image	用于为列表制定定制的标记
list-style-position	用于确定列表标记的位置
list-style-type	用于设置列表的标记

Sichtbarkeit

white-space

wird verwendet, um anzugeben, wie mit Leerzeichen umgegangen wird

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

Wird verwendet, um die Position des Tabellentitels festzulegen

Attributname

Attributfunktion

border-collapse

属性名称	属性作用
border-collapse	用于控制表格相邻单元格的边框是否合并为单一边框
border-spacing	用于指定表格边框之间的间隙大小
caption-side	用于设置表格标题的位置
empty-cells	用于设置是否显示表格中的空单元格

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

leere Zellen

wird verwendet, um festzulegen, ob leere Zellen in der Tabelle angezeigt werden sollen

属性名称	属性作用
orphans	用于设置当元素内部发生分页时在页面底部需要保留的最少行数
page-break-inside	用于设置元素内部的分页方式
widows	用于设置当元素内部发生分页时在页面顶部需要保留的最少行数

Seiteneinrichtung (für Drucksachen)

widows

Eigenschaftsname	Eigenschaftsrolle
orphans	wird verwendet, um festzulegen, was innerhalb des Elements Die Mindestanzahl an Zeilen, die beim Paginieren am Ende der Seite beibehalten werden müssen
page-break -inside	Wird zum Festlegen der Paginierung verwendet Methode innerhalb des Elements
Wird verwendet, um die Mindestanzahl von Zeilen festzulegen, die oben auf der Seite beibehalten werden müssen, wenn das Paging innerhalb des Elements erfolgt element

属性名称	属性作用
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&gt ;`
`.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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie CSS3, um einen kreisförmigen Fortschrittsbalken zu implementierenNächster Artikel：Verwenden Sie CSS3, um einen kreisförmigen Fortschrittsbalken zu implementieren

In Verbindung stehende Artikel

Mehr sehen