cssطراحی سایت

جلسه ۴۱: مفهوم آبشار و وراثت در CSS

درک مفهوم آبشار و وراثت برای درک چگونگی عملکرد CSS مهم است. در این درس نگاهی به  این مفاهیم خواهیم انداخت. موارد زیر را بیان خواهیم کرد وراثت آبشار نتیجه هر توسعه دهنده موفق CSS آبشار و وراثت را درک می کند. واقعاً محوری است. حالا بگذارید برای شما توضیح دهم.

وراثت

کلمه انگلیسی Inheritance به معنای دریافت چیزی از مالک سابق است. معمولاً ، جد ، والدین یا مالک سابق. در مورد CSS نیز می توان همین را گفت. وراثت در CSS به این معنی است که ایستایل ها از عناصر والدین می توانند توسط عناصر کودکان به ارث برده شوند. یعنی بدون تعیین استایل روی عناصر کودکان. بیایید یک مثال ببینیم. نشانه گذاری زیر را در نظر بگیرید:

<div class=”parent”> I am the parent element. <p class=”child”> I am the child element</p> </div>

نشانه گذاری بسیار ساده است. ما یک div داریم که یک عنصر p را در خود جای داده است. یعنی div عنصر والد و p عنصر کودک است. آیا می توان استایلی  را به عنصر والد ، div داد و آیا آن را عنصر فرزند به ارث می برد؟ بیایید سعی کنیم به عنصر والد رنگ قرمز بدهیم. آیا عنصر فرزند نیز این مقدار قرمز را به ارث می برد؟

.parent {
  color: red;
}

<html>

 <head>

   <script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.0.js”></script>

 </head>

 <body>

   <div class=”parent”>

      I am the parent element.

      <p class=”child”> I am the child element</p>

   </div>

 </body>

</html>

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

آبشار #

مفهوم آبشار در CSS معمولاً سو تعبیر می شود. این یک شباهت با وراثت است اما کاملاً متفاوت است. وراثت برای درخت DOM اعمال می شود. رابطه والدین و فرزندان. Cascade هیچ ارتباطی با رابطه DOM در یک سند ندارد ، اما رابطه بین چندین صفحه استایل را نشان می دهد. درصورتی که بیش از یک صفحه استایل در یک سند اعمال شده باشید ، Cascading به این معنی است که سبک ها می توانند از یک صفحه به صفحه دیگر سقوط کنند (یا به صورت آبشار) ، استفاده از چندین استایل را در یک سند HTML را امکان پذیر می کند. در اینجا روش عملی تری برای بیان آن وجود دارد: در یک درس قبل از این ، ما دیدیم که چگونه سبک های مرورگر بر روی سند تأثیر دارند – بدون هیچ گونه دخالت از سمت ما. ما همچنین در مورد لزوم نادیده گرفتن این استایل ها در موارد خاص بحث کردیم. خوب ، این آبشار در محل کار است! این واقعیت که چندین صفحه استایل می توانند بر روی همان سند تأثیر بگذارند ، مفهوم آبشار در CSS است. در یک درس ، من نمونه ای از نحوه گنجاندن بیش از یک صفحه سبک را در یک سند نشان می دهم.

نتیجه

اکنون شما به دانش بنیادی آبشار و وراثت در CSS مسلح شده اید. این مفاهیم می تواند باعث ایجاد ناامیدی برای تازه واردین CSS شود. مطمئناً شما از آن دسته نخواهید بود. بیایید شروع کنیم …

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا