HTML/CSS/Text/sup

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

Superscript and subscript

 
<!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>Superscript and subscript</title>
</head>
<body>
  <p>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
  <p>H<sub>2</sub>SO<sub>4</sub></p>
</body>
</html>



To superscript text use sup tags

 
<?xml version = "1.0"?>
<!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>
   </head>
   <body>
      <p><del>You may download 3.14 x 10<sup>2</sup> </p>
   </body>
</html>



vertical alignment for sub super

 
<!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: 16px;
                }
                span {
                    font-size: 0.8em;
                }
                p#sub span {
                    vertical-align: sub;
                }
                p#super span {
                    vertical-align: super;
                }
            </style>
        </head>
        <body>
            <p id="sub">
               This is normal text. <span>This is subscript text.</span> This is normal text.
            </p>
            <p id="super">
               This is normal text. <span>This is superscript text.</span> This is normal text.
            </p>
        </body>
    </html>