HTML/CSS/Text/text transform

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

Set text-transform: capitalize for h2

   <source lang="html4strict">

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> <style type="text/css"> h2 { 

 text-transform: capitalize;

} </style> </head> <body>

Contact Form

     <form id="form1" name="form1" method="post" action="/">
   
     <label for="fmtitle" accesskey="i">Title</label>
     <select name="fmtitle" id="fmtitle">
     <option value="ms">Ms.</option>
     <option value="mrs">Mrs.</option>
     <option value="miss">Miss</option>
     <option value="mr">Mr.</option>
       </select>

       <label for="fmname" accesskey="n">Name</label>
       <input type="text" name="fmname" id="fmname" />
   
       <label for="fmemail" accesskey="e">Email</label>
       <input type="text"  name="fmemail" id="fmemail" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</label>
       <input type="text" name="fmcountry" id="fmcountry" />
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send" class="submit" />
     </form>

quid pro quo

</body> </html> 

</source>


Set text transform to uppercase

   <source lang="html4strict">

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

   <head>
       <title></title>

<style type="text/css"> body { 

background-image: url(bkgd2.jpg);
background-position: -125px 75px;
margin: 75px 75px 0 375px;

} h1, h2, h3 { 

padding-top: 0;
margin-top: 0;
text-transform: uppercase;

} </style> 

   </head>
   <body>

Header 1

Header 2

Header 3

 </body>

</html> 

</source>


You can control the case of text using CSS: Apply the text-transform Property

   <source lang="html4strict">

<!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>text-transform</title>
       <style rel="stylesheet" type="text/css">

p { 

   padding: 5px 25px;
   background: mistyrose;
   border: 1px solid orange;

} span.lower { 

   text-transform: lowercase;
   background: pink;

} span.upper { 

   text-transform: uppercase;
   background: pink;

} span.capitalize { 

   text-transform: capitalize;
   background: pink;

} 

       </style>
   </head>
   <body>

UPPERCASE TEXT LOWERCASE lowercase text uppercase, capitalize every word in a sentence. 

       </p>
   </body>

</html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Text/text_transform&oldid=5861»