CSS-grunder - Versionshistorik

PGJ: /* Håll det enkelt */

2019-04-09T12:58:28Z

Håll det enkelt

← Äldre version		Versionen från 9 april 2019 kl. 12.58
Rad 29:		Rad 29:

	== Håll det enkelt ==		== Håll det enkelt ==
	Det är bra att försöka hålla sina regler så enkla som möjligt, då blir din sida snabbare. Det är även bra att försöka ha så få regler som möjligt, även detta påverkar prestandan på din webbplats. Generellt sett behöver man inte bry sig om detta, det är bara när man har extremt komplicerade regler som det börjar spela någon större roll. Prestandaförluster orsakade av CSS-regler kanske inte kommer att vara speciellt märkbart på en vanlig desktop-PC, men på en mobilenhet, som inte är lika kraftfull, finns det en viss chans att hastighetsskillnaden kommer att märkas. Speciellt gäller detta om man har [[selektor]]er som är komplicerade eller som matchar alltför mycket (t.ex. "<code>* </code>"-selektorn).		Det är bra att försöka hålla sina regler så enkla som möjligt, då blir din sida snabbare. Det är även bra att försöka ha så få regler som möjligt, även detta påverkar prestandan på din webbplats. Generellt sett behöver man inte bry sig om detta, det är bara när man har extremt komplicerade regler som det börjar spela någon större roll. Prestandaförluster orsakade av CSS-regler kanske inte kommer att vara speciellt märkbart på en vanlig desktop-PC, men på en mobilenhet, som inte är lika kraftfull, finns det en viss chans att hastighetsskillnaden kommer att märkas. Speciellt gäller detta om man har [[selektor]]er som är komplicerade eller som matchar alltför mycket (t.ex. "<code>*</code>"-selektorn).

	== Nästa aktivitet ==		== Nästa aktivitet ==

PGJ: /* En CSS-regel */

2019-04-09T12:57:13Z

En CSS-regel

← Äldre version		Versionen från 9 april 2019 kl. 12.57
Rad 21:		Rad 21:
	Ovanstående är bland de enklaste [[CSS-regler]] man kan skapa.		Ovanstående är bland de enklaste [[CSS-regler]] man kan skapa.

	Först har vi [[selektor]]n, i detta fall ”<code>[[hx\|h1]]</code>”. [[Selektor]]n anger vilka [[element]] som ska påverkas. I exemplet kommer alla <code>[[hx\|h1]]</code>-element i ~~det~~ dokument att väljas ut. Det spelar ingen roll var i dokumentet de används, eller om de ligger inuti andra element.		Först har vi [[selektor]]n, i detta fall ”<code>[[hx\|h1]]</code>”. [[Selektor]]n anger vilka [[element]] som ska påverkas. I exemplet kommer alla <code>[[hx\|h1]]</code>-element i dokument att väljas ut. Det spelar ingen roll var i dokumentet de används, eller om de ligger inuti andra element.

	Därefter följer ett block som inleds med ett ”<code>{</code>”-tecken och som avslutas med ett ”<code>}</code>”-tecken. Allt inom detta block är egenskapsnamn och värden som egenskaperna ska tilldelas. I vårt fall säger vi att egenskapen ”<code>[[color]]</code>”, vilket är förgrundsfärgen, ska sättas till röd. Detta kommer att göra att texten blir rödfärgad (om du vill lära dig mer om hur man kan ange olika färger, kan du hoppa till aktiviteten [[färger]]).		Därefter följer ett block som inleds med ett ”<code>{</code>”-tecken och som avslutas med ett ”<code>}</code>”-tecken. Allt inom detta block är egenskapsnamn och värden som egenskaperna ska tilldelas. I vårt fall säger vi att egenskapen ”<code>[[color]]</code>”, vilket är förgrundsfärgen, ska sättas till röd. Detta kommer att göra att texten blir rödfärgad (om du vill lära dig mer om hur man kan ange olika färger, kan du hoppa till aktiviteten [[färger]]).

PGJ: /* Ännu ett dataspråk */

2019-04-09T12:55:31Z

Ännu ett dataspråk

← Äldre version		Versionen från 9 april 2019 kl. 12.55
Rad 8:		Rad 8:
	CSS-[[selektor]]erna är många och i vissa fall är de rätt så krångliga att förstå. Men vi ska försöka arbeta oss fram till en uppsättning [[selektor]]er som kan hjälpa oss i de flesta situationer.		CSS-[[selektor]]erna är många och i vissa fall är de rätt så krångliga att förstå. Men vi ska försöka arbeta oss fram till en uppsättning [[selektor]]er som kan hjälpa oss i de flesta situationer.

	Efter [[selektor]]n följer en lista med de egenskaper som ska förändras för de utvalda elementen. Egenskapsförändringarna samlas i ett block som påbörjas med ett "<code>{</code>"-~~teckjen~~ och som avslutas med ett "<code>}</code>"-tecken.		Efter [[selektor]]n följer en lista med de egenskaper som ska förändras för de utvalda elementen. Egenskapsförändringarna samlas i ett block som påbörjas med ett "<code>{</code>"-tecken och som avslutas med ett "<code>}</code>"-tecken.

	== En CSS-regel ==		== En CSS-regel ==

PGJ: /* En CSS-regel */

2019-01-13T13:07:08Z

En CSS-regel

← Äldre version		Versionen från 13 januari 2019 kl. 13.07
Rad 12:		Rad 12:
	== En CSS-regel ==		== En CSS-regel ==
	Den enklaste [[selektor]]n är den då man helt enkelt anger elementnamnet på det [[element]] man vill komma åt. När man anger ett elementnamn så kommer alla [[element]] av den typen i dokumentet att påverkas. För att skapa en enkel [[CSS-regel]] som gör att alla våra <code>[[hx\|h1]]</code>-element får röd textfärg, skulle man kunna göra så här:		Den enklaste [[selektor]]n är den då man helt enkelt anger elementnamnet på det [[element]] man vill komma åt. När man anger ett elementnamn så kommer alla [[element]] av den typen i dokumentet att påverkas. För att skapa en enkel [[CSS-regel]] som gör att alla våra <code>[[hx\|h1]]</code>-element får röd textfärg, skulle man kunna göra så här:
	<codepen pen="doKzZx" tab="css" height="~~150~~">		<codepen pen="doKzZx" tab="css,result" height="200">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	h1 {		h1 {

PGJ: /* Håll det enkelt */

2016-10-05T07:06:34Z

Håll det enkelt

← Äldre version		Versionen från 5 oktober 2016 kl. 07.06
Rad 29:		Rad 29:

	== Håll det enkelt ==		== Håll det enkelt ==
	Det är bra att försöka hålla sina regler så enkla som möjligt, då blir din sida snabbare. Det är även bra att försöka ha så få regler som möjligt, även detta påverkar prestandan på din webbplats. Generellt sett behöver man inte bry sig om detta, det är bara när man har extremt komplicerade regler som det börjar spela någon större roll. ~~Det~~ kanske inte kommer att vara speciellt märkbart på en vanlig desktop-PC, men på en mobilenhet som inte är lika kraftfull finns det en viss chans att hastighetsskillnaden ~~bli~~ att märkas. Speciellt gäller detta om man har [[selektor]]er som är komplicerade eller som matchar alltför mycket (t.ex. "<code>* </code>"-selektorn).		Det är bra att försöka hålla sina regler så enkla som möjligt, då blir din sida snabbare. Det är även bra att försöka ha så få regler som möjligt, även detta påverkar prestandan på din webbplats. Generellt sett behöver man inte bry sig om detta, det är bara när man har extremt komplicerade regler som det börjar spela någon större roll. Prestandaförluster orsakade av CSS-regler kanske inte kommer att vara speciellt märkbart på en vanlig desktop-PC, men på en mobilenhet, som inte är lika kraftfull, finns det en viss chans att hastighetsskillnaden kommer att märkas. Speciellt gäller detta om man har [[selektor]]er som är komplicerade eller som matchar alltför mycket (t.ex. "<code>* </code>"-selektorn).

	== Nästa aktivitet ==		== Nästa aktivitet ==

PGJ: /* Massvis med CSS-egenskaper */

2016-10-05T07:04:38Z

Massvis med CSS-egenskaper

← Äldre version		Versionen från 5 oktober 2016 kl. 07.04
Rad 26:		Rad 26:

	== Massvis med CSS-egenskaper ==		== Massvis med CSS-egenskaper ==
	Som du kommer att se, finns det en uppsjö av olika egenskaper man kan sätta. Vissa egenskaper kanske enbart är giltiga/vettiga att använda med vissa typer av HTML-element. Du behöver ju knappast ändra på list-relaterade egenskaper i ett <code>[[p]]</code>-element till exempel. Vi kommer att gå igenom en del egenskaper här, men titta även på [[CSS-egenskapslista\|~~Webblings lista]] över tillgängliga~~ CSS-egenskaper ~~och lek~~ runt lite med de olika egenskaperna och se vad som händer.		Som du kommer att se, finns det en uppsjö av olika egenskaper man kan sätta. Vissa egenskaper kanske enbart är giltiga/vettiga att använda med vissa typer av HTML-element. Du behöver ju knappast ändra på list-relaterade egenskaper i ett <code>[[p]]</code>-element till exempel. Vi kommer att gå igenom en del egenskaper här, men titta även på Webblings lista över tillgängliga [[CSS-egenskapslista\|CSS-egenskaper]]. Lek runt lite med de olika egenskaperna och se vad som händer!

	== Håll det enkelt ==		== Håll det enkelt ==

PGJ: /* En CSS-regel */

2016-10-05T07:03:19Z

En CSS-regel

← Äldre version		Versionen från 5 oktober 2016 kl. 07.03
Rad 19:		Rad 19:
	</syntaxhighlight>		</syntaxhighlight>
	</codepen>		</codepen>
	Ovanstående är bland de enklaste [[CSS-regler]] man kan skapa. Först har vi [[selektor]]n, i detta fall ”<code>[[hx\|h1]]</code>”. [[Selektor]]n anger vilka [[element]] som ska påverkas~~, i vårt fall~~ alla <code>[[hx\|h1]]</code>-element i det dokument ~~som regeln gäller för~~. Därefter följer ett block som inleds med ett ”<code>{</code>”-tecken och som avslutas med ett ”<code>}</code>”-tecken. Allt inom detta block är egenskapsnamn och värden som egenskaperna ska tilldelas. I vårt fall säger vi att egenskapen ”<code>[[color]]</code>”, vilket är förgrundsfärgen, ska sättas till röd. Detta kommer att göra att texten blir rödfärgad~~. Om~~ du vill lära dig mer om hur man kan ange olika färger, kan du hoppa till aktiviteten [[färger]].		Ovanstående är bland de enklaste [[CSS-regler]] man kan skapa.

			Först har vi [[selektor]]n, i detta fall ”<code>[[hx\|h1]]</code>”. [[Selektor]]n anger vilka [[element]] som ska påverkas. I exemplet kommer alla <code>[[hx\|h1]]</code>-element i det dokument att väljas ut. Det spelar ingen roll var i dokumentet de används, eller om de ligger inuti andra element.

			Därefter följer ett block som inleds med ett ”<code>{</code>”-tecken och som avslutas med ett ”<code>}</code>”-tecken. Allt inom detta block är egenskapsnamn och värden som egenskaperna ska tilldelas. I vårt fall säger vi att egenskapen ”<code>[[color]]</code>”, vilket är förgrundsfärgen, ska sättas till röd. Detta kommer att göra att texten blir rödfärgad (om du vill lära dig mer om hur man kan ange olika färger, kan du hoppa till aktiviteten [[färger]]).

	== Massvis med CSS-egenskaper ==		== Massvis med CSS-egenskaper ==

PGJ: /* Ännu ett dataspråk */

2016-10-05T07:00:07Z

Ännu ett dataspråk

← Äldre version		Versionen från 5 oktober 2016 kl. 07.00
Rad 2:		Rad 2:

	== Ännu ett dataspråk ==		== Ännu ett dataspråk ==
	[[CSS]] är liksom [[HTML]] ett slags dataspråk. Man brukar säga att man skapar [[CSS-regler]]. [[CSS-regler]] består av två delar. Vi har först en [[selektor]], som är en sats som gör ett urval bland HTML-~~element och enbart~~ väljer ut specifika element och ~~som~~ därmed ~~bestämmer~~ vilka [[element]] som ska påverkas av ~~en specifik~~ [[CSS-regel]]~~. Därefter följer en specifikation för vilka egenskaper som ska förändras för de utvalda elementen~~.		[[CSS]] är liksom [[HTML]] ett slags dataspråk. Man brukar säga att man skapar [[CSS-regler]]. [[CSS-regler]] består av två delar. Dessa delar anger dels vilka element som ska påverkas, dels vilka egenskaper som man vill förändra.

			Vi har först en [[selektor]], som är en sats som gör ett urval bland HTML-elementen i sidan. [[Selektor]]n väljer ut specifika element och bestämmer därmed vilka [[element]] som ska påverkas av [[CSS-regel]]n ifråga.

	CSS-[[selektor]]erna är många och i vissa fall är de rätt så krångliga att förstå. Men vi ska försöka arbeta oss fram till en uppsättning [[selektor]]er som kan hjälpa oss i de flesta situationer.		CSS-[[selektor]]erna är många och i vissa fall är de rätt så krångliga att förstå. Men vi ska försöka arbeta oss fram till en uppsättning [[selektor]]er som kan hjälpa oss i de flesta situationer.

			Efter [[selektor]]n följer en lista med de egenskaper som ska förändras för de utvalda elementen. Egenskapsförändringarna samlas i ett block som påbörjas med ett "<code>{</code>"-teckjen och som avslutas med ett "<code>}</code>"-tecken.

	== En CSS-regel ==		== En CSS-regel ==

PGJ den 19 januari 2016 kl. 09.19

2016-01-19T09:19:47Z

← Äldre version		Versionen från 19 januari 2016 kl. 09.19
Rad 1:		Rad 1:
	Det börjar bli dags att få till lite roligare utseende på våra sidor! För att styra utseendet på webbsidor använder man sig av [[CSS]]. Detta är en förkortning för ”[[Cascading Style Sheet]]”. Som slutdelen av den termen anger så handlar det om [[stilmall]]ar. Lite förenklat kan man säga att ”cascading”-delen handlar om hur webbläsaren hanterar situationen när olika [[stilmall]]ar försöker ändra på samma saker. Just nu är det inte så jätteviktigt hur detta fungerar. Vi återkommer till det.		Det börjar bli dags att få till lite roligare utseende på våra sidor! För att styra utseendet på webbsidor använder man sig av [[CSS]]. Detta är en förkortning för ”[[Cascading Style Sheet]]”. Som slutdelen av den termen anger så handlar det om [[stilmall]]ar. Lite förenklat kan man säga att ”cascading”-delen handlar om hur webbläsaren hanterar situationen när olika [[stilmall]]ar försöker ändra på samma saker. Just nu är det inte så jätteviktigt hur detta fungerar. Vi återkommer till det.

			== Ännu ett dataspråk ==
	[[CSS]] är liksom [[HTML]] ett slags dataspråk. Man brukar säga att man skapar [[CSS-regler]]. [[CSS-regler]] består av två delar. Vi har först en [[selektor]], som är en sats som gör ett urval bland HTML-element och enbart väljer ut specifika element och som därmed bestämmer vilka [[element]] som ska påverkas av en specifik [[CSS-regel]]. Därefter följer en specifikation för vilka egenskaper som ska förändras för de utvalda elementen.		[[CSS]] är liksom [[HTML]] ett slags dataspråk. Man brukar säga att man skapar [[CSS-regler]]. [[CSS-regler]] består av två delar. Vi har först en [[selektor]], som är en sats som gör ett urval bland HTML-element och enbart väljer ut specifika element och som därmed bestämmer vilka [[element]] som ska påverkas av en specifik [[CSS-regel]]. Därefter följer en specifikation för vilka egenskaper som ska förändras för de utvalda elementen.

PGJ: /* Nästa aktivitet */

2016-01-03T11:54:50Z

Nästa aktivitet

← Äldre version		Versionen från 3 januari 2016 kl. 11.54
Rad 24:		Rad 24:
	== Nästa aktivitet ==		== Nästa aktivitet ==
	[[Färg]]		[[Färg]]

			[[Category:Webbutveckling]]