Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Verstehen Sie die Schlüsselwörter initial, inherit, unset, revert und alle Attribute in CSS

青灯夜游
Freigeben: 2020-07-04 17:28:30
nach vorne
5539 Leute haben es durchsucht

Verstehen Sie die Schlüsselwörter initial, inherit, unset, revert und alle Attribute in CSS

In CSS gibt es 4 Schlüsselwörter, die theoretisch auf jede CSS-Eigenschaft angewendet werden können: initial (initial), inherit (inherited), unset (nicht gesetzt), revert (reduction). ). Der Wert von all kann nur die oben genannten vier Schlüsselwörter sein. In diesem Artikel werden Initial, Inherit, Unset, Revert und alles vorgestellt.

initial

stellt den anfänglichen Standardwert des Elementattributs dar (der Standardwert wird durch die offizielle CSS-Spezifikation definiert)

Kompatibilität: IE tut dies nicht unterstützt

[Hinweis] Die anfänglichen Standardwerte jedes Attributs werden hierher verschoben

//display在官方CSS规范中定义的默认值是inline
<style>
.test{display: initial;}
</style>
<div class="box">
    <div class="test">测试一</div><span>文字</span>
    <br>
    <div >测试二</div><span>文字</span>
</div>
Nach dem Login kopieren

erben

bedeutet Der berechnete Wert des entsprechenden Attributs des direkten übergeordneten Elements des Elements

Kompatibilität: IE7 – nicht unterstützt

<style>
.box{
    border: 1px solid black;
    padding: 10px;
    width: 100px;
}
.test{
    border: inherit;
    height: 30px;
}
</style>
<div class="box">
    <div class="test">测试一</div>
</div>
<div class="box">
    <div class="in">
        <div class="test">测试二</div>        
    </div>
</div>
Nach dem Login kopieren

unset

unset ist relativ komplizierter als initial und inherit. Gibt an, dass der Wert standardmäßig vererbbar ist, andernfalls ist der Wert initial. Tatsächlich ist das Festlegen von „unset“ gleichbedeutend mit dem Nichtfestlegen von

Kompatibilität: IE unterstützt es nicht, Safari9 – unterstützt es nicht, ios9.2 – unterstützt es nicht, Android4.4.4 – unterstützt es nicht

【Der häufig verwendete Standard ist OK. Vererbte Stile]

color
cursor
direction
font
letter-spacing
line-height
list-style
text-align
text-indent
text-shadow
text-transform
white-space
word-break
word-spacing
word-wrap
writing-mode
Nach dem Login kopieren
rrree

revert

stellt den Standardwert von dar das im Stylesheet definierte Elementattribut. Wenn dies explizit im benutzerdefinierten Stylesheet festgelegt ist, befolgen Sie andernfalls die Stileinstellung im browserdefinierten Stylesheet. Andernfalls entspricht dies der Nichteinstellung

Kompatibilität: nur Safari9.1+ und ios9 .3+ unterstützt

all

bedeutet, dass die Attributwerte aller CSS-Attribute außer Unicode-Bidi und Direction zurückgesetzt werden können initial und erben. , nicht gesetzt und zurückgesetzt

Kompatibilität: IE nicht unterstützt, Safari9-nicht unterstützt, ios9.2-nicht unterstützt, Android4.4-nicht unterstützt

//内容为测试一的元素和内容为测试二的元素的样式是一样的
<style>
.box{
    border: 1px solid black;
    padding: 10px;
    width: 100px;
    color: red;
}
.test1{
    border: unset;
    color: unset;
}
</style>
<div class="box">
    <div class="test">测试一</div>
    <div>测试二</div>
</div>
Nach dem Login kopieren

【1】Wenn alle : initial, alle Attribute von .in nehmen den Standardwert an

<style>
.test{
    border: 1px solid black;
    padding: 20px;
    color: red;
}
.in{
/*  all: initial;
    all: inherit;
    all: unset;
    all: revert; */
}
</style>
<div class="test">
    <div class="in">测试文字</div>            
</div>
Nach dem Login kopieren

【2】Wenn all:inherit, nehmen alle Attribute von .in den geerbten Wert des übergeordneten Elements an

border:none;padding:0;color:black;
Nach dem Login kopieren

【3】 Wenn alle: Wenn sie nicht festgelegt sind, entsprechen alle Eigenschaften von .in dem Nichtfestlegen eines Werts. Die Standardvererbung wird vererbt und die nicht vererbbaren behalten den Standardwert

border:1px solid black;padding:20px;color:red;
Nach dem Login kopieren

Dieser Artikel Nachdruck von: https://www.cnblogs.com/xiaohuochai/p/5464456.html

Empfohlenes Lernen: CSS Quick Start

Das obige ist der detaillierte Inhalt vonVerstehen Sie die Schlüsselwörter initial, inherit, unset, revert und alle Attribute in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!