Tre sätt att formatera med CSS – Cascading Stylesheets

augusti 12, 2010 by Samuel Liljekvist · 3 Comments
Filed under: CSS, webdesign 

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.

  • Share/Bookmark

Tags: , , , , , , , ,

4 bra sajter med gratis WordPress teman

augusti 7, 2010 by Samuel Liljekvist · Leave a Comment
Filed under: bloggmallar, skapa egen blogg, wordpress 

SKRIV IN ORDEN ”free WordPress themes” i Google så bombarderas du av en mängd gratis wordpress teman. Det kan ju verka bra till en början, men det kan också vara ganska irriterande. Man kan lägga timmar på att bläddra igenom hundratals wordpressteman, bara för att märka att de flesta inte alls passar dig eller att de helt enkelt är fula. Innan du nöjer dig med en medioker lösning för dina bloggbehov, oavsett om det handlar om kommersiella eller privata sammanhang, ta en titt på det vi har valt ut åt dig här. Vi har plockat ut de mest lockande, attraktiva, funktionella och snygga wordpressteman från fyra stora sajter, så du lär hitta åtminstone en som passar dig. Och det bästa är att de är helt gratis! När du har hittat ett tema som passar dig, gör ett besök på webbplatsen ifråga. Webbdesign har precis blivit ännu enklare.

freewpthemes.net

Den här saften innehåller 251 gratis wordpressteman som du kan bläddra igenom. Även om de inte är indelade i kategorier, är de indelade i grupper som du kan titta på en åt gången. Det finns också en smidig sökfunktion så att du kan hitta exakt det du letar efter. Varje tema freewpthemes_netvisas tillsammans med användbar information undertill, så som namn, datum temat lades till och om det hanterar widgets eller inte. När du hittar ett tema som passar dig klickar du på Preview-länken och tar en närmare titt. Om du gillar det du ser bara klickar du på Download-länken på Preview-sidan eller återgår till huvudmenyn genom att klicka på bakåtknappen. Det finns vissa variationer på de wordpressteman som ligger här, men de flesta är ganska enkla och nedtonade, vilket förmodligen gör dem bäst lämpade för användning på en nyhets- eller tidningsliknande blogg.

wordpressthemesbase.com

Den här saften är fullsmockad med gratis wordpressteman, med alla möjliga sorters färger och designer och i en uppsjö av genrer. Eftersom det finns så många är de uppdelade i olika kategorier, ner på så nischade nivåer som Medicin och Politik. wordpressthemesbase_comOm du letar efter ett tema som passar din musikblogg, bara klicka på Music-kategorin till höger, så får du upp ett antal olika alternativ. Klicka på namnet på ett tema som du gillar, så får du upp information och ett omdöme om det. Klicka igen så får du upp en fullskärmsförhandsvisning. Du kan sedan klicka på Download eller Back för att återgå till de andra wordpressteman som finns på sajten. Här delas också wordpressteman in efter mest visade, mest nerkladdade och bäst betyg, för att se till att man hittar det man söker efter så fort som möjligt. Om du är ute efter något som håller riktigt hög standard är det här ett bra ställe att börja leta på.

themes2wp.com

Den här snygga webbplatsen har både gratis wordpressteman och sådana man får betala för. Ett stort urval är indelade i kategorier som löper ner för den högra delen av skärmen, baserade både på innehåll och funktioner. Det finns också en sökruta så att man kan bli riktigt specifik i sin jakt på wordpressteman. themes2wp_comEtt riktigt bra inslag har ar att det finns anteckningar om varje tema, ofta i form av en punktlista. Om du tycker att det är svårt att bestämma dig baserat på skärmdumparna du ser framför dig, bör det här ge en hjälpande hand. Precis som de andra sajterna kan man antingen välja att förhandsläsa demon eller ladda ner det direkt. Det finns en arkivfunktion som gör att man kan se alla wordpressteman som är postade under en viss tidsperiod.

wpthemesfree.com

Även om sajten ser ganska enkel ut, finns här ett stort utbud av wordpressteman som sträcker sig från roliga till enkla och funktionella. Det finns en kategorilista till höger som innehåller de olika genrer man kan välja bland, från skönhet och affärer, till underhållning och utbildning. Man kan också leta reda på wordpressteman baserade på deras individuella egenskaper eller popularitet (mest nerkladdade, mest visade och så vidare).wpthemesfree_com En annan smidig sökfunktion som finns på den här saften är baserade på etiketter ord som är förknippade med ett visst tema. Om du letar efter ett tema som har moln i sin design, bara klicka på ”clouds”-etiketten så får du se vilka designer som det stämmer in på. Klicka på ett tema som du är intresserad av så får du fram mer information om det – det finns grafer som illustrerar hur många som har tittat på ett tema och som har laddat ner det, och till och med en karta som visar var i världen folk har tittat på det och laddat ner det under en viss tidsperiod. Det är kanske inte så värst användbart, men det är ändå ett trevligt inslag och hjälper dig att bilda dig en uppfattning om hur lockande andra besökare tycker att det är.

  • Share/Bookmark

Tags: , , , , , ,

Gratis bloggmall Artwork bloggdesign

juli 26, 2010 by Samuel Liljekvist · 3 Comments
Filed under: bloggmallar 

Gratis bloggmallar från webdesignblog.se Senaste bloggdesignen är bloggmallen Artwork som man kan ladda ner gratis.

Artwork bloggmall gratis bloggmallar

Artwork bloggmall gratis bloggmallar

Ladda ner bloggmallen här →

Live demo av bloggmallen →

Skriv gärna en kommentar eller dela med dina vänner. Klicka på Share nedan.

Vill du ha bloggmallar för Blogspot, Blogger eller någon annan bloggplattform så skriv en kommentar och önska, så ska jag se vad jag kan göra!

GRATIS BLOGGMALL

  • Share/Bookmark

Tags: , , , , ,

Gratis bloggmall Orange – Designa bloggen bloggdesign

juli 15, 2010 by Samuel Liljekvist · Leave a Comment
Filed under: bloggmallar, skapa egen blogg 

Nu finns en ny gratis bloggmall att ladda ner från Webdesignblog. Denna gratis bloggmall heter Orange och bloggdesignen är just orange. Bloggmallen är utrustad med en vertikal meny med underkategorier och skiftar färg när man rör musen över menyn i bloggmallen. Under headern finns en horisontell meny där bloggens sidor visas. Jag har använt ett wordpress-plugin som heter wp-insert för att infoga annonser före och efter alla inlägg samt i vänsterkolumnen. Hoppas någon gillar denna bloggmall och laddar ner den. Du får gärna låta länken till www.webdesignblog.se vara kvar längst ner i bloggmallen så att fler kan hitta gratis bloggmallar. Vill du ha hjälp att designa bloggen kan du gå med i min bloggskola. Är du inte bekant med WordPress och vill ha hjälp att installera en wordpressblogg på webbhotellet kan du se film om att installera WordPress.

Gratis bloggmall Orange designa bloggen med bloggmallar

Gillar du denna gratis bloggmall kan du ladda ner den via denna länk:

Gratis bloggmall Orange

Klicka här för live demo

  • Share/Bookmark

Tags: , , , ,

Nästa sida »