CSS del 3

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-taggenlist-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 <li>-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;}