 |
Tips & trix |
Obs!
Alla exempel öppnas i ett nytt fönster!
1. Inledning
Det vi har lärt oss hittills är grunderna i hur man använder sig av stilmallar. Sedan måste man själv experimentera, testa och pröva sig fram, tills dess att man lärt sig använda stilmallar på ett smidigt och effektivt sätt.
När man använder stilmallar måste man vara klar över vad de skall göra. Vill man bara styra teckensnittet och teckenstorleken behöver man inte gå så långt. Men vill man detaljstyra sidan måste man skaffa sig mycket stora kunskaper.
För att underlätta lite i den här processen har jag på de tidigare sidorna gett lite tips om vad man kan göra och inte bör göra. På den här sidan beskriver jag ytterligare några sätt att skoja till det med stilmallskommandon. Sedan får var och en pröva sig fram själv.
2. Positionerade rubriker
Jag tänker börja med att visa hur man kan skapa en lite annorlunda layout för en startsida. Exemplet har jag hämtat ifrån W3Cs sidor om stylesheets och jag har behållit det i stort sett intakt.
Innan vi börjar med koden kan du ta dig en titt på hur det ser ut i praktiken >>
Hur gör man då för att åstadkomma detta? Det går att göra på olika sätt, men Håkon Lie, som arbetar vid W3C och som är den som skrivit exemplet, har gjort så här: Han har skiljt mellan inställningar för teckensnitt och färg och skapat unika identiteter för det. Sedan har han gjort samma sak med inställningar för indrag och textjustering. Det ser t.ex ut så här:
#s1 {
color: #DDD;
font: 100px Impact, sans-serif;
}
#p1 {
margin-top: -30px;
text-align: right;
}
Med s1 ställer han alltså in textfärgen och teckensnittet och med p1 ställer han in marginaler och textjusteringen. Finessen med detta kan man ju diskutera. Jag hade nog själv slagit ihop dem, i synnerhet om jag bara skulle använda inställningen vid ett enda tillfälle. Annars skulle jag skapat klasser för att på så vis kunna återanvända inställningarna.
Stilmallen hämtar han sedan i dokumentet m.h.a följande kod:
<P ID=p1><A HREF="#news"><SPAN ID=s1>What's new?</SPAN></A>
Eftersom det blir ganska mycket kod har jag lagt in hela stilmallen på en särskild sida. Där kan du se exakt hur han gjort.
Kolla hur stilmallen ser ut >>
3. Färg i formulär
Följande exempel har jag hämtat från Builder.com (>>). Det går ut på att lägga in färger i rullningslister i formulär. Det fungerar i Explorer 4 och senare för Windows, men inte för Mac-versionerna. Det fungerar dock i Netscape 6 och senare.
Koden ser ut så här:
<STYLE type="text/css">
.greySelect { background-color: #333333; font-weight: bold; }
.optionYellow { background-color: #FFCC00; }
.optionRed { background-color: #CC0000; }
.optionGreen { background-color: #336633; }
</STYLE>
I dokumentet skriver man sedan:
<FORM>
<SELECT class="whiteSelect">
<OPTION>Välj ett alternativ
<OPTION class="optionYellow">Alternativ 1</OPTION>
<OPTION class="optionRed">Alternativ 2</OPTION>
<OPTION class="optionGreen">Alternativ 3</OPTION>
<OPTION class="optionYellow">Alternativ 4</OPTION>
<OPTION class="optionRed">Alternativ 5</OPTION>
<OPTION class="optionGreen">Alternativ 6</OPTION>
</SELECT>
</FORM>
Kolla på exemplet i praktiken >>
Ett annat sätt att lägga in färg i formulär är via en stilmall som ser ut ungefär så här:
.form {
font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif;
background: #99CC99;
padding: 5px;
border-left: ridge 1px;
border-left-style: solid;
border-left-color: #009900;
border-right:ridge 1px;
border-right-style: solid;
border-right-color: #009900;
border-bottom: ridge 1px;
border-bottom-style: solid;
border-bottom-color: #009900;
border-top:ridge 1px;
border-top-style: solid;
border-top-color: #009900;
}
Koden ger ett lite roligare utseende på formuläret - eller på en ram runt ett objekt. Kolla på exemplet i praktiken >>
4. Färgen på rullningslister
Det går även att styra färgerna på rullningslisterna. Som vanligt fungerar det bara i Windows och Explorer. Exemplet är hämtat från Builder, på adressen: builder.cnet.com/webbuilding/0-7690-8-4807353-1.html
Ett problem med browserspecifika kommandon är att andra webbläsare ibland förösker tolka det som står i stället för att strunta i koden. I Netscape kan man t.ex råka ut för att länkar öppnas i nya fönster, om man försöker styra rullningslisternas utseenden. Därför skall man alltid kontrollera sidorna i så många olika webbläsare man kan innan man publicerar sina alster på nätet.
Bilden visar de möjliga inställningar som finns. Man använder egenskapen scrollbar, med ett antal möjliga tillägg. Du ser i bilden här bredvid vilka olika innebörder varje post har:
scrollbar3dLightColor
scrollbarArrowColor
scrollbarBaseColor
scrollbarDarkShadowColor
scrollbarFaceColor
scrollbarHighlightColor
scrollbarShadowColor
scroll box and scroll
scrollbarTrackColor
Möjliga värden är följande färger: none, aqua, blue, chartreuse, darksalmon, fuchsia, gold, hotpink, khaki, lightsalmon, magenta, orange, palegreen, teal, tomato och yellow.
Koden till exemplet ser ut så här:
<STYLE type="text/css">
<!--
BODY {
scrollbar-base-color: color;
scrollbar-track-color: color;
scrollbar-face-color: color;
scrollbar-highlight-color: color;
scrollbar-3dlight-color: color;
scrollbar-darkshadow-color: color;
scrollbar-shadow-color: color;
scrollbar-arrow-color: color;
}
-->
</STYLE>