CSS médiatípusok - példák

Az előadások a következő témára: "CSS médiatípusok - példák"— Előadás másolata:

1 CSS médiatípusok - példák
Abonyi-Tóth Andor, ELTE IK v

2 Médiatípusok Media típusok Média csoportok continuous/ paged
continuous/ paged visual/audio/speech/tactile grid/bitmap interactive/ static braille continuous tactile grid both embossed paged static handheld visual, audio, speech print visual bitmap projection interactive screen visual, audio speech N/A tty tv

3 Stíluslapra hivatkozás, importálás
Hivatkozás külső stíluslapra, adott médiatípus esetén <link rel="stylesheet" type="text/css" href="alap.css" media="screen"> <link rel="stylesheet" type="text/css" href="nyomtatas.css" media="print"> Stíluslap médiafüggő importálása @import url("alap.css") screen; @import url("nyomtatas.css") print;

4 @media szabály használata
<style type="text/css"> @media screen   {   p {font-family:verdana,sans-serif;font-size:14px;}   } @media print   {   p {font-family:times,serif;font-size:10px;}   } @media screen,print   {   p {text-align:justify;}   } </style>

5 Feltételek megadása Stíluslap olyan képernyőre, ami színes
<link rel="stylesheet" media="screen and (color)" href="example.css" /> @import url(color.css) screen and (color); Stíluslap megadás, ha a méret legalább 500px <link rel="stylesheet" media="screen and (min- width:500px)" href="small.css" /> @media (min-width:500px) { … } Ugyanez px között: @media screen and (min-width: 600px) and (max-width: 900px) {…}

6 Feladat Készítsd el ezt az oldalt!

7 Feladat Nyomtatásban Times, serif betűtípussal jelenjen meg az oldal, a menü pedig legyen eltüntetve! Ha a böngészőablak szélessége kisebb, mint 550px, akkor a két doboz kerüljön egymás alá, ne pedig egymás mellé, és töltsék ki a teljes szélességet!

8 Letöltés A PDF letöltése:

9 Vége