et eller flere css?

[fleur]

holder på å lage en webside som har iallefall 50 undersider. Mekker alt med css. Burde jeg ha alt i samme css eller et css for hver side? Hvis jeg har alt i ett css så blir css'et vanvittig stor med veldig mange klasser etc. Vil jo være mange klasser som kun brukes til en av sidene, men de blir jo likevel liggende i css'et.

[PT]

Jeg vil anbefale å ha alt i et eksternt stilark som du bruker på alle sidene. Er mye greiere hvis du først vil endre på en farge elns

[Loomy]

Kan tenke meg at det blir mange likheter på alle undersidene, så én CSS-fil ville nok jeg satset på. Det blir jo minst like kjipt å holde styr på 50 forskjellige CSS-filer også da

[enden]

Med ett stilark får du mye å holde styr på, men med litt struktur skulle det gå bra.

Med mange stilark blir det kjipt å endre på noe så banalt som en bakgrunnsfarge eller en font.

Jeg tror nok jeg ville gått for et ark med overvekt på struktur

[Blib]

Jeg liker iallefall å dele opp CSS-filene mine i et par-tre stykker for ordens skyld. Tar aaaaalt for lang tid å gå gjennom linje på linje med kode for å finne det en vil ha hvis en legger alt i ett ark.

[PT]

Tar aaaaalt for lang tid å gå gjennom linje på linje med kode for å finne det en vil ha hvis en legger alt i ett ark.

Ikke hvis man er flink til å kommentere css'en og lage gode navn på klassene

Endret 29. februar 2004 av PT

[enden]

med andre ord: struktur

[cfenzo]

Tar aaaaalt for lang tid å gå gjennom linje på linje med kode for å finne det en vil ha hvis en legger alt i ett ark.

Ikke hvis man er flink til å kommentere css'en og lage gode navn på klassene

 

med mindre det skal være 50 helt totalt forskjellige sider, så vil jeg nå si at sia har godt av at du har kun ett stilark... (eller flere hvis du vil skifte styles på sia... men da som "alternate stylesheet")..

 

edit>

 

men er godt mulig du kan få et godt utbytte av å ha ett stilark for selve oppbygginga av sia, og elementer som finnes på absolutt alle sidene, og så ha et par andre som du kan ha mere "kun på denne siden" stiler i...

 

 

edit2>

*vente spent på epsilon47's innlegg* (sorry ang char upcase/lowcase, men husker aldri hvilken som er hvilken.. )

 

edit3> og epsilon47 stakk? uten innlegg? det var dumt..

Endret 29. februar 2004 av cfenzo

[Nervetattoo]

Bruker bare et selv, men mener at det høres bedre ut å dele det opp.

For eksempel del de opp slik at man har et generelt, som er for de viktigste ting, som for eksempel div bokser og layout.

En for tekst, en for bilder/linker osv.

Vet ikke om det høres fornuftig ut i andres ører, men i mine høres det halv smart ut.

Uansett hvor god struktur du har i css filene så blir de jo lange, og dermed litt jobb å finne fram.

Gå for det du føler deg mest komfortabel med

[enden]

Hvordan er det egentlig med bruk av flere eksterne stilark samtidig? Er det mulig? Og hvilket stilark er i så fall det dominerende?

[FuLu]

Er ikke noe problem med å kjøre flere stilark samtidig, er bare å legge til en <link> til som har et annet stilark. Men du må jo passe på at den ikke inneholder samme klassenavn som det andre stilarket. For da vil vel det andre stilarket "skrive over" det førstes klasse innstillinger.

[enden]

så det siste nevnte stilarket "har makta"?

[Nervetattoo]

Kan vell også bruke @import i css dokumentet.

Har aldri satt meg inn i det eller brukt det, men mener da det er for å importere et stilark i ett annet.

Mulig jeg tar feil eller.....

[cfenzo]

@import brukes vel mest til å inkludere styles som netscape 4 ikke liker..

[Arve Systad]

Er ikke noe problem med å kjøre flere stilark samtidig, er bare å legge til en <link> til som har et annet stilark. Men du må jo passe på at den ikke inneholder samme klassenavn som det andre stilarket. For da vil vel det andre stilarket "skrive over" det førstes klasse innstillinger.

joa - men det _er_ lettare å ha alt i ett og samme stilark dah, berre vere flink med åssn IDer og classer du setter på ting og sånn

[haugsand]

enden:

 

egenskap: verdi!important;

 

er én metode til å prioritere enkelte verdier.

[enden]

joda, vet om den, men hadde håpet at et ark overstyrte et annet, så slapp jeg å styre inni kden på den måten. Samme det

[Arve Systad]

enden:

 

egenskap: verdi!important;

 

er én metode til å prioritere enkelte verdier.

huh?

 

altså f eks:

 

border: 1px solid black!important;

 

vil no overstyre

 

border: 1px solid blue;

 

??

[haugsand]

arve87: Korrekt.

[epsil]

edit3> og epsilon47 stakk? uten innlegg? det var dumt..

Her kommet et forsinket svar som tar for seg gruppering av stilark i HTML. Jeg så ikke at det var noen henvisninger til meg i denne tråden før jeg tilfeldigvis foretok et forum-søk på «epsilon», så folket får ha meg unnskyldt.

 

I HTML kan du med link-elementet angi tre typer eksterne stilsett (stilark):

• Grunnleggende stilsett
  
• Foretrukne stilsett
  
• Alternative stilsett
  

Jeg skriver bare «stilsett» fordi du med style-elementet – som bortsett fra rel tar de samme attributtene som elementet link – også kan angi grunnleggende og foretrukne stilsett. Et stilark er rett og slett en fil (vanligvis med endelsen .css når det som her er CSS vi snakker om) som inneholder et stilsett. For ordens skyld bør stilsettene angis i rekkefølgen vist over.

 

Vi har dessuten også mediespesifikke stilsett; du kan for hvert stilsett, uavhengig av hvilke grupperinger du gjør, bestemme hvilke medier det enkelte stilsettet skal gjelde for. Jeg kommer tilbake til dette senere.

 

Deklarasjonene i et grunnleggende stilsett blir brukt som standard (idet siden lastes), med mindre de overstyres i et påfølgende stilsett – jf. «cascade»-prinsippet i CSS. (I denne artikkelen går jeg ut fra den forenklingen at et påfølgende stilsetts deklarasjoner alltid overstyrer tidligere deklarasjoner med tilsvarende selektor. Det er mulig å forhindre dette ved å markere deklarasjoner med !important eller benytte seg av mer spesifikke selektorer, men for enkelhetens skyld går jeg ikke nærmere inn på dette her.)

 

Med et grunnleggende stilsett slipper du å definere stildeklarasjoner som ellers ville gått igjen i påfølgende stilsett mer enn én gang. Dette kan for eksempel være nyttig i et tilfelle der du har laget to separate fargesammensetninger for siden din, men den visuelle utformingen (dvs. «layouten») fortsatt er den samme. Du angir et grunnleggende stilsett ved å sette rel-attributtet til stylesheet og utelate title-attributtet:

 

<link href="grunnleggende.css" rel="stylesheet" type="text/css">

Det er for øvrig ingenting i veien for å ha flere grunnleggende stilsett, men merk at dersom disse angir de samme egenskapene for et bestemt element eller elementmengde (for de samme mediene), blir deklarasjonene i det siste stilsettet brukt. Hovedårsaken til at man vil bruke flere stilsett, er ofte å gjøre diverse tilpasninger til andre medier:

 

<link href="felles.css" rel="stylesheet" type="text/css">
<link href="skjerm.css" media="screen" rel="stylesheet" type="text/css">
<link href="utskrift.css" media="print" rel="stylesheet" type="text/css">

Her har vi benyttet attributtet media til å spesifisere at stilarket skjerm.css bare skal brukes når siden vises på skjerm, og at utskrift.css bare gjelder når sidene skrives ut (eller utskriften forhåndsvises). Stilsettet i utskrift.css blir altså ikke brukt på skjerm, og stilsettet i skjerm.css blir ikke brukt ved utskrift. Standardverdien for media-attributtet – altså den verdien som blir brukt dersom attributtet ikke spesifiseres – er all, altså at stilsettet gjelder for alle medier. Stildeklarasjonene i felles.css kommer derfor med både på skjerm og ved utskrift, med mindre skjerm- og utskriftsstilsettene inneholder deklarasjoner som overstyrer disse.

 

Det går også fint an å angi at stilsettet skal gjelde for flere medier, ved å skille mediebeskrivelsene med komma:

 

<link href="stilark.css" media="print,screen" rel="stylesheet" type="text/css">

Hva slags mediebeskrivelser du kan bruke og hva de står for, er beskrevet i HTML 4.01-spesifikasjonen.

 

Alt dette er vel og bra dersom du kun ønsker ett utseende for siden din, med noe utskriftstilpasning og muligens litt ekstra tilrettelegging for andre medier. Men hva om du kunne tenke deg å utstyre siden din med flere stiler, slik at den besøkende kan velge den vedkommende liker best? Da må vi gjøre oss kjent med title-attributtet, som vi – innlysende nok – bruker for å gi ett eller flere stilsett en tittel. Jeg sier «ett eller flere» fordi du på denne måten kan gruppere stilsett, og f.eks. samle et generelt sideoppsett som inkluderer mindre tilpasninger til papir under ett navn.

 

Vi fortsetter med det forrige kodeeksemplet, som vi tenker oss er fra en side med en marineblå fargesammensetning. Med title-attributtet kan vi nå gi denne fargesammensetningen et navn:

 

<link href="felles.css" rel="stylesheet" type="text/css">
<link href="skjerm.css" media="screen" rel="stylesheet" type="text/css">
<link href="utskrift.css" media="print" rel="stylesheet" type="text/css">
<link href="marineblaa.css" rel="stylesheet" title="Marineblå" type="text/css">

Stilarket marineblaa.css inneholder et såkalt foretrukket stilsett (som gjelder for både skjerm og utskrift, ettersom vi ikke har angitt media-attributtet). Dette inngår i sidens foretrukne stil. Det er altså stilen «Marineblå» som blir brukt første gang siden lastes, uavhengig av om vi har angitt en eller flere alternative stiler i tillegg. Kun én stil kan velges om gangen, og det er vanligvis også mulig å ikke velge noen stil i det hele tatt, slik at siden faller tilbake på de stildeklarasjonene som er angitt i grunnleggende stilsett.

 

Det er viktig å forstå at du med title-attributtet ikke angir navnet på ett bestemt stilsett, men derimot en unik stil – som kan inkludere flere stilsett, også for forskjellige medier. Vi kan dele opp «Marineblå»-stilen i et skjermstilsett og et utskriftsstilsett, som bare blir brukt dersom stilen «Marineblå» er valgt:

 

<link href="felles.css" rel="stylesheet" type="text/css">
<link href="skjerm.css" media="screen" rel="stylesheet" type="text/css">
<link href="utskrift.css" media="print" rel="stylesheet" type="text/css">
<link href="mbskjerm.css" media="screen" rel="stylesheet" title="Marineblå" type="text/css">
<link href="mbutskrift.css" media="print" rel="stylesheet" title="Marineblå" type="text/css">

Merk at skjerm.css og utskrift.css fortsatt inneholder grunnleggende stilsett. Dersom stilen «Marineblå» er valgt, styres altså utskriftens utseende av summen av felles.css, utskrift.css og mbutskrift.css, der et påfølgende stilsetts deklarasjoner overstyrer tilsvarende deklarasjoner i tidligere stilark. Dersom ingen stil er valgt, blir utskriften formatert etter summen av felles.css og utskrift.css.

 

Det er neppe verdt å ta seg bryet med å angi en foretrukken stil dersom man ikke i tillegg har angitt en eller flere alternative stiler. Disse må velges manuelt av den besøkende, og blir ikke brukt idet siden lastes for første gang (ettersom bare én stil – i utgangspunktet den foretrukne stilen – kan vises om gangen).

 

Du lager alternative stiler på samme måte som den foretrukne stilen, men rel-attributtet må nå settes til alternate stylesheet:

 

<link href="sitrongul.css" rel="alternate stylesheet" title="Sitrongul" type="text/css">

Dersom dette legges til etter stilen «Marineblå», kan brukeren skifte utseende på siden ved å velge den alternative stilen «Sitrongul» med en funksjon i nettleseren. Både Opera og Mozilla – men ikke Internet Explorer – er utstyrt med dette. Ettersom IE fortsatt er den mest populære nettleseren generelt sett, er det blitt vanlig å ta i bruk en JavaScript-løsning som lar den besøkende velge stil ved å klikke på lenker på selve siden. Dette går imidlertid på bekostning av markeringen, som ikke vil gi noen særlig mening i en nettleser som ikke støtter JavaScript (eller som har JavaScript avslått). (En annen mulighet er å la skripting på serversiden gjøre dynamiske inngrep i HTML-koden, slik at hvilken stil som angis som den foretrukne f.eks. styres av verdien til en GET-variabel.)

 

Jeg håper dette innlegget gir et visst inntrykk av de mulighetene man har med stilsett i HTML. For en lettlest innføring i CSS kan jeg anbefale de grunnleggende CSS-artiklene til Arve Systad, bedre kjent som «arve87» her på forumet.

Endret 16. mars 2004 av ePsiLON47