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

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

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

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

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

توجه :

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

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

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

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

<body>

<div id="content”>

<h1>Heading here</h1>

<p>Lorem ipsum dolor sit amet.</p>

<p>Lorem ipsum dolor <em>sit</em> amet.</p>

<hr />

</div>

<div id="nav”>

<ul>

<li>item 1</li>

<li>item 2</li>

<li>item 3</li>

</ul>

</div>

</body>

نمودار درختی بالا به صورت زیر خواهد بود

 

 

 

  

 

 

1 - جد (Ancestor ) :

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

 

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

 

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

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

 

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

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

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

 

3 - والد (Parent):  المان یا المان هایی که به صورت مستقیم در داخل یک عنصر هستند عنصر بالایی آنها والد آنها به حساب می آید.

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

 

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

 

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

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

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

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

 

 

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

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

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

پدر ul می باشد .

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

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


توسط : عثمان رحیمی  2 ماه قبل ، دوشنبه 3 شهریور 1393 ساعت 05:42  0  1571

نظر شما برای ما مهم است و به ما در بهبود سایت کمک میکند.


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط