Video: CSS - En stilmall för alla sidor 2024
En av de mest förvirrande aspekterna av att arbeta med CSS (Cascading Style Sheets) är att du kan skriva stilar på så många sätt. På samma sätt som du skriver prosa, bara för att du förstår de grundläggande reglerna för grammatik och stavning betyder inte att du har behärskat att skriva koncisprosa.
Erfarna CSS-designers spenderar mycket tid på att skapa kort, tydlig CSS som är lätt att redigera och uppdatera. Men de som är nya för CSS är benägna att skriva mer stilar än vad som är nödvändigt och att skapa överflödiga stilar.
Inte bara tar redundant kod längre att ladda ner till en webbläsare, det är mycket svårare att redigera eller revidera senare. Och ju mer redundanta din kod, desto mer sannolikt är det att du stöter på stilkonflikter.
Här är fem tips för att skriva rena och effektiva stilar:
-
Skapa aldrig två stilar när en räcker. Du kan till exempel skapa en stil med taggväljaren för alla
-taggar som ändrar teckensnittsfamiljen i dina rubriker och sedan skapa en andra stil med en klassväljare som du kan ansöka i rubrikerna för att ändra Färg.
Men det är mer effektivt att definiera både färg och typsnittfamiljen i samma stil. Kom ihåg att du alltid kan gå tillbaka och redigera en stil för att lägga till en annan regel om du vill ändra stilens formatering.
-
Förkorta hexadecimala färgkoder. Du kan definiera färger i CSS genom att inkludera hela hexadecimal färgkod. Men när du använder färgkoder som är repetitiva måste du bara inkludera de tre första tecknen. Till exempel är #ffffff detsamma som #fff; båda kommer att skapa färgen vit.
-
Använd externa stilark. Du kan definiera stilar i ett internt stilark längst upp på varje webbsida, eller du kan spara dina stilar i en extern fil med. css-förlängning och bifoga det stilarket till alla dina webbsidor. Externa stilark är i sig effektivare eftersom de gör att du kan använda samma stil på någon eller alla sidor på din webbplats.
Om du till exempel definierar en stil som gör alla huvudrubriker djärva, blåa och stora, kan du spara samma stil för varje rubrik om du sparar den stilen i ett externt stilark. Om du senare bestämmer att du vill ändra rubrikerna till grönt, kan du ändra stilen i ett externt stilark och ändra alla rubriker samtidigt.
Om du hade sparat stilar i ett internt stilark, skulle du behöva redigera rubrikstilen i varje fil.
-
Utveckla en namngivningskonvention för dina stilar. Även om du kan namnge stilar skapade med klassen eller ID-väljare är allt du vill, det är bäst att välja stilar som har betydelse förutom formateringen.Om du till exempel skapar en stil som heter. redHeadlines och bestäm sedan senare att du vill ha allt. redHeadlines att vara blå, kommer du antingen att sluta med en blå rubrik stil som heter. redHeadlines eller kommer att behöva byta namn på stilen.
Om du byter namn på stilen ingår att gå tillbaka och använda den stilen överallt där du har en röd rubrik som du vill bli blå, vilket förnekar kraften i stilar för att göra globala uppdateringar. För att undvika detta problem, skapa stilnamn som hänvisar till elementets position eller betydelse, till exempel. mainHeadlines eller. sidebarHeadlines.
-
* Testa och validera din kod. Även erfarna CSS-designers gör misstag, varför Dreamweaver innehåller så många bra verktyg för att testa och validera koden på dina webbsidor. Se till att du testar din CSS för vanliga misstag.
Följande är två online-testtjänster som du kan använda för att söka efter fel i din CSS-kod. Ange bara webbadressen till en webbsida på Internet i adressfältet på någon av dessa webbplatser och klicka på Submit-knappen för att få en rapport som visar några fel i din kod:
-
Valideringstjänsten W3C CSS
-
XHTML-CSS : Var giltig eller dö lärande
-
