selectorها در CSS
گزینشگرها یا Selectorها در CSS
در CSS برای دسترسی به عناصر HTML و تنظیم یک Style روی آن، سه راه وجود دارد:
- از طریق ID عنصر HTML
- از طریق Class عنصر HTML
- از طریق نام تگ HTML
1- اختصاص Style از طریق ID عنصر
در CSS برای عناصر HTMLی که ID دارند می توان Style تعریف کرد.
در واقع توسط ID یا شناسه، Style تعریف شده را به یک و تنها یک عنصر اختصاص می دهد.
نکته: همانطور که می دانید ID عناصر در یک صفحه HTML، یکتا و Unique هستند، بنابراین Style تعریف شده فقط روی یک عنصر اعمال می شود.
در CSS برای تعریف این نوع Style از علامت "#" و در ادامه ID عنصر استفاده می شود.
در مثال زیر، Style تعریف شده روی عنصری که ID آن "para1" است اعمال می شود:
توجه: نام ID با اعداد، شروع نمی شود! اگر رعایت نشود Mozilla/Firefox کار نخواهد کرد.
2- اختصاص Style از طریق Class عنصر
در واقع Style تعریف شده را روی یک گروه از عناصر HTML اعمال می کند.
نکته: در یک فرم HTML برای چندین عنصر می توان، یک کلاس در نظر گرفت("Class="ClassName)، بنابراین Style تعریف شده روی تمام عناصر ذکر شده، اعمال خواهد شد.
در CSS برای تعریف این نوع Style از علامت "." و در ادامه نام Class عنصر استفاده می شود.
در مثال زیر Style تعریف شده روی تمام عناصر HTMLی که کلاس آنها "center" است اعمال خواهد شد:
3- اختصاص Style از طریق نام تگ
شما می توانید همچنین مشخص کنید که یک تگ مشخص در صفحه HTML از یک Style پیروی کند.
در CSS برای تعریف این نوع Style به هیچ علامت خاصی نیاز نیست و فقط باید نام تگ ذکر شود.
در مثال زیر Style تعریف شده روی تمام تگهای "p" که کلاس آنها "center" است، اعمال خواهد شد:
توجه: نام کلاس با اعداد، شروع نمی شود! در صورتی که با اعداد شروع شود فقط IE آنرا پشتیبانی خواهد کرد.
آموزش تصویری مطلب بالا (فیلم آموزش CSS) |
|---|
| درس شماره 3 (selectorها در CSS) زمان فیلم: 17:32 |
|
خرید و دانلود مستقیم فیلم آموزش CSS - حجم دانلود 1.12 گیگابایت (کلیک کنید +) |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 49048
دیدگاه‌ها
اقا امیر خدایی دمت گرم
خیلی متشکر جناب پهلوان
سلام خسته نباشین
در گزینشگرها استفاده از نام تگ با آی دی عنصر چه تقاوتی با هم دارند؟
میشه گف در واقع مثل هم هستند؟چون هر دو روی یک عنصر استفاده می شوند
با تشکر
با سلام و تشکر.
گزینشگرهای که با ID مشخص شده‌اند،فقط به اون عنصری که اون ID بهش اختصاص داره، اعمال میشه، ولی گزینشگرهای تگ روی تمام تگهای موردنظر اعمال میشه.
مسلما این دو با هم تفاوت دارند...
در یک صفحه امکان استفاده از یک تگ در جاهای مختلف به وفور هست، ولی در یک صفحه شما فقط و فقط مجاز به استفاده از یک ID برای عنصر هستید.
با عرض سلام و خسته نباشی خدمت شما
من #para1 را متوجه نشدم برای چی هست
ممنون میشم اگه توضیح بدین
با سلام و تشکر.
علامت # بیانگر خصیصه ID هست. ID در واقع یک نام منحصربفردی هست که ما به تگی خاص اعمال میکنیم. در کل صفحه اون تگ میتونه با اون ID صدا زده بشه.
توسط تیکه کد موردنظر میشه کدهای CSS رو به اون ID اعمال کرد.
سلام
خیلی ممنون از سایت خوبتون
من می خوام مثلا به تگ p به غیر از کلاس خاصی مثلا myclass استایل بدم. از چه دستوری باید استفاده کنم ؟
سلام
ممنون از حسن نگاهتون.
برای این کار کافی است تگ p مورد نظر را با کلاس دیگری تعریف کنید، در صورتی که برای همه تگ های p کلاسی با نام myclass ایجاد کرده اید که به همه تگ های p استایل خاصی را اعمال می کند و شما میخواهید علاوه بر آن استایل این تگ p استایل دیگری هم داشته باشد می توانید برای این تگ دو نام کلاس در نظر بگیرید.
به صورت زیر :
<p class="myclass side">...</ p>
سلام
یه خسته نباشید بزرگـــــــــ
بهتون بدهکارم....تو این دو ماه که با سایتتون آشنا شدم کلی چیز یاد گرفتم.
ممنون.
با سلام خدمت شما مدیر محترم.
ببینید در این جا که نوشتید:
p.center {text-align:center;}
به نظرتون نوشتن p چه لزومی داره؟؟
ممنون میشم اگه بگید مثال شماره 3 در چه مواقعی بیشتر کاربرد داره؟؟ علیرغم اینکه اینجور که من نوشتم بازهم اعمال میشه.
سلام
اولاً باید بدونید که این روش نوشتن گزینشگر، بسیار پراستفاده است. یعنی ابتدا اسم تگ مورد نظرمان را می آوریم و بلافاصله نام کلاس:p.center {text-align:cen ter;}
اما اگر این گزینشگر را برای خودتون تفسیر کنید، به مورد استفاده ی آن بیشتر پی خواهید برد. (تمام تگ ها p که شامل کلاس center هستند)
حالا تصور کنید تگ های مختلفی در صفحه داریم که کلاس center را برای آنها تنظیم کرده ایم. حالا اگر بخواهیم از بین تگ های موجود فقط آنهایی که p هستند را وسط چین کنیم (text-align) چه باید کرد؟
سلام و خسته نباشید.
مطلبی رو که در مورد «id» توضیح دادید رو اگر بشه یک بار دیگه توضیح بدید. شما در بالا فرمودید که :«در واقع توسط ID یا شناسه، Style تعریف شده را به یک و تنها یک عنصر اختصاص می دهد.» ولی من در مثالی که فرمودید:#para1
{
text-align:center;
color:red;
}
من در مثال خودتان امتحان کنید یک عنصر دیگه هم اضافه کردم با همین id و این دستور در مورد اون هم اجرا شد. و در این مورد فرقی با class نمی کنه.
می خواستم اگر امکان دارد در مورد این اختصاصی بودن بیشتر توضیح دهید.
سلام
برای جواب دادن به این سوال، باید دلیل اصلیِ استفاده از آی دی در صفحات HTML رو توضیح داد...! همان طور که می دونید با استفاده از جاوا اسکریبت می تونیم با عناصر داخل صفحه HTML صحبت کنیم و در واقع به اونها دسترسی داشته باشیم، ولی چطوری؟ خوب یکی از راه ها، تنظیم ID برای عنصر مورد نظر است، همان طور که از اسم این خصوصیت پیداست، باید در کل صفحه HTML یکتا باشد (Identification ) و زمانی که می گوییم، من عنصر با ID مثلاً test رو می خوام، حتماً باید یک عنصر در صفحه با این ID وجود داشته باشه ...!
نتیجه: اگر شما در صفحه HTML تون، دو عنصر با ID یکسان تعریف کرده اید، از قوانین، پیروی نکرده اید، هرچند مرورگر، صفحه رو بدون اشکال نشون می ده...!
سلام خب پس دیگه نباید فرقی بین id و کلاس داشته باشه!؟ لطفا یکم بیشتر دراین مورد توضیح بدید اگه با مثال باشه ممنون میشم.
hirbod جان لطفاً به دو مورد زیر توجه کن و بخاطر بسپار:
1- در یک صفحه HTML، یک کلاس به نام my_class را می توان برای چندین عنصر در نظر گرفت.
2- در یک صفحه HTML، یک ID به نام my_id را فقط و فقط برای یک عنصر می توان تنظیم نمود.
به مثال زیر توجه کنید:<html>
<head>
<style type="text/css">
#my_id
{
text-align:center;
color:red;
}
.my_class
{
font-size:18px;
}
</style>
</head>
<body>
<p class="my_class">hi</p>
<p class="my_class">My Name Is Beyamooz.com</p>
<p id="my_id">CSS is very good ...!</p>
</body>
</html>
همان طور که در مثال بالا مشاهده می کنید، کلاس my_class برای دو عنصر تنظیم شده است ولی id یا شناسه my_id تنها برای یک عنصر تنظیم شده است.
ممنون یعنی اگه به فرض id را برای دوتا عنصر تنظیم میکردیم تغییرات فقط رو یکی از عناصر اعمال میشد!؟
شما به هیچ عنوان مجاز به تعریف یک id برای دو عنصر نیستید ...!
در صفحه ای که دو عنصر با یک id وجود دارد، استاندارد نیست ...!
ببخشید که من اینقدر سوال میکنم ولی به فرض اگه اینکارانجام بشه واین استاندارد رعایت نشه چه تاثیراتی داره؟
خواهش می کنم ...
می دونید تنظیم یک ID برای دو عنصر مثل چی می مومنه ...!؟
یک شناسنامه برای دو نفر صادر بشود ...! حالا درسته که این دو نفر می تونن به زندگی خودشون ادامه بدهند ولی تصور کنید یک نفر از آنها زودتر از دیگری به مدرسه، سربازی، سفر خارج از کشور و ... برود و حالا نوبت دومی شده، به نظرتون چی می شه ...! آیا امکانش هست ...!؟ مطمئناً به مشکل برخواهد خورد ...! احتمالاً نفر دوم از متصدیان امر خواهد شنید که "شما قبلاً به مدرسه رفته اید و نمی توانید از امکانات دولت مجدد استفاده کنید" ...! البته شاید بتونه قانون رو دور بزنه ...
در مورد ID نیز به همین صورت است، درسته که صفحه بدون مشکل نشون داده می شود ولی اگر بخواهید از طریق ID به آنها استایل بدهید و یا محتواشون را با JavaScript تغییر بدید و ... به مشکل برخواهید خورد.
البته مورد "دور زدن قانون" که گفتیم، در مورد استایل دهی از طریق CSS در اینجا شدنی است ...!
در جامعه ای که امکان صادر شدن یک شناسنامه برای بیش از یک نفر وجود داشته باشد، آیا جامعه ای نظام مند است، نمره ای که شما به مدیران و یا اداره ثبت احوال آن می دهید چند است ...! حالا شما بگید، به نظرتون گوگل به سایتی که در آن یک ID برای دو عنصر تنظیم شده، نمره منفی نخواهد داد ...!؟
ممنون از جوابتون جناب پهلوان صادق.
ممنون از جوابتون
عالیییییییییییی ییییییه