درک رابطه والد و فرزندی در سند HTML
CSS قدرتمند است زیرا از ساختار سندها برای مشخص کردن استایل های مناسب و چگونگی اعمال آنها استفاده می کند. هنوز هم ساختار سند، نقش مهم تری در شیوه ی اعمال استایل ها به سند را بازی می کند. اجازه دهید تا ابتدا ساختار html را توضیح دهیم.
درک رابطه والد و فرزندی
برای درک رابطه ی بین سلکتورها و سندها، نیاز داریم ابتدا ببینم که سندها چگونه ساختار دهی می شوند. به سند HTML ساده ی زیر توجه کنید:
<html>
<head>
<base href="https://sina2.ir/">
<title>فروشگاه مرکزی</title>
</head>
<body>
<h1>بزرگترین <em>کتابخانه تحت وب</em></h1>
<p>
به فروشگاه <em>مرکزی</em>و<strong>بهترین وبسایت
در<a href="/inet.html">کل <em>اینترنت</em> خوش آمدید</a></strong>!</p>
<ul>
<li>خدمات ما:
<ul>
<li><strong>آموزش جزئیات</strong> برنامه نویسی</li>
<li>و بررسی زبان های مختلف برنامه نویسی</li>
<li><em>و کتاب</em>آموزشی
<ol>
<li>اچ تی ام ال</li>
<li>سی اس اس</li>
<li>جاوا اسکریپت</li>
</ol>
</li>
</ul>
</li>
<li>و غیره</li>
</ul>
<p>
سوال <a href="/">تماس با ما</a>
</p>
</body>
</html>مقدار زیادی از قدرت CSS به رابطه ی والد و فرزندی عناصر HTML بستگی دارد. سندهای HTML به صورت یک سلسله از عناصر تعریف می شوند؛ این سلسله مراتب برای مثال بالا، در تصویر 2.15 نشان داده شده است. در این سلسله، هر عنصر در مکان خاصی از سند قرار می گیرد. در این سند، هر عنصر یا یک والد است یا فرزند یک عنصر دیگر محسوب می شود.
(تصویر 2.15 : یک ساختار از سند)
گفته می شود که یک عنصر، والد یک عنصر دیگر است، اگر این عنصر در سلسله مراتب سند، در جایگاه بالاتری قرار داشته باشد. بعنوان مثال، در تصویر 2.15، اولین عنصر p ، والد عناصر em و strong محسوب می شود. درحالیکه عنصر strong والد یک عنصر a می باشد که خود والد یک عنصر em است. به طور برعکس، می گوییم یک عنصر، فرزند یک عنصر دیگر است، اگر مستقیماً در زیر عنصر دیگری قرار داشته باشد. بنابراین، در تصویر 2.15، عنصر a فرزند عنصر strong محسوب می شود، که خود فرزند عنصر p است و آن نیز فرزند عنصر body است و همین طور الی آخر.
اگر یک عنصر، دقیقاً یک مرحله در بالا یا در زیر عنصر دیگری قرار داشته باشد، آنگاه این دو، از رابطه ی والد و فرزندی(parent-child) برخوردار هستند. اگر مسیر از یک عنصر به عنصر دیگر، از دو یا چند مرحله بیشتر باشد، آنگاه این عناصر رابطه اجدادی(ancestor-descendant) دارند اما رابطه والد و فرزندی ندارند. در تصویر 2.15، اولین عنصر ul والد دو عنصر li هست؛ اما این عنصر ul، جد عناصری که از دو li نشأت گرفته اند نیز می باشد. یعنی تا عمیق ترین عناصر li تودرتو این رابطه برقرار است.
نکته: یک عنصر فرزند، یک نواده(descendant) نیز محسوب می شود و یک عنصر والد، یک جد(ancestor) نیز محسوب می شود.
همچنین در تصویر 2.15، یک عنصر a وجود دارد که فرزند عنصر strong محسوب می شود، اما همچنین یک نواده عناصر p و body و html محسوب می شود. عنصر body، یک جد(ancestor) برای هر چیزی که در مرورگر نشان داده می شود، است و عنصر html یک جد برای تمام سند محسوب می شود. به همین علت، در یک سند HTML یا XHTML، عنصر html را عنصر ریشه(root) می نامیم.
- بازدید: 728
نوشتن دیدگاه
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.
دیدگاه‌ها
اما اگه منظورتون اینه که این کار رو با استفاده از جی کوئری یا جاوا اسکریپت انجام دهیم، قضیه فرق می کنه و دستورات خاص خودش رو داره.