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

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

text-transform: capitalize

 
<!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#capitalize {
          text-transform: capitalize;
      }
        </style>
    </head>
    <body>
    <p id="capitalize">
        every word of this sentence is capitalized.
    </p>
    </body>
</html>



"text-transform" Example

    
<html>
<body>
<div id="myDiv" style="text-transform:capitalize">www.wbex.ru</div>
<button onclick="myDiv.style.textTransform = "uppercase";">uppercase</button>
<button onclick="myDiv.style.textTransform = "lowercase";">lowercase</button>
</body>
</html>



text-transform: lowercase

 
<!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#lowercase {
          text-transform: lowercase;
      }
        </style>
    </head>
    <body>
    <p id="lowercase">
        EVERY WORD OF THIS SENTENCE IS IN LOWERCASE.
    </p>
    </body>
</html>



text-transform: uppercase

 
<!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">

.buttonSubmit {
 color: green;
 text-transform: uppercase;
 border: 1px solid green;
}
</style>
</head>
<body>
    <form method="post">
   <label for="uname">Username</label>
   <input type="text" name="uname" id="uname" value="" /><br />
   <label for="pword">Password</label>
   <input type="text" name="pword" id="pword" value="" /> <br /> 
     <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
</body>
</html>



The text-transform Property

 
The text-transform property allows you to specify the case for the content of an element. 
Value       Purpose
none        No change should take place
capitalize  The first letter of every word should be capitalized
uppercase   The entire content of the element should be uppercase
lowercase   The entire content of the element should be lowercase
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/text_transform&oldid=4947»