HTML/CSS/Style Basics/measurement

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

Absolute Units

 
Unit       Full Name
pt         A point
in         An inch
cm         A centimeter
pc         A pica
mm         A millimeter



Absolute vs. Relative Measurements

 
<html>
<head>
<title>Absolute vs. Relative Measurements</title>
<style type="text/css">
h1.absolute {font-size: 24pt; margin-left: 1.5in; margin-right: 1.5in; text-indent: .5in;}
h1.relative {font-size: 3.2em; margin-left: 15%; margin-right: 15%; text-indent: 5%;}
</style>
</head>
<body>
<h1 class="absolute">This headline uses all absolute measurements.</h1>
<h1 class="relative">This headline uses all relative measurements.</h1>
</body>
</html>



A negative margin

 
<!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" media="all">
            body {
                margin: 0;
            }        
            div {
                font-size: 24pt;
                width: 100%;
                color: white;
                background: black;
                margin: -10px;
            }
        </style>
    </head>
    <body>
            <div>
                This div stretches across the whole window and has a negative margin.
            </div>
    </body>
</html>



Comparing em to Pixels

 
<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Em Measurement Comparison to Pixels</title>
        <style type="text/css">
            p {
                background: pink;
                border: 1px solid black;
            }
            p#em-measurement {
                width: 12em;
                padding: 1em;
            }
            p#px-measurement {
                width: 192px;
                padding: 16px;
            }
        </style>
    </head>
    <body>
        <p id="em-measurement">
            This paragraph is 12em wide, with a 1em padding.
        </p>
        <p id="px-measurement">
            This paragraph is 192 pixels wide, with 16 pixels of
            padding.
        </p>
    </body>
</html>



Different measures

 

<?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>Different measures</title>
  <style type="text/css">
    body {
      font-size: 12px;
    }
    h1 { 
      font: bold 1em/1.5em Georgia, serif;
      margin: 1em 0 0 0;
    }
    p {
      font: 1em/1.5em Georgia, serif;
      margin: 1em 0 0 0;
    }
    .one {
      margin: 0.5em 0 0 0;
      width: 28em;
    }
    .two {
      width: 33em;
    }
    .three {
      width: 38em;
    }
  </style>
</head>
<body>
  <h1>Georgia: 28em, 33em & 38em</h1>
  <p class="one">
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  <p class="two">
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  <p class="three">
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</body>
</html>



em is relative to the font size

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> em measurement </title>
        <style type="text/css" media="all">
            body {
                border: 1em solid black;
                margin: 0;
                padding: 10px;  
            }       
            div {
                font-size: 24px;
                height: 3em;
                border: 1em solid black;
            }
        </style>
    </head>
    <body>
        The body"s border is 1em thick. 
        <div>
            This font is 24 pixels tall and this div is 3 ems tall, 
            which results in a div 72 pixels tall (3 * 24 = 72). Its 
            border is 1em thick, or 24 pixels thick.
        </div>
    </body>
</html>



font-size: 1in

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> inch measurement </title>
        <style type="text/css" media="all">
          p {
            margin: 0;
          font-size: 1in;
      }

        </style>
    </head>
    <body>
      <p>
            This text is <em>supposed</em> to be one inch tall.
        </p>
    </body>
</html>



font-size with various measurements

 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
p {
  font-family: arial;
  font-size: 12pt;
}
p.px {
  font-size: 12px;
}
p.pt {
  font-size: 12pt;
}
p.pc {
  font-size: 2pc;
}
p.in {
  font-size: 0.5in;
}
p.cm {
  font-size: 1cm;
}
p.mm {
  font-size: 12mm;
}
p.em {
  font-size: 1.5em;
}
p.ex {
  font-size: 1.5ex;
}
</style>
</head>
<body>
<h1>Lengths</h1>
<p class="px">The length used here is 12 px</p>
<p class="pt">The length used here is 12 pt</p>
<p class="pc">The length used here is 2 pc</p>
<p class="in">The length used here is 0.5in</p>
<p class="cm">The length used here is 1cm</p>
<p class="mm">The length used here is 12mm</p>
<p class="em">The length used here is 1.5em</p>
<p class="ex">The length used here is 1.5ex</p>
</body>
</html>



inch measurement

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> inch measurement </title>
        <style type="text/css" media="all">
          body {
            font-size: 10pt;
            color: white;
            text-align: center;
          }
        
          div {
            margin: 5px;
            background: black;
          }
        
            div#inches {
              width: 1in;
          height: 1in;
      }
      div#pixels {
        width: 96px;
        height: 96px;
      }
        </style>
    </head>
    <body>
            <div id="inches">
              &lt;--1in--&gt;
            </div>
            <div id="pixels">
              &lt;--96px--&gt;
            </div>
    </body>
</html>



inch vs pixel

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> inch measurement </title>
        <style type="text/css" media="all">
          body {
            font-size: 10pt;
            color: white;
          }
        
          div {
            margin: 5px;
            background: black;
          }
        
            div#inches {
              width: 1in;
          height: 1in;
      }
      div#pixels {
        width: 96px;
        height: 96px;
      }
        </style>
    </head>
    <body>
            <div id="inches">
              &lt;--1in--&gt;
            </div>
            <div id="pixels">
              &lt;--96px--&gt;
            </div>
    </body>
</html>



one inch tall

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> inch measurement </title>
        <style type="text/css" media="all">
          p {
            margin: 0;
          font-size: 1in;
      }
        </style>
    </head>
    <body>
      <p>
            <em>AAA</em> one inch tall.
        </p>
    </body>
</html>



percentage measurement width

 
<!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" media="all">
          body {
            margin: 0;
          }
        
          div {
            width: 100%;
            color: white;
            background: black;
          }
        </style>
    </head>
    <body>
            <div>
              This div stretches across the whole window.
            </div>
    </body>
</html>



Percentages are more flexible because they can scale to the viewport.

 
<!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">
.container{
    width: 800px;
    height: 800px;
    background: pink;
}
* .box {
  float: right;
  overflow: auto;
  visibility: visible;
  width: auto;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;
}
* .small {
    float: left;
    right: 200px;
    width:  50%;
    height: 300px;
    background: yellow;  
}
</style>
</head>
<body>
  <div class="container"> 
    <div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div> 
    <div class="box">this is a test</div> 
  </div> 
</body>
</html>



Relative size font-size: .75em

 
<?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>
      <title>User Styles</title>
      <style type = "text/css">
         .note { 
             font-size: .75em 
          }
      </style>
   </head>
   <body>
      <p>this is a test. </p>
      <p class = "note">this is a test. </p>
   </body>
</html>



Relative Units

 
px      A pixel is the smallest unit of resolution.
em      An em unit corresponds directly to the font size of the reference element.
ex      The ex should be the height of a lowercase x.



Relative units giving rise to unequal side margins

 
<?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>Relative units giving rise to unequal side margins</title>
  <style type="text/css">
    p { 
      font-size: 1em;
      margin: 0 0 0 2em;
    }
    h1 { 
      font-size: 1.5em;
      margin: 0 0 0 2em;
    }    
  </style>
</head>
<body>
  <div>
    <h1>A heading</h1>
    <p>Some body text</p>
  </div>
</body>
</html>



Testing 96 DPI Equals an Inch

 
<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Pixels to Inches</title>
        <style type="text/css">
            div {
                background: gray;
                border: 1px solid black;
                color: white;
                font: 9px monospace;
                margin: 15px;
            }
            div#inches {
                width: 1in;
                height: 1in;
            }
            div#pixels {
                width: 96px;
                height: 96px;
            }
        </style>
    </head>
    <body>
        <div id="inches">&lt;-- 1 Inch --&gt;</div>
        <div id="pixels">&lt;-- 96 Pixels --&gt;</div>
    </body>
</html>



The body"s border is 1em thick

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> em measurement </title>
        <style type="text/css" media="all">
          body {
            border: 1em solid black;
            margin: 0;
            padding: 10px;  
          }       
            div {
                font-size: 24px;
                height: 3em;
                border: 1em solid black;
            }
        </style>
    </head>
    <body>
        This is a test. 
        <div>
            This font is 24 pixels tall and this div is 3 ems tall, 
            which results in a div 72 pixels tall (3 * 24 = 72). Its 
            border is 1em thick, or 24 pixels thick.
        </div>
    </body>
</html>



This font is 1.2 smaller than the default size, or pixels.

 
<!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>font-size</title>
        <style rel="stylesheet" type="text/css">
body {
    font-size: medium;
}
p#smaller {
    font-size: smaller;
}
p#smaller span {
    font-size: 12px;
}
span {
    background: mistyrose;
}        
        </style>
    </head>
    <body>
        <p id="smaller">
            This font is 1.2 smaller than the default size, or pixels.
            <span>this is a test. </span>
        </p>
    </body>
</html>



This font is 24 pixels tall and this div is 3 ems tall

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> em measurement </title>
        <style type="text/css" media="all">
            div {
                font-size: 24px;
                height: 3em;
                border: 1em solid black;
            }
        </style>
    </head>
    <body>
        <div>
            This font is 24 pixels tall and this div is 3 ems tall, 
            which results in a div 72 pixels tall (3 * 24 = 72). Its 
            border is 1em thick, or 24 pixels thick.
        </div>
    </body>
</html>



This paragraph has a 1 pixel thick, solid black border around it.

 

<!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 {
            border: 1px solid black;
        }
            </style>
        </head>
        <body>
      <p>
          This is a test. This is a test. 
      </p>
        </body>
    </html>



This paragraph has a 200 pixel width and 10 pixels of padding

 
<!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#paragraph-1 {
            padding: 10px;
            width: 200px;
            border: 1px solid black;
            margin: 10px;
            background: gray;
        }
            </style>
        </head>
        <body>
      <p id="paragraph-1">
          this is a test. 
      </p>
        </body>
    </html>



Units of Length and Percentage

 

Unit  Definition                                                           Example
em    relative to the height of the font used in the element               h1 {margin:0.5em}
ex    relative to the height of the character "x" for                      h2 {margin: 1ex} 
      the font used by the element
  
px    size based on the number of screen pixels                            p {font-size:12px}
in    in for inches (1 in = 2.54 cm)                                       p {font-size: 0.5in}
cm    cm for centimetres                                                   p {font-size: 0.3cm}
mm    mm for millimetres                                                   p {font-size:3mm}
pt    pt for points (1pt = 1/72 inches)                                    p {font-size:12pt}
pc    pc for picas (1pc= 12 points)                                        p {font-size:1pc}
%     a percentage value relative to the value of the parent element,      p {line-height:120%} 
      depending on the properties used



width:100% stretches an element to the width of its parent.

 
<!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">
.container{
    width: 800px;
    height: 800px;
    background: pink;
}
* .box {
  float: right;
  overflow: auto;
  visibility: visible;
  width: auto;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;
}
* .small {
    float: left;
    right: 200px;
    width:  100%;
    height: 300px;
    background: yellow;  
}
</style>
</head>
<body>
  <div class="container"> 
    <div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div> 
    <div class="box">this is a test</div> 
  </div> 
</body>
</html>



width: size an element by assigning pixels, ems, a percentage, or another fixed measurement to width.

 
<!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">
.container{
    width: 800px;
    height: 800px;
    background: pink;
}
* .box {
  float: right;
  overflow: auto;
  visibility: visible;
  width: auto;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;
}
* .small {
    float: left;
    right: 200px;
    width:  20em;
    height: 300px;
    background: yellow;  
}
</style>
</head>
<body>
  <div class="container"> 
    <div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div> 
    <div class="box">this is a test</div> 
  </div> 
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/measurement&oldid=5941»