HTML/CSS/Style Basics/measurement — различия между версиями

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

Текущая версия на 11:17, 26 мая 2010

Absolute Units

   <source lang="html4strict">

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

</source>
   
  


Absolute vs. Relative Measurements

   <source lang="html4strict">

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

This headline uses all absolute measurements.

This headline uses all relative measurements.

</body> </html>

</source>
   
  


A negative margin

   <source lang="html4strict">

<!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>
               This div stretches across the whole window and has a negative margin.
   </body>

</html>

</source>
   
  


Comparing em to Pixels

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

This paragraph is 12em wide, with a 1em padding.

This paragraph is 192 pixels wide, with 16 pixels of padding.

   </body>

</html>

</source>
   
  


Different measures

   <source lang="html4strict">

<?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>

Georgia: 28em, 33em & 38em

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.

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.

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.

</body> </html>

</source>
   
  


em is relative to the font size

   <source lang="html4strict">

<!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. 
           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.
   </body>

</html>

</source>
   
  


font-size: 1in

   <source lang="html4strict">

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

This text is supposed to be one inch tall.

   </body>

</html>

</source>
   
  


font-size with various measurements

   <source lang="html4strict">

<?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>

Lengths

The length used here is 12 px

The length used here is 12 pt

The length used here is 2 pc

The length used here is 0.5in

The length used here is 1cm

The length used here is 12mm

The length used here is 1.5em

The length used here is 1.5ex

</body> </html>

</source>
   
  


inch measurement

   <source lang="html4strict">

<!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>
             <--1in-->
             <--96px-->
   </body>

</html>

</source>
   
  


inch vs pixel

   <source lang="html4strict">

<!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>
             <--1in-->
             <--96px-->
   </body>

</html>

</source>
   
  


one inch tall

   <source lang="html4strict">

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

AAA one inch tall.

   </body>

</html>

</source>
   
  


percentage measurement width

   <source lang="html4strict">

<!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>
             This div stretches across the whole window.
   </body>

</html>

</source>
   
  


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

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

this is a test.
this is a test. this is a test. this is a test.
this is a test

</body> </html>

</source>
   
  


Relative size font-size: .75em

   <source lang="html4strict">

<?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>

this is a test.

this is a test.

  </body>

</html>

</source>
   
  


Relative Units

   <source lang="html4strict">

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.

</source>
   
  


Relative units giving rise to unequal side margins

   <source lang="html4strict">

<?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>

A heading

Some body text

</body> </html>

</source>
   
  


Testing 96 DPI Equals an Inch

   <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>
       <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>
<-- 1 Inch -->
<-- 96 Pixels -->
   </body>

</html>

</source>
   
  


The body"s border is 1em thick

   <source lang="html4strict">

<!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. 
           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.
   </body>

</html>

</source>
   
  


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

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

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

   </body>

</html>

</source>
   
  


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

   <source lang="html4strict">

<!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>
           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.
   </body>

</html>

</source>
   
  


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

   <source lang="html4strict">

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

This is a test. This is a test.

       </body>
   </html>
</source>
   
  


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

   <source lang="html4strict">

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

this is a test.

       </body>
   </html>
</source>
   
  


Units of Length and Percentage

   <source lang="html4strict">

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
</source>
   
  


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

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

this is a test.
this is a test. this is a test. this is a test.
this is a test

</body> </html>

</source>
   
  


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

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

this is a test.
this is a test. this is a test. this is a test.
this is a test

</body> </html>

</source>