htmlphp logo

De vanligaste CSS-konstruktionerna

Vilka är de vanligaste CSS-konstruktionerna? De som räcker för att skapa de flesta webbplatser? Här är en lista som hjälper dig att styla vanligt förekommande konstruktioner.

Lär dig dessa och du har kommit en bit på vägen att bemästra CSS.

Saknar du en konstruktion som borde vara med? Hittar du felaktigheter? Maila mig.

Del I: Styla sidans struktur

Del II: Styla sidans presentation

Del III: Bra att kunna

Del I: Styla sidans struktur

Hur vill vi disponera sidan? Var vill vi att de olika delarna skall synas? Sidornas grundstruktur är ofta liknande, det finns ett par olika varianter som återkommer. Låt oss ta en titt på de vanligaste förekommande varianterna.

Syntax för CSS-konstruktioner

En CSS-konstruktion består av HTML-elementet som skall stylas (selector) och inom måsvingar {} defineras själva stylen (property : value).

Kod: Syntax för CSS-konstruktioner.

selector { property1 : value1; ... propertyN : valueN; }

Följande exempel stylar rubriken h1 och ger den enbart enbart stora bokstäver och understruken, precis som h1 är stylad i detta dokument.

Kod: Exempel för att styla en rubrik.

h1{text-transform:uppercase;} /* Transform all letter to uppercase. */ h1{border-bottom:1px solid #dddddd;} /* Put border below header h1 */ /* above can also be written in one construction */ h1 { text-transform:uppercase; border-bottom:1px solid #dddddd; }

Kommentarer i CSS anges med /* här är en kommentar */, använd kommentarer för att dokumentera och strukturera dina CSS-filer.

Ibland vill man dela upp CSS-konstruktionerna i flera filer. Dessa kan sedan inkluderas med konstruktionern @import.

Kod: Inkludera en stylesheet som ligger i en annan fil.

@import url(anotherfile.css);

Ju närmare HTML-elementet som CSS-konstruktionen sker, desto "viktigare" är den. Det som defineras i en extern stylesheet kan skrivas över i style som inkluderas inom HTML-elementet <style> och det som definerats där kan skrivas över via style-definitionen i HTML-elementets style-attribut.

Kod: Exempel på arv och omdefinering av style.

/* external stylesheet */ h1 {color: yellow;} ... <!-- internal style in HTML-document --> <style> h1 {font-size: 2em;} </style> ... <!-- defining style within HTML-element --> <h1 style="color: red; font-size: 3em;">Rubrik i röd text och storlek 3em</h2>

Använd cheatsheet för att slå upp CSS-properties, pröva att slå upp font-size, color, border och text-transform.

html och body

Body är det som omfamnar hela sidan. Genom att styla body kan vi bestämma hur sidan är justerad i läsaren. Ofta väljer vi mellan att centrera sidan eller låta den vara som den är från början, dvs vänster-justerad. Det går att justera hela sidans bredd i body men det kan vara bra att överlämna det till kommande element.

I specifikationen ser vi att body har en default stil där margins är specificerad (se via cheatsheet). Om vi inte vill ha det så får vi omspecificera det.

Exempel på vänsterjusterad sida där default margins är borttaget.

body { margin: 0; }

Exempel på centrerad sida.

body { width: 920px; margin: 50px auto; }

header#above

Ovanför en sidas header kan ibland finnas länkar till relaterade sidor eller till login och användarens profil.

Exempel på html- och css-kod för relaterade länkar och login.

html-kod:

<header id="above1"> <!-- login & logout menu --> <nav class='login1'><a href='login.php?p=login'>login</a> </nav> <!-- Relateted links --> <nav class="related1"> <a href="/htmlphp/kmom01/me/me.php">kmom01</a> <a href="/htmlphp/kmom02/me/me.php">kmom02</a> </nav> </header>

css-kod:

header#above1 {font-family:arial,helvetica,sans-serif;border-bottom:1px solid #E6E6E6;margin-bottom:4px;color:#000;} nav.related1, nav.login1 {padding: 0.2em 1em 0.3em 1em;font-size:smaller;color:#666;} nav.login1 {float:right;}

Exempel på stylad header. Testa Återgå

header#top

En sidas header innehåller vanligen en bild, webbplatsens namn och en navigeringsbar med länkar till webbplatsens innehåll.

Exempel på kod för en sidas header.

html-kod:

<header id="top1"> <img src="img/logo.png" alt="htmlphp me"> <p>Min Me-site</p> <nav> <a href="me.php">Me</a> <a href="report.php">Redovisning</a> <a href="de_20_vanligaste_html_elementen.php">HTML-20</a> <a href="de_20_vanligaste_css_konstruktionerna.php">CSS-20</a> </nav> </header>

css-kod:

header#top1 { display: block; background-color: lightgoldenrodyellow; } header#top1 img { float: left; padding-right: 1em; } header#top1 p { margin: 0; padding-top: 1em; font-size: 1.5em; } header#top1 nav { display: block; clear: both; } header#top1 nav a { font-size: 1em; }

Exempel på stylad header. Testa Återgå

div#wrap

Det kan vara bra att använda en wrapper kring det huvudsakliga dokumentet. Det kan underlätta stylning och positionering av de olika delarna på sidan. Speciellt underlättar det om du vill ha flera kolumner på sidan.

En wrapper används för att uppnå 2- eller 3-kolumners sidor och det går att använda för att positionera en aside jämte en article. Kort och gott, en wrapper kan underlätta.

Om du inte behöver en wrapper så ska du naturligtvis inte använda den. Ju färre element desto färre felkällor.

Exempel där en wrapper används.

html-kod:

<div id="wrapper"> <aside> <p>Något vid sidan om</p> </aside> <article> <p>En artikel skriven av mig.</p> </article> </div>

css-kod 1:

div#wrapper { border: 4px dashed black; } div#wrapper aside { display:block; width:20%; border: 4px solid darkgreen; } div#wrapper article { display:block; width:70%; border: 4px solid darkgoldenrod; }

css-kod 2:

div#wrapper { border: 4px dashed black; overflow:auto;} div#wrapper aside { display:block; float:right; width:20%; border: 4px solid darkgreen; } div#wrapper article { display:block; width:70%; border: 4px solid darkgoldenrod; }

css-kod 3:

div#wrapper { border: 4px dashed black; overflow:auto;} div#wrapper aside { display:block; float:left; width:20%; border: 4px solid darkgreen; } div#wrapper article { display:block; float:left; width:70%; border: 4px solid darkgoldenrod; } /* overflow:auto, http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ */

Exempel 1 Exempel 2 Exempel 3 Återgå

En artikel skriven av mig.

clearer

Vid användning av flytande divs (float) kan det behövas en och annan "clearer" eller "clear fix". Det behövs när en div omsluter en annan div vars storlek (höjd) är större än den div som omsluter. Det finns flera lösningar/fixar på detta och en enkel lösning består av overflow:auto. Det är en ren CSS-lösning och det behövs inga extra HTML-element.

Du kan studera följande Style!-exempel på vad som skiljer mellan att använda en clearer eller ej.

Nedanstående exempel visar på två divs där ovan nämnda lösning används.

html-kod:

<div id="outer"> <div id="inner"> <p>Detta är texten i inner-div, om den är lång så kan fenomenet uppstå där outer-div inte omsluter den. </div> <p>Detta är outer-div som vilken vi vill skall omsluta inner-div. </div>

css-kod utan fix:

div#outer { /* overflow:auto; */ background: azure; border: 4px dashed lightblue; } div#inner { float:left; background: ivory; width:25%; border: 4px solid mistyrose; }

css-kod med fix:

div#outer { overflow:auto; background:azure; border:4px dashed lightblue; } div#inner { float:left; background:ivory; width:25%; border:4px solid mistyrose; }

Exempel 1 utan overflow:auto; Exempel 2 med overflow:auto; Återgå

Detta är texten i inner-div, om den är lång så kan fenomenet uppstå där outer-div inte omsluter den.

Detta är outer-div som vilken vi vill skall omsluta inner-div.

Del II: Styla sidans presentation

Det handlar om färger, fonter och stilen. Vilken känsla vill vi användarna skall få när de besöker siten? Detta kan vi justera med webbplatsens "look & feel". Det handlar om användarens upplevelse.

Följande kapitel ger en liten vägledning in i hur webbplatsen kan stylas och hur detta kan ske med några enkla CSS-konstruktioner.

body, p och h1-h6

Eftersom body är det element som omfamnar hela sidan så kan vi enkelt styla hela webbplatsens grundutseende via body. Kanske med en bakgrundsfärg eller bild.

Underliggande taggar ärver ofta (inte alltid) attribut av parents (föräldrar). Det innebär att om vi sätter en font i body så gäller denna font även för p, a och h1-h6.

Försök hela tiden skriva din CSS-kod så att det blir enkelt att göra ändringar. Optimalt är att du endast behöver ändra på ett ställe i stylesheeten för att tex ändra font.

Följande exempel visar kod för att styla ett par vanliga element.

css-kod med font och bakgrund definerat i body:

body { background-color: whitesmoke; font-family: Tahoma, Geneva, sans-serif; color: brown; }

css-kod med ändrad font för h1-h6, p och a:

body { background-color: whitesmoke; font-family: Tahoma, Geneva, sans-serif; color: brown; } h1,h2,h3,h4,h5,h6 { font-family: Courier New, Courier, monospace; } p { color: saddlebrown; } a { font-size: smaller; }

Exempel 1 med font och bakgrund definerat i body Exempel 2 med ändrad font för h1-h6, p och a Återgå

a

Ovan har vi sett exempel på hur länkar kan stylas i länksamlingar eller som en navigationsmeny. När länkar förekommer i löpande text så är det bra att att styla dem så att texten blir lättläst utan att länkarna blir svåra att upptäcka.

Länkarna stylas olika beroende på vilket läge som gäller för länken. Varje läge kan stylas individuellt. Ge länken ett standardutseende och style förändringarna i respektive läge.

Krångla inte till det, det viktigaste är att användaren kan se att det är en klickbar länk. Fundera två extra gånger innan du tar bort understrykningen av en länk, det är understrykningen som kännetecknar länken i ett textflöde.

css-kod för att styla länkar:

a { font-size:larger; font-style:bold; } a:link { } a:visited { } a:hover { text-decoration:none; color: #333333; background: palegreen;} a:active { font-size:x-large; background:green;}

Exempel 1 Återgå

Du kan testa olika varianter av stylning i Style!, här finns ett exempel som du kan utgå ifrån.

figure, figcaption och img

Ofta vill man visa bilder tillsammans med en undertext. HTML-elementen figure och figcaption är till för detta. Genom att styla dem kan man presentera bilder och bildtext på olika sätt.

Följande exempel visar kod för att styla figure, figcaption och img. Observera att sidans grundstyle kan innehålla style som påverkar utseendet, exemplen börjar alltså inte från 0. Dubbelkolla med Firebug vilken style som finns på elementen.

html-kod:

<figure id="f1"> <img src="img/me.jpg"> <figcaption>Bild: Mos vid datorn, se så glad han är.</figcaption> </figure>

css-kod 1:

figure#f1 { display:block; text-align:center;border:1px solid gray; } figure#f1 figcaption { display:block; font-style:italic; font-size:smaller} figure#f1 img {}

css-kod 2:

figure#f1 { display:block; float:right; border:2px solid tomato; padding:1em; margin:1em; width:200px;} figure#f1 figcaption { display:block; font-style:italic; font-size:smaller} figure#f1 img { width:100%; }

css-kod 3:

figure#f1 { display:block; float:left; border:2px solid tomato; padding:1em; margin:1em; width:100px;} figure#f1 figcaption { display:block; font-style:italic; font-size:smaller} figure#f1 img { width:100%; }

Exempel 1 Exempel 2 Exempel 3 Återgå

Bild: Mos vid datorn, se så glad han är.

blockquote

När man vill indentera text, i förhållande till den löpande texten, så är blockquote ett bra element. I sin standardutförande så ger det en viss indentering. Med lite stylning så passar det dessutom bra för att visa källkod, länklistor eller citat.

Följande exempel visar kod för stylning av blockquote.

html-kod:

<blockquote id="b1"> Det här är källkod eller ett vackert citat, det beror på hur man stylar det. </blockquote>

css-kod stylad för citat:

blockquote#b1 { padding: 2em 1em 1em 1em; background: beige url(img/quote.png) top left no-repeat; font-style: italic; }

css-kod stylad för källkod:

blockquote#b1 { padding: 1em; background: beige; border-left: 2px solid brown; font-family: monospace; }

css-kod stylad för källkod med begränsad bredd:

blockquote#b1 { padding: 1em; background: beige; border-left: 2px solid brown; font-family: monospace; white-space: pre; overflow: auto; }

Stylad för citat stylad för källkod stylad för källkod med begränsad bredd Återgå

Det här är källkod eller ett vackert citat, det beror på hur man stylar det.

Del III: Bra att kunna

Det finns så mycket bra-att-veta-saker när det rör sig om CSS. Det är ett stort område och viktigt för alla webbutvecklare. Med CSS kan vi enkelt ge användaren en specifik upplevelse när de besöker våra webbplatser. Nedan följer ett par saker som är bra att kunna. Kanske kan det underlätta ditt arbete med stylesheets.

Alternativa stylesheet

I head-elementet går det att specificera alternativa stylesheets. Detta ger möjlighet att ändra stylesheet i browsern på klientsidan och det blir enkelt att komma åt och testa de olika stylesheeten. I utvecklingsfasen kan detta vara en bra teknik.

Kod: Exempel på alternativ stylesheet i head-sektionen.

<!-- links to external stylesheets --> <link rel="stylesheet" href="style/stylesheet.css" title="General stylesheet"> <link rel="alternate stylesheet" href="style/debug.css" title="Debug stylesheet">

Denna guide har en alternativ stylesheet som heter "Debug style". Pröva att välja den via din webbläsares meny (Firefox - View - Page Style).

Mer jag kanske borde förklara

Det finns mycket som man vill veta och kunna inom CSS, mycket mer än det som får plats i denna guide, men det är en start. Är du sugen på lite mer avancerat användande av CSS så kan du studera två CSS-ramverk för grid layout, det är helt klart överkurs men de visar hur många av dagens webbplatser är uppbyggda.

Som sagt, överkurs och endast för den som kan grunderna i HTML och CSS. Om du är ny på detta så blir tipset att studera dessa ramverk efter kursens slut istället. Det ger mer.

Närbild Mikael

Mikael Roos undervisar i databaser och utveckling av webbapplikationer vid Blekinge Tekniska Högskola. Mikaels nyckelord äro, i nämnd ordning, SQL, PHP, HTML och CSS. MegaMic, som han även kallar sig, kör FreeBSD (Unix) på servrarna i garderoben och drömmer om sina (kommande) opensource-projekt.