HTML/CSS/CSS Attributes and Javascript Style Properties/letter spacing

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

letter-spacing: 2px

 
<!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">
p {
    font-family: Verdana, arial, helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    word-spacing: 10px;
}
</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>



"letter-spacing" Example

    
<html>
<body>
<p id="myP">This is a sample text.</p>
<input type="button" 
       value="Set letterSpacing to 0.5mm" 
       onclick="myP.style.letterSpacing="0.5mm"">
<input type="button" 
       value="Set letterSpacing to 1mm" 
       onclick="myP.style.letterSpacing="1mm"">
<input type="button" 
       value="Set letterSpacing to normal" 
       onclick="myP.style.letterSpacing="normal"">
</body>
</html>



letter-spacing (negative)

 
<!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 {
          letter-spacing: -2px;
      }
        </style>
    </head>
    <body>
    <p>
        Two pixels of space have been subtracted from between each letter.
    </p>
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/letter_spacing&oldid=4721»