آموزش CSS (فصل سیزدهم - جلسه اول) : خصوصیت Media

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۱۳ خرداد ۱۳۹۲

فهرست محتوای این مقاله

Media چیست؟

در یک سند HTML برخی قسمت‌های صفحه مخصوص پرینت گرفتن می‌باشند و باید از style مربوط به print پیروی کنند و بعضی دیگر از قسمت‌ها از جمله navigation سایت نیازی به print ندارند و میتوناد از هر نوع style ای استفاده کند. از این رو css چندین خصوصیت برای کنترل نحوه ی نمایش سند در رسانه‌های (media) مختلف فراهم می‌کند. برای هدف قرار دادن رسانه‌های مختلف باید از صفت media در تگ <link> یا در تگ style استفاده کرد یا درون قواعد نوشته شده ی css میتوان از قاعده ی @media برای نشان کردن رسانه‌های مختلف استفاده کرد. مثال :

<link rel="stylesheet" type="text/css" media="print" href="myprint.css" />
یا
<style type="text/css" media="print">....</style>
یا
<style type="text/css">
...
...
@media print {

}
</style>

 

انواع media

انواع مختلف media عبارت اند از

  • all : مخصوص تمامی deviceها
  • braille : استفاده برای deviceهای مخصوص نابینایان
  • embossed : استفاده برای printer‌های مخصوص خط braille
  • handheld : استفاده برای device‌های جیبی و قابل حمل مثل tabletها
  • print : این مقدار برای ارائه ی style به printer استفاده میشود. (در مروگرها می‌توان از قسمت print preview برای مشاهده ی یک صفحه در این حالت استفاده کرد.)
  • projection : استفاده برای ویدئو پروژکتورها
  • screen : مخصوص نمایش در صفحه نمایش کامپیوتر
  • tv : استفاده برای تلویزیون

مقدار پیشفرض : all فقط مقادیر screen , print و all در مرورگرها به صورت گسترده پشتیبانی می‌شوند.

استایل print

مثال : کد html

<h1> 7Learn : </h1>
<h3>Javascript and web design tutorials</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit amet ligula non lectus.consectetur adipiscing Vivamus sit amet. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu.
</p>

و کد css :

* {
margin: 0;
padding: 0;
font-family: serif;
}
h3 {margin-left: 20px;}
p {
margin: 10px 30px;
width: 500px;
text-align: justify;
}

حال کد رو در مرورگر اجرا کنید، و سپس دکمه ی CTRL+P رو بزنید تا به حالت print preview بروید، خواهید دید که دقیقا متون در حالت print همانند حالت screen هست. حال ما میخواهیم برای حالت print یک استایل متفاوت بنویسم کد زیر رو به کدهای css اضافه کنید :

@media print {
* {
font: 14px tahoma;
letter-spacing: 2px;
}
}

نتیجه print-preview اگر دقت کرده باشید، بعضی مواقع در هنگام پرینت یک صفحه html لینک‌ها غیر فعال می‌شوند، و دیگر معلوم نیست که این متن، به کدام صفحه لینک شده است، پس حتما راهی برای نمایش دادن آدرس لینک‌ها باشد، در css خصوصیتی به نام content وجود دارد، که از ان برای اضافه کردن متنی به ابتدا یا انتهای متن موجود استفاده می‌شود. مثال کد html

<h1><a href="https://7learn.com">7Learn : </a></h1>
<h3>Javascript and web design tutorials</h3>

کد css :

a:after {
content: "(" attr(href) ")";
}

کد بالا تعیین می‌کند که پس از تگ a در داخل پرانتر مقدار صفت href آن لینک را قرار دهد. نتیجه در مرورگر : بسیار خب آموزش این جلسه نیز به پایان رسید، در جلسه بعدی با طراحی برای device‌های موبایل و tablet آشنا خواهیم شد.

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

mn25999

با سلام و تشکر از شما
خواستم بگم وقتی این مقاله را به صورت pdf دانلود میکنم قسمت های کدداخل pdf بهم ریخته و به صورت کد هستن لطفا pdf این مقاله را اصلاح کنید

لقمان آوند

از گزارش این مشکل ممنونم
ببینید درست شده یا نه .
موفق باشید

mn25999

با سلام
بله مشکل حل شد
ممنون

mahdi tajik

سلام
به سواله من در انجمن رسیدگی نشده خواهش میکنم پیگیری کنید .

 <a href="https://7learn.com/forums/topic/%d9%85%d8%b4%da%a9%d9%84-%d8%af%d8%b1-%d8%b3%d8%a7%d8%ae%d8%aa-%d9%85%d9%86%d9%88-%d8%a8%d8%a7-css" rel="nofollow">لینک</a>
کیوان علی محمدی

رسیدگی شد.

mina

سلام من یک عکس دارم سایز a5 می خوام در سایز a5 چاپ بشه ولی کوچکتر از سایز میشه از تگ img استفاده کردم و با بک گراند هم امتحان کردم ولی باز هم کوچیکتر میشه چکار باید کنم؟ ممنون میشم کمکم کنید

سجاد دریس

خب هنگام استفاده از تگ img براش از صفت های height و width هم استفاده کنید.

امیر

بسیار جالب بود

......

این که media=”print” رو تو link بذاریم،() دیگه نمیتونیم از استایل خارجی استفاده کنیم.باید تو همون کدcss بنویسیم [email protected] بعد کدو بزنیم.درست نمیگم؟

سجاد دریس

سلام.
دقیقا کد link رو بذارید.
اینجوری متوجه نشدم.

......

دقیقا کد زیر رو میزنم

&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;print&quot; href=&quot;myprint.css&quot; /&gt;

ولی css از کار میفته و فقط قالب html نشون داده میشه

سجاد دریس

وقتی صفت media رو برابر با print قرار می دین، استایل مربوطه برای حالت پرینت قالب در نظر گرفته میشه.
مقدار print رو به screen تغییر بدین.

علی

هرچه زودتر بهتر

سجاد دریس

ارسال شد

علی

سلام اقا سجاد نظرتون به دستم نرسیده لطف کنید همینجا بگین یا ایمیل کنید ممنون ببخشید وقتتون رو گرفتم

manotobaham.dde.ir 😳

سجاد دریس

سلام.
از قسمت تماس با ما براتون پیغام فرستادم.
چشم نظرم رو سر وقت میفرستم

علی

سلام اقا سجاد میشه یه نگاه به وبلاگ من بزنید و اشکالاتش رو بهم بگین اگه هم کدی پیشنهاد دارید لطفا بهم بگین ممنون داخل نظرات وبلاگ

سجاد دریس

سلام.
بررسی کردم، نظرمو فرستادم.
موفق باشی

رها

سلام و واقعا ممنونم از لطف شما
اما ایکاش در اموزشهاتون یه بخشی هم به این مبحث میپرداختید تا با توضیحات بیشتری پیرامون این مسئله به مبتدیان اموزش رو یاد میدادید
ولی واقعا از شما تشکر میکنم چند وقتی بود دنبالش بودم و منبع درست و کاملی هم در ایران درباره ریسپانسیو نیست

بازهم از شما دوست عزیز تشکر میکنم
شاد و سربلند باشید

سجاد دریس

سلام.
خواهش میکنم،
در جلسه بعدی توضیح خواهم داد.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.