Torgny > CSSuppgifter
Många designers rekommenderar att man arbetar med den relativa måttenheten em när man anger storlek för text. Enheten har ett par egenheter som man kan hantera om man arbetar enligt nedanstående metoder.
Läs mer i en artikel av Richard Rutter.
<body>
<div id="content">
<h1>Boxare</h1>
<p>Lista över idrottsmän från olika länder</p>
<ol>
<li>USA</li>
<li>England</li>
<li>Japan</li>
</ol>
</div>
</body>
Defaultvärden (ingen CSS) för texten ger resultat där IE6 och Mozilla liknar varandra.
I CSS:n tar jag ner font-storleken med hjälp av procenttal till 10px. Utgångspunkten är webbläsarnas defaultvärde på 16px.
body { width:300px;
margin: 20px auto;
font-size:62.5%;}
Som synes blir texten i p-tagen behandlad på ungefär samma sätt i webbläsarna, medan h1-tagarna skiljer sig.
Nu justerar jag fontstorleken för content-tagen.
div#content {
font-size:1.8em;
}
Nu blir textstorleken 18px för brödtexten. Rubrikerna varierar fortfarande mellan webbläsarna. Ett mönster framträder: rubrikerna i IE påverkas inte av att fontstorleken ändras på omgivande tagar.
För att få överensstämmelse i rubrikerna måste dessa sättas specifikt.
h1 {font-size:2.5em;}
Nästlade element kan dock ställa till problem. Antag att vi lägger in två andra listor i vår befintliga uppräkning av länder.
<ol>
<li>USA</li>
<ul>
<li>Joe Louis</li>
<li>Rocky Marziano</li>
<ul>
<li>den ä.</li>
<li>den y.</li>
</ul>
<li>Joe Frazier</li>
</ul>
<li>England</li>
<li>Japan</li>
</ol>
Om vi därefter bestämmer en relativ storlek för li-elementen kan en kumulativ förändring uppstå i vissa läsare.
li {font-size:1.5em;}
Detta kan vi lösa om vi anger att li-element som ligger i andra li-element inte skall storleksändras.
li li {font-size: 1em;}
Slut
Januari 2009
Torgny