سبد (0)

تبلیغات

selectorها در CSS

گزینشگرها یا Selectorها در CSS

Wiki

در CSS برای دسترسی به عناصر HTML و  تنظیم یک Style روی آن، سه راه وجود دارد:

  1. از طریق ID عنصر HTML
  2. از طریق Class عنصر HTML
  3. از طریق نام تگ HTML

1- اختصاص Style از طریق ID عنصر

Wiki

در CSS برای عناصر HTMLی که ID دارند می توان Style تعریف کرد.

در واقع توسط ID یا شناسه، Style تعریف شده را به یک و تنها یک عنصر اختصاص می دهد.

نکته: همانطور که می دانید ID عناصر در یک صفحه HTML، یکتا و Unique هستند، بنابراین Style تعریف شده فقط روی یک عنصر اعمال می شود.

در CSS برای تعریف این نوع Style از علامت "#" و در ادامه ID عنصر استفاده می شود.

در مثال زیر، Style تعریف شده روی عنصری که ID آن "para1" است اعمال می شود:

مثال (selectorها در CSS)

#para1
{
text-align:center;
color:red;
}
خودتان امتحان کنید »

توجه: نام ID با اعداد، شروع نمی شود! اگر رعایت نشود Mozilla/Firefox کار نخواهد کرد.


2- اختصاص Style از طریق Class عنصر

Wiki

در واقع Style تعریف شده را روی یک گروه از عناصر HTML اعمال می کند.

نکته: در یک فرم HTML برای چندین عنصر می توان، یک کلاس در نظر گرفت("Class="ClassName)، بنابراین Style تعریف شده روی تمام عناصر ذکر شده، اعمال خواهد شد.

در CSS برای تعریف این نوع Style از علامت "." و در ادامه نام Class عنصر استفاده می شود.

در مثال زیر Style تعریف شده روی تمام عناصر HTMLی که کلاس آنها "center" است اعمال خواهد شد:

مثال (selectorها در CSS)

.center {text-align:center;}
خودتان امتحان کنید »

3- اختصاص Style از طریق نام تگ

Wiki

شما می توانید همچنین مشخص کنید که یک تگ مشخص در صفحه HTML از یک Style پیروی کند.

در CSS برای تعریف این نوع Style به هیچ علامت خاصی نیاز نیست  و فقط باید نام تگ ذکر شود.

در مثال زیر Style تعریف شده روی تمام تگهای "p" که کلاس آنها "center" است، اعمال خواهد شد:

مثال (selectorها در CSS)

p.center {text-align:center;}
خودتان امتحان کنید »

توجه: نام کلاس با اعداد، شروع نمی شود! در صورتی که با اعداد شروع شود فقط IE آنرا پشتیبانی خواهد کرد.


آموزش تصویری مطلب بالا (فیلم آموزش CSS)

 درس شماره 3 (selectorها در CSS زمان فیلم:  17:32

  خرید و دانلود مستقیم فیلم آموزش CSS - حجم دانلود 1.12 گیگابایت (کلیک کنید +)

دیدگاه‌ها  

+2 # Guest 1396-09-18 23:32
اقا امیر خدایی دمت گرم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # الیاس حصاری 1395-11-22 11:46
خیلی متشکر جناب پهلوان
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # Guest 1394-12-12 21:26
سلام خسته نباشین
در گزینشگرها استفاده از نام تگ با آی دی عنصر چه تقاوتی با هم دارند؟
میشه گف در واقع مثل هم هستند؟چون هر دو روی یک عنصر استفاده می شوند
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # مهرداد صلاحی 1394-12-13 07:52
با سلام و تشکر.
گزینشگرهای که با ID مشخص شده‌اند،‌فقط به اون عنصری که اون ID بهش اختصاص داره، اعمال میشه،‌ ولی گزینشگرهای تگ روی تمام تگ‌های موردنظر اعمال میشه.
مسلما این دو با هم تفاوت دارند...
در یک صفحه امکان استفاده از یک تگ در جاهای مختلف به وفور هست، ولی در یک صفحه شما فقط و فقط مجاز به استفاده از یک ID برای عنصر هستید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # حسین 1394-12-06 06:56
با عرض سلام و خسته نباشی خدمت شما
من #para1 را متوجه نشدم برای چی هست
ممنون میشم اگه توضیح بدین
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+8 # مهرداد صلاحی 1394-12-12 13:22
با سلام و تشکر.
علامت # بیانگر خصیصه ID هست. ID در واقع یک نام منحصربفردی هست که ما به تگی خاص اعمال میکنیم. در کل صفحه اون تگ میتونه با اون ID صدا زده بشه.
توسط تیکه کد موردنظر میشه کدهای CSS رو به اون ID اعمال کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # AmirReza 1394-06-17 11:44
سلام
خیلی ممنون از سایت خوبتون
من می خوام مثلا به تگ p به غیر از کلاس خاصی مثلا myclass استایل بدم. از چه دستوری باید استفاده کنم ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # شهربانو دوستی 1394-06-17 20:07
سلام
ممنون از حسن نگاهتون.
برای این کار کافی است تگ p مورد نظر را با کلاس دیگری تعریف کنید، در صورتی که برای همه تگ های p کلاسی با نام myclass ایجاد کرده اید که به همه تگ های p استایل خاصی را اعمال می کند و شما میخواهید علاوه بر آن استایل این تگ p استایل دیگری هم داشته باشد می توانید برای این تگ دو نام کلاس در نظر بگیرید.
به صورت زیر :
<p class="myclass side">...</ p>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+12 # نگار 1394-02-12 09:56
سلام
یه خسته نباشید بزرگـــــــــ
بهتون بدهکارم....تو این دو ماه که با سایتتون آشنا شدم کلی چیز یاد گرفتم.
ممنون.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # داوود 1393-12-14 11:46
با سلام خدمت شما مدیر محترم.
ببینید در این جا که نوشتید:
p.center {text-align:center;}
به نظرتون نوشتن p چه لزومی داره؟؟
ممنون میشم اگه بگید مثال شماره 3 در چه مواقعی بیشتر کاربرد داره؟؟ علیرغم اینکه اینجور که من نوشتم بازهم اعمال میشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+8 # امیر پهلوان صادق 1393-12-16 08:33
سلام
اولاً باید بدونید که این روش نوشتن گزینشگر، بسیار پراستفاده است. یعنی ابتدا اسم تگ مورد نظرمان را می آوریم و بلافاصله نام کلاس:p.center {text-align:cen ter;}
اما اگر این گزینشگر را برای خودتون تفسیر کنید، به مورد استفاده ی آن بیشتر پی خواهید برد. (تمام تگ ها p که شامل کلاس center هستند)
حالا تصور کنید تگ های مختلفی در صفحه داریم که کلاس center را برای آنها تنظیم کرده ایم. حالا اگر بخواهیم از بین تگ های موجود فقط آنهایی که p هستند را وسط چین کنیم (text-align) چه باید کرد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+11 # داوود 1393-08-28 14:17
سلام و خسته نباشید.
مطلبی رو که در مورد «id» توضیح دادید رو اگر بشه یک بار دیگه توضیح بدید. شما در بالا فرمودید که :«در واقع توسط ID یا شناسه، Style تعریف شده را به یک و تنها یک عنصر اختصاص می دهد.» ولی من در مثالی که فرمودید:#para1
{
text-align:center;
color:red;
}

من در مثال خودتان امتحان کنید یک عنصر دیگه هم اضافه کردم با همین id و این دستور در مورد اون هم اجرا شد. و در این مورد فرقی با class نمی کنه.
می خواستم اگر امکان دارد در مورد این اختصاصی بودن بیشتر توضیح دهید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+12 # امیر پهلوان صادق 1393-08-29 11:00
سلام
برای جواب دادن به این سوال، باید دلیل اصلیِ استفاده از آی دی در صفحات HTML رو توضیح داد...! همان طور که می دونید با استفاده از جاوا اسکریبت می تونیم با عناصر داخل صفحه HTML صحبت کنیم و در واقع به اونها دسترسی داشته باشیم، ولی چطوری؟ خوب یکی از راه ها، تنظیم ID برای عنصر مورد نظر است، همان طور که از اسم این خصوصیت پیداست، باید در کل صفحه HTML یکتا باشد (Identification ) و زمانی که می گوییم، من عنصر با ID مثلاً test رو می خوام، حتماً باید یک عنصر در صفحه با این ID وجود داشته باشه ...!
نتیجه: اگر شما در صفحه HTML تون، دو عنصر با ID یکسان تعریف کرده اید، از قوانین، پیروی نکرده اید، هرچند مرورگر، صفحه رو بدون اشکال نشون می ده...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # هیربد بهادری 1394-02-15 14:52
سلام خب پس دیگه نباید فرقی بین id و کلاس داشته باشه!؟ لطفا یکم بیشتر دراین مورد توضیح بدید اگه با مثال باشه ممنون میشم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1394-02-15 18:57
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 تنها برای یک عنصر تنظیم شده است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # هیربد بهادری 1394-02-16 20:46
ممنون یعنی اگه به فرض id را برای دوتا عنصر تنظیم میکردیم تغییرات فقط رو یکی از عناصر اعمال میشد!؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+8 # امیر پهلوان صادق 1394-02-16 22:45
شما به هیچ عنوان مجاز به تعریف یک id برای دو عنصر نیستید ...!
در صفحه ای که دو عنصر با یک id وجود دارد، استاندارد نیست ...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # هیربد بهادری 1394-02-17 12:19
ببخشید که من اینقدر سوال میکنم ولی به فرض اگه اینکارانجام بشه واین استاندارد رعایت نشه چه تاثیراتی داره؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+8 # امیر پهلوان صادق 1394-02-18 10:48
خواهش می کنم ...
می دونید تنظیم یک ID برای دو عنصر مثل چی می مومنه ...!؟
یک شناسنامه برای دو نفر صادر بشود ...! حالا درسته که این دو نفر می تونن به زندگی خودشون ادامه بدهند ولی تصور کنید یک نفر از آنها زودتر از دیگری به مدرسه، سربازی، سفر خارج از کشور و ... برود و حالا نوبت دومی شده، به نظرتون چی می شه ...! آیا امکانش هست ...!؟ مطمئناً به مشکل برخواهد خورد ...! احتمالاً نفر دوم از متصدیان امر خواهد شنید که "شما قبلاً به مدرسه رفته اید و نمی توانید از امکانات دولت مجدد استفاده کنید" ...! البته شاید بتونه قانون رو دور بزنه ...
در مورد ID نیز به همین صورت است، درسته که صفحه بدون مشکل نشون داده می شود ولی اگر بخواهید از طریق ID به آنها استایل بدهید و یا محتواشون را با JavaScript تغییر بدید و ... به مشکل برخواهید خورد.
البته مورد "دور زدن قانون" که گفتیم، در مورد استایل دهی از طریق CSS در اینجا شدنی است ...!
در جامعه ای که امکان صادر شدن یک شناسنامه برای بیش از یک نفر وجود داشته باشد، آیا جامعه ای نظام مند است، نمره ای که شما به مدیران و یا اداره ثبت احوال آن می دهید چند است ...! حالا شما بگید، به نظرتون گوگل به سایتی که در آن یک ID برای دو عنصر تنظیم شده، نمره منفی نخواهد داد ...!؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # هیربد بهادری 1394-02-17 12:10
ممنون از جوابتون جناب پهلوان صادق.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+9 # داوود 1393-08-29 21:03
ممنون از جوابتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+11 # محسن_م 1392-12-22 20:09
عالیییییییییییی ییییییه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی