HTML/CSS/Style Basics/Inheritance — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
м (1 версия)
 
(нет различий)

Текущая версия на 08:17, 26 мая 2010

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>&lt;code&gt;</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>&lt;body&gt;</code>. <br /> 
inherits line-height from its ancestor, <code>&lt;div&gt;</code>. <br /> 
inherits letter-spacing from its ancestor, <code>&lt;p&gt;</code>. <br /> 
inherits italics from its ancestor, <code>&lt;em&gt;</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>&lt;body&gt;</code>. <br /> 
inherits line-height from its ancestor, <code>&lt;div&gt;</code>. <br /> 
inherits letter-spacing from its ancestor, <code>&lt;p&gt;</code>. <br /> 
inherits italics from its ancestor, <code>&lt;em&gt;</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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/Inheritance&oldid=5945»