byt lankar med html-skolan
Google gbghtml.se
index bilder body länkar visited div-taggen class hover menyer dreamweaver dreamweaver extensions flash gratis html editorer gratis templates css3 animation med css3 responsiv design Böcker om stylesheets Design för din blogg waybackmachine
är du nyfiken på hur din eller andra webbsidor såg ut förr? Prova waybackmachine>>>

Selektorer med vilka du kan bestämma speciella egenskaper för stycken eller element.

Vill du ha en speciell egenskap för flera avsnitt eller element på sidan får vi avgränsa egenskaperna med selektorer. Vill du, exempelvis, ha en speciell bakgrund för bara en viss tabell kan du använda selektorn id men vill du ha samma kommando på fler ställen blir du tvungen att använda kommandot class. Du skriver i din css-fil, exempelvis:

.class {background-image:url(http://www.dinhemsida.se/bilder/top.jpg); background-color:#00FFFF;}

Du byter ut adressen till var du lagt bilden. Har även lagt till background-color som gör att du även har en bakgrundsfärg. Detta gör att fler webbläsare klarar att läsa din sida.

Vi vill även att tabellen skall ha en border och en viss bredd. Detta ordnar vi med en annan class:

.table {border:thick; border-color:#0000FF; width:80%}

Där vi skriver att bordern runt denna tabell skall ha en thick(tjock) linje och att färgen på border skall vara blå(border-color:#0000FF) Vi skriver också width:80% vilket gör bredden till 80% . Fördelen med class-elementet är att du kan använda denna på flera ställen i koden. Vi anger ju vilken egenskap ett visst element i din tabell skall ha genom att ange class="namnet på .class" i den tagg som skall förändras.

När du använder class i din tabell så använder du denna typ av kod. Lägge märke till class efter table-taggen och class efter td-taggen :

<div style="overflow-x:auto;"><table class="table"><tr><td colspan="2" class="class"><a href="http://www.drivrutiner.net"><img src="knapp1.gif" width="200" height="66" alt="knapp1" border="0" /></a><a href="http://www.drivrutiner.net"><img src="knapp2.gif" width="200" height="66" alt="knapp 2" border="0" /></a><a href="http://www.drivrutiner.net"><img src="knapp3.gif" width="200" height="66" alt="knapp 3" border="0" /></a><a href="http://www.drivrutiner.net"><img src="knapp4.gif" width="200" height="66" alt="knapp 4" border="0" /></a><a href="http://www.drivrutiner.net"></a></td></tr>
<tr>
<td width="12%" class="left" valign="top"><a href="http://www.drivrutiner.net">översta länken </a>
<br/>
<a href="http://www.gbghtml.se">HTML-skolan</a>
<br/>
<a href="http://www.webbgbg.se">Webbhotell</a>
<br/>
<a href="http://www.drivrutiner.net">Drivrutiner</a>
<br/>
<a href="http://www.drivrutiner.net/host/money/index.php">Inkomster</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/books/index.php">Böcker</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/antivirus.php">Antivirus</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/dlink.php">Nätverk</a>
<br/>
<a href="http://www.drivrutiner.net/program/gratis.php">Gratis program</a>
<br/>
<a href="http://www.drivrutiner.net/program/download.php">Download</a>
<br/>
<a href="http://www.drivrutiner.net/program/bil/spel.php">Colin McRae</a>
<br/>
<a href="http://www.drivrutiner.net/program/flyg/cfs.php">MS CFS</a>
<br/>
<a href="http://www.drivrutiner.net/program/flyg/red.php">Red Baron</a>
<br/>
<a href="http://www.drivrutiner.net/program/online/spel.php">Online spel</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/datorbygg/index.php">Bygg dator</a>
<br/>
<a href="http://www.drivrutiner.net/program/kontor/office/index.php">Officemallar</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/sok.php">Språklexikon</a></td>
<td><img src="../kodtabell.gif" width="601" height="768" alt="" /></td></tr>
</table></div>

Och i vår css-fil :

.table {border:thick; border-color:#0000FF; width:80%}
.class {background-image:url(../top.jpg); background-color:#00FFFF;}
.left {background-image:url(../left.jpg); background-color:#00FFFF;}

 

Detta sätt är nästan som vår tabell med bilder som bakgrund på denna sidan.

Kolla resultatet . Titta här.

copyright © Björn Larsen citygbg.se