Globale linker
CSS
- Intro
- Dokumenttre
- Syntax
- Sette inn
- Font
- Text
- Box
- Background
- Classification
- Posisjonering
- CSS-hacks
- Quick guide
- Gode råd
Hva er CSS?
«CSS is like chess. You can learn the basics in a day and spend a lifetime mastering it.» CSS is like a girlfriend. No matter how hard you try, she will always interpret it a different way.
CSS står for Cascading Style Sheets. (Cascading= fosse, strømme). Styles definerer hvordan HTML elementer skal se ut i en nettleser og lagres vanligvis som eksterne stilark.
Eksterne stylesheets kan være ekstremt tidsbesparende da formatteringer for HTML-sidene skjer i selve CSS-stilarket. Skal du forandre på en stil, gjør du forandringen i stylesheet'et og ikke i de enkelte HTML-dokumentene.
CSS er et gjennombrudd i webdesign fordi det lar webdesignere kontrollere stilen og layout'en for flere websider i én operasjon. Som en utvikler kan du definere stilen for hvert HTML-element og la dette gjelde for alle forekomster av elementene i flere HTML-dokumenter ved å linke til stilarket i i hvert enkelt HTML-dokument. Skal du da gjøre en forandring på alle forekomster av et eller flere HTML-elementer (tagger), gjør du forandringen i stildefinisjonen i stilarket, i stedet for å måtte forandre på hver enkelt forekomst av elementet på alle sidene i siten. Og med element, mener jeg tag.
HTML tagger ble opprinnelig laget for å definere innholdet i et dokument. Taggene skulle fortelle «her er en overskrift», «her er et avsnitt», «dette er en tabell» ved å bruke tagger som <h1>, <p> og <table>. Selve layout'en skulle tas hånd om av browseren, uten andre formatteringstagger.
Etter som utviklerne av de to store browserene - Netscape og Internet Explorer - la til nye HTML-tagger og attributter (som <font>-taggen og farveattributter) ble det stadig vanskeligere å lage websider hvor innholdet i HTML-dokumentene var klart adskilt fra dokumentets layout-tagger.
For å bøte på dette utviklet W3C (World Wide Web Consortium) STYLES som et verktøy for layout i HTML 4.0.
Både Netscape 4.0 og Internet Explorer 4.0 støtter Cascading Style Sheets i større eller mindre grad. Sjekk Webreview's Master Compability Chart eller RichInStyle.com for oversikt over browserstøtte.
Hvorfor bruke CSS istedet for tabeller
CSS lastes raskere enn tabeller fordi:
- Nettlesere leser gjennom tabeller to ganger før de vises på skjermen, den første gangen for å finne tabellens struktur, den andre gangen for å bestemme tabellens innhold.
- Tabeller vises i ett, d.v.s. ingen del av tabellen vil dukke opp på skjermen før hele tabellen er lastet inn og tolket.
- Tabeller oppmuntrer til bruk av «spacer»-grafikk for å holde på tabellens struktur.
- CSS produserer generelt mindre kode enn uhåndterlig tabell-kode.
- All kode som har med utforming å gjøre kan plasseres i et eksternt stilark, som blir lastet inn hos brukeren kun én gang. På brukerens maskin blir den «cachet», eller mellomlagret. Tabellbasert utforming, lagret i hvert eneste HTML-dokument, må lastes inn for hver side brukeren vil se.
- Med CSS kan du kontrollere rekkefølgen elementer lastes ned, og derved få innholdet til å vises før tunge bilder lastes inn - noe dine brukere helt sikkert vil sette pris på.
Multiple Styles Will Cascade Into One
CSS lar oss spesifisere stilinformasjon på flere måter. Stiler kan spesifiserer i selve taggen, i dokumentets <head> eller som en ekstern CSS-fil. Man kan til og med linke til flere eksterne CSS-filer i et enkelt HTML-dokument.
Cascading rekkefølge
Hvilken stildefinisjon vil bli brukt når det er mer enn en stildefinisjon som er spesifisert for et HTML-element?
Generelt kan vi si at alle stilene vil «strømme» eller samles i et nytt virtuelt CSS-stilark etter følgende regler, hvor nummer 4 har høyeste prioritet
- Browser default
- Eksternt Style Sheet
- Internt Style Sheet (i<head>)
- Inline Style (i HTML elementets tag)
Derfor vil altså en Inline-Style (i HTML elementets tag) ha høyeste prioritet, noe som betyr at den vil overprøve stiler definert både i <head>, i eksterne CSS-stilark og browserens standardstil. Som en generell regel kan man si at den stildefinisjonen som ligger nærmest elementet (taggen) i koden vil bestemme.
Dette er dog en forenkling, for jo mer nøyaktig en deklarasjon er i stilarket jo høyere presedens (eller vekt) har det. Les mer hos W3C.
Gå til neste side hvor vi ser på syntax'en for CSS.
