Nybörjare » CSS


Författare: Roosweb
Skrevs den: den 2 juli 2007

Utskriftsvänlig text Utskriftsvänlig text
Introduktion till CSS

Lite historik om CSS:
CSS - Cascading Style Sheets eller stilmallar på Svenska, skapades som ett tillägg till HTML 4.0 Detta av behovet för att kunna styra webbsidans design och innehåll på ett effektivare sätt. CSS kom 1996 och gjorde det möjligt att konfigurera mycket av hur saker skulle se ut och visas på sidan. Lite senare kom även CSS 2 som gjorde det möjligt att enklare placera saker på sidan utan att få lov att arbeta med tabeller, som från början inte ens var gjord för detta.

CSS gör det möjligt att styra en hel webbplats, design. Behöver man ändra något så är behovet av att ända på varje sida på hela webbplatsen borttagen och istället ändrar man bara CSS filen. Sedan görs CSS att själva HTML koden inte längre blir lika rörig. Allt på sidan formateras ju nu i CSS filen, och webbläsaren slipper läsa igenom all kod om och om igen när den bara behöver läsa CSS-mallen.

Fördelar Med CSS:
Fördelarna med CSS är många och här är några av dem:
* En hel webbplats design kan nu styras av en fil, CSS-mallen.
* Eftersom HTML dokumenten då blir mindre laddas sidan snabbare också.
* CSS gör det möjligt att skapa mycket snyggare sidor än tidigare.
* Gör det möjligt att koda enligt Strict standard HTML och XHTML

Din första sida med CSS:
Jag ska nu guida dig igenom CSS teknikens grunder. CSS är enligt mig lättare än HTML & XHTML och mer förståligt då de flesta saker man skriver i CSS-mallen är engelska ord och inte en massa konstiga förkortningar. Jag ska också passa på att säga att CSS kan se olika ut i olika webbläsare. Internet Explorer 6.0 visar t.ex. helt annorlunda än vad Mozilla Firefox gör. Detta för att IE läser CSS-mallen efter sina agna regler och inte som Mozilla Firefox, efter W3C’s standard. Så ett hett tips när du gör sidor med CSS är att först göra dem så att de ser bra ut i Firefox. Sedan att fixa till den så den ser så lika ut som möjligt i IE. Från och med IE 7.0 ska detta dock vara någorlunda fixat.
Men nog om sådant nu. Du ska nu få se först o främst hur man skapar, länkar och använder en CSS-mall.

Först så skapar du ett vanligt XHTML dokument, som ser ut så här:
Kod:

<html>
<head>
<title>Min Första CSS sida</title>
</head>
<body>
Hej detta är min första CSS sida!
<br />
Här är en menylänk: <a href=”sida2.htm”>Sida 2</a>
<br />
Innehåll: Hej jag har nu gjort min kanske första riktiga CSS sida.
</body>
</html>



Detta är som sagt ett vanligt XHTML dokument med tre rader text. Varav den mittersta raden har en länk. Med hjälp av lite CSS ska vi snart fixa till sidan!
För att göra en CSS mall så kan du använda vilket HTML editor program som helst. Om du nu inte har tillgång till det så fungerar Anteckningar eller Notepad lika bra. Jag hoppas att du har sparat HTML dokumentet någonstans nu? Okej då fortsätter vi.
Öppna Anteckningar
Högst upp i Anteckningar skriver du såhär: /* Hej detta är min CSS mall! */  
Allting inom /* kommer inte att läsas av webbläsaren. Detta är bra om du behöver göra kommentarer för vad som är vad, och även om du vill skriva en liten Copyright text. Gör nu tre enterslag och skriv in följande:
Kod:

/* Divar */

#Toppen {
width: 800px;
height: 75px;
border: 1px solid;
}


Spara nu CSS mallen genom att för det istället står .txt, så skriver du style.css, alltså inte style.txt utan .css annars kommer det inte fungera. Spara på samma ställe som där du sparat HTML dokumentet vi just gjort.

Sådär nu är din första CSS mall skapad, om än lite tom, men alltid en början! Jag ska nu gå igen vad vi just skrev.

#Toppen, anger att det är en ny såkallad DIV vi har skapat. DIV kan du se som boxar du kommer bygga din sida med, DIV används istället för tabeller och är mycket bättre än tabeller som egentligen aldrig var gjorda för design. ” { ” tecknet anger att efter det kommer formateringen på #Toppen. Allt inom ” { och } ” Kommer påverka hur DIV’ en ser ut.
” width: 800px; ” anger bredden på boxen eller ”lådan”. Kom ihåg att alltid efter att du angivit vad det är du vill formatera, i detta fall bredden ”width”  så ska ” : ” komma efter. Efter ” : ” tecknet skriver hur den ska formateras, i detta fall då till 800 pixlars bredd. Sedan ännu en sak som är superviktig för att detta ska fungera är att du sätter dit ” ; ” tecknet efter sista stavelsen.

” height: 75px; ”  Fungerar på exakt samma sätt som width, fast denna anger höjden på lådan.

” border: 1px solid; ” Denna anger att runt lådan ska det vara en ”border” en kant. Den ska vara 1pixel hög och den ska vara tät utan mellanrum, alltså solid. Man kan formatera en kant ”border” på många fler sätt en solid, men detta kommer jag ta upp i nästa del.

” } ” Säger att formateringen av DIV’ en #Toppen nu är klar. Notera att } alltid finns med efter allt du formaterat, annars kommer inte CSS mallen fungera korrekt, eller alls.

Sådär bra jobbat! Nu vet du det mest grundläggande om att göra en box som du sedan kan lägga saker i som jag ska visa nu! Men först och främst måste vi ju berätta för HTML dokumentet att vi har en CSS mall. Detta gör vi genom att lägga denna kod:
Kod:

<link rel="stylesheet" href="style.css" />


Som sagt berättar den där kodsnutten att vi nu använder oss av en sidmall för att formatera sidan. Vi ska alldeles snart kolla hur sidan ser ut, men först ska jag berätta lite om vad jag menar med XHTML. Du har förmodligen bara hört talats om HTML. HTML är gammalt vid det här laget och något nytt behövdes på webben. Så då istället för att fortsätta att bara uppdatera HTML, så skapades XHTML 1.0. XHTML innebär att man nu kommer få skriva koden i mera ordning och inte huller om buller. Vilket också är skönt om man måste t.ex. ändra något. XHTML införde också en del nya saker som att man nu ALLTID ska ha en slut-tagg  = / tecken. Där man istället för en ny rad kunde skriva <br> i HTML måste man nu alltså skriva <br  /> i XHTML. Samma gäller exempelvis bilder, där man nu måste ange både width, height och alt samt / tecknet. Men eftersom detta är en nybörjar guide och med fokus på CSS så ska vi inte lägga mer vikt på XHTML just nu, det enda vi ska göra bara innan vi öppnar sidan är att lägga denna bit kod
Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


OVANFÖR <html> taggen, såhär:
Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Min Första CSS sida</title>


Doctype berättar att det är XHTML 1.0 vi kodar i, och är även nödvändigt vid validering av sidan, på http://validator.w3.org  

Nu är det dags att öppna sidan! Som ni ser är det tre rader med test och en hyperlänk i raden i mitten. Sidan är varken snygg eller bra. Usch. Men med hjälp av CSS ska vi piffa till den lite nu! Koden vi nyss skrev i CSS-mallen ska vi nu använda så att ”Hej detta är min första CSS sida” hamnar för sig själv högst upp på sidan i en box. Vi gör detta genom att lägga till detta vid texten:
Kod:

<div id="Toppen">Hej detta är min första CSS sida!</div>


Spara sidan och öppna den i din webbläsare igen.Som du ser så ligger nu texten i en box med en svart ram skiljd från resten av texten. Men vi ska självklart piffa till mera. Skriv till detta högst upp i CSS-mallen.
Kod:

body {
background-color: #e1e1e1;
font-family: tahoma, verdana, arial;
font-size: 11px;
}


Spara och kolla på sidan. Nu så har du fått en bakgrundsfärg, bättre typsnitt och även ställt in storleken på hur stor texten ska vara normalt. Som du ser så har jag även skrivigt fler typsnitter än bara tahoma som är mitt förstahandsval. Det betyder att det är den texten som ska användas om personen som tittar på sidan har den fonten installerad på datan. Har han inte det ska mitt andrahandsval "verdana" väljas. Har han inte det ska mitt tredjehandsval väljas och så vidare. Men som du ser så ligger texten väldigt tajt med boxen, så vi ska se till att få lite utrymme mellan boxen och text. Då lägger vi till detta i ”Toppen” i CSS-mallen:
Kod:

#Toppen {
width: 800px;
height: 75px;
padding: 3px;
margin: 0px auto;
border: 1px solid;
}


Som du ser nu så blev det lite mera luft mellan boxens kanter och text, skönt. Paddingen gör att boxen också ökar i storlek, här med 3px till höger, vänster, toppen och botten. Men du märkte även ”hoppas jag” att boxen nu blev centrerad! Och hur kan den bli det fast du gör fönstret olika stort och olika upplösningar? Jo det är helt enkelt en väldigt smart funktion med CSS som gör att det automatiskt ställer in sig så boxen/diven alltid blir centrerad! Koden som gör detta är då
Kod:

margin: 0px auto;


Nu för att träna gör vi en till DIV eller box och lägger in länken och ”innehåll texten” Diven jag gör ser ut så här i CSS mallen:
Kod:

#Content {
width: 800px;
min-height: 100px;
padding: 3px;
margin: 0px auto;
border: 1px solid;
}


Och sedan tar jag fram denna diven under ”Toppen” diven i HTML-dokumentet såhär:
Kod:

<body>
<div id="Toppen">Hej detta är min första CSS sida!</div>
<div id="Content">
<br />
Här är en menylänk: <a href=”sida2.htm”>Sida 2</a>
<br />
Innehåll: Hej jag har nu gjort min kanske första riktiga CSS sida.</div>
</body>


Spara nu och kolla resultatet. Som du ser har vi nu en ny box under ”toppen” boxen. Som ni ser så är även boxen rätt stor fast den inte har så mycket text i sig, och inte längre använder jag bara ”height” i CSS-mallen utan ”min-height”. Varför? Jo för att om det var ett bestämt värde skulle boxen inte kunna bli större om det blev mer text än plats, men med min-height, så säger jag här att den SKA kunna bli större, men INTE mindre än 100 pixlar hög. Smart va?

För att första artikeln inte ska bli för mycket att ta in såhär direkt ( ja det kommer fler ) så ska jag runda av med en sista sak. Vi ska byta färg på länken så den blir lite snyggare. Lägg till detta i din CSS-mall:
Kod:

/* LänkFormatering */

a {
color: #4da4ff;
}

a:hover{
  color: #e0007f;
}


Spara igen och kolla resultatet. Jaha tänker du, jippie den blev…ljusare. Japp det blev den, men ta nu och dra muspekaren över! Japp den får en annan färg. Det här livar ju upp lite och är en rätt snygg effekt som används på de flesta ställen idag. Tror inte jag behöver beskriva vad koden gör, det mesta säger sig själv, a är om länken bara är normal, a:hover det är när någon drar muspekaren över, color: bestämmer färgen.

Det här var en liten lätt introduktion till CSS för alla nybörjare, och i nästa artikel ska vi dyka in lite djupare, för sidan är ju inte nått vidare ännu, men vänta bara!

Har ni frågor eller hittar fel, kontakta då gärna mig på webmaster(at)roosweb.se

Mvh
Robert Roos / Roosweb.se

 
     

  » Logga in  
 
Användarnamn

Lösenord

 
     

  » Bli medlem  
  Bli medlem på ASPsidan!  
     

     
  Microsoft  
     

  » Partners  
  Comsolvia  
     

  » Senast online  
  Endast för inloggade  
  Antal inloggade: 1  
     

Copyright © 2007 www.ASPsidan.se
Ipeer sponsrar ASPsidan med Dedikerad Server
ASPsidan RSS
   
 XHTML / CSS
Det tog 0,0938 sekunder att ladda sidan