в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:17:25Z

1 версия

Новая страница

==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>
<h1 class="absolute">This headline uses all absolute measurements.</h1>
<h1 class="relative">This headline uses all relative measurements.</h1>
</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>
<div>
This div stretches across the whole window and has a negative margin.
</div>
</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>
<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>
</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>
<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>
</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.
<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>
</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>
<p>
This text is <em>supposed</em> to be one inch tall.
</p>
</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>
<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>
</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>
<div id="inches">
<--1in-->
</div>
<div id="pixels">
<--96px-->
</div>
</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>
<div id="inches">
<--1in-->
</div>
<div id="pixels">
<--96px-->
</div>
</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>
<p>
<em>AAA</em> one inch tall.
</p>
</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>
<div>
This div stretches across the whole window.
</div>
</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>
<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>
</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>
<p>this is a test. </p>
<p class = "note">this is a test. </p>
</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>
<div>
<h1>A heading</h1>
<p>Some body text</p>
</div>
</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>
<div id="inches"><-- 1 Inch --></div>
<div id="pixels"><-- 96 Pixels --></div>
</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.
<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>
</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>
<p id="smaller">
This font is 1.2 smaller than the default size, or pixels.
<span>this is a test. </span>
</p>
</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>
<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>
</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>
<p>
This is a test. This is a test.
</p>
</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>
<p id="paragraph-1">
this is a test.
</p>
</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>
<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>
</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>
<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>
</source>

← Предыдущая	Версия 09:21, 26 мая 2010
(нет различий)

HTML/CSS/Style Basics/measurement - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия