Embedded Style

در جلسه قبل با استايل inline آشنا شديد. اما اين، روش مناسبي براي دادن ظاهر به سايت نيست و ميبايست از روش ديگري استفاده کرد. به طور مثال مي بايست استايل را در جايي نوشت و به همه تگ ها گفت از آن استايل خاص براي ظاهر خودشان استفاده کنند.

براي اين کار کافي است داخل تگ head در بالاي صفحه عنصر style را اضافه کنيم:

content="text/html; charset=utf-8"/>

p {

font-size: 12px;

}

در مثال بالا گفته شد براي همه تگ هاي p سايزفونت 12px را در نظر بگير. دقت نماييد p يک selector است و اعلان ها داخل {} قرار مي گيرد.

در اين مثال selector ما يک تگ p را هدف قرار داده است و مي تواند تگ هاي ديگري و يا کلاس هاي و يا آي دي هاي ديگري را هدف قرار دهد. همچنين براي يک selector ميتوان چندين اعلان تعريف کرد مانند مثال زير :

p {

font-weight: bold;

color: blue;

}

طراحی وب سایت

شکل زير مي تواند کمک کند:

design-web-53.jpg

چرا embedded style از inline style بهتر است؟

فرض کنيد در صفحه 10 تگ p داريد که مي خواهيد به آن رنگ قرمز بدهيد. در صورتي که از inline style استفاده نماييد مي بايست 10 مرتبه اين کار را انجام دهيد و اما اگر از embedded استفاده نماييد تنها کافي است يک بار آن را بالاي صفحه اضافه نماييد تا همه ي تگ هاي p ازآن تبعيت کنند.

اهميت اين انتخاب در زمان تغييرات استايل نمايان تر است زيرا در صورت استفاده از inline مجبور خواهيد بود تمامي 10 مورد را تغيير دهيد اما در embedded تنها تغييرات در يک مکان صورت مي گيرد .

p {

font-weight: bold;

color: red;

}

پس تا اينجا embedded برنده شده است!

حالا فرض کنيد صفحات بسيار زيادي داريد و مي خواهيد در تمامي صفحات رنگ همه ي p ها را قرمز کنيد . آيا استفاده از embedded مقرون به صرفه است ؟

Extended Style

اين همان جواب سوال بالاست . با exteal مي توانيد يک استايل را براي تمام صفحات داشته باشيد و فقط کافي است اين فايل را به صفحه مورد نظر وصل کنيد .

البته دلايل بيشتري هم براي انتخاب exteal وجود دارد که در دوره پيشرفته خواهم گفت .

نحوه ساخت يک Exteal CSS:

اديتور خود را باز نماييد و متن css خود را در آن بنويسيد

/*

CSS for Bubble Under site

*/

p {

font-weight: bold;

color: blue;

}

سپس فايل را با نام style1.css ذخيره کنيد همان طوري که فايل html را ذخيره نموديد . حالا مي بايست فايل ساخته شده را به صفحه متصل نماييد.

نکته : فوايد استفاده از کامنت در css همانند html مي باشد و براي تفکيک کد هاي css در پروژه هاي بزرگ و گروهي استفاده مي شود. براي اين منظور از عبارت زير استفاده مي کنيم :

/* comment hear */

اضافه کردن exteal css به صفحات html:

براي اين کار از عنصر link داخل تگhead استفاده مي کنيم بدين ترتيب:

content="text/html; charset=utf-8"/>

طراحی وب سایت

Href به فايل css شما اشاره مي کند . عناصر rel , type به مرورگر بيان مي کند نوع لينک شما چيست تا مرورگر محتواي صفحه را طبق آن تنظيم کند .

نکته : عنصر لينک يک تگ empty است و نمي توان آن را در Xhtml به صورت container نوشت .

پس نتيجه مي گيريم که exteal css در طراحي سايت ها از همه مناسب تر است و تنها در مواردي مجبوريم که از inline و يا embedded استفاده کنيم . براي اين که درک اين مطلب براي شما ساده تر باشد به سايت خودم يک سري بزنيد و سورس 2 و يا 3 صفحه آن را مشاهده نماييد(براي ديدن تصوير بزرگ روي هر نصوير کليک کنيد) :

صفحه اول :

design-web-54.gif

صفحه دوم:

design-web-55.gif

ميتوانيد ببينيد که همه صفحات به يک css وصل شده اند.

اگر به 2 تصوير بالا دقت کنيد و يا سورس وب سايت را ببينيد ، متوجه عنصري به نام media خواهيد شد.

به طور خلاصه اين عنصر براي هدف قراردادن سي اس اس براي مدياي خاص مثل screen و يا موبايل و يا مثلا ظاهر صفحه در زمان پرينت است. مثل هميشه توصيه ميکنم در اين مورد بيشتر تحقيق کنيد.

نکته :

آدرسي که در مثال بالا براي css مشاهده مي فرماييد يک آدرس دهي مطلق است که استفاده از آن بري شما ضرورتي ندارد . يعني اگر فايل css شما کنار فايل html شماست بايد از روش زير استفاده نماييد :

در جلسه آينده وارد بحث css مي شويم و نحوه نوشتن استايل براي عناصر مختلف صفحه را مررور مي کنيم.

مثل هميشه منتظر نظرات انتقادات و البته پيشنهادات شما هستم و اين کامنت ها و هم چنين استقبال شماست که ما را به ادامه کار

دلگرم خواهد کرد .