CSS-struktur

5 svar · 377 visningar · startad av lillebror 15 dec. 2004

lillebrorMedlem sedan apr. 20041 597 inlägg

Frågan15 dec. 2004 21:22#1

Hej!

Jag håller på med ett större projekt där jag designar något som kan liknas vid en portal. Detta är första gången jag använder mig utav CSS rakt igenom hela processen.

Nu har jag några frågor angående hur man ska strukturera innehållet i CSS-filen/filerna. Det tänk jag har nu är att jag har en övergripande CSS-fil som innehåller det som alla huvudsidor/undersidor har som minsta gemensamma nämnare...dvs alla olika div-element/länkfärg/typsnitt/storlek osv. Sedan där respektive sida skiljer sig från det gemensamma lagrar jag det direkt i dokumentet som det berör. Är detta en smart lösning eller hur brukar ni gå tillväga? Sedan finns det ju s.k. "inlines" också.

Kom gärna med idéer och tankar! :)

zcorpanMedlem sedan dec. 20042 245 inlägg

15 dec. 2004 21:30#2

Jag brukar lägga allting i en separat stilmall. Om du vill separera ännu mer kan du använda tex layout.css, style.css och print.css

lillebrorMedlem sedan apr. 20041 597 inlägg

15 dec. 2004 21:38#3

Jag tror jag förstår vad du menar. Du lägger alltså allt som har med huvudstrukturen (skellettet) att göra på sidan i layout.css. I style.css kommer olika formateringar in som typsnitt, fontstorlekt, färg mm? print.css misstänker jag är ämnad för utskrifter?

TroxyMedlem sedan mars 20041 505 inlägg

15 dec. 2004 21:56#4

Att lägga all CSS-kod i samma stilmall, alternativ olika stilmallar, är att föredra. Besökarens webbläsare chachar då stilmallarna först, och sedan används de på nytt för varje sida. HTML-koden är då det enda som laddas ner på nytt, vilket gör att det går snabbare att ladda sidorna.

jarvkloMedlem sedan juli 20013 378 inlägg

15 dec. 2004 22:37#5

Här är ett sätt du kan använda för att lägga all CSS-kod i en och samma fil även om du har underavdelningar på din webbplats...

Grundidé - Du får använda CLASS- och ID-attribut på <body>.
Dvs du kan och får skriva t.ex. såhär i en fil:

<body class="startsida">

såhär i en annan

<body class="avdelning fakturering">

och kanske
såhär i en en tredje

<body class="avdelning reklamationer">

Gör du så, och kan matcha dina klasser med t.ex. den hierarkiska ordningen på din webbplats, så kan du lägga upp allt utseende i en och samma CSS-fil genom att du definierar ditt grundutseende "överst" i koden, och sedan lägger upp kompletterande regler, typ t.ex.

#sidhuvud {color:black; background-color:silver;}
.avdelning #sidhuvud {background-color: yellow}
.fakturering    #sidhuvud {backgrund-image:url(fakturalogo.png); background-position: top right;}
.reklamationer  #sidhuvud {backgrund-image:url(reklamationslogo.png);background-position: bottom right;}

och så vidare

zcorpanMedlem sedan dec. 20042 245 inlägg

15 dec. 2004 23:18#6

Att använda flera CSS-filer ger ingen egentlig fördel. Det enda jag kan komma på är att man får bättre överblick som webbdesigner. Men det stämmer inte alltid heller...

Nackdelen är att fler filer resulterar i längre laddningstid.