HTML/CSS/Style Basics/Inheritance
Содержание
- 1 Background is inherited
- 2 Inheritance in Action
- 3 Inherit the background, padding, and border of the div tag
- 4 Once you assign a background to an element, it no longer visually inherits the background of its parent
- 5 Properties are inherited by inline elements
- 6 Properties are not inherited:
- 7 Properties inherited by list elements: list-style, list-style-type, list-style-position, and list-style-image
- 8 property inheritance
- 9 Property inherited by table elements: border-collapse
- 10 The following properties are inherited by all elements: visibility and cursor.
- 11 Working with Inheritance
Background is inherited
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http: //www.w3.org/1999/xhtml"xml: lang="en"lang="en">
<head>
<title></title>
<style type="text/css">
body,p {
font-family: verdana, arial, helvetica, sans-serif;
color: #000;
}
body {
margin: 0px;
padding: 0px;
background-color: #fff;
}
p {
font-size: 0.7em;
line-height: 1.4em;
}
#MainText {
padding: 10px;
margin: 5px;
background-color: #ccc;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="MainText">
<p>this is a test. this is a test. this is a test. this is a test. .</p>
</div>
</body>
</html>
Inheritance in Action
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
p {
color:#5f9794;
margin-left: 50px;
}
.pageStyle {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color:#fdd041;
}
</style>
</head>
<body class="pageStyle">
<h1><img src="http://www.wbex.ru/style/logo.png" alt="" width="553" height="70" /></h1>
<h1>header</h1>
<h2>this is a test. <strong>strong</strong></h2>
<p><em>in em</em> <strong>in strong</strong>this is a test. </p>
</body>
</html>
Inherit the background, padding, and border of the div tag
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div {
background-color: #ccc;
color: black;
padding: 10px 20px;
border-left: 1px solid gray;
border-right: 2px solid black;
border-top: 1px solid gray;
border-bottom: 2px solid black;
}
p {
background-color: blue;
}
label {
background-color: gold;
}
span {
background-color: red;
}
code {
background-color: firebrick;
color: white;
}
</style>
</head>
<body>
<div>
<p>
<label>
<span>
Inherit the background, padding, and border of the division. <br />
</span>
</label>
</p>
</div>
</body>
</html>
Once you assign a background to an element, it no longer visually inherits the background of its parent
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div {
background-color: #ccc;
color: black;
padding: 10px 20px;
border-left: 1px solid gray;
border-right: 2px solid black;
border-top: 1px solid gray;
border-bottom: 2px solid black;
}
p {
background-color: transparent;
}
label {
background-color: red;
}
span {
background-color: transparent;
}
code {
background-color: firebrick;
color: white;
}
</style>
</head>
<body>
<div>
<p>
<label>
<span>
<code><code></code> element.
</span>
</label>
</p>
</div>
</body>
</html>
Properties are inherited by inline elements
letter-spacing, word-spacing, white-space, line-height, color, font,
font-family, font-size, font-style, font-variant, font-weight,
text-decoration, text-transform, direction.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
font-family: verdana, arial, sans-serif;
font-size: 18px;
}
div {
line-height: 2em;
}
p {
letter-spacing: 0.8px;
}
em {
font-style: italic;
}
span {
font-style: normal;
}
</style>
</head>
<body>
<div>
<p>
<em>
<span>
inherits font from its ancestor, <code><body></code>. <br />
inherits line-height from its ancestor, <code><div></code>. <br />
inherits letter-spacing from its ancestor, <code><p></code>. <br />
inherits italics from its ancestor, <code><em></code>,
</span>
</em>
</p>
</div>
</body>
</html>
Properties are not inherited:
display, margin, border, padding, background, height, min-height,
max-height, width, min-width, max-width, overflow, position, left,
right, top, bottom, z-index, float, clear, table-layout, vertical-align,
page-break-after, page-break-before, and unicode-bidi.
Properties inherited by list elements: list-style, list-style-type, list-style-position, and list-style-image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
li {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<ol>
<li>V</li>
<li>S</li>
<li>T</li>
<li>P</li>
</ol>
</body>
</html>
property inheritance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Property Inheritance </title>
<style type="text/css">
div#parentdiv {
text-align: center;
}
</style>
</head>
<body>
<div id="parentdiv">
Some text aligned center.
<div>
Because the text-align property is inherited,
this text is also aligned center.
</div>
</div>
</body>
</html>
Property inherited by table elements: border-collapse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table {
border-collapse: collapse;
border: 1px solid black;
}
</style>
</head>
<body>
<form method="get" name="copresentations">
<table cellspacing="0">
<caption>
Summary of Financial Data
</caption>
<tr>
<th scope="col">F</th>
<th scope="col">W</th>
<th scope="col">P</th>
<th scope="col">N</th>
</tr>
<tr>
<th scope="row">2003</th>
<td><input type="text" name="w2003" /></td>
<td><input type="text" name="p2003" /></td>
<td><input type="text" name="n2003" /></td>
</tr>
<tr>
<th scope="row">2004</th>
<td><input type="text" name="w2004" /></td>
<td><input type="text" name="p2004" /></td>
<td><input type="text" name="n2004" /></td>
</tr>
</table>
<input type="submit" class="save" value="Save" />
</form>
</body>
</html>
The following properties are inherited by all elements: visibility and cursor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
font-family: verdana, arial, sans-serif;
font-size: 18px;
}
div {
line-height: 2em;
}
p {
letter-spacing: 0.8px;
cursor: pointer;
}
em {
font-style: italic;
}
span {
font-style: normal;
}
</style>
</head>
<body>
<div>
<p>
<em>
<span>
inherits font from its ancestor, <code><body></code>. <br />
inherits line-height from its ancestor, <code><div></code>. <br />
inherits letter-spacing from its ancestor, <code><p></code>. <br />
inherits italics from its ancestor, <code><em></code>,
</span>
</em>
</p>
</div>
</body>
</html>
Working with Inheritance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Inheritance</title>
<style rel="stylesheet" type="text/css">
body {
font: 14px sans-serif;
color: darkslateblue;
border: 5px dashed darkslateblue;
margin: 10px;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<p>
Some properties are inherited, such as the color, font,
and text properties. Other properties, such as border, margin,
and padding, are not inherited.
</p>
</body>
</html>