Källkoden för /anders.enges/css/css5a.asp

---

<!--#include file="../inc/navstuff.asp" -->
<table border=1>
<tr bgcolor="DCDCDC" valign="top">
      <td>Inställning</td>
      <td>Alternativ</td>
      <td>Exempel</td>
</tr>
<tr valign="top">
      <td>font</td>
      <td>Se:<br>
      font-style<br>
      font-variant<br>
      font-weight<br>
      font-size<br>
      line-height<br>
      font-family<br></td>
      <td>{ font:italic 12pt Arial }</td>
</tr>
<tr valign="top">
      <td>font-style</td>
      <td><span style="font-style: normal">normal</style><br>
      <span style="font-style: normal">italic</span></td>
      <td>{ font-style:italic}</td>
</tr>
<tr valign="top">
      <td>font-variant</td>
      <td><span style="font-variant: normal">normal</span><br>
      <span style="font-variant: small-caps">small-caps</span></td>
      <td>{ font-style:small-caps }</td>
</tr>
<tr valign="top">
      <td>font-weight</td>
      <td><span style="font-weight: normal">normal</span><br>
      <span style="font-weight: bold">bold</span><br>
      <span style="font-weight: bolder">bolder</span><br>
      <span style="font-weight: lighter">lighter</span><br>
      <span style="font-weight: 100">100</span><br>
      <span style="font-weight: 200">200</span><br>
      <span style="font-weight: 300">300</span><br>
      <span style="font-weight: 400">400</span><br>
      <span style="font-weight: 500">500</span><br>
      <span style="font-weight: 600">600</span><br>
      <span style="font-weight: 700">700</span><br>
      <span style="font-weight: 800">800</span><br>
      <span style="font-weight: 800">900</span>
      </td>
      <td>{ font-weight:bold }</td>
</tr>
<tr valign="top">
      <td>font-variant</td>
      <td><span style="font-variant: normal">normal</span><br>
      <span style="font-variant: small-caps">small-caps</span></td>
      <td>{ font-style:small-caps }</td>
</tr>
<tr valign="top">
      <td>font-size</td>
      <td>
      Absoluta storlekar:<br>
        <span style="font-size: xx-small">xx-small</span><br>
        <span style="font-size: x-small">x-small</span><br>
        <span style="font-size: small">small</span><br>
        <span style="font-size: large">large</span><br>
        <span style="font-size: x-large">x-large</span><br>
        <span style="font-size: xx-large">xx-large</span><br>
      Relativa storlekar:<br>
        <span style="font-size: smaller">smaller</span><br>
        <span style="font-size: larger">larger</span><br>
      Numeriska storlekar:<br>
        <span style="font-size: 16pt">16pt</span><br>
        <span style="font-size: 16pt">16pt</span><br>
      Procentuella storlekar:<br>
        <span style="font-size: 120%">120%</span><br>
      (<a href="css5h.asp">Se tabellen över måtteneheter i CSS</a>)
      </td>
      <td>{ font-size:16pt }</td>
</tr>
<tr valign="top">
      <td>font-family</td>
      <td>
      Exakt namn:<br>
        <span style="font-family: Arial">Arial</span><br>
        <span style="font-family: Courier">Courier</span><br>
        <span style="font-family: Comic Sans MS">Comic Sans MS</span><br>
      Generiskt namn <br>
      (browsern väljer ett som passar):<br>
        <span style="font-family: serif">serif</span><br>
        <span style="font-family: sans-serif">sans-serif</span><br>
        <span style="font-family: cursive">cursive</span><br>
        <span style="font-family: fantasy">fantasy</span><br>
        <span style="font-family: monospace">monospace</span>
      </td>
      <td>{ font-family: Arial}<br>
      { font-family: Verdana, Arial}<br>
      Genom att sätta komma mellan så <br>
      försöker browsern med det första <br>
      typsnittet om det inte fungerar
      <br>provas det andra
      </td>
</tr>
<tr valign="top">
      <td>line-height</td>
      <td>
      En måttenhet som <br>bestämmer radhöjden:<br>
      Exempelvis 20pt
      </td>
      <td>{ line-height: 20pt}<br>
      (<a href="css5h.asp">Se måtteneheter</a>)
      </td>
</tr>
<tr valign="top">
<td colspan="3">
Man kan använda <b>font</b> attributet direkt. Istället för att skriva:<br>

P<br>
  {<br>
    font-family: Times, serif;<br>
    font-size: 12pt;<br>
    line-height: 20pt;<br>
    font-weight: bold;<br>
    font-style: italic<br>
  }<br>
<p>
Kan man skriva<br>

P<br>
  {<br>
    font: bold italic 12pt/20pt Times, serif;<br>
  }<br>

</td>
</tr>
<tr valign="top">
      <td>letter-spacing</td>
      <td>
      Avståndet mellan bokstäverna<br>
      tex:<br>
      <span style="letter-spacing: 1mm">1mm</span><br>
      <span style="letter-spacing: 12px">12px</span>
      </td>
      <td>{ letter-spacing:1mm }</td>
</tr>
<tr valign="top">
      <td>text-align</td>
      <td>
      left<br>
      right<br>
      center<br>
      justyfy<br>
      </td>
      <td>{ text-align:center }<br>
      Gäller bara block tags<br>
      som BODY, DIV mmm</td>
</tr>
<tr valign="top">
      <td>text-decoration</td>
      <td>
      none   <span style="text-decoration:none">(ser ut så här)</span><br>
      underline   <span style="text-decoration:underline">(ser ut så här)</span><br>
      overline   <span style="text-decoration:overline">(ser ut så här)</span><br>
      line-through   <span style="text-decoration:line-through">(ser ut så här)</span>
      </td>
      <td>{ text-decoration:none }<br>
      Vanlig för A taggen</td>
</tr>
<tr valign="top">
      <td>text-indent</td>
      <td style="text-indent: 12pt">
      Hur mycket första raden i ett stycke skall dras in.<br>
      Ett negativt tal ger ett hängande indrag<br>
      I denna cell har jag 12 punkters indrag.
      </td>
      <td>{ text-indent: 1cm }<br>
      Endast för block tags</td>
</tr>
<tr valign="top">
      <td>text-transform</td>
      <td>
      none   <span style="text-transform:none">(Ser ut så här)</span><br>
      capitalize   <span style="text-transform:capitalize">(Ser ut så här)</span><br>
      uppercase   <span style="text-transform:uppercase">(Ser ut så här)</span><br>
      lowercase   <span style="text-transform:lowercase">(Ser ut så här)</span>
      </td>
      <td>{ text-transform:capitalize }<br>
      </td>
</tr>
<tr valign="top">
      <td>vertical-align</td>
      <td>
      baseline<br>
      sub<br>
      super<br>
      top<br>
      middle<br>
      bottom<br>
      text-top<br>
      text-bottom<br>
      (Jämför med VALIGN som t.ex TD och IMG har)
      </td>
      <td>{ vertical-align:sub }<br>
      Endats för:<br>
      COL, IMG, SPAN, TBODY, </br>
      TD, TFOOT, TH, THEAD, TR<br>
</tr>
</table>
<!--#include file="../inc/footer.asp" -->