[CSS]CSSを引き継ぐ
1.CSSの継承
CSSでの継承とは、サブレイヤーにCSS属性が指定されていない場合、親レイヤーに適用されるスタイルがサブレイヤーにも適用されることを意味します.
2.継承されたCSS属性
属性
属性
2.継承しないCSS属性
上のリストから分かるように、フォントに関連する属性の多くは継承されています.ただし、すべてのアトリビュートが継承されるわけではありません.たとえば、幅がwidthとmarginに設定されているアトリビュートは継承されません.
△親の幅がすべてのサブエレメントに継承されると、レイアウトが混乱することを想像します.<a>タグも親タグの継承を受け入れず、以下の例では<h1>のcolorをorangeに設定し、サブタグ<p>はフォント色を継承するが、<a>タグは継承しない.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
h1 {
color : orange
}
</style>
</head>
<body>
<h1>
<p>쓴 맛을 느끼는 미각은 유전된다.</p>
<a href="#">인생의 쓴맛도 유전일까?</a>
</h1>
</body>
</html>
3.制御継承
user agentスタイルシートでは、デフォルトの<a>はほとんど使用されていません.多くの場合、他のラベルと同様に<a>ラベルをモデリングします.この場合、<a>は、cssが提供する特殊な汎用属性値を使用して、親ラベルで宣言されたルールを継承することができる.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
h1 {
color : orange
}
</style>
</head>
<body>
<h1>
<p>쓴 맛을 느끼는 미각은 유전된다.</p>
<a href="#">인생의 쓴맛도 유전일까?</a>
</h1>
</body>
</html>user agentスタイルシートでは、デフォルトの
<a>はほとんど使用されていません.多くの場合、他のラベルと同様に<a>ラベルをモデリングします.この場合、<a>は、cssが提供する特殊な汎用属性値を使用して、親ラベルで宣言されたルールを継承することができる.inherit
選択した要素に適用される属性値を、親要素の属性値と同じに設定します.
initial
選択した要素に適用される属性値は、ブラウザのデフォルトスタイルシートでその要素の属性に設定されている値と同じに設定されます.ブラウザの既定のスタイルシートに値が設定されておらず、自然に属性が継承されている場合は、属性値が継承されます.
unset
アトリビュートを自然値にリセットします.これは、属性が自然に継承されている場合、継承されているように動作します.そうしないと、初期のように動作します.
revert
revertは、現在別名に宣言されているカスケード属性からスタイルの原点(en-US)を返します.親プロパティまたはユーザーエージェントに基づいて、デフォルトで宣言されたプロパティを返します.このプロパティは、cssショートカットプロパティallを含む任意のプロパティに適用できます.
<a>タグは、親要素の属性を強制的に継承するキーワードinheritを使用して、宣言された属性を親要素にインポートすることもできる.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
h1 {
color : orange
}
a {
color : inherit;
}
</style>
</head>
<body>
<h1>
<p>쓴 맛을 느끼는 미각은 유전된다.</p>
<a href="#">인생의 쓴맛도 유전일까?</a>
</h1>
</body>
</html>
4. all: unset; unsetキーワードは、属性が宣言されていない限り、属性を初期状態に設定します.したがって、このキーワードを使用して、user agentスタイルシートで定義されたタグをリセットできます.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
button {
all:unset;
}
</style>
</head>
<body>
<button>Button</button>
</body>
</html>
これにより、all: unset;を用いてボタンをreset状態にすることができる.
5. Revert vs unset
revertはunsetと似ていますが、プロパティは、ユーザーエージェントスタイルを返すか、ユーザーが指定したスタイルを返すかによって異なります.
親要素から継承する値がある場合、unsetには継承値を受け入れる(継承する)属性があり、親要素から継承する値がない場合、unsetには初期値を受け入れる(初期)属性があります.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
h1 {
font-weight : normal;
color : green;
}
.revert {
all : revert;
}
.unset {
all : unset;
}
</style>
</head>
<body>
<h1 class="revert">revert</h1>
<h1 class="unset">unset</h1>
</body>
</html>
結果は以上の通りです.revertは、ユーザーエージェントスタイルに適用されるデフォルトの状態を返し、unsetは自然値にリセットされます.
Reference
この問題について([CSS]CSSを引き継ぐ), 我々は、より多くの情報をここで見つけました
https://velog.io/@hikoand/CSS-CSS의-상속Inheritance
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
button {
all:unset;
}
</style>
</head>
<body>
<button>Button</button>
</body>
</html>revertはunsetと似ていますが、プロパティは、ユーザーエージェントスタイルを返すか、ユーザーが指定したスタイルを返すかによって異なります.
親要素から継承する値がある場合、unsetには継承値を受け入れる(継承する)属性があり、親要素から継承する値がない場合、unsetには初期値を受け入れる(初期)属性があります.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
h1 {
font-weight : normal;
color : green;
}
.revert {
all : revert;
}
.unset {
all : unset;
}
</style>
</head>
<body>
<h1 class="revert">revert</h1>
<h1 class="unset">unset</h1>
</body>
</html>結果は以上の通りです.revertは、ユーザーエージェントスタイルに適用されるデフォルトの状態を返し、unsetは自然値にリセットされます.
Reference
この問題について([CSS]CSSを引き継ぐ), 我々は、より多くの情報をここで見つけました https://velog.io/@hikoand/CSS-CSS의-상속Inheritanceテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol