728x90
SMALL
#CSS
inheritance
CSS attributes are inherited, not inherited. Inheriting properties affects child elements. Non-inherited attributes do not affect child elements.
Inheriting attributes
For example, color is an inherited property. The color specified in the parent element is also applied to the child element. in short
<style>
p { color: blue; }
</style>
<p>Lorem <em>Ipsum</em></p>At this time, not only Lorem but also Ipsum will be blue.
Attributes that are not inherited
For example, padding is an attribute that does not inherit. Defining padding on a parent element does not apply to child elements. in short
<style>
p { padding: 20px; }
</style>
<p>Lorem <em>Ipsum</em></p>In the case of, the inner margin is created only in the p element, and the inner margin is not created in the em element.
example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.abc {
color: red;
border: 1px solid #bcbcbc;
padding: 10px 20px 20px 20px;
}
</style>
</head>
<body>
<div class="abc">
<h1>Heading</h1>
<p>Paragraph <em>Emphasize</em></p>
<button>Button</button>
</div>
</body>
</html>- Since color is an inherited property, the color of the child element should also be red. (Some elements, such as buttons, are not inherited.)
- border and padding are non-inheriting attributes, so they only apply to div elements.
728x90
LIST
'CSS' 카테고리의 다른 글
| [CSS] CSS / Selector / Universal Selector (0) | 2022.07.29 |
|---|---|
| [CSS] Use of CSS / variables (0) | 2022.07.29 |
| [CSS] CSS / Basics /! Important (0) | 2022.07.28 |
| [CSS] CSS / Basics / Grammar (0) | 2022.07.27 |
| [CSS] How to apply CSS to HTML (0) | 2022.07.27 |