Välkommen till Webbdesignguidens CSS 3-guide!
Introduktion till CSS 3
Vad är CSS 3?
CSS står för Cascading Style Sheets och är ett språk som används för att bestämma utseendet och formateringen på en hemsida. CSS 3 är uppföljaren till CSS 2.1 och introducerar många kraftfulla och efterlängtade nyheter och funktioner som webbdesigners och hemsidesnickare länge saknat.
Exempel på en nyhet är border-radius som gör det enkelt att runda hörnen på ett element såsom en div eller en bild. Box-shadow och text-shadow gör det enkelt att lägga skuggor på element och text, och gradients gör det enkelt att göra snygga färgövergångar vilket bara gått att åstadkomma med bilder tidigare. Med @font-face kan man äntligen använda vilka teckensnitt man vill på sin hemsida utan att behövs krångla med Flash eller JavaScript. Det finns även kraftfullt stöd för animationer, övergångar och transformationer av text och element.
CSS 3 är bakåtkompatibelt med CSS 2, vilket gör att du kan använda CSS 2- och CSS 3-kod tillsammans utan att det blir några problem.
CSS 3 är fortfarande under utveckling men det går utmärkt att redan nu skapa hemsidor tillsammans med CSS 3 eftersom moderna webbläsare redan stödjer de vanligaste och viktigaste funktionerna.
Figuren ovan är ingen bild utan allt du ser är CSS 3! Border-radius, box-shadow och linear-gradient har använts på denna div.
Nytt i CSS 3: Border-radius
Ett enkelt sätt att göra runda hörn på rutor, boxar och bilder har länge efterfrågats av webbdesigners och andra hemsidesnickare, och nu finns det äntligen ett enkelt sätt iochmed CSS 3 och border-radius. Syntax:
border-radius: 10px;
På detta sätt blir alla fyra hörn rundade:
Ibland vill man inte ha alla hörn rundade, och då kan man ange radien på varje hörn individuellt. Exempel:
border-radius: 10px 10px 0px 0px;
Ger:
Nytt i CSS 3: Box-shadow
Med box-shadow kan du lägga skuggor, både yttre och inre, på olika element. Syntaxen ser ut såhär:
box-shadow: 5px 5px 6px 3px #CCC;
Ger:
Det är alltså fyra stycken värden samt en färg som anges. Det går att ange bara de två eller tre första värdena om man vill vara mindre noggrann med hur skuggan ser ut. Såhär funkar det:
- Det första värdet anger skuggans position i sidled. Ett positivt värde placerar skuggan till höger och ett negativt till vänster.
- Det andra värdet anger skuggans position i höjdled. Ett positivt värde värde placerar skuggan på botten och ett negativt på toppen.
- Det tredje värdet anger blur/suddigheten på skuggan. Ju högre värdet är, desto mer utsuddad är skuggan. Ett lågt värde ger en skarp skugga. Detta värde måste vara positivt, inte negativt.
- Det fjärde värdet anger spread/spridning och hur långt skuggan ska sträcka sig.
De två sista värdena före färgen är valfria. Dessa behöver du egentligen bara ha med om du inte blir nöjd med skuggans utseende efter att du angett de första två värdena.
Nytt i CSS 3: Gradients
Gradients/färgövergångar har länge varit populära grafiska element i webbdesign, men innan CSS 3 har man inte kunnat framställa gradients med hjälp av endast kod. Istället har man har varit tvungen att använda en bild skapad i ett grafiskt program såsom Photoshop, och sedan använt CSS för att få bilden att upprepa sig vertikalt eller horisontellt.
Idag är det enkelt att framställa gradients endast med hjälp av CSS 3. Syntaxen är som följer:
linear-gradient(top, #555, #FFF);
Ger:
OBS! Specifikationen för hur gradients ska hanteras är inte helt färdig ännu och därför behövs speciella prefix för olika webbläsare. För att gradients ska synas i alla större webbläsare måste du skriva din kod såhär:
background: -webkit-linear-gradient(top, #000, #FFF);
background: -moz-linear-gradient(top, #000, #FFF);
background: -ms-linear-gradient(top, #000, #FFF);
Webkit används av Chrome och Safari, moz står för Mozilla som utvecklar Firefox, och ms står för Microsoft som utvecklar Internet explorer. Dessa prefix kommer inte att behöva användas i framtiden, men just nu behöver du krångla lite och ha med dessa prefix för att din gradient ska synas ordentligt.
Exemplet ovan skapar den kanske vanligaste typen av gradient där färgövergången går från toppen till botten.
Det är enkelt att göra så att färgövergången går från vänster till höger, ändra bara ’top’ till ’left’, såhär:
linear-gradient(left, #555, #FFF);
Kom igång med CSS 3
CSS-kod lägger man i ett separat CSS-dokument som man kopplar till sitt HTML-dokument via en kodsnutt. På detta sätt blir koden för innehåll (HTML) och koden för design (CSS) helt separerad, vilket gör det mycket enklare att sköta och uppdatera sin hemsida. Precis som med HTML kan du skriva din CSS i ett textdokument och spara filen som exempelvis style.css
För att sedan koppla ditt CSS-dokument till din hemsida lägger du denna kod i <head>-taggen i HTML-dokumentet:
<link rel=”stylesheet” href=”style.css”>
Det finns fler sätt att implementera CSS i ditt HTML-dokument; du kan t.ex. placera CSS-kod direkt i din HTML, men ett separat CSS-dokument är nästan alltid bättre och smidigare.
Ett första exempel på formatering med CSS
I ditt HTML-dokument, skriv koden nedan:
<!DOCTYPE>
<head>
<title>Sidans titel</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<p class=”rödText”>Denna text blir röd!</p>
</body>
</html>
I ditt CSS-dokument, skriv denna kod:
.rödText {
color: #F00;
}
Och spara båda dokumenten. Som du ser blir nu texten i paragrafen röd.
Class och ID
I ditt HTML-dokument använder du class eller ID för att namnge ett element (en HTML-tagg) så att CSS-dokumentet förstår vad det är du vill formatera. I exemplet ovan så fick paragrafen class-namnet rödText. I CSS-dokumentet deklarerar du att du vill formatera alla element vid namn rödText genom att skriva .rödText, och skriver sedan din CSS mellan två ”måsvingar”. För att skriva tecknet { så trycker du Alt Gr + 7 på tangentbordet, och för att skriva tecknet } så trycker du Alt Gr + 0.
Avsluta rader med semikolon på det sätt som visas i exemplet.
Man kan även ge paragrafen ett ID istället för class. Då hade HTML-koden sett ut såhär:
<p id=”rödText”>Denna text blir röd!</p>
Och CSS-koden:
#rödText {
color: #F00;
}
Och när du sparar så blir resultatet detsamma. Som du ser används så används ett nummertecken # när man använder ID, istället för punkt som vid class. ID ska användas för att formatera ett element som bara finns med på sidan en gång, t.ex. en H1-tagg. Class ska användas för element som kan dyka upp flera gånger på en sida, som exempelvis paragrafer.
Undrar du vad #F00 är för något? #F00 är den hexadecimala färgkoden för röd. Genom dessa färgkoder kan du få till miljontals olika färger.
Formatera text
Det är enkelt att formatera text med CSS. Se detta exempel för att göra texten i en paragraf lite större, fet, röd och i teckensnittet Verdana:
.exempelText {
font-size: 16px;
font-family: Verdana;
font-weight: bold;
color: #F00;
}
Ytterligare formatering av text
De vanligaste egenskaperna som man brukar vilja ändra när det kommer till text finns i exemplet ovan, men det finns många fler saker man kan göra med text via CSS. Denna kod ökar radavståndet och teckenavståndet och lägger till en skugga på texten:
.exempelText {
line-height: 160%;
letter-spacing: 2px;
text-shadow: 2px 2px #DDD;
}
Bakgrunder
Med CSS kan du göra många olika saker med bakgrunden på din hemsida. Du kan använda en färg, en bild eller en färgövergång/gradient som bakgrund.
För att göra bakgrunden på hela din hemsida ljusgrå använder du denna CSS-kod:
body {
background-color: #DDD;
}
För att använda en bild med ett bakgrundsmönster använder du denna kod:
body {
background-image: url(’bild.jpg’);
}
Tänk på att bilden måste ligga i samma mappen som ditt CSS-dokument för att denna kod ska funka. Bilden kommer här att repetera både horisontellt och vertikalt så att den täcker hela bakgrunden. Om du vill att bilden endast ska repeteras horizontellt eller vertikalt eller inte alls så går detta att ordna:
body {
background-image: url(’bild.jpg’);
background-repeat: repeat-x;
}
Exemplet ovan gör så att bakgrundsbilden bara repeteras horisontellt.
body {
background-image: url(’bild.jpg’);
background-repeat: repeat-y;
}
Exemplet ovan gör så att bakgrundsbilden bara repeteras vertikalt.
body {
background-image: url(’bild.jpg’);
background-repeat: no-repeat;
}
Exemplet ovan gör så att bakgrundsbilden inte repeteras alls.
Margin och padding
Margin är marginalen runt ett objekt. Padding är utfyllnaden kring innehållet inuti ett element, innan kanten.
Du kan ange margin eller padding individuellt på detta sätt:
.exempelBehållare {
margin-top: 20px;
margin-right: 10px;
margin-bottom: 30px;
margin-left: 5px;
}
Det finns även så kallad ”shorthand” som minskar mängden kod som du behöver skriva:
.exempelBehållare {
margin: 20px 10px 30px 5px;
}
Om du vill centrera någonting vertikalt så används värdet ”auto”:
.exempelBehållare {
width: 200px;
margin: 0 auto;
}
Exemplet ovan bestämmer topp- och botten-marginalen till 0, och vänster- och högermarginalen till att beräknas automatiskt och elementet blir därför centrerat. För att det ska fungera behövs också en bredd (width) anges.
Float
Float gör att man kan knuffa ett element åt höger eller vänster och låta annat innehåll ligga bredvid:
Såhär ser koden ut:
.exempelBild {
float: left;
}
Det går naturligtvis att byta left mot right så att elementet knuffas åt höger istället.