زنگ CSS: جلسه سوم - نحوه انتخاب المان‌های HTML
در جلسه‌ی سوم از مجموعه‌ی آموزش CSS، نحوه‌ی انتخاب المان‌های HTML را می‌آموزیم.
CSS Selector چیست؟
انتخاب کردن یک المان HTML، یکی از مهمترین قواعد سی‌اس‌اس است. در واقع شما برای اینکه یک المان اچ تی ام ال را در سی اس اس تغییر دهید اول باید آن را فراخوانی کنید. یعنی به نوعی آن را صدا بزنید! به این کار انتخاب کردن سی اس اس می‌گویند و شما با کمک انتخابگر، المان اچ تی ام ال مورد نظر را انتخاب یا پیدا می‌کنید.
برای صدا کردن یک المان اچ تی ام ال، نیاز داریم که اسم آن را صدا بزنیم. المان‌های اچ تی ام ال هر کدام نام عمومی اختصاصی خود را دارند. مثلا متون با تگ p شناخته می‌شوند و لینک‌ها با تگ a شناخته می‌شوند. در واقع تگ‌های اچ تی ام ال نام‌های عمومی هستند و اگر شما از آن‌ها استفاده کنید به نوعی با کلی مخاطب روبرو خواهید شد.
مثلا در زیر ما نوشته‌ایم p و بدین ترتیب هر نوع پاراگرافی که در متن وجود دارد را انتخاب کرده‌ایم.
HTML
متن اول
متن دوم
متن سوم
CSS
p {
color: #99CC00;
}
متن اول
متن دوم
متن سوم
حالا از خودتان می‌پرسید اگر ما قصد تغییر همه پاراگراف‌ها را نداشته باشیم و تنها بخواهیم یکی از المان‌ها، مثلا پاراگراف سوم را تغییر دهیم چکار باید کنیم؟ اینجاست که استفاده از id و class به کار می‌آید. کلاس و id در واقع بهترین روش برای انتخاب المان‌ها در سی اس و اچ تی ام ال است.
برای درک بهترکلاس و آی‌دی مثالی می‌زنیم. فرض کنید در یک خیابان شلوغ که ده‌ها نفر با نام یکسانی مثل "محمد" حضور دارند، کلمه "محمد" را صدا بزنید. در این صورت تمامی محمدها مخاطب شما خواهند شد و به حرف شما گوش خواهند داد. در سی‌اس‌اس هم همین گونه است و اگر شما مثلا بگویید p انگار تمامی پاراگراف‌های اچ‌تی‌ام‌ال را مخاطب قرار داده‌اید و تمامی پاراگراف‌ها مطابق دستورات شما عمل می‌کنند.
آی‌دی همانندشماره شناسنامه برای افراد است. در واقع شما در همان مثال خیابان شلوغ اگر یک محمد خاص را در نظر داشته باشید می‌توانید از طریق گفتن شماره شناسنامه وی را مستقیما صدا بزنید بدون آنکه کس دیگری را مورد خطاب قرار دهید.
در واقع شما با تخصیص یک id به هر المان اچ تی ام ال صفحه آن را منحصر به فرد می‌کنید. توجه داشته باشید که به هر المان اچ تی ام ال آی‌دی منحصر به فرد بدهید و از دادن آی‌دی یکسان به چند المان خود داری کنید. استفاده از id برای المان‌ها در موارد بسیاری همچون در جاوا اسکریپت کاربرد فراوانی دارد.
اضافه کردن ID به المان‌های اچ تی ام ال:
در قدم اول ما باید المان‌های اچ تی ام المان را دارای یک آی‌دی منحصر به فرد کنیم. مثلا برای پاراگراف <"p id="hi> می‌نویسیم که با
تفاوت دارد. چرا که <"p id="hi> دارای یک آی دی منحصر به فرد با نام hi است که توسط شما و با اضافه کردن اتریبیوت id به دست آمده است.
پس برای اضافه کردن ID به هر المان اچ تی ام ال کلمه ID را در تگ مورد نظر یادداشت کرده و در مقابل آن "نام آی‌دی"= را می‌نویسیم:
ID = " نام آی‌دی مورد نظر"
حالا که با نحوه‌ی اضافه کردن id به المان‌های اچ تی‌ام‌ال آشنا شدیم؛ در قدم دوم وقت آن رسیده است تا آن‌ها را با سی‌اس‌اس انتخاب کنیم. برای انتخاب یک آی دی خاص در سی اس اس باید علامت # و سپس نامی که به عنوان آی‌دی به المان داده‌ایم را بنویسیم.
برای مثال ما در زیر المان‌هایی که دارای آی‌دی منحصر به فرد hi# هستند، انتخاب کرده‌ایم و قوانین دلخواهمان را بر روی آن اعمال کرده‌ایم.
HTML
متنی که دارای آی‌دی hi است را توسط سی‌اس‌اس انتخاب می‌کنیم تا آن را تغییر دهیم.
CSS
#hi{ text-align: center; color: #ff6600;}
متنی که دارای آی‌دی hi است را توسط سی‌اس‌اس انتخاب می‌کنیم تا آن را تغییر دهیم.
انتخاب از طریق کلاس:
راه حل دیگر برای تغییر همزمان چند المان استفاده از قابلیت کلاس است. کلاس مانند فامیلی برای همان مثال آدم‌ها و خیابان است. بدین ترتیب که شما این دفعه فامیلی فرد را صدا می‌زنید و ممکن است یک یا چند نفر مخاطب شما باشند. شما با اضافه کردن اتریبیوت class به المان‌های اچ‌تی‌ام‌ال خود می‌توانید به صورت همزمان یک استایل و شمایل دلخواه به همه آن‌ها بدهید. مثلا فرض کنید می‌خواهید تیترهای مطلب را با رنگ آبی نشان دهید و تیترهایی که در کنار صفحه و بالای منوها قرار دارند را با همان رنگ مشکی پیش‌فرض نشان داده شود.
در قدم اول، المان‌های صفحه اچ تی ام ال (هر چند تا که دوست داریم تغییر کنند) کلاس اضافه می‌کنیم.
در این مثال باید به تمامی هدرهایی که در متن قرار دارد کلاس دلخواه را بدهیم. بدین ترتیب تمامی این هدرها که دارای این کلاس شوند از چنین استایلی بهره‌مند خواهند شد.
HTML
هر تگی که دارای کلاس ghermez است را توسط سی‌اس‌اس انتخاب می‌کنیم تا آن را تغییر دهیم.
عنوان دارای کلاس قرمز
عنوان دارای کلاس قرمز
CSS
.ghermez{ color: red;}
هر تگی که دارای کلاس ghermez است را توسط سی‌اس‌اس انتخاب می‌کنیم تا آن را تغییر دهیم.
عنوان دارای کلاس قرمز
عنوانی دیگر دارای کلاس قرمز
روش‌های بالا روش‌های کلی انتخاب المان‌های اچ تی ام ال توسط سی‌اس‌اس هستند. اما هنوز هم می‌توانید با ترکیب این روش‌ها، دامنه‌ی محدوتری را انتخاب کنید. مثلا اگر قصد داشته باشید بگویید تمامی تگ‌های فلان که دارای کلاس فلان هستند. مثلا تمامی تگ‌های پاراگرافی که دارای کلاس abi هستند. مثال:
HTML
من یک متن با کلاس آبی هستم
من یک عنوان با کلاس آبی هستم.
من هم یک متن با کلاس قرمز هستم.
CSS
p.abi{ color: #00CCFF;}
من یک متن با کلاس آبی هستم
من یک عنوان با کلاس آبی هستم.
من هم یک متن با کلاس قرمز هستم.
بدین ترتیب تگ‌هایی h1 یا دیگر تگ‌هایی که دارای همین کلاس ABI هستند دیگر مخاطب شما نخواهند بود و تنها المان‌های پاراگراف مورد تغییر قرار خواهند گرفت.
شما می‌توانید با انتخاب هر المان، رنگ متن درون آن را تغییر دهید. در واقع این کار یکی از سریع‌ترین روش‌ها برای تغییرات کلی در صفحه است.
نکته: با انتخاب المان body تمامی تغییرات گفته شده در کل المان‌ها اعمال می‌شود. چون المان body مادر تمامی المان‌های درون صفحه است. پس اگرقصد تغییری در کل المان‌ها دارید استفاده از تگ body یا html توصیه می‌شود.
نظرات