Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">

Transkript

1 CSS { } Anne Diedrichs Medieteknik Södertörns Högskola Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6"> Kurslitteratur: Niederst Robbins, Learning Web Design kap Vad var/är problemet? Ett väl strukturerat html/xhtml-dokument brukade bli nerskräpat av taggar som bara försöker styra utseendet t.ex. font-taggen, tabellceller som bara ska skapa luft och inte har nåt innehåll m.m. Detta gör den maskinläsbara koden mindre användbar och dokumentstrukturen svår att återvinna för andra behov Bakgrund Detta beror på den hastiga utveckling som html genomgick i skuggan av webbläsarkriget. Krigets första offer: standardiseringssträvanden försöken att göra layout med ett språk som hade helt andra syften 2-delad lösning enligt W3C Strukturen En strängare version av HTML och XHTML dvs. strict = bättre strukturerad kod, taggar och attribut som bara handlar om layout blir icke rekommenderade (depricated) Utseendet All layout får en egen standard vid sidan av html/xhtml: Överlappande formatmallar - Cascading stylesheets CSS1 kom redan 1996 CSS CSS3 diskuteras f.n. Delvis implementerat Fungerar för både xml och html och xhtml Vad fick man på köpet? Bättre struktur Helt andra och mycket bättre layoutmöjligheter Möjlighet att ha alternativa layouter för olika medier t.ex. skärm, utskrift, handdator Bättre möjlighet till personlig anpassning av en sidas utseende Rationellare arbetssätt eftersom en stilmall styr en hel sida eller en hel sajt. Det går lätt och snabbt att göra kraftfulla förändringar av utseende/utformning 1

2 Dags för "allt om CSS" Vad menas med överlappande - cascading? Flera olika stil/formatmallar kan samverka i ett enda dokument Vad är formatmall-stilmall? Jfr word? Boktips Allt av Eric Meyer och Andy Clarke (ingår i MWP2) skrivs i textformat Hur går det till? kan infogas direkt i xhtml-sidan eller i separata text-dokument Använd: Anteckningar/ Notepad Crimson Notepad ++ Dreamweaver... Består av regler (rules) h1 {color: red;} selektor {egenskap: värde;} selector {property: value;} Denna regel skulle färga alla rubriker av nivå 1 röda egenskap: värde kallas deklaration eng. declaration Om man har flera deklarationer skiljs dessa åt med ett semikolon ; h1 {color: red; background-color: green} Denna regel skulle göra alla rubriker av nivå 1 röda med grön bakgrund h1 {color : red;} <h1> En viktig rubrik </h1> Var placeras style-reglerna? Bäst: I ett separat dokument - länkad eller importerad stilmall Då kan det användas på så många sidor man vill t.ex. hela sajten Näst bäst: I sidans head, innanför taggen <style> </style> Då gäller det för alla taggar i hela sidan Sämst: Direkt i en tag i form av attributet style Gäller bara för just den taggen Men samtliga fungerar och kan användas samtidigt 2

3 Kaskaden - dvs hur samspelar olika samtidiga stylesheets? Alla samverkar så länge de inte är motstridiga Annars inträder en hackordning dvs kaskaden som fungerar nästan lika i olika webbläsare 1. Användaren bestämmer (vissa webbläsare tillåter användaren att använda ett eget stylesheet) 2. Därefter den mest specifika stilmallen eller html-taggen t.ex. <font color="green"> Grön text </font> <p style="color:green"> Grön text </p> 3. stildeklarationer i sidans huvud 4. länkad stilmall 5. webbläsarens inbyggda stilmall Arv - inheritance För att CSS ska fungera som tänkt krävs att sidan har en korrekt struktur, t.ex. att taggarna nästlas på rätt sätt. (Lökskal - först in, sist ut) <p> En mening med ett betonat <em>ord</em><p> En tagg inuti en annan tagg ärver vissa av egenskaperna från "föräldern" Textfärg är ett exempel på en egenskap som ärvs En mening med ett betonat ord p {color:red;} gör att hela meningen blir grön, även ordet innanför <em>-taggen Border är ett exempel på en egenskap som inte ärvs p {border:solid thin green;} man får border runt hela stycket men slipper en extra border runt <em> Lite exempel på vad man kan göra med CSS Därefter mer om: selektor {egenskap: värde;} selector {property: value;}. Selektorer Att välja ut vilken del av dokumentet som ska påverkas 3

4 I första hand använder man dokumentets struktur dvs de taggar som redan finns p {font-family:verdana;} body {margin:10%;} h1 {color:#ff0000;} a {text-decoration:none;} strong {color:#ffffff; background:#000000;} Kombinera taggar som selektorer Med komma-tecken emellan så används alla selektorerna h1, h2 {color:#ff0000;} Både h1 och h2 blir röda Med mellanslag emellan selektorerna så använder man dokumentets hierarki h1 strong {color:#ff0000;} bara de strongtaggar som ingår i h1 blir röda, alltså varken bara h1 eller bara strong fler varianter finns... När taggarna och dokumentstrukturen inte räcker till... Först då börjar man ändra I html-koden för att nå avsedd effekt i html-koden skriver man t.ex. <p class="varning">se upp!</p> i sin style skriver man.varning {color:#ff0000;} /* obs punkten */ Detta är en kommentar i CSS Effekten blir att enbart det stycke som "klassats" som varning blir rött exempel Man kan också använda attributet id <p id="varning"> OBS! </p> då hänvisar man till detta i stilmallen med #varning {color:#ff0000;} /* obs brädgårdstecken */ Skillnad attributen class och id Enda skillnaden är att alla "id" måste vara unika, medan "class" kan användas många gånger på samma sida <div> och <span> kan bli vanliga taggar i koden när man använder css. Finns det ingen färdig tagg att hänga sin class eller id på så skapar man en... <div> är ett block-element <span> är ett inline-element 4

5 Pseudo-klasser Fångar istället ett visst "läge" (state). a:link {color: green;} gäller för alla länkar så länge de inte är besökta andra pseudo-klasser just för länkar är a:visited a:hover a:active Egenskaper Med CSS kan man ändra på allt Vilket element som helst kan få en bakgrundsbild, marginaler, bli osynligt... {background:url(grafik/bg.gif);} {margin-top: 30px;} {display: none;} {line-height: 10%;} {float: left;} Box-modellen (standardversionen) border margin padding width (elementets bredd) Shorthand - förkortat skrivsätt color: #CC6699; font-family: Verdana; font-size: 120%; line-height: 110%; font-weight: bold; margin-top: 2px; margin-right: 5px; margin-bottom: 2px; margin-left: 5px; padding-top: 1em; padding-right: 2em; padding-bottom: 3em; padding-left: 4em; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #00FF00; border-right-color: #00FF00; border-bottom-color: #00FF00; border-left-color: #00FF00; kan istället skrivas: color: #CC6699; margin: 2px 5px; padding: 1em 2em 3em 4em; border: thin solid #00FF00; font: bold 120%/110% Verdana; Värden Mått finns både relativa och absoluta: pixlar, em (font-höjd), ex (x-höjd), %, cm, mm, points, pica Absoluta mått funkar INTE på en webbsida men stylesheets kan användas även för andra medier... 5

6 red #FF0000 rgb(100%, 0%, 0%) #F00 rgb(255,0,0) Färger: Fler värden Sökvägar: url(sökväg/filnamn) Nyckelord (olika för olika egenskaper): none, bold, underline, thin, outset, sans-serif Validera! Både html och CSS 6