Källkoden för /anders.enges/css/css5c.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>border</td>
      <td>
      Skall specificeras:<br>
        rambredd<br>
        ramstil<br>
        ramfärg<br><br>
      Se förklaringarna för:<br>
        border-width<br>
        border-style<br>
        border-color
      </td>
      <td>
      { border:0.2cm groove orange }<br>
      { border:none }<br>
      </td>
</tr>
<tr valign="top">
      <td>border-width</td>
      <td>
      <dl>
      <dd style="border-style:solid; border-width:medium">medium</dd>
      <dd style="border-style:solid; border-width:thin">thin</dd>
      <dd style="border-style:solid; border-width:thick">thick</dd>
      </dl>
      Eller<br>
        Ange måttet. Tex 10pt
      </td>
      <td>
      { border-width:0.2cm }<br>
      { border:none }<br>
      Gäller block tags
      </td>
</tr>
<tr valign="top">
      <td>border-style</td>
      <td>
      <dl>
      <dd style="border-style:none">none</dd><br>
      <dd style="border-style:dotted">dotted</dd>
      <br>
      <dd style="border-style:dashed">dashed</dd>
      <br>
      <Dd style="border-style:solid">solid</dd>
      <br>
      <dd style="border-style:double">double</dd>
      <br>
      <dd style="border-style:groove">groove</dd>
      <br>
      <dd style="border-style:ridge">ridge</dd>
      <br>
      <dd style="border-style:inset">inset</dd>
      <br>
      <Dd style="border-style:outset">outset</dd>
      </dl>
      </td>
      <td>
      { border-style: groove }<br>
      </td>
</tr>
<tr valign="top">
      <td>border-color</td>
      <td>
      Ange en färg
      </td>
      <td>
      { border-color: red }<br>
      </td>
</tr>
<tr valign="top">
      <td>border-bottom<br>
      border-left<br>
      border-right<br>
      border-top<br>
      border-left-color<br>
      ...</td>
      <td>
      Samma regler som gäller för <b>border</b>
      <br>går även att tillämpa för de enskilda linjerna<br>
      för en ram<br>
      Se exemplen
      </td>
      <td>
      { border-left-color: red }<br>
      { border-bottom: 5pt ridge blue }<br>
      { border-right-style: ridge }<br>
      </td>
</tr>
<tr valign="top">
      <td>
      margin
      </td>
      <td>
      1 till 4 mått<br>
      Dessa kan anges i någon av <br>
      måtteheterna i CSS<br><br>
      Om man anger:<br>
      <b>Ett</b> mått används det för <b>alla</b> marginaler<br>
      <b>Två</b> mått används det första för top och botten <br>
      och det andra för vänster och högermarginal<br>
      <b>Tre</b> mått betyder topp, vänster/höger och botten<br>
      <b>Fyra</b> betyder topp, höger, botten och vänster<br>
      <br>
      Marginalerna kan vara negativa, <br>
      men inte för topp och botten på inline element<br>
      <br>
      För icke block tags som t.ex SPAN måste<br>
      <b>position: absolute; </b> sättas för att kunna sätta<br>
      marginaler.
      </td>
      <td>
      { margin: 1cm }<br>
      { margin: 1cm 0.5cm 1cm 0cm }<br>
      </td>
</tr>
<tr valign="top">
      <td>
      margin-top<br>
      margin-bottom<br>
      margin-left<br>
      margin-right
      </td>
      <td>
      Man kan även specificera marginalkerna<br>
      individuellt...
      </td>
      <td>
      { margin-left: 1cm }<br>
      </td>
</tr>
<tr valign="top">
      <td>
      padding
      </td>
      <td>
      Bestämmer den <b>inre</b> marginalen <br>
      Om vi har en ruta med text i så bestämmer<br>
      marginalerna avståndet från rutan till övriga<br>
      element i dokumentet<br>
      <br>
      paddin å andra sidan bestämmer avståndetr <br>
      mellan rutans ram och dess innehåll<br>
      <br>
      Samma regler för mått gäller som för <b>margin</b>
      </td>
      <td>
      { padding: 1cm }<br>
      </td>
</tr>
<tr valign="top">
      <td>
      padding-top<br>
      padding-bottom<br>
      padding-left<br>
      padding-right
      </td>
      <td>
      Man kan även betämma <b>padding</b> individuellt
      </td>
      <td>
      { padding-left: 1cm }<br>
      </td>
</tr>
<tr valign="top">
      <td>
      clear
      </td>
      <td>
      none<br>
      left<br>
      right<br>
      both<br>
      <br>
      Se <b>float</b> för närmare beskrivning
      </td>
      <td>
      { clear: left }<br>
      </td>
</tr>
<tr valign="top">
      <td>
      float
      </td>
      <td>
      none<br>
      left<br>
      right<br>
      <br>
      Bestämmer på vilken sida texten skall flyta<br>
      för t.ex bilder. <br>
      Gör samma sak som<br>
      <IMG SRC="bild.gif" <b>ALIGN="left"</b>><br>
      men man kan istället skriva<br><br>
      <STYLE TYPE="text/css"><br>
      <!--<br>
     IMG<br>
        {<br>
           float: left <br>
        }<br>
      --><br>
      </STYLE><br>
      <br>
      om man vill att alla bilder skall komma till vänster<br>
      <br>
      Om man vill att en text alltid skall komma <br>
      under eventuella bilder kan man sätta<br>
      <b>clear: both </b> för t.ex. alla P
</td>
<td> </td>
</tr>
</table>
<!--#include file="../inc/footer.asp" -->