Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Analysieren Sie CSS-Stylesheets, Vererbung, Kaskadierung und Eigenschaftswerte

高洛峰
Freigeben: 2017-03-13 14:57:00
Original
1505 Leute haben es durchsucht

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>
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.

  • 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;
}
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
属性名称 属性作用
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 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
属性名称 属性作用
list-style 列表样式
list-style-image 用于为列表制定定制的标记
list-style-position 用于确定列表标记的位置
list-style-type 用于设置列表的标记
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

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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage