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

---

<!--#include file="../inc/navstuff.asp" -->
Om vi sätter in följande STYLE i ett dokument
<div class=code>
<STYLE TYPE="text/css"><br>
<!--<br>
    A { text-decoration:none; }<br>
--><br>
</STYLE>
</div>
<p>
kommer samtliga <A href=...> att bli formaterade utan understrykning.<p>
Detta är oftast bara bra men det kan ju hända att vi i vissa situationer vill ha understrykningen kvar.<p>
Vi har således behov av att kunna specificera att en viss text skall ha en viss
formatering.<p>
För detta har vi två metoder:
<ol>
<li>CLASS</li>
<li>ID</li>
</ol>
<p>
<h3>Class som selektor:</h3>
Nedan är en style som använder sig av CLASS. Observera punkten före ordet "viktigt"
<div class=code>
<STYLE TYPE="text/css"><br>
<!--<br>
    <b>.</b>viktigt { <br>
        color: red;<br>
        font-weight: bold;<br>
        text-decoration: underline;<br>
     }<br>
--><br>
</STYLE>
</div>
<p>
Vi kan då använda denna inställning i HTML koden på följande sätt:
<p>
<div class=code>
<P class="viktigt">Detta är en viktig text</P>
</div>
<p>
vilket ger:<p>
<div class=res>
<P style="color: red;font-weight: bold;text-decoration: underline;">Detta är en viktig text</P>
</div>

<h3>ID som selektor:</h3>
Nedan är en style som använder sig av ID. Observera # före ordet exempel
<div class=code>
<STYLE TYPE="text/css"><br>
<!--<br>
    <b>#</b>exempel { <br>
        color: blue;<br>
        font-weight: bold;<br>
        font-size: 24pt;<br>
     }<br>
--><br>
</STYLE>
</div>
<p>
Vi kan då använda denna inställning i HTML koden på följande sätt:
<p>
<div class=code>
<P ID="exempel">Detta är ett exempel på CSS</P>
</div>
<p>
vilket ger:<p>
<div class=res>
<P style="color: blue;font-weight: bold;font-size: 24pt;">Detta är ett exempel på CSS</P>
</div>
Man kan oftast kombinera dessa två metoder om man vill
<p>
<div class=code>
<STYLE TYPE="text/css"><br>
<!--<br>
    <b>.</b>normal { <br>
        color: blue;<br>
        font-size: 24;<br>
     }<br>
    <b>#</b>speciell { <br>
        font-weight: bold;<br>
     }<br>
--><br>
</STYLE>
</div>
<STYLE TYPE="text/css">
<!--
     .normal {
         color: blue;
         font-size: 24;
      }
     #speciell {
         font-weight: bold;
      }
-->
</STYLE>
<p>
<div class=code>
<p class="normal">Detta är normal</p><br>
<p ID="speciell">Detta är speciell</p><br>
<p class="normal" ID="speciell">Denna är både normal och speciell</p>
</div>
<p>Vilket ger<p>
<div class="res">
<p class="normal">Detta är normal</p>
<p ID="speciell">Detta är speciell</p>
<p class="normal" ID="speciell">Denna är både normal och speciell</p>
</div><p>
<p>
Om inställningarna motsäger varandra, t.ex om bägge skulle ha haft ett typsnittsnamn
så kommer den senare att vara den som används.<p>

Om vi har många olika tags som samtliga skall ha samma inställningar kan dessa grupperas. Observera kommat mellan H1, H2 och H3<p>
<div class="code">
<STYLE TYPE="text/css"><br>
<!--<br>
    H1, H2, H3 { font-family:Tahoma; color:indianred; }<br>
--><br>
</STYLE>
</div>
<p>
Detta gör att H1, H2 och H3 samtliga får en typsnittsinställning och en färg<p>
Vi kan även "krångla till det ytterligare" med följande inställning observera att det inte är ett komma mellan H4 och I
<p>
<div class="code">
<STYLE TYPE="text/css"><br>
<!--<br>
    H4 I { color:red; }<br>
--><br>
</STYLE>
</div>
Detta ger oss följande:<p>
<STYLE TYPE="text/css">
<!--
     H4 I { color:red; }
-->
</STYLE>
Vi kan då skriva följande<p>
<div class=code>
<H4>En vanlig H4</H4><br>
<I>Vanlig italic</I><br>
<H4>Men om jag sätter <I>Italic</i> i en H4 så händer detta</H4>
</div>
<p>
Vilket ger
<p>
<div class=res>
<H4>En vanlig H4</H4>
<I>Vanlig italic</I>
<H4>Men om jag sätter <I>Italic</i> i en H4 så händer detta</H4>
</div><p>
Det vill säga att I formateras om den finns i en H4 men inte annars...



<!--#include file="../inc/footer.asp" -->