سبد خرید 0

وبلاگ

موقعیت عناصر در یک فایل html و روابط بین آنها

به شما پیشنها می کنم ابتدا مقاله   اصول اولیه css  را  مطالعه نمایید .

موقعیت عناصر در یک فایل html و روابط بین آنها:

بین تمامی سند های html نحوه چینش عناصر در درون صفحه به صورت درختی قابل تحلیل می باشد و همانطور که می دانید هر درخت یک ریشه و تعدادی نود (node) یا برگ و … دارد .بین تمامی عناصر صفحه رابطه هایی وجود دارد که می توان آن روابط ها را مثل روابط انسانی در نظر گرفت .

درک این روابط قدرت شما را در انتخاب کننده ها که مهمترین بخش css و همچنین jquery می باشد بیشتر می کند و با دانستن این روابط بین المان ها یادگیری css خیلی راحت تر می شود و از آن لذت می برید .

توجه :

در آموزش های css منظور از “عناصر ” المان” همان تگ ها می باشد .

رابطه های موجود در بین عناصر صفحه :

  • Ancestor (جد)
  • Descendants ( اولاد )
  • Parent (پدر)
  • Childs (فرزندان)
  • Siblings ( برادران )

مثالی از نموادر درختی عناصر :

dom

1 – جد (Ancestor ) :

به عنصری که بالای درخت قرار دارد اشاره می کند .عنصر body جد تمام عناصر در یک سند html می باشد .

در عکس بالا Body که با پس زمینه سیاه مشخص شده است جد تمامی عناصر صفحه می باشد .

2 – اولاد-نسل (Descendants):

تمامی عناصر که در زیر مجموعه یک عنصر قرار می گیرند اولاد آن عنصر به شمار می آیند .

html

عنصر ul و تمام عناصری که در درون ul هستند اولاد یا نسل div به شمار می آیند .

تمامی li ها هم نسل ul می باشند .

پس تمامی المان هایی که دررن یک تگ هستند چه به صورت مستقیم و چه تودرتو اولاد آن تگ هستند .

3 – والد (Parent)

  المان یا المان هایی که به صورت مستقیم در داخل یک عنصر هستند عنصر بالایی آنها والد آنها به حساب می آید.

4 – فرزندان (Childs)

تمام عناصر مستقیم داخل یک عنصر ،فرزند(فرزندان) عنصر بالایی به شمار می آیند .

parnt-child

در مثال بالا تگ ul فرزند div و div پدر ul  می باشد . تمام li های داخل ul فرزندان ul می باشند و ul  هم پدر li ها می باشد.

5 – خواهر و برادر (Siblings)

تمامی عناصر که یک والد (پدر) مشترک دارند و در یک سطح هستند خواهر و برادری می باشند.

siblings

تمام li ها با هم خواهر و برادر می باشند .

تگ های h1,p,p,hr که فرزندان div سمت چپ می باشند با هم خواهر و برادر هستند ولی تگ em جزو آنها نمی باشد به این دلیل که با آنها در یک سطح نیست و فرزند p می باشد .

مثال هایی برای آشنایی بیشتر :

مثال های بیشتر

تگ div با پس زمینه سیاه :

فرزند body می باشد .

برادر دیگر عنصر div می باشد .

پدر ul می باشد .

جد ul و li  ها می باشد .

نکته : یک المان خصوصیاتی را از عنصر والد و جد  خود به  صورت آبشاری به ارث می برد .دلیل آبشاری خواندن سبک های css همین مورد می باشد .

اشتراک گذاری:

مطالب زیر را حتما مطالعه کنید

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

keyboard_arrow_up