Содержание

1 Absolute Units
2 Absolute vs. Relative Measurements
3 This headline uses all absolute measurements.
4 This headline uses all relative measurements.
5 Georgia: 28em, 33em & 38em
6 Lengths
7 A heading

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

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

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

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

  <head>
     <title>User Styles</title>
     <style type = "text/css">
        .note { 
            font-size: .75em 
         }
     </style>
  </head>
  <body>

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

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

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

HTML/CSS/Style Basics/measurement

Содержание

Absolute Units

Absolute vs. Relative Measurements

This headline uses all absolute measurements.

This headline uses all relative measurements.

A negative margin

Comparing em to Pixels

Different measures

Georgia: 28em, 33em & 38em

em is relative to the font size

font-size: 1in

font-size with various measurements

Lengths

inch measurement

inch vs pixel

one inch tall

percentage measurement width

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

Relative size font-size: .75em

Relative Units

Relative units giving rise to unequal side margins

A heading

Testing 96 DPI Equals an Inch

The body"s border is 1em thick

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

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

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

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

Units of Length and Percentage

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

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

Навигация

Поиск