в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:17:18Z

1 версия

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

==Different line height 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">
body {
font-size: 12px;
}
p {
width: 400px;
}
.one {
line-height: normal;
}
.two {
line-height: 18px;
}
.three {
line-height: 1.5em;
}
.four {
line-height: 1.9ex;
}
</style>
</head>
<body>
<p class="one">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p class="two">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p class="three">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p class="four">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</body>
</html>
</source>

==Examples of font-size and line-height==



<source lang="html4strict">

<!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>Examples of font-size and line-height</title>
<style type="text/css">
body {
font-size: 12px;
}
h1 {
font-size: 1em;
line-height: 1.5;
font-weight: bold;
margin: 1em 0 0 0;
}
p {
margin: 0;
width: 33em;
}
p.one {
font-size: 1em;
line-height: 1.5em;
}
p.two {
font-size: 1.2em;
line-height: 1.5em;
}
</style>
</head>
<body>
<h1>Size: 1em, line-height: 1.5em</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. 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>
<h1>Size: 1.2em, line-height: 1.5em</h1>
<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. 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>

==Interlinear space==



<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>Interlinear space</title>
<style type="text/css">
body {
font-size: 12px;
}
h1 {
font: Bold 1em/1.5em Georgia, serif;
margin: 2em 0 0 0;
padding: 0;
}
p {
margin: 0;
width: 33em;
}
.with-space {
line-height: 1.5em;
}
</style>
</head>
<body>
<h1>Default (line-height unspecified)</h1>
<p>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>
<h1>line-height: 1.5em</h1>
<p class="with-space">
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>

==line-height: 150%; assigns 150% of the font-size to line-height.==



<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>Set text indent to 37%</title>
<style type="text/css">
p {
text-indent: 37%;
line-height: 150%;
}
</style>
</head>
<body>
<p>
This is test. This is test. This is test. This is test. This is test.
This is test. This is test. This is test. This is test. This is test.
This is test. This is test. This is test. This is test. This is test.
</p>
</body>
</html>
</source>

==Padding sets apart text to emphasize it and line-height==



<source lang="html4strict">

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
* .padded-mild {
padding-left: 1em;
padding-right: 1em;
line-height: 1em;
}
* .padded-emphasized {
padding-left: 2em;
padding-right: 2em;
line-height: 2em;
}
* .padded-strong {
padding-left: 3em;
padding-right: 3em;
line-height: 3em;
}
* .padded-extreme {
padding-left: 4em;
padding-right: 4em;
line-height: 4em;
}
</style>
</head>
<body>

<p><br /><span class="padded-mild">a letter...</span>→
<br /><span class="padded-emphasized">a word...</span>→
<br /><span class="padded-strong">a phrase...</span>→
<br /><span class="padded-extreme">a paragraph...</span>→ etc.
</p>
</body>
</html>
</source>

==Proportional line heights==



<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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>A basic example with proportional line heights</title>
<style type="text/css" media="screen">
html {
font-size: 100%;
}
body {
padding: 20px;
font-size: 62.5%;
}
#wrapper {
margin: 0 auto;
width: 400px;
}
body {
line-height: 1.5;
}

h1 {
font-size: 2.5em;
}

h2 {
font-size: 2em;
}

h3 {
font-size: 1.2em;
margin-top: 1.65em;
}
p {
font-size: 1.1em;
margin-bottom: 1.1em;
}

h3, p {
margin-left: 1em;
}

</style>
</head>
<body>
<div id="wrapper">
<h1>Article heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<h2>Curabitur sit amet risus</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<h3>Praesent rutrum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<h3>Habitant morbid</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
</div>
</body>
</html>
</source>

==Set line height to 1.5==



<source lang="html4strict">

<!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" lang="en">
<head>
<title></title>
<style type="text/css">
body {
font-size: 62.5%;
margin: 10% 10% 20% 10%;
}
h1 {
font-size: 2.5em;
width: 66.6%;
margin: 0 0 0.1em 0;
}
p {
margin: 0 0 1em 0;
font-size: 1.2em;
line-height: 1.5;
}
</style>
</head>
<body>
<div id="frame">
<h1>Header 1</h1>

<p>This is a test.</p>
</div>
</body>
</html>
</source>

==Set line height to 1em==



<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>Set text indent to 37%</title>
<style type="text/css">
p {
text-indent: 37%;
line-height: 1em;
}
p span.initcap {
font-size: 6em;
line-height: 0.6em;
font-weight: bold;
}
</style>
</head>
<body>
<p><span class="initcap">O</span>nline. This is test. This is test.
This is test. This is test. This is test. This is test. This is test.
This is test. This is test. This is test. This is test. This is test.
This is test. This is test. This is test. This is test. This is test.
</p>
</body>
</html>
</source>

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

HTML/CSS/Text/line height - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия