Marginaler och Kantlinjer

Element i HTML kan ses ungefär som lådor (boxes) och i CSS används detta uttryck också för stilsättning. Den s.k. Box-model i CSS består av flera olika komponenter i des uppbyggnad. Dessa är, med början i ytterst; marginal (margin), kantlinje (border), paddning (padding) och sist själva innehållet (content). När man anger höjd och bredd på ett element är det content man anger storleken på men storleken på hela elementet inkluderar också alla andra komponenter. Så en <div> med 200px width som har 25px margin är faktiskt 250px bred (25px från vänster och 25px från höger). Detta kan lätt skapa viss förvirring om man inte är medveten om det.

Margin är den marginal ett element har från sin yttre kant till andra element. Så ett element med 25px margin till vänster kommer hamna 25 pixlar ifrån element till vänster. Om man bara skriver margin:25px; så blir marginalen 25px åt alla håll. Man kan ange margin-left, margin-right, margin-top eller margin-bottom också och de gör precis vad de låter som. Dock så kan man ange mer än ett värde efter margin: och detta kan ibland vara väldigt förvirrande. Om man anger margin:25px 25px 25px 25px; så gäller det alla håll men vilka värden som går till vilket håll är inte alltför lätt att tolka. Det fungerar på följande sätt: top right bottom left. Så om den andra siffran ändras till 50px så blir marginalen till höger bredare. Det går också att ange två eller tre värden vilket gör det hela ännu lite luddigare. Anger man två värden tolkas det första som top och bottom medans det andra tolkas som right och left. Anger man tre värden så är det första top, det mellersa right och left och det sista bottom. Om man inte vill ha lika värde åt alla håll är det väldigt mycket tydligare om man antingen använder den semantiska syntaxen (margin-right) eller skriver ut alla fyra värden.

Padding är ungefär samma sak som margin bara att istället för att distansen sätts utanför elementets gräns så sätts den innanför. Så om ett element har en top marginal på 50px så hamnar ju elementet 50px ifrån något element ovanför men om det har en top padding på 50px så betyder det att själva innehållet i elementet hamnar 50px under kanten för elementet. Värden för padding anges på precis samma sätt som för margin och tänk på att anger man både padding och margin så ökar båda på det egentliga storleken på elementet.

Border är för att sätta kantlinjer runt element. Dessa kan se väldigt olika ut beroende på en hel del olika värden. De större elementen på denna sida har en grön border som också är rundad i hörner och kastar skugga. De tre viktigaste attributen för borders är: border-color, border-width och border-style. Dessa kan slås ihop och skrivas efter varande i ett enkelt border attribut. Alla dessa gäller alla kantlinjer runt ett element men med alla dessa kan man också ange en specifik kantlinje genom att lägga till dess nyckelord efter border (så border-top, border-top-color, border-top-width eller border-top-style). Det går också att, precis som med padding och margin, ange flera värden efter varandra som då pekar mot samma kant som för margin eller padding. Border-color anges med färger precis som beskrivet innan. Border-width är helt enkelt hur bred, eller tjock, kanten är och anges i de vanliga enheterna. Border-style är vilken typ av kantlinje man kan ha. Det finns en hel del att välja på. När man kombinerar dessa tre olika stilsättningar för kantlinjer så kan man få en enorm mängd olika stil på dom. Notera att borders också ökar elementets storlek.

Outlineär väldigt likt border och faktum är att man stilsätter den på precis samma sätt. Det finns dock en väldigt viktig skillnad och det är att outline ritas ut utanför elementet och ändrar därför inte elementets storlek.

Nedan följer ett exempel på det som har gåtts igenom hittils. Den röda streckade linjer är Outline och den blåa linjen är Border som är 5px bred. Den yttre boxen har en margin på 15px, en width och height på 300px. Den mellersta boxen har en margin på 47x samt en padding på 47px och width/height är 100px. Själva elementets storlek för den mellersta boxen blir då 298px width och 298px height: (47px padding *2)+(47px margin *2)+(5px border *2) = 298. Den inre boxen har helt enkelt bara en width/height på 90px (mellersta boxens contents storlek - kantlinjens bredd).

Det finns också några sätt att ändra på synligheten i elementen. Detta används för att göra en hel del olika saker men vanliga är t.ex. bara att dölja ett element eller bestämma vad som händer om ett element spiller över ett annat.

Visibility är till för att ändra om ett element ska synas eller inte. Elementet kommer fortfarande att ta upp plats på sidan även om det inte syns. Värden som kan anges är: visible (default), hidden och collapse. Collapse är enbart till för tabell element. Den tar helt enkelt bort en rad eller en kolumn utan att ändra den övergripande layouten på tabellen. Om collapse anges på något annat element än i tables så översätts det till hidden. Visiblity är väldigt användbart när man sedan blandar in JavaScript för man kan enkelt ändra detta värde beroende på input. Man kan t.ex. tänka sig att något är döljt tills användare för muspekaren över den.

Clip är en metod för att hantera vad som händer om innehållet i ett element inte får plats i det. Clip skär helt enkelt av innehållet så att det enda som syns är det som får plats i elementet. Detta fungerar bara på element som har attributet position satt till absolute.

Overflow är till just för att hantera vad som händer om ett element spiller över ett annat. De värden man kan ange är: visible (default), hidden, scroll och auto. Standard värdet visible är om det inte overflow anges alls och då spiller helt enkelt elementen över och då lägger de sig över och under varandra (ofta på ganska fula sätt). Med hidden så menas att den del av ett element som spills över skärs bort och syns inte. Scroll gör samma sak bara att det läggs till en scrollbar så att man kan scrolla för att se det som är bortskuret. Auto gör samma sak som scroll men lägger bara till en scrollbar om något faktist blivigt beskuret.

Display är för att ändra hur ett element visas. Det man kan ange är hur olika typer av HTML element faktiskt fungerar. Standard värdet är inline och det fungerar helt enkelt så att det inte blir något radavbrott innan eller efter elementet och det tillåter att andra element ligger brevid det. <p> fungerar ju t.ex. inte så men om man vill att det ska fungera så så anger man helt enkelt bara display:inline; för ett <p> element. Det sätt som <p> visas på som standard heter block. Förutom dessa två finns en blanding av de två, inline-block som tillåter att man lägger det på samma rad som andra element men annars beter sig som ett block. Det finns också list-item som gör att elementet visas precis som en punkt i en lista. Förutom dessa så finns det också en hel del för att visa element som komponenter av en tabell.

Som det nämndes i avsnittet om färger så kan man få genomskinlighet på element. Enklaste sättet att göra detta är med opacity attributet som tar ett värde från 0.0 till 1.0. Förutom detta sätt kan man göra precis som nämnders i avsnittet med färger genom att använda RGBA eller HSLA.

Som det kanske syns på denna sida går det utmärkt att få rundade hörn på ens element också. Detta göra genom attributet border-radius. Som det låter så anger man en radie för att bestämma hur hörnet ska se ut. Border-radius går att ange på specifika kantlinjer genom border-top-left-radius, border-top-right-radius o.s.v.

Man kan också lägga till skuggor "under" element. Detta görs via box-shadow. Värdena som denna tar är i ordning: horisontell position, vertikal position, utsuddning, spridning, färg och om skuggan skall vara utanför eller inne i elementet (inset). Bara de två positionsvärdena har krav att vara angivna och de andra får 0 värden om de inte anges.

Det går också att göra färgövergångar (gradients) i CSS numera. Detta görs med linear-gradient eller radial-gradient. Dessa anges som värden för ett background attribut och har själva en hel del värden. Gradients genererar en bild öch ska därför läggas på attribut som hanterar bilder och inte, som kan verka logiskt, på t.ex. color. Linear-gradient tar först ett värde i vilken rikting blandningen sker (top, right, left, bottom eller en blanding, t.ex. top right) sen tar den färger där den startar och sedan färgen där den avslutas. Så: background-image:linear-gradient(left, #CC0033, #CCCCCC); blir:

Radial-gradient är lite mer komplicerad men rent abstrakt så gör den samma sak. Värden man behöver ange är vart den startar, form (cirkel eller ellips), storlek, startfärg, slutfärg. Så denna kod: background-image:radial-gradient(53% 50%, circle contain, #FFFFFF, #CC0033); blir:

Med både radial- och linear-gradients kan man ange mer än bara en genomgång och det görs helt enkelt genom att sätta avslutet till mindre än 100% och sen ange ett nytt start därefter. Man kan också få dem att upprepa sig själva genom att ange repeating-radial-gradient (eller repeating-linear-gradient). Nedan är samma som exemplet innan fast med repeating tillagt.

I skrivande stund måste man lägga till ett prefix för att få dessa att fungera. Detta prefix är för att få det att fungera i olika webläsare. -webkit- är för Chrome och Safari, -moz- för Firefox, -o- för Opera och -ms- för Internet Explorer. Detta läggs till innan linear eller radial men efter background. Ex: background-image:-webkit-linear-gradient(...);

Det går också att ha mer än en bakgrundsbild. Dessa läggs då i lager som man bestämmer genom vilken ordning man anger dem i. Så t.ex: background-image:url(sun.png, sky.png);. Den första bilden som anges hamnar i topplagret och så fortsätter det. Man kan ange position på samma sätt: backgroud-position:left top, center;.

				
					background-image:url("images/flame_max_alpha.png"), url("images/google.jpg");
					background-position:center, bottom center;
					background-repeat:no-repeat;
					background-size:656px 873px,contain;
				
			

Blir: