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

نکاتی کاربردی در مورد CSS (جلسه 1) : مقدمه و ویژگی color

2 383 ۱۵ آذر ۹۵

در این مطلب و مطالب بعدی قصد داریم تعدادی نکته حرفه ای و کاربردی در مورد CSS در اختیارتون قرار بدم. بعضی از این نکات رو شاید شما از قبل بلد بوده باشید که با مطالعه این موارد میتونین در اونا مسلط تر بشید و بعضی از اونا هم برای اولین باره که میبینید. پس بنظر من این سری آموزشی رو دنبال کنید تا با نکات مفیدی آشنایی پیدا کنید. در این دوره، هر ترفند به تفسیر توضیح داده میشه و برای هر کدام مثال و تصاویری قرار داده میشه تا شما بهتر با اون آشنا بشید.css-style

CSS زبان خیلی سختی نیست. اما اگر شما برای سالهای زیادی با CSS کار کرده باشید گاهی ممکنه که با چیزهای جدیدی که قبلا ندیدید، روبرو بشید. مثلا ویژگی هایی که تا الان اصلا استفاده نکردید، مقادیری که هچوقت قرار ندادید و مشخصاتی که اصلا در مورد اونا چیزی نشنیدید.

در این جلسات نکاتی رو بیان میکنیم که با مطالعه اونا اطلاعات شما نسبت به CSS خیلی خیلی بیشتر خواهد شد.

ویژگی Color فقط برای متن نیست

بیاید با یک چیز ساده شروع کنیم. ویژگی color خیلی زیاد توسط طراحان وب استفاده میشه. خیلی از افراد فکر میکنن که با ویژگی color فقط میشه رنگ متون رو تغییر داد ولی این یک فکر اشتباه هست. کد HTML زیر رو در نظر بگیرید:

کد CSS:

همونطور که میبینید ویژگی color رو یکبار و اونم درون body تعریف کردیم و مقدار yellow یا زرد رو برای اون قرار دادیم. حالا اگر این کدها رو درون مرورگر Firefox باز کنیم، بصورت زیر خواهد بود:css color

همونطور که دیدید ما رنگ چیز دیگه ای رو مشخص نکردیم و بصورت اتوماتیک خیلی از چیزا رنگشون زرد شده!! موارد زیر زرد شدن:

  • متن alt که بر روی تصاویری که لود نشدن، نمایش داده میشه
  • border لیستها
  • شکلک و اعداد درون لیستها
  • المنت hr

المنت hr بصورت پیش فرض مقدار رنگ رو از body به ارث نمیبره و ما خودمون این کار رو در بالا برای اون انجام دادیم. برای اینکار بصورت border-color: inherit عمل کردیم. این مورد در مرورگرهای مختلف فرق داره و در بعضی از مرورگرها رنگ رو به ارث نمیبره و باید بصورت مستقیم براش تعریف بشه.

اگر specification مربوط به CSS مطالعه کنیم، با متن زیر مواجه میشیم:

این ویژگی رنگ پیش زمینه المنتهایی که محتوای متنی دارن رو مشخص میکنه. علاوه بر این مورد، این ویژگی میتونه بصورت غیر مستقیم برای ویژگی هایی که رنگ قبول میکنن، مورد استفاده قرار بگیره.

همچنین با استفاده از این نکته میتونین رنگ box-shadow و text-shadow رو هم مشخص کنید.

در جلسات بعدی با ادامه نکات در خدمتتون هستیم.

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

موفق و پیروز باشید.

یا علی

Source

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

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

  • ‏‏
    Mehdi Soli(۱۷ آذر ۱۳۹۵)

    خدا قوت، ممنون، جالب بود، منتظر ادامه مقالات خوب شما هستم. با تشکر

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram