CSS del 3 Kvarnbrinkx2 2011-12-17. Medietyper En XHTML-sida kan ha olika CSS-filer för olika medier! Definieras med attributet “media” i link- taggen,

En presentation över ämnet: "CSS del 3 Kvarnbrinkx2 2011-12-17. Medietyper En XHTML-sida kan ha olika CSS-filer för olika medier! Definieras med attributet “media” i link- taggen,"— Presentationens avskrift:

1 CSS del 3 Kvarnbrinkx2 2011-12-17

2 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

3 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

4 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

5 Menyer Bakgrundsbilder kan vara bra att ha, tex. på a-taggen: background: url(css-nav.gif) #fff bottom left repeat-x; (“shorthand”)

6 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.

7 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.

8 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.

9 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)

10 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

11 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;}