Efter har sysslat med detta några år nu så tänkte jag dela med mig frågor jag själv ställde när jag brottades med att lära mig CSS. I detta inlägg så kommer jag lista fem punkter som man bör tänka på som nybörjare inom CSS (Cascading Style Sheets). Kommer nästa gång lista fem punkter till.
1. Behåll din CSS extern
Det finns olika sätt att använda CSS mallen.
- Extern stilmall
- Intern stilmall
- Inline stil
Extern stilmall
Extern stilmall är det vanligaste sättet att anropa din stilmall och absolut det bästa sättet. Och det man använder när man har flera sidor på sin webbplats. Extern stilmall ska läggas in på följande sätt inom head taggarna:
<head> <title>Impedio</title> <link rel="stylesheet" href="dinstilmall.css" type="text/css" media="screen" /> </head>
Intern stilmall
Intern stilmall använder du när man ska stila upp något enstaka element eller om sidan är väldigt liten. Du lägger in intern stilmall på följande sätt inom head taggarna:
<style>
body { background: #e8ebec }
a { text-decoration:none;color: #4690bb; font-weight: bold; }
#header { width:100%; }
</style>
Inline stil
Detta sätt är något man inte rekommenderar. För att du vill skilja på din design kod och din markup. Du lägger in inline stil på följande sätt:
<p style="font-size: 12pt; color: #c10000">Detta är en paragraf med inline style</p>
2. Testa din kod i olika webbläsare
För att undvika buggar och göra det på rätt sätt så testa din kod hela tiden så den funkar i alla dom populäraste webbläsare. Ha helst olika webbläsare installerat på din dator för att lättare komma åt dina problem. Validera din kod ofta för att felsöka ditt problem. Alltid lättare att läsa och finna problemet tidigare i din process så det är något att tänka på.
3. Använd inte CSS till allt
Att använda CSS till alla taggar är bara mycket kod i onödan och din HTML markup blir bara trasslig och svårläst.
Dåligt exempel:
<div id="nava" class="left">
<p class="nava-menu1"><a href="#" class="red-link">Hem</a></p>
<p class="nava-menu2"><a href="#" class="red-link">Om företaget</a></p>
<p class="nava-menu3"><a href="#" class="red-link">Services</a></p>
<p class="nava-menu4"><a href="#" class="red-link">Portfölj</a></p>
<p class="nava-menu5"><a href="#" class="red-link">Kontakt</a></p>
</div>
Bra exempel:
<div id="nava"> <ul> <li><a href="#">Hem</a></li> <li><a href="#">Om företaget</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfölj</a></li> <li><a href="#">Kontakt</a></li> </ul> </div>
4. Korrekt hierarki
Att ha en trasslig hierarki i din markup försämrar bara för dig och nästa person som ska ta över koden. Genom att göra det på ett korrekt sätt så spar du tid och du får en lättöverskådlig kod. Använd gärna också kommentar taggarna när du avslutar stora DIV’ar. Blir lättare att hitta en enstaka DIV om du har mycket kod.
Dåligt exempel:
<div class="profileNava"> <ul class="profileNava"> <li><a href="#">Förstasidan</a></li> <li><a href="#">Service</a></li> <li><a href="#">Projekt</a></li> <li><a href="#">Karriär</a></li> <li><a href="#">Kontakt</a></li> </ul> </div>
Bra exempel:
<div id="header"> <div id="header_in"> <div class="logo"><a href="#">Impedio</a></div> <div class="profileNava"> <ul> <li><a href="#">Förstasidan</a></li> <li><a href="#">Service</a></li> <li><a href="#">Projekt</a></li> <li><a href="#">Karriär</a></li> <li><a href="#">Kontakt</a></li> </ul> </div><!-- ProfileNava End --> </div><!-- Header in End --> </div><!-- header End -->
5. Prenumerera på bloggar och resurser
En av dom bästa sätten att hålla sig uppdaterad och lära sig nya trender är att prenumerera och läsa olika bloggar och andra värdefulla resurswebbsidor. I dagens läge och med lite disciplin så kommer du långt att bara jobba hemifrån från din egna dator.
Hitta mer innehåll från: CSS
Trackbacks/Pingbacks