HTML/CSS/Style Basics/Inheritance
Содержание
- 1 Background is inherited
- 2 Inheritance in Action
- 3 <img src="http://www.wbex.ru/style/logo.png" alt="" width="553" height="70" />
- 4 header
- 4.1 this is a test. strong
- 4.2 Inherit the background, padding, and border of the div tag
- 4.3 Once you assign a background to an element, it no longer visually inherits the background of its parent
- 4.4 Properties are inherited by inline elements
- 4.5 Properties are not inherited:
- 4.6 Properties inherited by list elements: list-style, list-style-type, list-style-position, and list-style-image
- 4.7 property inheritance
- 4.8 Property inherited by table elements: border-collapse
- 4.9 The following properties are inherited by all elements: visibility and cursor.
- 4.10 Working with Inheritance
Background is inherited
<source lang="html4strict">
<!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>
this is a test. this is a test. this is a test. this is a test. .
</body> </html>
</source>
Inheritance in Action
<source lang="html4strict">
<!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">
<img src="http://www.wbex.ru/style/logo.png" alt="" width="553" height="70" />
header
this is a test. strong
in em in strongthis is a test.
</body> </html>
</source>
Inherit the background, padding, and border of the div tag
<source lang="html4strict">
<!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>
<label>
Inherit the background, padding, and border of the division.
</label>
</body> </html>
</source>
Once you assign a background to an element, it no longer visually inherits the background of its parent
<source lang="html4strict">
<!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>
<label>
<code> element.
</label>
</body> </html>
</source>
Properties are inherited by inline elements
<source lang="html4strict">
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>
inherits font from its ancestor, <body>.
inherits line-height from its ancestor, <div>.
inherits letter-spacing from its ancestor, <p>.
inherits italics from its ancestor, <em>,
</body> </html>
</source>
Properties are not inherited:
<source lang="html4strict">
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.
</source>
Properties inherited by list elements: list-style, list-style-type, list-style-position, and list-style-image
<source lang="html4strict">
<!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>
- V
- S
- T
- P
</body> </html>
</source>
property inheritance
<source lang="html4strict">
<!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>
Some text aligned center.
Because the text-align property is inherited,
this text is also aligned center.
</body>
</html>
</source>
Property inherited by table elements: border-collapse
<source lang="html4strict">
<!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">
| F | W | P | N |
|---|---|---|---|
| 2003 | <input type="text" name="w2003" /> | <input type="text" name="p2003" /> | <input type="text" name="n2003" /> |
| 2004 | <input type="text" name="w2004" /> | <input type="text" name="p2004" /> | <input type="text" name="n2004" /> |
<input type="submit" class="save" value="Save" /> </form>
</body> </html>
</source>
The following properties are inherited by all elements: visibility and cursor.
<source lang="html4strict">
<!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>
inherits font from its ancestor, <body>.
inherits line-height from its ancestor, <div>.
inherits letter-spacing from its ancestor, <p>.
inherits italics from its ancestor, <em>,
</body> </html>
</source>
Working with Inheritance
<source lang="html4strict">
<!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>
Some properties are inherited, such as the color, font, and text properties. Other properties, such as border, margin, and padding, are not inherited.
</body>
</html>
</source>
