Några exempel på hur du kan skifta färg både i bakgrund och text med hover kommandot. |
| Hem | sida B | sida C | sida D |
sida E |
sida F |
| sid1
sid2
sid3
sid4
sid5
sid6
sid7
sid8
sid9
sid10
sid11
sid12
sid13
sid14
sid15
sid16
sid17
sid18
sid19
sid20
sid21
sid22
sid23
sid24
sid25
sid26
sid27
sid28 |
här har vi använt <!--start av kod-->.meny1 {background-color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; color:#000000; border:double}
.meny1 a{background-color:#CCCCCC; font-family:Arial, Helvetica, sans-serif; color:#0000FF; display:block;}
.meny1 a:hover{background-color:#000000; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF}
<!--slut på kod--> I vår css fil och sedan <!--start kod--> <table class="meny1"><tr><td><a href="#">Hem</a></td><td><a href="#">sida B</a></td><td><a href="#">sida C</a></td><td><a href="#">sida D</a></td>
<td><a href="#">sida E </a></td>
<td><a href="#">sida F </a></td>
</tr>
<tr>
<td><a href="#">sida A0</a>
<a href="#">sida A1</a>
<a href="#">sida A2</a>
<a href="#">sida A3</a>
<a href="#">sida A4</a>
<a href="#">sida A5</a>
<a href="#">sida A6</a></td>
<td colspan="5">Här skriver vi text med detta kodexempel </td>
</tr></table><!--slut på kod--> I vår tabell på sidan. Lägg märke till starttaggen för table där vi skrivit <table class="meny1> . Denna tagg säger till webbläsaren att hämta utseendet för tabellen i vår css fill på raden med vit bakgrund som vi beskriver: background-color:#FFFFFF |
|
|
Sedan säger vi att fonterna vi skall använda är Arial, Helvetica, sans-serif med kommandot: font-family: Arial, Helvetica, sans-serif, vi säger att färgen på fonterna eller bokstäverna skall vara svart med kommandot color: #000000, vi har även lagt till en border eller rand runt tabellen med kommandot border:double |
|
När det sedan gäller celler där det ingår en länk, som vi beskriver med: .meny1 a , skriver vi att bakgrundsfärgen skall vara grå med kommandot background-color:#CCCCCC, bokstäverna skall vara de samma men färgen på dem skall vara blå med kommandot color:#0000FF |
|
För att sedan få vår hover effekt skriver vi på nästa rad med start .meny1 a:hover. Här säger vi att bakgrunden skall ändras till svart med kommandot background-color:#000000 och att bokstäverna då skall bli vita med kommandot color:#FFFFFF |
|
Vi har lagt upp en variant på sidan här>>> (öppnar i ett nytt fönster) |
| För att göra det enkelt har vi bara använt olika nyanser av grått. |
|
| Du kan använda många andra bakgrundsfärger som rött, orange, blått eller vad du vill. Experimentera gärna med olika färger. Det man mest använder är RGB kodade fäger i hexadecimalt. De två första tecknen är Rött, de nästa är Grönt och de sista är blått. Skall du ha en helt röd bakgrund ancänder du alltså #FF000. Vi skall lägga några exempel på denna sidan. |
Rött får du med färg koden #FF0000 vilket ger en röd bakgrund när man använder kommandot background-color:#FF0000; |
| Denna ger en gul bakgrund med background-color:#FFFF00; |
background-color:#99FF00; |
|
| Ljusblått med background-color:#CCFFFF |
background-color:#FFFFCC; |
|
| background-color:#99FFCC |
|
|
| Självklart kan du även ändra på bokstävernas färger med liknande koder. Kommandot heter color. |
Som här där vi angett färgen på texten med kommandot color:#999999 |
användbara länkar där du kan läsa mer |
cssdrive.com
tips på stylesheets med exempel på slutliga resultatet |
cssimport.com
En sida som ger inspiration |
alistapart.com
Här hittar du mycket att sätta händerna i |
codeproject.com
har många sidor med stylesheets och exempel. |
|
| | |
