محبوب
2 دقیقه پیش | امیت سرکیسیان، اولین شهید مدافع حرم ارامنه! / شایعه 0506این تصویر جعلی است و عکس اصلی مربوط به شهید مدافع حرم هادی شجاع در مشهد می باشدمتن و پاسخ شایعه |
2 دقیقه پیش | وقتی موبایل برای سلامت شما مفید می شود!!جریان سریع امور در دنیای امروز به حواسپرتی بیشتر و نداشتن وقتی برای آسودگی انجامیده است. در چنین شرایطی نیازهای بدن به آسانی فراموش میشود. خوشبختانه همان وسایلی که ... |
زنگ CSS: جلسه سوم - نحوه انتخاب المانهای HTML
برای تغییر المانهای اچ تی ام ال در سیاساس، لازم است تا آنها را در فایل سیاساس خود صدا بزنیم. مثلا بگوییم که با پاراگراف کار داریم! در واقع، انتخاب کردن یک المان اچی تی ام ال، یکی از مهمترین قواعد سیاساس است. در این جلسه نحوه انجام این کار را خواهیم آموخت.
CSS Selector چیست؟انتخاب کردن یک المان اچی تی ام ال، یکی از مهمترین قواعد سیاساس است. در واقع شما برای اینکه یک المان اچ تی ام ال را در سی اس اس تغییر دهید اول باید آن را فراخوانی کنید. یعنی به نوعی آن را صدا بزنید! به این کار انتخاب کردن سی اس اس میگویند و شما با کمک انتخابگر، المان اچ تی ام ال مورد نظر را انتخاب یا پیدا میکنید.
برای صدا کردن یک المان اچ تی ام ال، نیاز داریم که اسم آن را صدا بزنیم. المانهای اچ تی ام ال هر کدام نام عمومی اختصاصی خود را دارند. مثلا متون با تگ p شناخته میشوند و لینکها با تگ a شناخته میشوند. در واقع تگهای اچ تی ام ال نامهای عمومی هستند و اگر شما از آنها استفاده کنید به نوعی با کلی مخاطب روبرو خواهید شد.
مثلا در زیر ما نوشتهایم p و بدین ترتیب هر نوع پاراگرافی که در متن وجود دارد را انتخاب کردهایم.
HTMLمتن اول
متن دوم
متن سوم
CSSp {
color: #99CC00;
}
متن اول
متن دوم
متن سوم
حالا از خودتان میپرسید اگر ما قصد تغییر همه پاراگرافها را نداشته باشیم و تنها بخواهیم یکی از المانها، مثلا پاراگراف سوم را تغییر دهیم چکار باید کنیم؟ اینجاست که استفاده از id و class به کار میآید. کلاس و id در واقع بهترین روش برای انتخاب المانها در سی اس و اچ تی ام ال است.
برای درک بهترکلاس و آیدی مثالی میزنیم. فرض کنید در یک خیابان شلوغ که دهها نفر با نام یکسانی مثل "محمد" حضور دارند، کلمه "محمد" را صدا بزنید. در این صورت تمامی محمدها مخاطب شما خواهند شد و به حرف شما گوش خواهند داد. در سیاساس هم همین گونه است و اگر شما مثلا بگویید p انگار تمامی پاراگرافهای اچتیامال را مخاطب قرار دادهاید و تمامی پاراگرافها مطابق دستورات شما عمل میکنند.
آیدی همانندشماره شناسنامه برای افراد است. در واقع شما در همان مثال خیابان شلوغ اگر یک محمد خاص را در نظر داشته باشید میتوانید از طریق گفتن شماره شناسنامه وی را مستقیما صدا بزنید بدون آنکه کس دیگری را مورد خطاب قرار دهید.
در واقع شما با تخصیص یک id به هر المان اچ تی ام ال صفحه آن را منحصر به فرد میکنید. توجه داشته باشید که به هر المان اچ تی ام ال آیدی منحصر به فرد بدهید و از دادن آیدی یکسان به چند المان خود داری کنید. استفاده از id برای المانها در موارد بسیاری همچون در جاوا اسکریپت کاربرد فراوانی دارد.
اضافه کردن ID به المانهای اچ تی ام ال:
در قدم اول ما باید المانهای اچ تی ام المان را دارای یک آیدی منحصر به فرد کنیم. مثلا برای پاراگراف مینویسیم که با
تفاوت دارد. چرا که دارای یک آی دی منحصر به فرد با نام 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 توصیه میشود.
ویدیو مرتبط :
نحوه ارتباط فایل css با html