Cascading Style Sheet (CSS) är ett formateringsspråk som hjälper till att beskriva hur informationen ska formateras och visas på exempelvis en skärm.
Det finns olika sätt att skriva css-kod:
I en extern fil, som man döper till filnamn.css
I en <style>-tagg. Som då oftast placeras i början (head) på en webbsida.
Inuti en formaterbar tagg (t.ex <em style="color: green;">) ger en grön text inom en <em>-tagg.
Efterssom formateringen av alla element på en sida tenderar att bli ganska lång så är metoden att lägga all css-kod i en extern fil att föredra. I sin html-sida så kan vi då i <head> placera en länk till vårat css dokument med hjälp av <link href="css/cssfilen.css" type="text/css" rel="stylesheet" />
En css-fil är en textfil (med ändelsen .css) där man deklarerar hur olika element ska visas. Filen bör inledas med @charset "utf-8"; på den första raden bara för att definera vilken teckenkodning som används, men i övrigt så följer man en enkel mall för att göra varje elements formatering tydlig.
h1, h2, h3 {
font-family: Arial;
color: blue;
}
body {
background-color: salmon;
margin: 300px;
}
Alla rubriker h1, h2, och h3 blir i Arial och blå. Samt att hela bodyn får en bred kant. Se ett exempel här.
I Dreamweaver finns det ett verktyg som hjälper till att både skapa och skriva CSS-filer. Detta visas på tavlan med en genomgång.
Uppgifter:
Skapa en sida med en massa text (T.ex. kopiera info från wikipedia) formatera texten med olika taggar och ändra sedan dessa taggas utseende med CSS. Lägg in paragrafer, rubriker, listor och så vidare. Se till att ni till exempel har flera paragrafer på rad och flera listelement i en lista. Dela även in texten i olika områden med specialformatering. Skapa en extern CSS-fil som du länkar till i ditt html-dokument. Använd er av de olika selektorerna (CSS Selectors, Se sid 237-238). Visa exempel på hur varje selector kan användas och beskriv på hemsidan vad du gjort och hur formateringen används. Alla selektorer på sidan 238 ska ha exempel och funktionen på dessa ska beskrivas.
Här ska ni beskriva att ni kan en del om färger och hur man kan använda dem på olika sätt på en hemsida.
Beskriv vilka olika metoder (minst fyra stycken) man kan använda för att ange färger på en hemsida. Beskriv på vilka sätt de skiljer sig.
Förklara och ge exempel på vad saturation och brightness är och hur de påverkar färgen.
Vilka metoder finns det för att göra element och färger genomskinliga? Hur kan man göra för att se till att färgerna visas rätt även i webbläsare som inte stöder genomskinlighet?
Den här frågan gäller typsnitt och hur man ändrar hur texten ska se ut på en hemsida.
Förklara begreppen serif, sans-serif och monospace. Samt underbegreppen weight, style och stretch då det gäller teckensnitt.
Vad är det för skillnad på font-family och font-face?
Hur kan man vara säker på att en text visas för alla användare på det sätt som man hade tänt sig på en hemsida?
Visa exempel på hur man med CSS kan göra fet, kursiv understruken och överstruken text. Ge också exempel på andra effekter som man kan skapa i CSS t.ex. hur man gör ett helt ord i versaler eller hur man får första bokstaven i en paragraf att visas i en annan storlek. Beskriv vad du gör och hur.
Skapa en sida enligt följande bild och instruktionerna på tavlan (4 div:ar svart, grön, röd och blå). Valfri text. Formatera dessa på ett snyggt sätt utan att använda width eller height. Meningen med uppgiften är att ni ska experimentera med hur blockelement fungerar. Skriv också en förklaring till hur ni formaterat er kod och hur attributen border, margin och padding fungerar i relation till varandra. Notera färgerna på bakgrunden och kanterna. Se till att din figur har ungefär samma positionering och bredd som rutorna i bilden, d.v.s. avstånd från höger/vänster samt upp/ner. Notera också att den röda rutan är smalare än den blå. Texten har också olika avstånd till kanterna. Allt detta ska göras utan att bestämma en specifik storlek på rutan.
Det är inte bara bakgrunder och hela sidor som passar att formatera i CSS, även specifika element fungerar jättebra att formattera. Det finns också en del dynamiska funktioner inbyggda i CSS som gör att elementen på en hemsida kan visa olika utseenden beroende på vad användaren gör. En av dessa är hur länkar kan formateras och ändra utseende beroende på om de är aktiva, besökta och så vidare. Gör en sida där du skapar 4 grupper av identiska länkar (4-7st länkar) men varje grupp ska formateras på sitt eget vis. Förklara på sidan vad :link, :visited, :hover, och :active gör och visa i de olika länkgrupperna att du kan använda dig av dessa. Förklara också varför dessa behöver placeras i en specifik ordning i din CSS-fil för att fungera ordentligt. Varje grupp av länkar ska ha ett eget utseende, men vara tydliga i sin utfomning och visa att de hör ihop inbördes. Minst en av länkmenyerna ska vara horisontell (länkarna på sidan av varandra) och minst en ska vara vertikal (länkarna under varandra). Se till att byta färger, borders, bakgrunder och storlekar på både text och ruta för att göra olika utseenden.
Här följer ett förslag på hur HTML-koden kan se ut för länkarna:
<div id="ett">
<ul><strong>LISTA 1</strong>
<li><a href="index.html">Min startsida</a></li>
<li><a href="http://www.youtube.com/">Youtube</a></li>
<li><a href="http://www.svt.se/">SVT</a></li>
<li><a href="http://sverigesradio.se/">Sveriges Radio</a></li>
</ul>
</div>
Läs kapitel 14.
Här ska du formatera om en lista med hjälp av css. Ta en valfri lista som du gjorde i Uppgift 2 och formatera den med CSS så att den blir snygg och läsbar.
Undersök hur man kan formatera utseendet på en tabell med CSS. Gör antingen en helt ny tabell eller välj någon du tidigare gjort t.ex. deluppgift 2 eller 4 från Uppgift 4. Formatera den enbart med CSS, ni kan dock behålla alla Colspan/Rowspan som finns i källkoden för att göra det lite enklare. Ni kan också undersöka om ni kan på ett automatiskt sätt variera radfärgerna om man har många rader. För att göra detta måste man kanske lägga till fler rader för att det ska se bra ut.
Undersök hur man kan formatera olika formulär och knappar. Utgå från deluppgift 2 i Uppgift 5 och formatera om de olika knapparna, bockrutorna och inputfälten på ett bra sätt med hjälp av CSS. Ta bort 3d-effekten på rutorna och skapa ett matchande färgschema så att det ser enhetligt och snyggt ut.
