Tre sätt att formatera med CSS – Cascading Stylesheets
Tre sätt att formatera ett dokument med CSS
Du kan lägga till CSS-kod till dina webbsidor på tre olika sätt: lokalt (inline), inbäddat (embedded) och länkat från en separat CSS-stilmall. Det klokaste valet när det gäller utveckling av webbplatser är dock att länka XHTML-sidorna till en CSS-stilmall, men vi kommer även att titta på de två andra alternativen eftersom de kan vara användbara medan du utvecklar dina sidor. En stilmall är en helt och hållet separat fil som enbart innehåller CSS-kod. En stilmall kan delas av ett obegränsat antal XHTMLsidor vilket garanterar att utseendet förblir enhetligt från sida till sida och medger att ändringar som görs av en viss stil omedelbart återspeglas på hela webbplatsen.
Lokala (inline) stilar
Lokala (inline) stilar bifogas till en tagg med hjälp av XHTMLtaggen style, så hän:
<p>Det här stycket visas med webbläsarens standardforrmat; för stycke. </p>
<p> style=font-size: 25pt; font-weight:bold; font-style:italic; color:red;”>Genom att lägga till lokal (inline) CSS-formatering för det här stycket, kan vi åsidosätta standardformateringen.</p>
<p>Och nu är vi tillbaka till det vanliga standardstyckeformatet utan någon lokal stil.</p>
Här är ytterligare några saker du behöver kär:änna till om lokala (inline) stilar:
- Deras räckvidd är mycket begränsad. En lokal stil påverkar endast den tagg till vilken den är bifogad.
- Praxisen att använda lokala stilar är helt enkelt ett annat sätt att skriva presentationskod direkt tillsammans med taggarna, precis som vi gjorde förr i tiden. Att lägga till lokala stilar överallt är lika illa för kodens flyttbarhet och redigeringsbarhet som att lägga till (X)HTML-attribut som exempelvis FONT. Lokala stilar bör generellt undvikas.
- Vid de sällsynta tillfällen när man behöver åsidosätta ett format på ett visst ställe och det inte finns något bättre sätt att göra det, kan man skapa en lokal stil utan att behöva känna ;ig alltför skyldig. Med detta sagt, kan man nästan alltid undvika att använda lokala stilar genom att lägga till ett unikt ID eller en klass till taggen i fråga och sedan skriva motsvarande stil i stilmallen.
- Användning av en lokal stil är ett bra sätt att pröva en stil innan man lägger in den i stilmallen (se avsnittet ”Länkade stilmallar” som strax följer). Kom bara ihåg att helt och hållet ta bort style-attributet när du fått den effekt du vill ha och klippa ut och klistra in enbart själva stilen i stilmallen. I annat ella ändrinaar du pör via stilmallen för just den taggen, och eiia ändringar du gör via stilmallen för just den taggen, och du riskerar att spendera timmar på att försöka fixa till stilmallen när problemet egentligen gömmer sig i XHTML-koden.
- Lokala stilar prioriteras framför stilar som man definierar med inbäddade stilar (beskrivs härnäst), vilka i sin tur prioriteras framför globala stilar som man definierar i en stilmall. (Se avsnittet ”Vad innebär Cascading” senare i det här kapitlet för mer ingående information om hur konflikter mellan stilar hanteras.)
Inbäddade stilar
Man kan placera en grupp CSS-stilar i head-delen i ett XHTML – dessa kallas inbäddade stilar. Inbäddade stilar fungerar sa här:
<head>
<title>Exempel på inbäddade stilar</title>
<meta http-equiv=”Content-type” content=”text/html; charset=iso8859-1″ />
<meta http-equiv=”Content-Language” content=”sv” />
<style type=”text/css”>
/* <![CDATA[ */
1 { font-size: 16pt; font-weight:bold;}
p {color:blue;>
/* ]]> */
</style>
</head>
Taggen style talar om för webbläsaren att den kommer att träffa på kod som inte är (X)HTML; taggens attribut fastslår att koden är !SS. (Om du vill inkludera JavaScript i dokumentets head-del tället för CSS, använder du taggen script med attributet ”text/ JavaScript”).
Här följer några kommenterar angående inbäddade stilar:
- Räckvidden för inbäddade stilar är begränsad till sidan n som innehåller stilarna.
- Om du bara publicerar en enda sida med dessa speciella stilar kan du bädda in stilarna i dokumentets head-del, även om du då egentligen inte separerar stilarna från innehållet; de finns fortfarande i samma dokument. Du får lära dig mer om inbäddade stilar när du arbetar med de enkelsidiga övningsexemplen i det här kapitlet.
- Om man arbetar med flera stilar för en komplex layout, ex^mpelvis ett formulär, är det ibland enklare att skriva stilar 3m inbäddade stilar i head-delen i dokumentet, så att man inte hela tiden masta växla mellan XHTML-dokumentet och stilmallen. När sedan allt fungerar kan man flytta stilarna till stilmallsdokumentet och ersätta stilarna i head-delen med en länk till stilmallen.
- Inbäddade stilar prioriteras framför stilmallar, men ft förlorar mot attribut som man definierar i lokala stilar. (Se avsnittet ”Vad innebär Cascading” senare i det här kapitlet för mer ingående information om hur konflikter mellan stilar hanteras.)
Länkade stilar
Man kan placera stilarna i ett separat dokument, en stilmall, som länkas till flera sidor så att stilarna får global räckvidd (över hela webbplatsen). Stilarna som definieras i en sådan stilmall kan påverka webbplatsens samtliga sidor, inte bara en enstaka sida eller tagg. Det här är den enda av de tre metoderna som verkligen separerar presentationsstilarna från koden för strukturen. Om du samlar alla dina CSS-stilar i en stilmall på det här sättet blir det enklare både att designa och redigera en webbplats.
Om man exempelvis behöver göra ändringar som påverkar hela webbsajten (”kunden vill att all brödtext ska vara blå, inte svart”) an man göra det lika snabbt och smärtfritt som när man modifierar en enskild CSS-stil. Detta är sannerligen mycket enklare än uppgiften att modifiera alla font-attribut för varje stycketagg på varje sida på webbplatsen, vilket man var tvungen att göra innan CSS fanns tillgängligt.
Du kan länka din stilmall till så många XHTML-sidor som du vill med en enda kodrad i head-delen i varje XHTML-sida:
<link href=”my_style_sheet.css” media=”screen” rel=”stylesheet” type=”text/ess” />
Stilarna tillämpas sedan på koden för varje sida när sidan laddas.
Observera att i taggen link ovan, definieras attributet media som ”screen”, vilket innebär att stilen är utformad för bildskärmen, vilket i det här fallet betyder webbläsaren. (Vissa användaragenter söker efter särskilda mediaattribut som bättre passar deras visgskapacitet – möjligheterna här är exempelvis: all, projection, handheld, print, aural. Gå till webbplatsen W3 Schools (www.w3schools.com/css/css_mediatypes.asp) för att se en komplett lista.)
En webbläsare som laddar sidan använder den stilmall som taggen link anger. Men genom att lägga till ännu en link-tagg där attributet media definieras som ”print”, kan man tillhandahålla en andra tilmall som webbläsaren använder i samband med utskrift. En stilmall specialutformad för utskrift kan eventuellt dölja navigeringselement och andra element som inte fyller någon funktion när innehållet ska visas på papper.
Om du skapar en andra stilmall för utskrift kan taggen se ut så här:
<link href=”my_style_sheet_print.css” media=”print’ re/=”stylesheet” type=”text/ess” />
I kommande inlägg om stilmallar ska vi titta på regler för hur man skriver stilmallar och hur begrepp som arv, exakthet (specificity) och Cascading styr hur dessa regler påverkar koden.
Originally posted. 12 August, 2010
Liknande inlägg:
Tags: 
Pingback: Lär dig formatera med CSS stilmallar | Egen Blogg Design
Pingback: Webdesign med CSS stilmallar | Egen bloggmall
tack tack, samma!