illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6336 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

معرفی CSS و مزیت های آن

9372 ۲۵ اردیبهشت ۸۹

کسانی که قصد طراح وب شدن به صورت حرفه ای را دارند یکی از ضروریاتشان در کنار یادگیری html ، آموختن CSS است .

:: CSS چیست ؟

شاید تا حالا این سه حرف رو خیلی جاها دیده باشید ، ولی ندونید چیه !
CSS مخفف Cascading Style Sheets هست . با استفاده از زبان ساده ی CSS شما می تونید تنظیمات خاصی رو روی تگ های html (یا زبان های Murkup دیگه مثل xml) اعمال کنید !
هدف CSS جداسازی طراحی بدنه ی یک فایل html از شیوه ی نمایش اون فایل html هست . با CSS شما می تونید تعیین کنید که هر تگ html به چه شکلی نمایش داده بشه . مثلا رنگ ، اندازه و نوع فونت متن درون تگ رو مشخص کنید . یا اینکه پس زمینه و ویژگی های دیگه ی تگ رو تعیین کنید .

! سوال : شاید با خودتون بگید که هر تگ html خودش یک سری ویژگی هایی داره که با دادن مقدار به اونها میشه نوع نمایش تگ رو مشخص کرد . پس دیگه CSS واسه چیه ؟
مثلا تگ <font> در زیر رو ببینید که ویژگی های رنگ و اندازه و نوع فونت رو در خودش داره :

<font color="red" size="12px" face="Tahoma">7Learn.com</font>

خروجی این کد متن 7Learn.com هست که با رنگ قرمز ، اندازه ی 12 پیکسل و با فونت Tahoma نمایش داده میشه.
( اصطلاح : در html اصطلاحا به ویژگی هایی که روی هر تگ می تونید اعمال کنید attribute های اون تگ میگن . مثلا size و color از attribute های تگ font هستند )
خب پس با توجه به اینکه هر تگی خودش می تونه نوع نمایشش رو تعیین کنه ، دیگه چه لزومی به استفاده از CSS هست ؟
! جواب : شما فرض کنید می خواید تو صفحه ی وبتون 100 بار (به تعداد زیاد) در جاهای مختلف صفحه ، متنی رو با شیوه ی نمایش خاصی بیارید . اگر بخواهید از attribute های هر تگ برای نوع نمایش اون استفاده کنید ، مثلا در مثال بالا باید 100 بار تگ font رو همراه با هر سه ویژگی color ، size و face در کد صفحه ی وبتونن بیارید .
ولی حالا توی CSS در نظر بگیرید : شما تنظیمات color ، size و face رو فقط در یک جای کد صفحه ی وبتون میارید و به این دسته تنظیمات یک اسم (توی css اصطلاحا Selector) اختصاص میدید و به جای اینکه در هر 100 مرتبه تنظیمات رو توی خود تگ بیارید ، فقط میگید که آقای تگ font برو و تنظیمات فلان Selector رو روی خودت اعمال کن . به صورت خاص در این مثال پیاده سازی CSS اون به شکل زیره :
اول باید Selector مد نظرتون رو با تنظیمات نمایشش در تگ <style> تعریف کنید . به شکل زیر :

<style>
.fontStyle1{color:red; font-size:12px; font-family:Tahoma;}
</style>

و بعد هر جایی که خواستید می تونید از این Selector که در اینجا به نام fontStyle1 تعریف شده به شکل زیر استفاده کنید :

<font class="fontStyle1">7Learn.com</font>

از ویژگی class در همه ی تگهای html می تونید برای مشخص کردن تنظیمات اعمالی روی تگ استفاده کنید . که البته تنظیماتی با چنین اسمی باید قبلا توی تگ Style نوشته باشید . مثلا در کد بالا تمام تنظیمات سلکتور fontStyle1 روی تگ font اعمال میشه !
(در این پست ، هدف آموزش CSS نیست . این مثال صرفا برای درک بهتر از اینکه چرا باید از CSS استفاده کنیم آورده شده . در پست های آینده به صورت مفصل وارد بحث آموزش CSS خواهیم شد)

:: خوب حالا این همه قصه گفتیم ، مزیت استفاده از CSS در مقابل ویژگی های خود تگهای html چیه ؟
1) کاملا مشخصه که اگه بخواید از attribute های خود html استفاده کنید ، بدلیل اینکه باید اونها رو در هر تگ دوباره و چندباره تکرار کنید حجم فایل html شما خیلی زیاد میشه ، در صورتی که ما با استفاده از CSS میتونیم یک دسته از attribute ها رو فقط یکبار و در یکجا تعریف کنیم و تگهای مختلف به اون دسته تنظیمات ارجاع بدن و نیازی به آوردن تنظیمات در خود تگ و اتلاف فضای بیشتر نباشه . با CSS کلی در اندازه ی فایل صفحه ی وبتون صرفه جویی می کنید !
2) خوب هر چی اندازه ی فایل وبتون کوچیکتر باشه سرعت لود شدن صفحه ی وب هم مسلما بیشتر میشه . که اینکار با CSS میسره !
3) تغییر دادن صفحه ی وبتون به مراتب راحتتر میشه . تو مثال بالا فرض کنید بعد از یه مدتی استقلالی میشید و عاشق رنگ آبی . و تصمیم می گیرید همه ی اون 100 تا جایی که 7Learn.com رو با رنگ قرمز تو صفحه وبتون آورده بودید آبی کنید . حالا اگه از attribute های html استفاده کرده باشید باید تمام کد صفحه تون رو جستجو کنید و هر جا متن 7learn.com رو آوردید برید و مقدار ویژگی color تگ font رو از red به blue تغیر بدید . ولی اگه از CSS استفاده میکردید فقط همون یکجا (توی Selector مورد نظر) red رو تبدیل به blue می کردید و همه ی تگهایی که به این Selector ارجاع میدادند تغیرات رو متوجه میشن !
4) تنظیمات CSS رو می تونید توی فایل جداگونه بزارید و به این ترتیب استفاده و نگهداریش راحتتره !
و ...

برای معرفی CSS و بیان مزیات استفاده از اون این پست کافیه . در پست های بعدی شروع به آموزش زبان CSS می کنیم . از مبتدی تا حرفه ای . با ما باشید ...


دریافت این مقاله به فرمت PDF

 

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 9 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    سلام
    شما فارغ التحصیل شدید؟
    با زبان های برنامه نویسی هم آشنایی دارید؟ مثلا C , Java

    اشتباهی یه پیام هم در پست قبل دادم
    اگه دوست داری همین جا جواب بده!

    پاسخ نویسنده(حمزه فیضیان):
    درود بر شما.
    در پاسخ جواب قبلیتون باید بگم ای پی درآوردن کاری نداره! جواب این سوالتم باید بگم اقای اوند مسئول برنامه نویسی هستند. و در جواب اظهار محبتتون باید تشکر کنم از شما متشکرم. موفق باشید…

    لقمان آوند : سلام
    بله بنده با این دو زبون آشنایی دارم .
    اگر کسی سوالی داره در حد توان در خدمتم .

  • ‏‏

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

  • ‏‏

    میخوام تو قالب وبم یه بلوک داشته باشم که آخرین ارسال های انجمنم رو نشون بده خواهشا کمکم کنید….

    لقمان آوند : سلام آقا حامد
    برای اینکار باید انجمنتون اسکریپتی داشته باشه برای نمایش آخرین ارسال ها . اونو تو وبلاگتون include و استفاده کنید .

  • ‏‏

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

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

    http://www.persianweblog.ir/templates/converter/bf_pb.aspx

    قالب رو به پرشین بلاگ ترجمه کردم .
    در پرشین بلاگ قسمتی به نام صفحات وبلاگ هستش که با آدرس : http://yourblog.persianblog.ir/page/1

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

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

    Baransepid935@yahoo.com

  • ‏‏

    سلام
    خسته نباشید
    من یک سایت توی Dream vieaver طاحی کردم البته ابتدایی اما صفحه اصلی load نمی شه
    چیکار کنم؟؟؟؟؟؟

  • ‏‏

    سلام. ممنون از سایت مفیدتون. من در حال یادگیری طراحی سایت هستم. html,css رو تقریبا یاد گرفتم و تا یه حدودی کارکردم. به نظر شما واسه قدم بعدی سراغ کدوم زبان برنامه نویسی برم؟ جاوا اسکریپت، php یا asp.net یاچیز دیگه. من قصد دارم اگه بشه تو این زمینه کار بکنم. ممنون میشم راهنمایی کنید

  • ‏‏
    طراحی وب سایت(۱ تیر ۱۳۸۹)

    با سلام و خسته نباشید:)
    ممنون از سایت مفیدتون:)
    مطالب بدرد بخوری توشه…
    موفق باشید.

  • ‏‏

    خیییییییییییییییییییییییلی مطلب خوبی بود. چون من همیشه این کد ها رو می دیدم و نمی دونستم چیه
    ممنون از شما

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram