Typografie na webu – velikost a odsazení jednotlivých elementů

1. října 2005

•

Ukázka definice typografických pravidel.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Owen Briggs. Bližší popis najdete v článku Sane CSS Sizes.

CSS

*
{
margin: 0;
padding: 0;
}/*tímto si ušetříte hodně problémů pokud si chcete sami nadefinovat marginy a paddingy u jednotlivých elementů*/
body
{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
color: #000;
background-color: #fff;
}
#obsah
{
margin: 0em;
padding: 4em 6em 2em 6em;
}
.uzkysloupec1
{
width: 50%;
line-height: 1.3em;
}
.uzkysloupec2
{
width: 50%;
line-height: 1.5em;
}
/*typografie*/
a
{
text-decoration: none;
font-weight: bold;
color: #000;
}
a:link
{
}
a:visited
{
}
a:active
{
}
a:hover
{
text-decoration: underline;
}
h1
{
font-size: 2.0em;
font-weight: normal;
margin-top: 0em;
margin-bottom: 0em;
}
h2
{
font-size: 1.7em;
margin: 1.2em 0em 1.2em 0em;
font-weight: normal;
}
h3
{
font-size: 1.4em;
margin: 1.2em 0em 1.2em 0em;
font-weight: normal;
}
h4
{
font-size: 1.2em;
margin: 1.2em 0em 1.2em 0em;
font-weight: bold;
}
h5
{
font-size: 1.0em;
margin: 1.2em 0em 1.2em 0em;
font-weight: bold;
}
h6
{
font-size: 0.8em;
margin: 1.2em 0em 1.2em 0em;
font-weight: bold;
}
img
{
border: 0;
}
ol, ul, li
{
list-style: none;
font-size: 1.0em;
line-height: 1.8em;
margin-top: 0.2em;
margin-bottom: 0.1em;
}
p
{
font-size: 1.0em;
line-height: 1.8em;
margin: 1.2em 0em 1.2em 0em;
}
li > p
{
margin-top: 0.2em;
}
pre
{
font-family: monospace;
font-size: 1.0em;
}
strong, b
{
font-weight: bold;
}
table, th, td
{
font-size: 1em;
border:1px solid black;
}

XHTML

<html>
<body>
<div id=“obsah“>
<h1>Nadpis 1</h1>
<h2>Nadpis 2</h2>
<h3>Nadpis 3</h3>
<h4>Nadpis 4</h4>
<h5>Nadpis 5</h5>
<h6>Nadpis 6</h6>
<ul>
<li>První odrážka </li>
<li>Druhá odrážka
<ul>
<li>První pododrážka</li>
<li>Druhá pododrážka</li>
<li>Třetí pododrážka</li>
<li>Čtvrtá pododrážka</li>
</ul>
</li>
<li>Třetí odrážka</li>
</ul>
<pre>Předformátovaný text, který se
zalamuje.</pre>
<p>
klasický odstavec s <em>kurzívou</em> a <strong>tučným</strong> písmem.
</p>
<p class=“uzkysloupec1″>
Tento odstavec je určen pro úzké sloupce, díky vyššímu řádku se lépe čte
</p>
<p class=“uzkysloupec2″>
Obdoba předchozího odstavce
</p>
<table>
<tr><td>Buňka 1</td><td>Buňka 2</td></tr>
<tr><td>Buňka 3</td><td>Buňka 4</td></tr>
</table>
</div>
</body>
</html>