WebDesignBlog » cascading style sheets

Tre sätt att formatera med CSS – Cascading Stylesheets

Samuel Liljekvist — Thu, 26 Jan 2012 01:58:38 +0000

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:

Det här stycket visas med webbläsarens standardforrmat; för stycke.

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.

Och nu är vi tillbaka till det vanliga standardstyckeformatet utan någon lokal stil.

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:

Exempel på inbäddade stilar

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:

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:

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:

Grundkurs i CSS Designa egen blogg med stilmallar

CSS från egenskapspanelen i Dreamweaver CS5 program webbdesign

Samuel Liljekvist — Mon, 09 Jan 2012 02:55:40 +0000

Hur ändrar man CSS via egenskapspanelen i Dreamweaver CS5 program webbdesign? Den här korta filmen visar hur man justerar CSS-egenskaperna i egenskapspanelen och vad man bör tänka på när man gör det. Det gäller att veta vilken CSS-regel man ändrar egentligen, så att man till exempel inte ändrar textfärg på alla stycken på webbplatsen av misstag.

Om inte filmen fungerar Se filmen här →

Ladda ner din gratis testversion av Dreamweaver CS5 program webbdesign här: Adobe Dreamweaver CS5

Originally posted. 11 November, 2010

Liknande inlägg:

Nya CSS funktioner i Dreamweaver CS5 program webbdesign

Samuel Liljekvist — Sun, 01 Jan 2012 14:57:51 +0000

Lär dig de nya CSS funktionerna i Dreamweaver CS5 program webbdesign. Se denna CSS-tutorial och lär dig mer om CSS i webbdesign programmet Dreamweaver CS5

Ladda ner din gratis testversion av Dreamweaver CS5 program webbdesign här: Adobe Dreamweaver CS5

Originally posted. 13 November, 2010

Liknande inlägg:

Grudläggande tutorial om CSS i Dreamweaver CS5 program webbdesign

Samuel Liljekvist — Mon, 08 Nov 2010 23:28:26 +0000

Det mest grundläggande om CSS i Dreamweaver CS5 program webbdesign. Vad är CSS? Hur fungerar CSS? Var hittar man CSS-koden? Den mest grundläggande frågan om CSS: Varför ska man använda CSS och vad är så bra med det? Den här korta filmen (tutorial) från Adobe TV förklarar på ett enkelt sätt det mest grundläggande när det gäller CSS (Cascading Style Sheets)

Dreamweaver är det ledande valet när det gäller program för webbdesign. Ett program för webbdesign som är ett måste för varje webbdesigner. Du kan ladda ner en fullt funktionell provversion som du får använda 30 dagar utan att betala något. Du kommer till Abobe via den här länken: Adobe Dreamweaver CS5

Liknande inlägg:

Grundkurs i CSS del 2 lär dig design med CSS

Samuel Liljekvist — Mon, 26 Jul 2010 13:14:44 +0000

I den här andra videon om CSS får du lära dig designa länkar och text med CSS. CSS video tutorial 2:a delen. 1:a delen handlar om hur man skapar en layout med hjälp av CSS (som är en förkortning för Cascading Style Sheets) och i praktiken är stilmallar som styr utseendet på en webbsida eller bloggdesign. Med hjälp av CSS kan du styra utseendet på din blogg eller hemsida i den särskilda stilmallen. Du kan alltså ändra på till exempel alla bilder eller all text bara genom att ändra i stilmallen. Lär dig css så skapar du bättre hemsidor eller bloggsidor, samtidigt som du effektiviserar designarbetet.

CSS TUTORIAL – DESIGN MED CSS

Liknande inlägg:

Grundkurs i CSS Designa egen blogg med stilmallar

Grundkurs i CSS Designa egen blogg med stilmallar

Samuel Liljekvist — Fri, 04 Jun 2010 08:21:37 +0000

Designa bloggen, skapa egen blogg med stilmallar. Lär dig ändra CSS för att skapa egen bloggdesign. Grundkurs i CSS (Cascading Style Sheets). I den här första delen får du lära dig grunderna i hur man kan styra utseendet med hjälp av stilmallar (CSS). Om du till exempel bloggar med WordPress kan du ändra på stilmallen för att designa bloggen så som du vill ha den.

Fler filmer kommer! Skriv gärna en kommentar och säg om du hade användning för den här filmen om CSS.

Liknande inlägg: