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

- visibility ٢ mode_comment

در این مطلب و مطالب بعدی قصد داریم تعدادی نکته حرفه ای و کاربردی در مورد 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

comment دیدگاه کاربران
Mehdi Soli

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

محمد اسفندیاری

ممنون…موفق باشید

نیاز به لاگین

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