CASCADING STYLESHEETS (CSS)

Transkript

1 CASCADING STYLESHEETS (CSS) HVA ER CSS Stylesheets er en metode for å flytte selve formatteringen av et HTML dokument ut av selve dokumentet og over i et eksternt regelsett. Dette skyldes HTMLs manglende evne til å beskrive utseende, HTML ble i utgangspunktet laget for å beskrive en struktur. De som fant opp HTML var opptatt av at overskriften skulle være større en brødteksten, men selve størrelsen var uvesentlig. Bare det var forskjell. Cascading Style Sheets ble utviklet i 1996 som en ny måte å beskrive utseendet av et HTML dokument på, og nettleser-produsentene har vært raske med å implementere dette språket. CSS skrives også i klartekst slik som HTML, men det er en noe annen syntaks. I CSS kan du gjøre to ting, du kan enten bestemme hvordan en eksisterende HTML tag skal vises i en nettleser eller du kan finne på dine egne regler, de såkalte classes. Dersom du i HTML dokument ønsker å bruke Verdana som din hovedtype kan du gi en instruksjon som endrer tagen tilsvarende. Denne instruksjonen skal skrives sånn: body {font-family: Verdana;} Denne instruksjonen vil, dersom den blir lest inn i HTML dokumentet gi nettleseren beskjed om at alt som ligger mellom og skal være Verdana. Hva da om Verdana ikke er installert på vertsmaskinen? Jo, da føyer vi til et par andre navn og til slutt en henvsning til en generell familie. Altså slik: Legg merke til skrivemåten (syntaksen); først tag-navnet, deretter curly-bracket deretter hva skal formatteres deretter kolon deretter hvordan skal det formatteres deretter semikolon og curly-bracket til slutt. Sett mellomrom etter tagen og mellomrom etter kolon for å fremme lesbarheten. Det beste er om du setter hver instruksjon på en egen linje, slik: body {font-family: Verdana, arial, helvetica, sans-serif; color: #999999; } Mer om disse reglene finner du på Hvor skal jeg skrive disse reglene da slik at nettleseren finner de? Det er selvfølgelig viktig at du gir nettleseren instruksjon om hvordan du ønsker stylesheetet ditt benyttet, og ikke minst når. Det er to hovedmåter å tenke på, enten å legge selve stylesheetet rett inn i et HTML dokument, såkalt embedding. Du kan enten gjøre dette i elementet, da vil det gjelde for hele siden, eller du kan legge det rett inn som en attributt til en tag, da vil det gjelde for bare den tagen. Den andre metoden er å ha et eksternt stylesheet som du laster inn i siden når den åpnes, gjennom en link. Den store fordelen med dette er at dersom du baserer mange sider på det samme stylesheetet trenger du bare gjøre endringer ett sted dersom du f.eks. ønsker å endre skrifttypen på hele siten din. Noen ganger

2 vil du kanskje at én av sidene dine skal ha en avvikende stil fra resten av stylesheetet ditt. Da kan du bruke en embed på den siden. EMBEDDED STYLES: For å legge inn et stylesheet på én side setter du inn følgende i området på dokumentet ditt: <style> <!-- --> </style> </head> Velkommen til Svens Side. Her vil all teksten mellom være Verdana. Dette gjelder uansett om den kommer inni et annet element som f.eks. <table> fordi er moderelementet til alle de andre tagene på siden arver <table> egenskapene. Dersom jeg nå hadde en tabell på siden min og jeg ville at den skulle ha Times New Roman skrift kunne jeg gjort det på følgende måte: <style> <!-- --> </style> </head> <h1>velkommen til Svens Side</h1> <table style= font-family:times new roman, times, serif; > <td>velkommen til Svens tabell! Dette vil gi en side med en tabell og en overskrift. Tabllen med tekst Times New Roman og overskrift med Verdana. Å sette style instruksjoner direkte inn slik som dette kalles inline styles, og bruker ikke curly-brackets. LINKED Å linke til et stylesheet er enda enklere i HTML dokumentet, men vi må da skrive selve stylesheetet i et eksternt dokument. Først selve linken: <link rel= stylesheet href= style.css type= text/css >

3 </head> <h1>velkommen til Svens Side</h1> Her er det altså bare en enkel link til et stylesheet som forteller nettleseren først hva det er (rel= stylesheet ) Hvor det finnes (href= style.css ), der style.css er navnet på stylesheet og tilslutt en erklæring om hvordan det er skrevet, i dette tilfellet i klartekst. Det neste vi må gjøre er å lage selve stylesheetet. Åpne opp en vanlig teksteditor som f.eks. Notepad. Bruk ikke word eller andre tekstbehandlingsprogrammer til dette dersom du ikke er helt sikker på hvordan du lagrer dokumentet som et uformattert tekstdokument. Det er nemlig svært viktig å ha full kontroll på hva som blir skrevet inn i dette dokumentet. Det første du kan gjøre er å lagre dokumentet ditt som style.css. Hvorfor det? Jo, det var det vi kalte det i linken over, ikke sant? Pass på at du lagrer det i samme mappe som HTML filen. Det betyr ingenting hvor du lagrer filen, men i linken over har vi ikke sagt noe om mappe, derfor må de ligge i samme mappe slik at HTML filen finner stylesheetet. Pass også på at velger all files i filtype boksen under navnet. Vi ønsker nemlig ikke at Notepad skal legge til.txt etter filnavnet vårt. OK, nå er vi klar til å skrive inn selve styleinstruksjonene: Skriv i style.css: Lagre filen din via File > Save. That s it! Du har nå skrevet et korrekt stylesheet og linket til det i filen din. Dersom du nå har dokumentet åpent i f.eks. IE kan du skrive endringer inn i stylesheetet og se hvordan disse arter seg ved å lagre stylesheetet og oppdatere siden din i IE. KONTROLLERE LINKER MED STYLESHEET En av de mest populære tingene å benytte stylesheets til er å kontrollere utseendet på linker. Legg til følgende i stylesheetet ditt: a {text-decoration: none;} Denne instruksjonen sier til alle a-elementer at de skal vises uten understrekning. Linker er a- elementer. En link kan være i fire forskjellige tilstander: link Vanlig, en link som ikke har vært besøkt eller er engasjert på annen måte visited Besøkt, en link du ha klikket på hoved I det musen går over linken active Den linken som er aktiv nå, dvs. er trykket på.

4 For å kontrollere hvordan hver og en av disse opptrer må vi sette de inn i stylesheetet vårt i denne rekkefølgen, på denne måten med a: foran: a:link, a:visited, a:hover, a:active Dersom vi nå ønsker grå linker som blir blå i det musen føres over kan vi skrive følgende i stylesheetet vårt: a {text-decoration: none; color: #999999;} a:link {} a:visited{} a:hover{color: #0000FF} a:active{} Som du ser har jeg definert fargene på linken i a-tagen og ikke i hver av de påfølgende a:link og så videre. Dette har jeg gjort fordi det er enklest slik, ved å si at a-tagen alltid skal være grå trenger jeg kun si fra når den ikke skal være det. Altså i a:hover. CUSTOM CLASSES Vi har nå sett på hvordan vi kan omdefinere html-tager til å vises annerledes enn nettleseren pleier. I tillegg kan vi lage såkalte custom classes. Tenk deg at du bruker en tabell med Times New Roman og en tabell med Verdana, da kan du ikke omdefinere HTML tagen <table>, fordi begge er jo et <table> element. Det vil også være tungvint å benytte inline styles på begge dersom du trenger å bruke samme utseende tabell flere steder, og vi har også argumentet om at dersom du kan linke til et eksternt dokument gjør dette livet lettere dersom du må endre f.eks. skriftstørrelsen. Vi bruker custom classes: Du mø gjøre nettleseren oppmerksom på at dette er en custom class ved å sette punktum foran navnet. Du må heller aldri bruke tall, mellomrom eller navn på HTML tager som custom class navn. Skriv inn i style.css.mattabell {font-family: times new roman, times, serif;}.drikketabell {font-family: Verdana, arial, helvetica, sans-serif;} I et HTML dokument bruker du disse slik:... <table class= mattabell > <td>denne tabellen skrives med Times New Roman......

5 <table class= drikketabell > <td>denne tabellen skrives med Verdana... TIL SLUTT: De aller fleste HTML-editorer kan skrive stylesheets for deg. Det er mange instruksjoner du kan legge inn i et stylesheet for å utforme dokumentene dine slik du vil, og det kan være vanskelig å huske alle sammen og ikke minst hvordan de skrives. I en HTML editor vil du få endel hjelp til dette. (Notepad heter notisblokk i norske versjoner av Windows) (IE er Internet Explorer)