هدف قرار دادن رسانه هاي مختلف

 

 طراحی وب سایت 

 

از اين رو csچندين خصوصيت براي کنترل نحوه ي نمايش سند در رسانه هاي مختلف فراهم مي کند.

براي هدف قرار دادن رسانه هاي مختلف بايد از صفت media در تگ <link> يا در تگ style استفاده کرد يا درون قواعد نوشته شده ي css ميتوان از قاعده ي @media براي نشان کردن رسانه هاي مختلف استفاده کرد.

طراحی وب سایت 

مثال :

1

<link rel="stylesheet" type="text/css" media="print" href="myprint.css" />

2

 يا

3

<style type="text/css" media="print">....</style>

4

يا

5

<style type="text/css">

6

...

7

...

8

@media print {

9

 

10

}

11

</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

1

<h1> 7Lea : </h1>

2

<h3>Javascript and web design tutorials</h3>

3

<p>

4

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 oare ante, ac egestas est ua sit amet arcu.

5

</p>

و کد css :

 

1

* {

2

  margin: 0;

3

  padding: 0;

4

  font-family: serif;

5

  }

6

  h3 {margin-left: 20px;}

7

  p {

8

  margin: 10px 30px;

9

  width: 500px;

10

  text-align: justify;

11

  }

طراحی وب سایت 

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

 

حال ما ميخواهيم براي حالت print يک استايل متفاوت بنويسم

کد زير رو به کدهاي  طراحی وب سایت   اضافه کنيد :

 

1

@media print {

2

  * {

3

    font: 14px tahoma;

4

    letter-spacing: 2px;

5

  }

6

}

نتيجه print-preview

 

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

مثال کد html

 

1

<h1><a href="http://www.7lea.com">7Lea : </a></h1>

2

<h3>Javascript and web design tutorials</h3>

کد css :

 

1

a:after {

2

    content: "(" attr(href) ")";

3

}

کد بالا تعيين مي کند که پس از تگ a در داخل پرانتر مقدار صفت href آن لينک  طراحی وب سایت را قرار دهد