آموزش طراحی وب

نحوه استفاده از CSS

تو این جلسه به شما نحوه ی استفاده از CSS و اتصال اون به یک صفحه وب رو آموزش میدم .

نحوه ی استفاده از cssفصل اول : مبانی CSS

جلسه سوم  : نحوه استفاده از CSS

جلسه ی پیش در رابطه با نسخه های CSS صحبت کردیم ، تو این جلسه به شما نحوه ی استفاده از CSS و اتصال اون به یک صفحه وب رو آموزش میدم .

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

۱-    تمامی دستورات CSS رو در یک فایل ذخیره کنیم و اون فایل رو با استفاده از تگ <link> یا @import به صفحه وب معرفی کنیم .

۲-    دستورات CSS رو با استفاده از تگ <style> تو تگ <head> برای صفحه وب تعریف کنیم .

۳-    دستورات CSS رو تو خاصیت style تگ مربوطه وارد کنیم .

حالت اول : در این حالت تمامی دستورات CSS رو درون یک فایل مینویسیم و با پسوند .css ذخیره می کنیم . برای اتصال به صفحه وب از طریق <link> بصورت زیر :

 و برای اتصال از طریق @import بصورت زیر عمل می کنیم :

نکته : از تگ <link> برای ارجاع به یک فایل css ثانویه هم میتونید استفاده کنید . که بصورت زیر نوشته میشه :

 یک مقاله تهیه کردم در زمینه فایل های css ثانویه که برای کسب اطلاعات بیشتر در رابطه با این فایل ها میتونید این مقاله رو مطالعه کنید . برای مشاهده مقاله کلیک کنید .

حالت دوم : برای نوشتن استایل ها به این روش ، دستورات رو به صورت زیر درون تگ <head> قرار میدیم :

 حالت سوم :  تو این حالت شما استایل هاتون و به خاصیت style تگ مربوطه میدید :

 نکته : سعی کنید همیشه استایل هاتون و درون یک فایل css مجزا ذخیره کنید و توسط روش استاندارد اول به صفحه وب اضافه کنید .

خاصیت media چیست؟

قبلا تو بعضی از سایت ها ، دو نسخه ی متفاوت برای صفحات وب در نظر گرفته میشد ، یک حالت برای نمایش و یک حالت برای چاپ صفحه . محتویات این دو نسخه یکسان بود اما ظاهر متفاوتی داشتند . یکی از مزایای استفاده از CSS اینه که بدون نیاز به ایجاد یک صفحه ی جدا می تونید به راحتی علاوه بر حالت نمایش عادی ، برای حالت چاپ هم استایل در نظر بگیرید ؛ که تواین مواقع از خاصیت media ی تگ <link> یا <style> استفاده می کنید .

برای درک بهتر از مطالبی که گفته شد به مثال های زیر توجه کنید :

ما اگر بخوایم فایل css رو برای نمایش عادی با استفاده از تگ <link> به صفحه وب اضافه کنیم ، از دستور زیر استفاده می کنیم :

 اگر بخوایم همین مورد رو با استفاده از تگ <style> تعریف کنیم ، بصورت زیر عمل می کنیم :

 اگر بخوایم که قالب صفحه هم برای نمایش و هم برای چاپ ظاهر یکسانی داشته باشه از مقدار all برای خاصیت media استفاده می کنیم :

 اگر بخوایم برای قالب در حالت نمایش یک استایل و برای چاپ هم یک استایل مجزا در نظر بگیریم بصورت زیر عمل می کنیم :

 برای تگ <style> هم به همین صورت انجام میدیم .

در نسخه css2.1 برای خاصیت media 10 مقدار برای ۱۰ نوع نمایش پیش بینی شد :

All = برای تمامی دستگاه ها

Aural = دستگاه های تبدیل متن به گفتار

Braille = دستگاه های مخصوص نابینایان

Embossed = چاپگرهای بریل صفحه بندی شده

Handheld = دستگاه های کوچک مثل تلفن های همراه و  PDA ها

Print = برای چاپ و پیش نمایش چاپ

Projection = برای سمینارها

Screen = برای صفحات رنگی کامپیوترها

Tty  = دستگاه هایی که از اندازه ی کاراکترهای ثابت استفاده می کنند مثل فاکس و ترمینال ها

Tv = تلویزیون

برای استفاده همزمان از چند مقدار برای media از کاراکتر “ , “ استفاده می کنیم و بصورت زیر عمل می کنیم :

 البته نیازی نیست همگی این موارد رو بخاطر بسپارید ، عموما و اکثرا از سه نوع all , screen, print استفاده می کنیم .

 تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین