HTML/CSS/CSS Controls/Title section

Материал из Web эксперт
Версия от 08:16, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Add background image to title text

 

<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Headings</title>
  <style type="text/css" media="screen">
  body{
    font-size: 12px;
    }
  
  #divID h1 {
    font-size: 24px;
    color: #369;
    padding-bottom: 14px;
    background: url(gradient.gif) repeat-x bottom;
  }
  
  
  </style>
</head>
<body>
<div id="divID">
  <h1>This is the Title of this page.</h1>
</div>
</body>
</html>



Add border line to title text

 

<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Headings</title>
  <style type="text/css" media="screen">
  #divID h1 {
    color: #369;
    padding-bottom: 4px;
    border-bottom: 1px solid #999;
  }
  </style>
</head>
<body>
<div id="divID">
  <h1>This is the Title of this page.</h1>
</div>
</body>
</html>



Add no repeat icon to title text

 

<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Headings</title>
  <style type="text/css" media="screen">
  body{
    font-size: 12px;
  }
  
  #divID h1 {
    font-size: 24px;
    color: #369;
    padding-left: 30px;
    background: url(icon.gif) no-repeat 0 50%;
  }
  
  
  </style>
</head>
<body>
<div id="divID">
  <h1>This is the Title of this page.</h1>
</div>
</body>
</html>



Align title to the center

 

<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  div {
    margin: 30px;
    padding: 30px;
    border: 1px solid #ccc;
    font-size: small;
  }
  #divID {
    line-height: 1.5em;
    text-align: justify;
  }
  
  #divID h1 {
    letter-spacing: 4px;
    font-style: italic;
    text-align: center;
  }
  
  #divID .drop {
    float: left;
      font-size: 400%;
      line-height: 1em;
      margin: 4px 10px 10px 0;
      padding: 4px 10px;
      border: 2px solid #ccc;
      background: #eee;
    }
  
  </style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p><span class="drop">T</span>his is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
</div>
</body>
</html>



Change title font style for titled section

 

<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  
  div {
    margin: 30px;
    padding: 30px;
    border: 1px solid #ccc;
    font-size: small;
  }
  #divID {
    font-family: Georgia, Times, serif;
    line-height: 1.5em;
  }
  
  #divID h1 {
    letter-spacing: -2px;
    font-style: italic;
  }
  </style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
</div>
</body>
</html>



Letter drop for titled section

 

<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  
  div {
    margin: 30px;
    padding: 30px;
    border: 1px solid #ccc;
    font-size: small;
  }
  #divID {
    line-height: 1.5em;
  }
  
  #divID h1 {
    letter-spacing: -2px;
    font-style: italic;
  }
  #divID .drop {
      float: left;
      font-size: 400%;
      line-height: 1em;
      margin: 4px 10px 10px 0;
      padding: 4px 10px;
      border: 2px solid #ccc;
      background: #eee;
    }
  
  
    
  </style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p><span class="drop">T</span>his is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
</div>
</body>
</html>



Paragraph indent for titled section

 

<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  
  div {
    margin: 30px;
    padding: 30px;
    border: 1px solid #ccc;
    font-size: small;
  }
  #divID {
    line-height: 1.5em;
    text-align: justify;
  }
  
  #divID h1 {
    letter-spacing: 4px;
    font-style: italic;
    text-align: center;
    font-variant: small-caps;
  }
  
  #divID p {
    text-indent: 3em;
  }

  </style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
</div>
</body>
</html>



Set font family for titled section

 

<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  
  div {
    margin: 30px;
    padding: 30px;
    border: 1px solid #ccc;
    font-size: small;
  }
  #divID {
    line-height: 1.5em;
  }
    
  </style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
</div>
</body>
</html>



Set line height for titled section

 

<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  
  div {
    margin: 30px;
    padding: 30px;
    border: 1px solid #ccc;
    font-size: small;
  }
  #divID {
    line-height: 1.5em;
  }
    
  </style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
</div>
</body>
</html>



Set title letter space for titled section

 
<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  
  div {
    margin: 30px;
    padding: 30px;
    border: 1px solid #ccc;
    font-size: small;
  }
  #divID {
    font-family: Georgia, Times, serif;
    line-height: 1.5em;
  }
  
  #divID h1 {
    letter-spacing: -2px;
  }
  
    
  </style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
</div>
</body>
</html>



Set title size to small-caps

 
<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  div {
    margin: 30px;
    padding: 30px;
    border: 1px solid #ccc;
    font-size: small;
  }
    
   #divID {
    line-height: 1.5em;
    text-align: justify;
  }
  
  #divID h1 {
    letter-spacing: 4px;
    font-style: italic;
    text-align: center;
    font-variant: small-caps;
  }
  
  #divID .drop {
      float: left;
      font-size: 400%;
      line-height: 1em;
      margin: 4px 10px 10px 0;
      padding: 4px 10px;
      border: 2px solid #ccc;
      background: #eee;
    }
  
  </style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p><span class="drop">T</span>his is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
</div>
</body>
</html>



Text transformation for title

 
<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  div {
    margin: 30px;
    padding: 30px;
    border: 1px solid #ccc;
    font-size: small;
  }
  #divID {
    line-height: 1.5em;
    text-align: justify;
  }
  
  #divID h1 {
    letter-spacing: 4px;
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
  }
  
  #divID .drop {
      float: left;
      font-size: 400%;
      line-height: 1em;
      margin: 4px 10px 10px 0;
      padding: 4px 10px;
      border: 2px solid #ccc;
      background: #eee;
    }
  
  </style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p><span class="drop">T</span>his is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
</div>
</body>
</html>



Titled section with justified alignment

 
<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  div {
    margin: 30px;
    padding: 30px;
    border: 1px solid #ccc;
    font-size: small;
  }
  #divID {
    line-height: 1.5em;
    text-align: justify;
  }
  
  #divID h1 {
    letter-spacing: 4px;
    font-style: italic;
  }
  
  #divID .drop {
      float: left;
      font-size: 400%;
      line-height: 1em;
      margin: 4px 10px 10px 0;
      padding: 4px 10px;
      border: 2px solid #ccc;
      background: #eee;
    }
  </style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p><span class="drop">T</span>his is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
</div>
</body>
</html>



Title format: font-family: Arial, sans-serif;color: #369;

 

<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Headings</title>
  <style type="text/css" media="screen">
  body{
    font-family: verdana, sans-serif;
    font-size: 12px;
    }
  
  #divID h1 {
    font-family: Arial, sans-serif;
    font-size: 24px;
    color: #369;
  }
  
  
  </style>
</head>
<body>
<div id="divID">
  <h1>This is the Title of this page.</h1>
</div>
</body>
</html>



Title section

 

<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  
  div {
    margin: 30px;
    padding: 30px;
    border: 1px solid #ccc;
    font-size: small;
  }
  </style>
</head>
<body>
<div id="divID">
<h1>This is the header</h1>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
</p>
</div>
</body>
</html>



Underlined title

 
<!DOCTYPE html PUBLIC "-/pp/W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            body {
                width: 200px;
            }
            h1::first-letter, p::first-letter {
                text-transform: capitalize; 
            }
            h1 {
                text-align: center;
                text-decoration: underline;
            }
            p {
                text-indent: 25px;
                text-align: justify;
                letter-spacing: 1px;
                word-spacing: 5px;
            }
            
        </style>
    </head>
    <body>
        <h1>This is the title.</h1>
        <p>This is a test. This is a test. This is a test. </p>
        <p>This is a test. This is a test. </p>
        <p>This is a test. </p>
    </body>
</html>



Use background to highlight title text

 

<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Headings</title>
  <style type="text/css" media="screen">
  #divID h1 {
    font-size: 24px;
    color: #fff;
    padding: 4px;
    background: #696;
  }
  </style>
</head>
<body>
<div id="divID">
  <h1>This is the Title of this page.</h1>
</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Controls/Title_section&oldid=5397»