HTML/CSS/CSS Attributes and Javascript Style Properties/text decoration

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

"text-decoration" Example

    
<html>
<body>
<a href="http://www.wbex.ru" 
   style="text-decoration: none">
www.wbex.ru, www.wbex.ru ,w w w.j a v a 2 s . c o m
</a>
<hr>
<p id="myT">Text sample.</p>
<input type="button" 
       value="decoration:lineThrough" 
       onclick="myT.style.textDecoration = "line-through"">
<input type="button" 
       value="decoration:overline" 
       onclick="myT.style.textDecoration = "overline"">
<input type="button" 
       value="decoration:underline" 
       onclick="myT.style.textDecoration = "underline"">
</body>
</html>



text-decoration: underline overline

 
<!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 {
          text-decoration: underline overline;
      }
        </style>
    </head>
    <body>
    <p>
      This text is underlined and overlined.
    </p>
    </body>
</html>



text-decoration: underline overline line-through

 
<?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>text-decoration effects</title>
  <style type="text/css">
    body {
      font: 12px/1.5em Georgia, serif;
    }
    p.one { 
      text-decoration: underline overline line-through;
    }
  </style>
</head>
<body>
  <p class="one">A underlined line</p>
  <p class="two">An overlined line</p>
  <p class="three">A line with line-through</p>
  <p class="four">All three</p>
</body>
</html>