روابط CSS
گفته می شود که سندهای HTML دارای یک درخت هستند ، اما به جای تصور کردن این درخت همانند درخت نارون حیاط خانه تان ، باید این درخت را مثل یک شجره نامه با روابط فامیلی موجود در بین تمامی tag ها در نظر بگیرید .
سپس css از این روابط استفاده می کند تا style ها را بر روی عناصر مشخصی از این درخت اعمال کند . اما اگر شما دلیل این روابط را درک نکنید ، برای اعمال style ها با مشکل روبرو خواهید شد .
درک درخت یک سند HTML :
در اینجا درخت یک سند ساده HTML را با 3 تقسیم بندی ، 2 لیست آیتم برای جهت یابی ، 3 پاراگراف در div اصلی و یک عکس در سومین div مشاهده می کنید . این سند از 3 قالب طرح بندی ستونی تشکیل شده است .
1html
(2) head
(3) title
(4) CONTENT
(5) style
(6) body
(7) div
(8) div
(9) h2
(10) CONTENT
(11) ul
(12) li
(13) CONTENT
(14) li
(15) CONTENT
(16) div
(17) div
(18) h1
(19) CONTENT
(20) p
(21) CONTENT
(22) em
(23) a
(24) CONTENT
(25) p
(26) img
(27) CONTENT
(28) p
(29) CONTENT
(30) div
(31) h2
(32) CONTENT
(33) p
(34) a
(35) img
هر آیتمی که درون آیتم دیگر قرار گرفته است ، برای نشان دادن روابط کمی جلوتر نوشته شده است .
اولاد HTML :
وقتی شما درخت یک سند HTML مشابه بالا را مشاهده می کنید ، به درستی می توانید تشخیص دهید که کدام یک از عنصرها فرزند هستند . در حقیقت تنها هنصری که فرزند نیست ، عنصر HTML است که بالاتر از همه قرار گرفته است .وقتی از انتخابگرهای css استفاده می کنید می توانید این عناصر اولاد را در هر جای این درخت که باشند پیدا نمایید .
برای مثال اگر شما یک قانون فرزندی CSS داشته باشید که با تمامی تگ های IMG که فرزند تگ های div هستند ، همخوانی داشته باشد ، این قانون شما با خطوط 26 و 35 کد بالا نیز همخوانی خواهد د داشت . اما منطبق نمودن همه تگ های A که فرزند تگ های EM هستند فقط خط 23 را منطبق خواهد کرد .
انتخاب گرهای css فقط با دو تگ که توسط فاصله از هم جدا شده اند نوشته می شوند .
div img { ... }
em a { ... }
هم چنین می توانید از انتخابگرهای جهانی css استفاده کنید(*) تا نسل های متعدد فرزندان را نادیده بگیرد .برای مثال : p * a { ... } با تگ A خط 23 تطابق دارد نه تگ A خط 34 .
فرزندان HTML :
عناصر فرزند ، عناصری هستند که بلافاصله زیر عنصر دیگری قرار گرفته اند . فقط HTML عنصر فرزند نیست . در مثال بالا ، Div در خط 7 ، فرزند تگ Body است . EM در خط 22 فرزند تگ P در خط 20 است .
بااستفاده از انتخابگر فرزند (Child Selector) (<) بین دو تگ می توانید عناصر فرزند را سبک دهی کنید .
body > div { ... }
p > em { ... }
خواهران / برادران HTML :
مشابه یک شجره نامه خانوادگی ، هم نژادان HTML ، عناصری هستند که از والد یا تگ بلاواسطه مشترکی منشا گرفته اند . پس در مثال بالا دو تگ LI در خطوط 12 و 14 هم نژاد هستند . مانند تگ های H1 و 3P در خطوط 18 ، 20 ، 25 و 28 .
در CSS2 می توانید تگ هایی را که در درخت سند مستقیما کنار یکدیگر هستند ، انتخاب کنید ، که به آنها هم نژادی مجاور گفته می شود . با این انتخابگر می توانید P در خط 20 را با انتخاب P ای که هم نژادی مجاور H1 است سبک دهی کنید .
در CSS3 علاوه بر این می توانید با دنبال کردن عنصر اول در درخت سند هر هم نژادی را مشخص کنید که به آن ترکیب کننده عمومی هم نژاد ها گفته می شود . (~) اگر از این نشانه به جای نشانه چمع (+) در مثال بالا استفاده کنید ، تمامی تگ های P در div اصلی خطوط 20 ، 25 و 28 سبک دهی خواهند شد ، چون که تمامی آنها هم نژاد هستند و از تگ H1 منشاء گرفته اند .
h1 ~ p { ... }
تهیه و تنظیم : ارگــانــت 23 اردیبهشت 1389