Nu tänkte jag gå igenom hur du använda CSS (Cascading Style Sheet) för att designa din hemsida. Det finns flera fördelar med att använda en stilmall. Den första är att du samlar alla inställningar i en fil och därmed inte behäver göra samma ändring i alla enskilda HTML-filer. Dessutom är det mycket bättre ur optimeringssynpunkt att separera struktur och innehåll från design.
Här är ett exempel på hur en CSS-fil kan se ut, jag använder mig av de klasser jag deklarerade i HTML-filen från del 1 i denna lilla skola. Exemplen blir ganska otydliga eftersom det inte går att skriva kod så bra i bloggtexten.
BODY {
background-color: #FFFFFF;
margin-top: 0px; Gör att en eventuell automatisk marginal i överkant försvinner
margin-bottom: 0px; Samma som ovan men i nederkant
text-align: center; /*Innehållet centreras*/
}
.main {width: 800px; Yttre DIV:ens bredd i pixlar
background-color: #FFFFFF; Bakgrundsfärg
border: 1px solid; Ram 1 pixel bred och heldragen linje, andra alternativ är ”dotted” och ”dashed”
border-color: #000000;} Ramens färg
.left_column {
float: left; DIV:en lägger sig så långt till vänster som möjligt, i detta fall till vänster i main-diven
width: 190px;
margin-left: 10px; Bredden+vänstermarginal=200 pixlar
border: 1px dotted;
border-color: #000000;
background-color: #FFFFFF;} Kan skippas om du vill ha samma färg som i main-div:en
.right_column {
float: left; DIV:en lägger sig så långt till vänster som möjligt, i detta fall direkt till höger om left_column eftersom den står skriven tidigare i HTML-filen
width: 580px;
margin-left: 10px; Bredden+vänstermarginal+högermarginal=600 pixlar
margin-right: 10px; Summan av alla mått blir då 800 pixlar som är bredden på main-diven
border: 1px dotted;
border-color: #000000;
background-color: #FFFFFF;}
Nu är sidan grovt uppstrukturerad, det som saknas är innehålls-divar som vi lägger i de kolumner vi skapat. Det går jag igenom i nästa del.
Lämna ett svar