Hálózatok‎ > ‎CSS feladatok‎ > ‎

Edward Snowden

A minta és a leírás alapján készítsük el az nsa.css állományt, a snowden.html lap formázásához. A feladat az alábbi cikk alapján készült: http://index.hu/kulfold/2013/07/22/minden_ami_snowden/

Források


Feladatok

Az oldal szerkezete

  • Az oldal tartalma egy 640 képpont széles, középre igazított DIV-ben van (container). Ennek belső margói jobbra és balra 10 képpont, fent 16 képpont.
  • Ennek részei: a bevezetés (intro), amiben a szerzők (authors) és a rövid összefoglaló (abstract) szerepelnek, a cikk (article) és a lábléc (footer).
  • A szerzők doboza alá van húzva (alsó szegély) egy 1 képpontos, folytonos szürke vonallal. Alsó margója 15 képpont, alsó belső margója 5 képpont.
  • A láblécnek felső szegélye van, ami két képpont vastag, folytonos narancssárga vonal. Alsó és felső margója 15 képpont, alsó és felső belső margója 5 képpont.
  • A szöveg bekezdésekre tagolódik.
  • A képek külön DIV-ben vannak (kep), amihez tartozik egy kép aláírás (kepfelirat). Ezek osztályok és nem egyedi azonosítók, mert több kép is szerepel az oldalon.
  • A rövid bevezető belső margói 20 képpontosak.
  • A képek doboza 620 képpont szélesek, középre igazítottak.
  • A bekezdések alsó és felső margója 16 képpont.
  • A képfelirat bekezdések felső margója 0 képpont, felső és alsó belső margója 8 képpont.


Színek

  • Az oldal szürke hátterű: #f1f1f1
  • A képek bekezdése szintén szürke hátterű: #f1f1f1
  • A szerzők alatt a dátum betűszíne, és a képfeliratok betűszíne: #666
  • A dátum alatti vonal színe: #ccc
  • A cikk végén a lábléc szegélyének színe: #f60
  • A hivatkozások színe alaphelyzetben: #24468a
  • A hivatkozások színe, amikor az egér fölöttük van: #f60

Betűtípusok és méretek

  • Az egész oldal Arial vagy sans-serif betűtípusú, 15 képpontos karakterekkel.
  • Az egyes címsor 26 képpontos, a kettes címsor 18 képpontos.
  • A rövid bevezető összefoglaló félkövér.
  • A képfeliratok bekezdésének szövege középre igazított, betűmérete 13 képpont.

Képek elrendezése

  • A képek egy-egy DIV-be vannak zárva, 1 képpontos szegéllyel vannak határolva. 
  • A képek megjelenítési szélessége 620 képpont.

Hivatkozások

  • A hivatkozások alaphelyzetben nincsenek aláhúzva és kékek. Amikor az egér föléjük megy, narancssárgára váltanak és megjelenik az aláhúzás.

Listák

  • A lista felsorolás szimbóluma kis fekete négyzet (square).

Minta