Differences
This shows you the differences between two versions of the page.
css_g_uppgift [2012-04-03 09:15] Joakim Forsgren [G-uppgift på CSS] |
css_g_uppgift [2017-09-01 14:54] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== G-uppgift på CSS ====== | ||
- | Din uppgift är att skapa ett externt CSS-dokument som formaterar ett på förhand givet xhtml-dokument.\\ | ||
- | Följande instruktioner gäller: | ||
- | * Filens namn ska vara " | ||
- | * CSS-filen " | ||
- | * All formatering ska ske i filen " | ||
- | * HTML koden nedan skall använads och skall inte ändras, alla formatering ska ske via " | ||
- | * Som hjälp för hur slutresultatet ska se ut finns en {{:: | ||
- | * Du ska skicka in " | ||
- | |||
- | Följade gäller för sidan och ingående delars layout: | ||
- | Allmänt | ||
- | * body - Bakgrundsfärgen skall vara #E5E5E5. Texten skall ha typsnittet " | ||
- | * a - Skall inte vara understrukna i utgångsläget, | ||
- | * ul - Skall ha en svart prickad ram på 1px, en marginal på 1em, en utfyllnad på 1em, listans punkter ska ligga innanför ramen, texten skall vara kursiv och textstorleken 0.8em | ||
- | |||
- | Sidans indelning - id-selektorer | ||
- | |||
- | * #container - skall ha vit som bakgrundsfärg. Den skall ärva förgrundsfärg ifrån body-elementet. Den skall ha bredden 800 pixlar och ha en heldragen ram som är 1 pixel bred och har färgen #666666. Elementet skall vara centrerat i sidan. | ||
- | * #header - skall ha en utfyllnad på 10 pixlar, ha en marginal på 3 pixlar åt alla håll utom nedåt där marginalen skall vara 20 pixlar. Den skall vidare ha en prickad ram som är 2 pixlar tjock och har färgen #999999. Rubriker av typen h1 inom " | ||
- | * #content - skall ha en utfyllnad runtom som är 20 pixlar. | ||
- | * p - skall fonttypen Georgia, följt av times och serif. | ||
- | * table - tabellen skall ha kollapsande ramar, d.v.s ramarna mellan cellerna får inte ritas ut med dubbla streck utan ramarna för varje cell skall slås samman. Tabellen skall också ha en heldragen ram med tjockleken 3px i färgen #666666. Tabellen skall ha bredden 500 pixlar och vara centrerad. | ||
- | * td - tabellcellerna skall ha en utfyllnad på 3 pixlar, en heldragen ram som är 1 pixel tjock och har färgen #666666. Slutligen skall tabellcellerna ha bredden 100 pixlar. | ||
- | * thead - tabellhuvudet skall ha klargul (#ff0), fet text mot svart bakgrund. Texten i dessa celler skall vara centrerad. | ||
- | * tr.even_row - tabell rader med jämna nummer skall ha bakgrundsfärgen #ffffaa. | ||
- | * tr.even_row - tabell rader med jämna nummer skall ha bakgrundsfärgen #ffffaa. | ||
- | * td.number - tabellceller med siffor skall ha högerjusterad text. | ||
- | * #footer - skall ha en heldragen ram med bredden 1 pixel och färgen #999999. Den skall ha en marginal på 3 pixlar runt om. Texten skall vara 0.8em stor, vara kursiverade och centrerad i sidfoten. Länkfärgen i " | ||
- | |||
- | Förutom detta ska ingen annan formatering göras. | ||
- | |||
- | **Betyg**\\ | ||
- | Denna uppgift bedöms med betyget godkänd eller underkänd.\\ | ||
- | Lycka till! | ||
- | |||
- | ===== HTML kod ===== | ||
- | <code html> | ||
- | |||
- | < | ||
- | <html xmlns=" | ||
- | < | ||
- | <meta http-equiv=" | ||
- | < | ||
- | <link rel=" | ||
- | </ | ||
- | < | ||
- | <div id =" | ||
- | <div id = " | ||
- | < | ||
- | |||
- | </ | ||
- | <div id =" | ||
- | < | ||
- | |||
- | < | ||
- | <ul> | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | </ul> | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | <tr> | ||
- | < | ||
- | </tr> | ||
- | </ | ||
- | < | ||
- | <tr> | ||
- | < | ||
- | <td class=" | ||
- | <td class=" | ||
- | </tr> | ||
- | <tr class =" | ||
- | < | ||
- | <td class=" | ||
- | <td class=" | ||
- | </tr> | ||
- | <tr> | ||
- | < | ||
- | <td class=" | ||
- | <td class=" | ||
- | </tr> | ||
- | <tr class =" | ||
- | < | ||
- | <td class=" | ||
- | <td class=" | ||
- | </tr> | ||
- | </ | ||
- | </ | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div id =" | ||
- | < | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ |