آموزش CSS : طراحی نمای صفحه در حالت پرینت
#1
Note 

سی اس اس به طراح وب این امکان را میدهد که نمای صفحه را در حالت های مختلف تعیین کنید. بطور مثال طراح میتواند فایل های CSS مختلفی را به صفحه لینک کند ، بطوری که اگر صفحه در مرورگر در حال دیده شدن است، صفحه یک جور و با یکسری رنگ دیده شود و اگر صفحه در حال نمایش در دستگاه های PDA است یکجور دیگر و اگر صفحه در حال print شدن است نیز یکجور دیگر نشان داده شود.

برای تعیین CSS صفحه در حالت عادی که همان نمایش صفحه در مرورگر است ، بصورت زیر فایل CSS را در فایل HTML خود لینک میکنیم :

کد php:
<link href=”styles.css” rel=”stylesheet” type=”text/css” media=”all” /> 

همانطور که شما در کد بالا تعیین کرده اید، این فایل CSS به ازای تمامی رسانه هایی که صفحه ی شما را ببینند ، لود میشود. اما اگر بخواهید به ازای هر رسانه (مانند مرورگر ، دستگاه های PDA و پرینترها) فایل های استایل متفاوتی استفاده شوند باید از کدهای زیر استفاده کنید

برای نمایش توسط مرورگر :
کد php:
<link href=”styles1.css” rel=”stylesheet” type=”text/css” media=”screen” /> 

برای نمایش هنگام پرینت کردن صفحه :

کد php:
<link href=”styles2.css” rel=”stylesheet” type=”text/css” media=”print” /> 

برای نمایش صفحه در انواع PDA :

کد php:
<link href=”styles3.css” rel=”stylesheet” type=”text/css” media=”handheld” /> 

شما میتوانید هر۳ خط فوق را زیر هم در بالای هرصفحه ی اچتمل خود بنویسید . مرورگر برای نمایش صفحه از styles1.css استفاده میکند. هنگام چاپ صفحه ، فایل styles2.css روی صفحه اعمال میشود. و هنگام بازکردن صفحه در کامپیوترهای جیبی ، فایل styles3.css صفحه را فرمت میکند.

کاربرد کوچکی از این موضوع : مثلا شما میتوانید class مربوط به ستون تبلیغات را در فایلهای css پرینت و css کامپیوترهای جیبی ، بصورت Display:none تعریف کنید تا در هنگام پرینت از روی مقالات سایت شما ، تبلیغات دیگه پرینت نشه.

آخرین ویرایش: 12-02-2013 ساعت 11:42، توسط zare
پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش نکات تکمیلی برای طراحی وبسایت تجاری sheyda69 0 181 06-09-2016 ساعت 16:24
آخرین ارسال: sheyda69
  آموزش سئو و بهینه سازی وب سایت در سایت ساز پرتال portal 0 108 21-08-2016 ساعت 08:05
آخرین ارسال: portal
Note آموزش استاندارد سازی قالب به سبک W3C (رفع خطاها) Behnam Designer 4 1,446 23-01-2015 ساعت 15:30
آخرین ارسال: Stack OverFlow
Note دوره آموزشی طراحی قالب با استفاده از Bootstrap rockstar 5 2,473 23-10-2014 ساعت 17:08
آخرین ارسال: rockstar
Note آموزش ساخت سایت shahab 1 566 23-07-2014 ساعت 22:04
آخرین ارسال: Stack OverFlow
Note آموزش طراحی قالب وردپرس WWWorker 7 1,188 11-03-2014 ساعت 11:04
آخرین ارسال: WWWorker
Note آموزش Canvas در HTML5 C0der 2 645 15-12-2013 ساعت 23:56
آخرین ارسال: BaNNer LorD
Note آموزش ajax نگار 1 483 23-11-2013 ساعت 22:00
آخرین ارسال: maJID maGIC

کاربرانِ درحال بازدید از این موضوع:   1 مهمان