نحوه چینش عناصر تمامی سندهای HTML به صورت درختی قابل تحلیل است . هر درجه و رتبه از این درخت معنایی مشابه با روابط انسانی دارد و می توان روابط بین این عناصر را با روابط انسانی مقایسه نمود . معانی مانند جد ، نسل ، والدین ، فرزند و خواهر و برادر – ancestors, descendants, parents, children and siblings – درک مفهوم موقعیت عناصر نسبت به یکدیگر در یک سند HTML می تواند کمک بزرگی برای درک بهتر مفاهیمی مانند گزینشگرها در CSS باشد .
برای توضیح و درک این روابط در یک سند HTML یک سند ساده را به عنوان مثال در نظر خواهیم گرفت .
<body>
<div class="content">
<h1>Heading here</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
<hr>
</div>
<div class="nav">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</body>
برای درک بهتر مطالب نمودار درختی این سند HTML به شکل زیر ترسیم خواهد شد .
جد -Ancestor
جد – Ancestor – اشاره دارد به عنصری که در بالاترین سطح و در نوک درخت قرار می گیرد . مهم نیست که چقدر و چند سطح بالاتر است . در نمودار زیر عنصر body جد تمامی عناصر موجود در این سند HTML است به این معنی که در بالاترین سطح قرار دارد .
به این نکته توجه کنید که هر عنصری که زیر مجموعه دارد می تواند جد زیر مجموعه خودش باشد . به این معنی که در نمودار زیر هر کدام از div ها جد زیر مجموعه خودشان هستند .
نسل – Descendant
نسل – Descendant – اشاره دارد به تمامی عناصری که در درخت یک سند HTML با یکدیگر متصلند و در زیر مجموعه یک عنصر قرار می گیرند . مهم نیست در چند سطح پائینتر قرار گرفته اند .
در نمودار بالا تمامی عناصر متصل به div مشخص شده نسل این div هستند .
والدین – Parent
والدین – Parent دقیقا اشاره دارد به عنصر بالا دستی و متصل در درخت یک سند HTML . در نمودار زیر div مشخص شده والدین ul است .
فرزند – Child
فرزند – Child دقیقا اشاره دارد به عنصر پائین دستی و متصل در درخت یک سند HTML . در نمودار زیر ul فرزند div مشخص شده است .
خواهر و برادر – Sibling
خواهر و برادر ها – Sibling – عناصری هستند که دارای یک والدین مشترک هستند . توجه داشته باشید که خواهر و برادرها در یک سطح قرار خواهند گرفت .
در نمودار زیر کلیه عناصر li با یکدیگر خواهر و برادر هستند و در یک سطح قرار دارند .
بررسی موقعیت یک عنصر در یک درخت سند HTML
با توجه به توضیحات ارائه شده یک عنصر در درخت یک سند HTML می تواند نقش های گوناگونی را داشته باشد . می تواند نسل یک جد باشد و یا جد یک نسل دیگر . یک فرزند باشد و در عین حال خود یک والدین . درک این تفسیر های گوناگون می تواند در گزینش بهتر یک عنصر HTML بسیار تاثیر گزار باشد .
با توجه به نمودار زیر وضعیت و نقش های یکی از عناصر که با رنگ تیره مشخص شده است را بررسی می کنیم .
- فرزند body
- والدین عنصر ul
- جد عناصر ul و li
- برادر و یا خواهر دیگر عنصر div موجود در درخت .
محسن هاشمی
26 July 2011
سلام.
در مورد ارث بری در CSS و ارتباطش با نحوه گزینش عناصر، مطلب بذارید.
سپاس . . .
امیر سروری
26 July 2011
محسن هاشمی @ سلام و درود بر استاد هاشمی . حتما ، اینها مقدماتی هستند برای نوشتن مطالب بیشتر در مورد css
راستی یک gravatar خوب برای خودت انتخاب کن ;)
محسن هاشمی
27 July 2011
تست گراواتار !
امیر سروری
27 July 2011
محسن @ منظورم این بود :D
http://en.gravatar.com
روژ
22 January 2012
ممنون به خاطراینکه هستید ومینویسید
امیر سروری
2 February 2012
روژ @ ممنون از اینکه دوستانی مانند شما هستند که من افتخار نوشتن و تهیه مطالب رو براشون داشته باشم . به امید اینکه همه حس انتقال تجربیات رو پیدا کنند و… ;-)
احمد
14 May 2012
خیلی خوشحالم که سایتی به این خوبی پیدا کردم.
و امیدوارم بتونم از مطالب بسیار بسیار مفیدتون استفاده کنم.
و قدرشون رو بدونم
براتون بهترین ها رو آرزو می کنم
میلی
15 April 2013
نامردی بود اگه ازتون تشکر نمیکردم !!! تشکر . . .
امیر
7 July 2013
با سلام. بنده به تازگی با سایت شما آشنا شدم. خواهشی از اساتید گرامی دارم. یکی اینکه همانند بخش سی شارپ در پایان هر پست امکان دانلود نسخه پی دی اف رو هم قرار بدین. دوم اینکه بنده خیلی علاقمند به یادگیری صحیح سی اس اس و اچ تی ام ال هستم مطالبی هم در طول 2 سال مطالعه کردم اما احساس میکنم برآورد مناسبی نداشته. خواهش میکنم در صورت امکان سلسله آموزشهایی اصولی و از اول تا یک حد معقول در سایت قرار بدین از آموزش های پایه ای تا آموزشهای کاربردی. ممنون میشم خبرش رو هم بدین. لطف میکنید.
مهدخت یافتیان
8 July 2013
سلام
مرسی از اینکه مطالب وب تارگت را دنبال می کنید. برای html و css از پایه تا پیشرفته فعلا برنامه ای برای آموزش سریالی نداریم. اما ممکنه در آینده فیلم های آموزشی یا مطالب آموزشی در وب تارگت منتشر کنیم. اما در زمینه ی اینکه بتونید دانسته هاتون را منسجم کنید پیشنهاد می کنم در کلاسهای آموزشی کارآزموده شرکت کنید هم دوره های طراحی وب مقدماتی داره هم پیشرفته و با توجه به توضیحاتی که دادید فکر کنم دوره پیشرفته برای شما مناسب باشه.
http://karazmoodeh.com/courses/
خودآموزی همیشه بهترین روش یادگیری بوده اما گاهی اوقات کمک گرفتن از کسانی که در این زمینه فعالیت می کنند باعث میشه چیز هایی را که یاد گرفتید به تونید به صورت کاربردی پیاده سازی کنید یا حتی دانسته های خودتون را به روز کنید.
reza
13 September 2013
واقعا عالی بود .
ممنون
اشکان
14 October 2013
پستتون خیلی خلاصه و مفید بود. ممنون بابت زحمتایی که میکشین. :-)
مسلم
30 January 2014
سلام
ممنون
alug
31 July 2014
عالی خیلی استفاده بردیم به امید بهتر شدن vasighidesign.ir