Nemcsak a képernyőre készíthetünk stíluslapokat, hanem a nyomtatásra vonatkozóan is. Erre is érdemes időt fordítani, mert az is fontos, hogy a kinyomtatott anyag is jól olvasható legyen, és ne tartalmazzon olyan elemeket, amelyek csak a tintát pazarolják.
Alapállapotban ilyen a blog nyomtatási képe:
Látható, hogy a papíron sok olyan terület is nyomtatásra kerül, amelynek nincs értelme. Tüntessük el ezeket az elemeket!
Az előzőek mintájára a nyomtatási médiára (print) is megadhatnánk a stílusokat az alábbi módon, de ezt az újabb böngészők közül sem mindegyik támogatja:
@media print { /* ide jönnek a leírások /* }
Ezért a példánkban inkább a HTML nyelvben fogunk hivatkozni a nyomtatási célból létrehozott stíluslapra, az alábbi módon:
<link rel="stylesheet" href="nyomtatas.css" type"text/css" media="print">
Ebben a stílusállományban pedig elhelyezzük az alábbi definíciókat, amelyekkel a felesleges elemeket elrejtjük:
header nav#oldalmenu, section#kereses, section#blokkok, section#ikonsor, nav#nyomvonal, section#bejegyzesek>h1 { display:none; } section#bejegyzesek img { float:right; } section#bejegyzesek article time { font-style:italic; } section#bejegyzesek article h1 {margin:10px 0 0 0;} footer {display:none;}
Ennek köszönhetően a nyomtatási kép a következők szerint alakul:
![]() ![]() |
![]() |
![]() |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.