Lektion 12: Layout (CSS)
Ville det ikke være lækkert, hvis man kunne give sine sider et lækkert layout?
Jo tak, men hvordan?
Til layout bruger man Cascading Style Sheets (CSS). I denne lektion får du en kort introduktion til CSS. Senere vil du lære det helt fra bunden i vores CSS-tutorial. Så læs kun denne lektion som en appetitvækker.
CSS er HTML's pænere halvdel. I kodning er der nemlig ingen ligestilling, her tager HTML sig af den grove opsætning (strukturen), mens CSS giver det et lækkert udseende (layout).
Som vist i lektion 7 kan CSS tilføjes med attributten style, hvorved du f.eks. kan angive skrifttype og -størrelse på din tekst:
Eksempel 1:
<p style="font-size:20px;">Dette er skrevet i størrelse 20</p> <p style="font-family:courier;">Dette er skrevet med Courier</p> <p style="font-family:courier; font-size:20px;">Dette er skrevet med Courier i størrelse 20</p>
Vil se sådan ud i browseren:
Dette er skrevet i størrelse 20
Dette er skrevet med Courier
Dette er skrevet med Courier i størrelse 20
I eksemplet ovenfor bruger vi style-attributten til at angive hvilken skrifttype vi vil bruge (med font-family) og dernæst hvilken størrelse skrift (med font-size). Bemærk hvordan vi i den sidste paragraf sætter både skrifttype og -størrelse med et adskillende semikolon.
Er det ikke en smule besværligt?
En smart ting ved CSS er muligheden for at styre dit layout centralt. I stedet for at bruge style attributten kan du nemlig nøjes med at fortælle browseren én gang, hvordan den skal behandle alt tekst på siden:
Eksempel 2:
<html>
<head>
<title>Min første CSS-side</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body>
<h1>Min første CSS-side</h1>
<h2>Velkommen til min første CSS-side</h2>
<p>Her kan man se, hvordan CSS virker</p>
</body>
</html>
I eksemplet ovenfor er CSS'en indsat i head'erne og gælder for hele siden. Start blot med <style type="text/css">, der fortæller browseren, at her angiver du CSS.
En anden mulighed er at skrive CSS'en i selvstændigt dokument. På den måde kan man styre layoutet på mange sider på en gang. Ret smart hvis man har et website med flere hundrede sider og f.eks. bliver træt af Arial og hellere vil bruge en anden skrifttype. Vi vil dog ikke gennemgå denne metode her, men du vil lære det senere i vores CSS-tutorial.
Kan man mere?
CSS kan bruges til meget mere end blot angive skrifttyper og -størrelser. Bl.a. kan du tilføje rammer, farver og baggrunde. Her er nogle eksempler, du kan prøve at lege lidt med:
Eksempel 3:
<p style="color:green;">Grøn tekst</p>
<h1 style="background-color: blue;">Overskrift på blå baggrund</h1>
<body style="background-image:url('logo.png');">
Er CSS ikke andet end farver og skrifttyper?
Ud over at tilføje layout som f.eks. farver og skriftyper kan CSS også bruges til at styre præsentationen af de forskellige elementer på en side (margin, højde og bredde m.v.). Ved at bruge CSS kan du styre layoutet på dine sider meget præcist og elegant.
Eksempel 4:
<p style="padding:25px;border:1px solid red;">Jeg elsker CSS!</p>
Vil se sådan ud i browseren:
Jeg elsker CSS!
Med "float" kan et element blive sat til at "flyde" enten til højre eller til venstre. Det følgende eksempel illustrerer princippet:
Eksempel 5:
<img src="bill.jpg" alt="Bill Gates" style="float:left;"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat....</p>
Vil se sådan ud i browseren:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat....
I eksemplet ovenfor "flyder" billedet til venstre og teksten rykker dermed op og fylder pladsen til højre for billedet.
Med "position" kan du placere et element præcis hvor på siden, du har lyst:
Eksempel 6:
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
I eksemplet er billedet af Bill Gates placeret 50 pixel fra bunden og 10 pixel fra højre margin i browseren. Men du kan placere lige præcis hvor du vil have det. Prøv selv! Super nemt og super smart, ik'?
Smart. Men nemt...!?
Hvis du synes det virker lidt forvirrende, er der ikke noget at sige til det. CSS lærer man ikke på 10 minutter. Denne lektion er kun ment som en kort introduktion, men på sigt vil du lære, at HTML og CSS hænger smukt og uløseligt sammen. Så når du får mod på det, bør du stifte nærmere bekendskab med CSS i vores CSS-tutorial.
Koncentrer dig nu blot om HTML'en og hop videre til næste lektion, hvor du vil lære at få dine sider ud på internettet, så hele verden kan se dem!
This HTML tutorial is now avaliable in English
You can find this lesson and the rest of this HTML tutorial in English at HTML.net.
- Relateret materiale på HTML.dk
- Relaterede nyhedsgrupper på Usenet
- Relaterede links om emnet
