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

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

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

CLASS overrules ELEMENT

 

<!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" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Specificity</title>
  <style type="text/css" media="screen">
    h1 {
      color:#000;
    }
    p {
      color:#000;
    }
    
    div h1 {
      color:#333;
    }
    div p {
      color:#333;
    }
    
    div.module h1 {
      color:#666;
    }
    div.module p {
      color:#666;
    }
    
  </style>
  
</head>
<body>
  <h1>Page Title</h1>
  <p>This is a test. This is a test. </p>
  
  <div>
    <h1>Page Title</h1>
    <p>This is a test. This is a test. </p>
  </div>
  <div class="module">
    <h1>Page Title</h1>
    <p>This is a test. This is a test. </p>
  </div>
  
</body>
</html>



class style overwrites the wildcard style

 
<!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">
      * {
          font-family: sans-serif;
      }
      div {
          font-family: "Times New Roman";
      }
        </style>
    </head>
  <body>
      This font is sans-serif.
      <div>
          This font is Times New Roman.
      </div>
  </body>
</html>



ID overrules CLASS

 

<!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" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Specificity</title>
  <style type="text/css" media="screen">
    h1 {
      color:#000;
    }
    p {
      color:#000;
    }
    
    div h1 {
      color:#333;
    }
    div p {
      color:#333;
    }
    
    div.module h1 {
      color:#666;
    }
    div.module p {
      color:#666;
    }
    .module h1 {
      color:#000;
    }
    .module p {
      color:#000;
    }
    
  </style>
  
</head>
<body>
  <h1>Page Title</h1>
  <p>This is a test. This is a test. </p>
  
  <div>
    <h1>Page Title</h1>
    <p>This is a test. This is a test. </p>
  </div>
  <div class="module">
    <h1>Page Title</h1>
    <p>This is a test. This is a test. </p>
  </div>
  <div id="content" class="module">
    <h1>Page Title</h1>
    <p>This is a test. This is a test. </p>
  </div>
</body>
</html>



Id style overwrites the tag name style

 
<!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">
      ul li {
          border: thin solid black;
      }
      li#navigation {
          border: thick solid black;
      }
        </style>
    </head>
  <body>
    <ul>
        <li> This is a test. </li>
        <li id="navigation"> This is a test.  </li>
    </ul>
  </body>
</html>



!important overrides all, including inline styles

 

<!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" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Specificity</title>
  <style type="text/css" media="screen">
    h1 {
      color:#000;
    }
    p {
      color:#000;
    }
    
    div h1 {
      color:#333;
    }
    div p {
      color:#333;
    }
    
    div.module h1 {
      color:#666;
    }
    div.module p {
      color:#666;
    }
    .module h1 {
      color:#000;
    }
    .module p {
      color:#000;
    }
     div#content h1 {
      color:#999;
    }
     div#content p {
      color:#999;
    }
    h1 {
      color:#ccc !important;
    }
     p {
      color:#ccc !important;
    }
  </style>
  
</head>
<body>
  <h1>Page Title</h1>
  <p>This is a test. This is a test. </p>
  
  <div>
    <h1>Page Title</h1>
    <p>This is a test. This is a test. </p>
  </div>
  <div class="module">
    <h1>Page Title</h1>
    <p>This is a test. This is a test. </p>
  </div>
  <div id="content" class="module">
    <h1>Page Title</h1>
    <p>This is a test. This is a test. </p>
  </div>
  <div id="content" class="module">
    <h1 style="color:#ccc;">Page Title</h1>
    <p style="color:#ccc;">This is a test. This is a test. </p>
  </div>  
</body>
</html>



inline styles overrule everything except !important

 

<!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" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Specificity</title>
  <style type="text/css" media="screen">
    h1 {
      color:#000;
    }
    p {
      color:#000;
    }
    
    div h1 {
      color:#333;
    }
    div p {
      color:#333;
    }
    
    div.module h1 {
      color:#666;
    }
    div.module p {
      color:#666;
    }
    .module h1 {
      color:#000;
    }
    .module p {
      color:#000;
    }
     div#content h1 {
      color:#999;
    }
     div#content p {
      color:#999;
    }
    
  </style>
  
</head>
<body>
  <h1>Page Title</h1>
  <p>This is a test. This is a test. </p>
  
  <div>
    <h1>Page Title</h1>
    <p>This is a test. This is a test. </p>
  </div>
  <div class="module">
    <h1>Page Title</h1>
    <p>This is a test. This is a test. </p>
  </div>
  <div id="content" class="module">
    <h1>Page Title</h1>
    <p>This is a test. This is a test. </p>
  </div>
  <div id="content" class="module">
    <h1 style="color:#ccc;">Page Title</h1>
    <p style="color:#ccc;">This is a test. This is a test. </p>
  </div>  
</body>
</html>



Style cascade

 
<!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 {
          text-align: left;
          color: white;
      }
      div {
          text-align: center;
          color: blue;
      }
        </style>
    </head>
    <body>
    <div id="parentdiv">
         The text is aligned center and blue.
    </div>
    </body>
</html>



Style cascade 1

 
<!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 {
          text-align: left;
          color: white;
      }
      div {
          text-align: center;
          color: blue;
      }
        </style>
    </head>
    <body>
    <div id="parentdiv">
         The text is aligned center and blue.
    </div>
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/Style_overwrite&oldid=5927»