HTML/CSS/CSS Attributes and Javascript Style Properties — различия между версиями

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

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

Содержание

font: 1em/1.5 Georgia, serif

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/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>Using the font shorthand property</title>
  <style type="text/css">
    body { 
      font-size: 12px;
    }
    h1 {
      font: bold 1.2em/1.25em Georgia, serif;
      margin: 1.5em 0 0.25em 0;
    }
    p { 
        margin: 0; 
        width: 35em; 
      }
    p.one { 
        font: 1em/1.5 Georgia, serif; 
    }
  </style>
</head>
<body>
  <h1>font: 1em/1.5 Georgia, serif</h1>
  <p class="one">
  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>
  <h1>font: bold 1em/1.5 Verdana, sans-serif</h1>
  <p class="two">
  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>
  <h1>font: italic 1em/1.5 Georgia, serif</h1>
  <p class="three">
  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>
</body>
</html>



font: bold 1em/1.5 Verdana, sans-serif

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/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>Using the font shorthand property</title>
  <style type="text/css">
    body { 
      font-size: 12px;
    }
    h1 {
      font: bold 1.2em/1.25em Georgia, serif;
      margin: 1.5em 0 0.25em 0;
    }
    p { 
        margin: 0; 
        width: 35em; 
    }
    p.one {  
        font: bold 1em/1.5 Verdana, sans-serif; 
    }
  </style>
</head>
<body>
  <h1>font: 1em/1.5 Georgia, serif</h1>
  <p class="one">
  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>
  <h1>font: bold 1em/1.5 Verdana, sans-serif</h1>
  <p class="two">
  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>
  <h1>font: italic 1em/1.5 Georgia, serif</h1>
  <p class="three">
  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>
</body>
</html>



Font color

 

<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
  <title>CSS Example</title>
  <style rel="stylesheet" type="text/css">
body {
  color: #000000;
  background-color: #ffffff;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
}
span.color {
  color: #FF0000;
}
</style>
</head>
<body>
<h1>color</h1>
<p class="one">font<span class="color">there is some writing in red here</span> 
in the middle.</p>
 
</body>
</html>



"font" Example

    
<html>
<body>
<div style="font:italic normal bolder 12pt verdana"> 
font font</div>
   <hr>
   <div style="padding:10px;"
        onmouseover="this.style.font="italic small-caps bold 12pt serif""
        onmouseout="this.style.font="normal normal normal normal medium times new roman"">
        Move the mouse to change the font style.</div>
</body>
</html>



"font-face" Example

    
<head>
<style type="text/css">
@font-face { font-family: Lucida; 
             font-style: normal; 
             font-weight: normal; 
             src: url("fontFile.eot")
           }
</style>
</head>
<body>
<p style="font-family: Lucida"> Paragraph text </p>
</body>
</html>



font-family: cursive;

 

<!DOCTYPE html PUBLIC "-//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 {
            font-size: 40px;
          }
          p {
            margin: 0;
          }
          p#cursive {
            font-family: cursive;
          }
        </style>
    </head>
    <body>
    <p id="cursive">
      This is cursive.
    </p>
    </body>
</html>



"font-family" Example

    
<html>
<body>
<div onmouseover="this.style.fontFamily="arial"" 
     onmouseout="this.style.fontFamily="times"">
     Move the mouse pointer to change the font-family value.
</div>
</body>
</html>



font-family: fantasy;

 

<!DOCTYPE html PUBLIC "-//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 {
            font-size: 40px;
          }
          p {
            margin: 0;
          }
          p#fantasy {
            font-family: fantasy;
          }
        </style>
    </head>
    <body>
    <p id="fantasy">
      This is fantasy.
    </p>
    </body>
</html>



font-family: monospace;

 

<!DOCTYPE html PUBLIC "-//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 {
            font-size: 40px;
          }
          p {
            margin: 0;
          }
          p#monospace {
            font-family: monospace;
          }
        </style>
    </head>
    <body>
    <p id="serif">
      This is serif.
    </p>
    <p id="monospace">
      This is monospace.
    </p>
    </body>
</html>



font-family: "Rockwell"

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>font-size</title>
        <style type="text/css">
            
            body {
                font-family: "Rockwell";
                font-size: 34px;
            }
        </style>
    </head>
    <body style="background: rgb(160, 160, 160);">
     font-size: 34px;
    </body>
</html>



font-family: sans-serif;

 

<!DOCTYPE html PUBLIC "-//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 {
            font-size: 40px;
          }
          p {
            margin: 0;
          }
          p#sans-serif {
            font-family: sans-serif;
          }
        </style>
    </head>
    <body>
    <p id="sans-serif">
      This is sans-serif.
    </p>
    </body>
</html>



font-family: serif;

 

<!DOCTYPE html PUBLIC "-//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 {
            font-size: 40px;
          }
          p {
            margin: 0;
          }
          p#serif {
            font-family: serif;  
          }
        </style>
    </head>
    <body>
    <p id="serif">
      This is serif.
    </p>
    </body>
</html>



font: icon

 
<!DOCTYPE html PUBLIC "-//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">
      p#icon {
          font: icon;
      }
        </style>
    </head>
  <body>
    <p id="icon">
        This is the icon font.
    </p>
  </body>
</html>



font: italic 1em/1.5 Georgia, serif;

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/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>Using the font shorthand property</title>
  <style type="text/css">
    body { 
      font-size: 12px;
    }
    h1 {
      font: bold 1.2em/1.25em Georgia, serif;
      margin: 1.5em 0 0.25em 0;
    }
    p { 
        margin: 0; 
        width: 35em; 
    }
    p.one { 
        font: italic 1em/1.5 Georgia, serif;
    }
  </style>
</head>
<body>
  <h1>font: 1em/1.5 Georgia, serif</h1>
  <p class="one">
  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>
  <h1>font: bold 1em/1.5 Verdana, sans-serif</h1>
  <p class="two">
  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>
  <h1>font: italic 1em/1.5 Georgia, serif</h1>
  <p class="three">
  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>
</body>
</html>



font: menu

 
<!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>system fonts</title>
        <style rel="stylesheet" type="text/css">
p#menu {
    font: menu;
}
      
        </style>
    </head>
    <body>
        <p id="menu">
            This is the menu font.
        </p>
    </body>
</html>



font: message-box

 
<!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>system fonts</title>
        <style rel="stylesheet" type="text/css">
p#message-box {
    font: message-box;
}
      
        </style>
    </head>
    <body>
        <p id="message-box">
            This is the message-box font.
        </p>
    </body>
</html>



Font Property and Purpose

 
font             Allows you to combine several properties into one
font-family      family of font (the user must have this installed on his or her computer)
font-size        size of a font
font-weight      normal, bold, or bolder than the containing element
font-style       normal, italic, or oblique
font-stretch     width of the actual letters in a font (not spaces between them)
font-variant     normal or smallcaps
font-size-adjust aspect ratio of the size of characters of the font



font shortcut

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Chapter Five</title>
<style type="text/css">
body {
    font: 16px Verdana, Arial, Helvetica, sans-serif;
    margin: 20px;
}
h1 {
    font: bold 28px Verdana, Arial, Helvetica, sans-serif;
}
h2 {
    font: bold 24px Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>color my world</h1>
<h2>gender and color</h2>
<p>following:</p>
<ul>
<li>B</li>
<li>M</li>
<li>M</li>
<li>W</li>
</ul>
<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. 
</p>
<hr />
</body>
</html>



Font shortcut: font: bold italic 2em Georgia, Times, "Times New Roman", serif;

 
<!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>font: bold italic 2em Georgia, Times, "Times New Roman", serif;</title>
<style type="text/css">
h2 {
   font: bold italic 2em Georgia, Times, "Times New Roman", serif;
}
</style>
</head>
<body>
  <h2>This is a header</h2>
  <p>This is a test</p>
</body>
</html>



font-size: 18px

 
<!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">
<html>
<head>
<title>css typography</title>
<style type="text/css">
h2 {
    font-family: Georgia, Times, serif;
    font-size: 18px;
}
</style>
</head>
<body>
<h1>this is a test. </h1>
<h2>this is a test. </h2>
<p>this is a test. <strong>this is a test. </strong> this is a test. </p>
<p>this is a test. </p>
</body>
</html>



"font-size" Example

    
<html>
<body>
<p style="font-size:14pt">This text will be rendered in 14pt size.</p>
<hr>
<div style="padding:10px;"
     onmouseover="this.style.fontSize="16pt""
     onmouseout="this.style.fontSize="12pt"">
     Move the mouse pointer to change the font-size value.</div>
</body>
</html>



font-size: from 24pt to 7pt

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            body {
                font-family: "Rockwell";
            }
            h1, h2, h3, h4, h5, h6 {
              display: inline;
              margin: 0;
              font-weight: normal;
            }
        </style>
    </head>
    <body>
         <div>
        <h1>&lt;h1&gt;</h1>
         <span style="font-size: 24pt;">
             font-size: 24pt;
           </span>
           <span style="font-size: xx-large;">
             font-size: xx-large;
           </span>
         </div>
         <div>
      <h2>&lt;h2&gt;</h2>
          <span style="font-size: 18pt;">
               font-size: 18pt;
           </span>
           <span style="font-size: x-large;">
             font-size: x-large;
           </span>              
         </div>
         <div>
         <h3>&lt;h3&gt;</h3>
           <span style="font-size: 14pt;">
             font-size: 14pt;
           </span>
           <span style="font-size: large;">
             font-size: large;
           </span>
         </div>
         <div>
        <h4>&lt;h4&gt;</h4>
           <span style="font-size: 12pt;">
             font-size: 12pt;
           </span>
           <span style="font-size: medium;">
             font-size: medium;
           </span>
         </div>
         <div>
         <h5>&lt;h5&gt;</h5>
        <span style="font-size: 10pt;">
          font-size: 10pt;
        </span>
        <span style="font-size: small;">
          font-size: small;
        </span>
      </div>
      <div>
         <h6>&lt;h6&gt;</h6>
        <span style="font-size: 8pt;">
          font-size: 8pt;
        </span>
        <span style="font-size: x-small;">
          font-size: x-small;
        </span>
      </div>
      <div>
        <span style="font-size: 7pt;">
          font-size: 7pt;
        </span>
        <span style="font-size: xx-small;">
          font-size: xx-small;
        </span>
      </div>
    </body>
</html>



font-size: larger

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>font-size</title>
    </head>
    <body style="background: rgb(240, 240, 240);">
    font-size: 16px;
    <div style="font-size: larger; background: rgb(220, 220, 220);">
      font-size: larger; <span style="font-size: 20px;">font-size: 20px;</span>
      <div style="font-size: larger; background: rgb(200, 200, 200);">
        font-size: larger; <span style="font-size: 24px;">font-size: 24px;</span>
        <div style="font-size: larger; background: rgb(180, 180, 180);">
          font-size: larger; <span style="font-size: 28px;">font-size: 28px;</span>
          <div style="font-size: larger; background: rgb(160, 160, 160);">
            font-size: larger; <span style="font-size: 34px;">font-size: 34px;</span>
          </div>
        </div>
      </div>
    </div>
    </body>
</html>



font-size larger is incremental

 
<!DOCTYPE html PUBLIC "-//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 {
                font-family: "Rockwell";
                font-size: 16px;
            }
            div {
             border: 1px solid gray;
             padding: 5px;   
             margin-left: 20px;
            }
        </style>
    </head>
    <body style="background: rgb(240, 240, 240);">
    font-size: 16px;
      <div style="font-size: larger; background: rgb(220, 220, 220);">
        font-size: larger; <span style="font-size: 18px;">font-size: 18px;</span>
      </div>
      <div style="font-size: larger; background: rgb(200, 200, 200);">
        font-size: larger; <span style="font-size: 24px;">font-size: 24px;</span>
      </div>
      <div style="font-size: larger; background: rgb(180, 180, 180);">
        font-size: larger; <span style="font-size: 32px;">font-size: 32px;</span>
      </div>
      <div style="font-size: larger; background: rgb(160, 160, 160);">
        font-size: larger; <span style="font-size: 48px;">font-size: 48px;</span>
      </div>
      
      <div style="font-size: larger; background: rgb(220, 220, 220);">
        font-size: larger; <span style="font-size: 18px;">font-size: 18px;</span>
        <div style="font-size: larger; background: rgb(200, 200, 200);">
          font-size: larger; <span style="font-size: 24px;">font-size: 24px;</span>
          <div style="font-size: larger; background: rgb(180, 180, 180);">
            font-size: larger; <span style="font-size: 32px;">font-size: 32px;</span>
            <div style="font-size: larger; background: rgb(160, 160, 160);">
              font-size: larger; <span style="font-size: 48px;">font-size: 48px;</span>
            </div>
          </div>
        </div>
      </div>
    </body>
</html>



font-size percent

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Leading paragraph</title>
<style type="text/css">
h3 {
  font-size: 175%;
}
.intro {
  font-size: 150%;
  font-style: italic;
}
</style>
</head>
<body>
<h3>this is a header</h3>
<p class="intro">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. </p>
</body>
</html>



Font size relative selector

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      body {
          font-size: medium;
      }
      p {
          font-size: larger;
      }
        </style>
    </head>
  <body>
      This font is medium in size.
      <p>
          this is a test. 
          <span style="font-size: large;">this is a test. </span>
      </p>
  </body>
</html>



font size: small

 
<!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">
p {
 width: 120px;
 margin: 260px 100px 0 170px;
 font-family: Verdana, sans-serif;
 font-size: small;
 font-weight: bold;
}

</style>
</head>
<p>before <a href="more.html">after</a></p
</body>
</html>



font-size: smaller

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>font-size</title>
        <style type="text/css">
            
            div {
             border: 1px solid gray;
             padding: 5px;
             margin-left: 20px;
            }
        </style>
    </head>
    <body>
    <div style="font-size: smaller; background: rgb(180, 180, 180);">
      font-size: smaller; <span style="font-size: 28px;">font-size: 28px;</span>
    </div>
    </body>
</html>



font-size smaller is incremental

 

<!DOCTYPE html PUBLIC "-//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 {
                font-family: "Rockwell";
                font-size: 48px;
            }
            div {
             border: 1px solid gray;
             padding: 5px;   
             margin-left: 20px;
            }
        </style>
    </head>
    <body style="background: rgb(160, 160, 160);">
    font-size: 48px;
      <div style="font-size: smaller; background: rgb(180, 180, 180);">
        font-size: smaller; <span style="font-size: 32px;">font-size: 32px;</span>
      </div>
      <div style="font-size: smaller; background: rgb(200, 200, 200);">
        font-size: smaller; <span style="font-size: 24px;">font-size: 24px;</span>
      </div>
      <div style="font-size: smaller; background: rgb(220, 220, 220);">
        font-size: smaller; <span style="font-size: 18px;">font-size: 18px;</span>
      </div>
      <div style="font-size: smaller; background: rgb(240, 240, 240);">
        font-size: smaller; <span style="font-size: 16px;">font-size: 16px;</span>
      </div>
      <div style="font-size: smaller; background: rgb(180, 180, 180);">
        font-size: smaller; <span style="font-size: 32px;">font-size: 32px;</span>
        <div style="font-size: smaller; background: rgb(200, 200, 200);">
          font-size: smaller; <span style="font-size: 24px;">font-size: 24px;</span>
          <div style="font-size: smaller; background: rgb(220, 220, 220);">
            font-size: smaller; <span style="font-size: 18px;">font-size: 18px;</span>
            <div style="font-size: smaller; background: rgb(240, 240, 240);">
              font-size: smaller; <span style="font-size: 16px;">font-size: 16px;</span>
            </div>
          </div>
        </div>
      </div>
    </body>
</html>



font: small-caption

 
<!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>system fonts</title>
        <style rel="stylesheet" type="text/css">
p#small-caption {
    font: small-caption;
}
      
        </style>
    </head>
    <body>
        <p id="small-caption">
            This is the small-caption font.
        </p>
    </body>
</html>



font: status-bar

 
<!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>system fonts</title>
        <style rel="stylesheet" type="text/css">
p#status-bar {
    font: status-bar;
}  
      
        </style>
    </head>
    <body>

        <p id="status-bar">
            This is the status-bar font.
        </p>
    </body>
</html>



"font-style" Example

    
<html>
<body>
<div onmouseover="this.style.fontStyle="italic"" 
     onmouseout="this.style.fontStyle="normal"">
     Move the mouse pointer to change the font style value.
</div>
</body>
</html>



font-style: italic

 
<!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">
<html>
<head>
<title>css typography</title>
<style type="text/css">
h2 {
    font-family: Georgia, Times, serif;
    font-size: 20px;
    font-style: italic;
}
</style>
</head>
<body>
<h1>this is a test. </h1>
<h2>this is a test. </h2>
<p>this is a test. <strong>this is a test. </strong> this is a test. </p>
<p>this is a test. </p>
</body>
</html>



Font style: normal

 
<!DOCTYPE html PUBLIC "-//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">
      p {
        font-family: "Lucida Sans Typewriter";
          font-size: 25px;
      }
      p#normal {
        font-style: normal;
      }
        </style>
    </head>
    <body>
      <p id="normal">
          This font is normal.
      </p>
    </body>
</html>



Font style: oblique

 
<!DOCTYPE html PUBLIC "-//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">
      p {
          font-size: 25px;
      }
      p#oblique {
        font-style: oblique;
      }
        </style>
    </head>
    <body>
    <p id="oblique">
      This font is oblique.
    </p>
    </body>
</html>



"font-variant" Example

    
<html>
<body>
<div font-size:16pt"
    onmouseover="this.style.fontVariant="small-caps""
    onmouseout="this.style.fontVariant="normal"">
    Move the mouse to change the font-variant value.
</div>
</body>
<html>



font-variant: normal

 
<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
  <title>CSS Example</title>
  <style rel="stylesheet" type="text/css">
body {
  color: #000000;
  background-color: #ffffff;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
}
p {
  font-variant: normal;
}
span.smallcaps {
  font-variant: small-caps;
}
</style>
</head>
<body>
<h1>font-variant</h1>
<p class="one">a normal font, but then <span class="smallcaps">there are some small caps</span> in the middle.</p>
 
</body>
</html>



font-variant: 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">
<html>
<head>
<title>css typography</title>
<style type="text/css">
h1 {
    font-family: Georgia, Times, serif;
    font-size: 24px;
    font-variant: small-caps;
}
</style>
</head>
<body>
<h1>this is a test. </h1>
<h2>this is a test. </h2>
<p>this is a test. <strong>this is a test. </strong> this is a test. </p>
<p>this is a test. </p>
</body>
</html>



font-weight: bolder

 
<!DOCTYPE html PUBLIC "-//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 {
                font-family: monospace;
            }
            div {
                font-weight: bolder;
            }
        </style>
    </head>
  <body>
      This font is normal.
      <div>
          This font is bolder than the font for the &lt;body&gt; element.
      </div>
  </body>
</html>



font-weight by number from 100 to 900

 
<!DOCTYPE html PUBLIC "-//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 {
                font-family: "Rockwell";
            }
        </style>
    </head>
    <body>
        <p style="font-weight: normal;">
            This font is normal.
        </p>
        <p style="font-weight: bold;">
            This font is bold.
        </p>
        <p style="font-weight: bolder;">
            This font is bolder.
        </p>
        <p style="font-weight: lighter;">
            This font is lighter.
        </p>
        <p style="font-weight: 100;">
            This font is 100 weight.
        </p>
        <p style="font-weight: 200;">
            This font is 200 weight.
        </p>
        <p style="font-weight: 300;">
            This font is 300 weight.
        </p>
        <p style="font-weight: 400;">
            This font is 400 weight.
        </p>
        <p style="font-weight: 500;">
            This font is 500 weight.
        </p>
        <p style="font-weight: 600;">
            This font is 600 weight.
        </p>
        <p style="font-weight: 700;">
            This font is 700 weight.
        </p>
        <p style="font-weight: 800;">
            This font is 800 weight.
        </p>
        <p style="font-weight: 900;">
            This font is 900 weight.
        </p>
    </body>
</html>



"font-weight" Example

    
<html>
<body>
<div style="font-size:16pt "
     onmouseover="this.style.fontWeight="bold"" 
     onmouseout="this.style.fontWeight="normal"">
     Move the mouse to change the font-weight value.</div>
</body>
</html>



font-weight: lighter

 
<!DOCTYPE html PUBLIC "-//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 {
                font-family: monospace;
                font-weight: bold;
            }
            div {
                font-weight: lighter;
            }
        </style>
    </head>
  <body>
      This font is bold.
      <div>
          This font is lighter than the font for the &lt;body&gt; element.
      </div>
  </body>
</html>



font-weight: normal, bold, bolder, lighter

 
<!DOCTYPE html PUBLIC "-//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 {
                font-family: "Rockwell";
            }
        </style>
    </head>
    <body>
        <p style="font-weight: normal;">
            This font is normal.
        </p>
        <p style="font-weight: bold;">
            This font is bold.
        </p>
        <p style="font-weight: bolder;">
            This font is bolder.
        </p>
        <p style="font-weight: lighter;">
            This font is lighter.
        </p>
        <p style="font-weight: 100;">
            This font is 100 weight.
        </p>
        <p style="font-weight: 200;">
            This font is 200 weight.
        </p>
        <p style="font-weight: 300;">
            This font is 300 weight.
        </p>
        <p style="font-weight: 400;">
            This font is 400 weight.
        </p>
        <p style="font-weight: 500;">
            This font is 500 weight.
        </p>
        <p style="font-weight: 600;">
            This font is 600 weight.
        </p>
        <p style="font-weight: 700;">
            This font is 700 weight.
        </p>
        <p style="font-weight: 800;">
            This font is 800 weight.
        </p>
        <p style="font-weight: 900;">
            This font is 900 weight.
        </p>
    </body>
</html>



Make font sizes smaller by percentage.

 
<!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>font-size</title>
        <style rel="stylesheet" type="text/css">
span {
    background: pink;
    font-size: 75%;
}
span span {
    background: gold;
    font-size: 75%;
}        
        </style>
    </head>
    <body>
        <p>
            
            <span>
                This font size is 25% smaller than that of the
                &lt;p&gt; element.<br />
                <span>
                    This font is 25% smaller than the font used
                    for the parent &lt;span&gt; element.
                </span>
            </span>
        </p>
    </body>
</html>



Percentage font sizes apply a font size relative to the parent element"s font size.

 
<!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>font-size</title>
        <style rel="stylesheet" type="text/css">
span {
    background: mistyrose;
    font-size: 150%;
}
span span {
    background: pink;
    font-size: 125%;
}        
        </style>
    </head>
    <body>
        <p>
             
            <span>
                This font size is 50% bigger than that of the
                &lt;p&gt; element.<br />
                <span>
                    This font is 25% bigger than the font used
                    for the parent &lt;span&gt; element.
                </span>
            </span>
        </p>
    </body>
</html>



Percentange larger

 
<!DOCTYPE html PUBLIC "-//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 {
          font-size: 150%;
      }
        </style>
    </head>
  <body>
      This font is 150% of the size of the user"s font size preferences.
      <p>
         This font is 100% of the size of the font used for the &lt;body&gt; element.
      </p>
  </body>
</html>



Percentange smaller

 
<!DOCTYPE html PUBLIC "-//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 {
          font-size: 18px;
      }
      p {
          font-size: 90%;
      }
        </style>
    </head>
  <body>
    This font is 18 pixels in size.
    <p>
        This font is 90% of the 18 pixel size specified for the &lt;body&gt;
        element.
    </p>
  </body>
</html>



Set font size to 6em

 
<!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>Set text indent to 37%</title>
<style type="text/css">
p {
 text-indent: 37%;
 line-height: 1em;
}
p span.initcap {
 font-size: 6em;
 line-height: 0.6em;
 font-weight: bold;
}
</style>
</head>
<body>
  <p><span class="initcap">O</span>nline. This is test. This is test. 
  This is test. This is test. This is test. This is test. This is test. 
  This is test. This is test. This is test. This is test. This is test. 
  This is test. This is test. This is test. This is test. This is test. 
  </p>
</body>
</html>



The larger and smaller keywords of the font-size property function using the scaling factor of 1.2.

 

<!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>font-size</title>
        <style rel="stylesheet" type="text/css">
body {
    font-size: medium;
}
p#larger {
    font-size: larger;
}
p#larger span {
    font-size: 20px;
}
p#smaller {
    font-size: smaller;
}
p#smaller span {
    font-size: 12px;
}
span {
    background: mistyrose;
}        
        </style>
    </head>
    <body>
        <p id="larger">
            This font is 1.2 times the default font, or 20 pixels.<br />
            <span>this is a test. </span>
        </p>
        <p id="smaller">
            This font is 1.2 smaller than the default size, or pixels.<br />
            <span>this is a test. </span>
        </p>
    </body>
</html>



This font is 1.2 times the default font, or 20 pixels

 
<!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>font-size</title>
        <style rel="stylesheet" type="text/css">
body {
    font-size: medium;
}
p#larger {
    font-size: larger;
}
p#larger span {
    font-size: 20px;
}
span {
    background: mistyrose;
}        
        </style>
    </head>
    <body>
        <p id="larger">
            This font is 1.2 times the default font, or 20 pixels.<br />
            <span>this is a test. </span>
        </p>
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties&oldid=5007»