För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara:

Storlek: px

Starta visningen från sidan:

Download "För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara:"

Jan-Erik Persson
för 7 år sedan
Visningar:

1 Hemsida CSS Introduktion till Cascading Style Sheets (CSS) Detta är en mycket kort genomgång av CSS med exempel på hur sådan kod ska läsas och hur den kan användas på IdrottOnline-sidor. Är man ute efter en grundligare genomgång finns det kurser man kan gå och andra guider som går att hitta gratis på internet. Hur CSS kan nyttjas på er hemsida På er hemsida har ni säkerligen olika boxar med olika innehåll, allt från nyheter till viktig information och inlägg om olika evenemang. Likaså har ni en menyrad där ni kan navigera er runt. Genom att använda sig av de inbyggda redigeringsverktygen kan ni välja om alla rubriker ska vara röda, alla länkar blå eller bakgrundsfärgen vit. Verktygen vi har slår då igenom på alla rubriker. Det kan underlätta en del och ge en enhetlig design. Men ibland kanske man önskar att man kunde ändra om designen på sidan lite mer i detalj. Då är det bra att känna till hur man kodar i CSS. Exempel på vad man kan ändra för utseende med CSS: Textfärg Textstorlek Textstil Typsnitt Bakgrundsfärg Hur skriver man en CSS-kod, och var? För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara: body { color: #FF0000; Vad betyder då den koden? Vi går igenom det steg för steg: body Detta specificerar vilket element vi vill ändra på. I detta fall allt inom <body></body>-taggarna. Detta kallas väljaren (selector). { Här öppnar man blocket där alla inställningar för body-elementet ska ligga. color: Här specificerar vi vilken egenskap vi vill ändra på. 1

2 #FF0000 Det här är hexkoden för röd färg. De två första tecknen är för rött, de nästa två för grönt och de två sista för blått. RGB. Hexkod innebär hexadecimal kod, alltså istället för att gå från 0-9 så finns siffrorna (och bokstäverna) 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Det decimala värdet (i bas 10) för bokstäverna är 10, 11, 12, 13, 14 och 15. Alltså ställer vi in det maximala (FF) för rött och ingenting (00) för grönt och blått. Det finns också fördefinierade färger som man kan använda då skriver man bara t.ex. color: blue; istället för hexkoden. ; Raden avslutas. Man måste ha med ett semikolon i slutet av varje rad för att skriva korrekt kod. Man behöver inte bara göra en inställning per block som i det här exemplet. Blocket med inställningar för body-elementet avslutas. Härefter kan man påbörja ett nytt block för ett annat element. För att skriva din kod kan du använda dig av olika editorer, t.ex. Notepad++. Ett program som finns för installerat på de flesta datorer är Anteckningar. När du har skrivit din kod sparar du den med.css på slutet. Exempelvis: idrottonline.css eller designhemsida.css. Dessa filer läggs sedan in under huvudssidans designflik i redigeraläget i IdrottOnline. Selectors I det tidigare exemplet valde vi ett element, body-element, vilket är ett ganska speciellt element eftersom det bara kan finnas ett per sida och nästan alla synliga HTML-element ligger inom body-elementet. Om vi skulle använda oss av koden från det tidigare visade exemplet, skulle det slå igenom för all text på hemsidan och den skulle bli röd det vill säga, om vi inte gör ett annat kommando som är mer specifikt. En mer specifik selector. För element som återkommer flera gånger likt ett div-element med olika egenskaper, kan det vara viktigt att skilja dem åt. Vi kanske har skrivit i bodyn att texten ska vara röd. Om vi då använder oss av en selector som väljer ut endast alla nyhetsboxar och säger att texten i vår nyhetsbox ska vara grön, kommer texten i vår nyhetsbox ändras till grön. Resten av texten förblir röd. För att skilja element åt kan man göra på två sätt: Man ger sina element antingen en klass eller ett id. Skillnaden på dessa är att det är tänkt att ett id ska vara unikt det ska alltså bara finnas ett element med varje id medan det får finnas många av samma klass. Att ge element en klass/och eller ett id gör man när man skriver html-kod, alltså inte i CSSkod. <div class= LitenBox>innehåll</div> Koden ovan ger div-elementet klass LitenBox. Det innebär att man tilldelar div-elementet alla egenskaper som finns i de block som har en selector som väljer ut klassen LitenBox. 2

3 .LitenBox { width: 260px; height: 100px; color: #00FF00; Vi specificerar att det är en klass vi väljer ut genom punkten innan klassnamnet. ID specificeras genom en # istället för punkt..rubrik { text-decoration: underline; Ett element kan ha flera klasser, man tilldelar elementet flera klasser genom att skriva ett mellanrum mellan namnen för klasserna. Så om vi skriver ett div-element såhär: <div class= LitenBox Rubrik >Innehåll</div> kommer egenskaperna från båda klasserna att gälla. Konflikter mellan inställningar Vad händer då om det blir konflikter mellan egenskaperna? En klass som säger att texten ska vara röd medan en annan säger att texten ska vara blå. Detta är något man ofta stöter på när man försöker ändra på redan existerande element på IdrottOnline-sidor, eftersom det redan finns CSSmallar som är inbyggda i systemet. Om flera egenskaper krockar genereras inget felmeddelande, istället finns det vissa regler som bestämmer vilken egenskap som väljs. Högst prioritet får den egenskap som har!important efter sig. Näst högst prioritet har inställningarna som ligget direkt i html-koden med hjälp av style -attributet. Efter det blir det krångligare. Ju specifikare selectorn är desto högre prioritet, och id väger tyngre än klass som väger tyngre än element. Om två selectorer är exakt lika specifika gäller den som läses in sist av webbläsaren..litenbox.rubrik { text-decoration: line-through; 3

4 Egenskaperna ovan gäller för element med både klassen LitenBox och Rubrik. De elementen med båda klasser kommer alltså få texten genomstruken. Hade den däremot haft endast klassen Rubrik, hade texten varit understruken. I exemplet var selectorn skriven utan mellanslag mellan klasserna, men vad hade blivit annorlunda om den istället sett ut såhär?.litenbox.rubrik { text-decoration: underline; Svaret är att den, istället för att specificera ett element som har båda klasserna, hade pekat ut element av klassen Rubrik som ligger i element av klassen LitenBox. I html-koden skulle det se ut såhär: <div class= LitenBox ><div class= Rubrik ></div></div> Prioriteringsnivån på innehåll i Rubrik ser då ut som:.litenbox.rubrik har högst prioritering.rubrik har näst högst prioritering.litenbox har lägst prioritering Hur hittar jag vad de befintliga elementen heter/har för klass? Om man vill ändra på ett befintligt element på hemsidan så behöver man ta reda på vad och hur elementet är definierat. Detta kan göras på olika sätt med olika webbläsare, men i Google Chrome så kan man göra på det här sättet: Högerklicka på sidan där elementet du vill ändra på ligger. Välj Granska komponent (om du är inloggad på IdrottOnline så är högerklicksmenyn ersatt av en blå meny, du kan avaktivera denna genom menyalternativet och sedan högerklicka igen). 4

5 När du gjort det så kommer du direkt till källkoden för det området du klickade på i en flik till höger av webbläsaren. När du håller musen över en bit av koden så markeras det motsvarande elementet på hemsidan med blått. Klickar du på ett element i koden så får du också se vilka stil-inställningar som gäller för elementet (rutan med grön ram i bilden). I det här exemplet kan du också se att de konflikterande inställningarna som inte gäller är genomstrukna. 5

I exemplet på bilden granskar vi elementet NewsListBoxIntroDiv, och vi ser att det inte finns någon mer specifik selector än en som väljer just den

newslistboxintrodiv { color: #00FF00; width: 100px; Eftersom vi specificerar width här och vi kan se att det redan finns specificerat så kommer det bli

6 I exemplet på bilden granskar vi elementet NewsListBoxIntroDiv, och vi ser att det inte finns någon mer specifik selector än en som väljer just den klassen. Om vi vill att boxar av den klassen ska ha grön text och vara av bredden 100 pixlar kan vi alltså göra en CSS-mall som ser ut så här:.newslistboxintrodiv { color: #00FF00; width: 100px; Eftersom vi specificerar width här och vi kan se att det redan finns specificerat så kommer det bli en konflikt. Men eftersom vår läses in sist och är lika specifik som den existerande selectorn så kommer våra inställningar att gälla. I denna bild kan ni se resultatet: 6

Relevanta dokument

Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:

Uppsala universitet Institutionen för utbildning, kultur och medier IKT A HT 2009 Monica Langerth Zetterman 2009-09-23 Testa stilmallar Övning 1 Vi börjar med en vanlig html-fil där html används för både