Gå til innhold

et eller flere css?


Anbefalte innlegg

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.

Lenke til kommentar
Videoannonse
Annonse
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 ;)

:thumbup:

 

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.. :p)

 

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

Endret av cfenzo
Lenke til kommentar

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 ;)

Lenke til kommentar

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.

Lenke til kommentar
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 :)

Lenke til kommentar
  • 2 uker senere...
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 av ePsiLON47
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...