CSS del 3 Kvarnbrinkx
Medietyper En XHTML-sida kan ha olika CSS-filer för olika medier! Definieras med attributet “media” i link- taggen, t.ex. ‘ media=”screen” ’ all, aural, braille, handheld, print, projection, screen, tty, tv
CSS-signaturer En och samma CSS-fil kan definiera flera stilar (t.ex. alternativ bakgrund) Kopplingen görs genom att sätta ett ID- värde på body-taggen Bra om man t.ex. vill ha lite avvikande förstasida men utan att bolla med olika CSS-filer
Menyer Görs ofta som ul-li-listor Stylas och det som är bra att kunna är detta: display: block; sätts på li eller a-taggen list-style: none; sätts på ul-taggen
Menyer Bakgrundsbilder kan vara bra att ha, tex. på a-taggen: background: url(css-nav.gif) #fff bottom left repeat-x; (“shorthand”)
Menyer Bakgrundsbilder kan vara bra att ha, tex. på a-taggen: background: url(css-nav.gif) #fff bottom left repeat-x; (“shorthand”) Styla upp li-taggen med float:left; Jag skulle även styla upp a-taggen med float left.
Menyer Det som bestämmer om det är en horisontell eller vertikal meny blir då bredden och höjden på div:en som omsluter ul-li-listan.
Menyer – lite lyx Sliding doors. Styr upp a-taggen: a:link, a:visited, a:hover, a:active Flytta runt bakgrundsbilden som t.ex. Apple gör.
Sliding doors Ren CSS-lösning för snygga menyer Fixar bakgrunden på menyflikar med varierande bredd Ett grundkrav: Varje -tagg måste innehålla en annan tagg (en meny med länkar uppfyller det kravet)
Bilder Tänk på semantiken! Bakgrundsbilder hör till css:en Innehållsbilder hör till html:sidan Innehållsbilder måste he an alt-text
Bakgrund/bakgr.bilder – vanlig css-kod body {background-color:#b0c4de;} #head {background-color:#b0c4de;} background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; Shorthand: body {background:#ffffff url('img_tree.png') no-repeat right top;}