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

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

دسته بندی موضوعات
سفارش تبلیغات

نحوه استفاده از 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 استفاده می کنیم .

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

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟