جدول درس

تدریس پایه CSS

• آموزش CSS
• مقدمة به CSS
• قوانین CSS
• انتخاب‌گرهای CSS
• استفاده از CSS
• نظرات CSS
• رنگ‌های CSS
• رنگ‌های RGB CSS
• رنگ‌های HEX CSS
• رنگ‌های HSL CSS
• پس‌زمینه CSS
• تصویر پس‌زمینه CSS
• تکرار پس‌زمینه CSS
• پیوستگی پس‌زمینه CSS
• ویژگی‌های کوتاه پس‌زمینه CSS
• کناره CSS
• عرض کناره CSS
• رنگ کناره CSS
• کناره‌های CSS
• ویژگی‌های کوتاه کناره CSS
• کناره‌های گرد CSS
• حاشیه CSS
• ادغام حاشیه CSS
• پاداش CSS
• ارتفاع/عرض CSS
• مدل فریم CSS
• پروفایل CSS
• عرض پروفایل CSS
• رنگ پروفایل CSS
• ویژگی‌های کوتاه پروفایل CSS
• حرکت پروفایل CSS
• متن CSS
• ترازبندی متن CSS
• زینت متن CSS
• تغییرات متن CSS
• فاصله بین حروف CSS
• ت_SHADOW متن CSS
• شهره CSS
• نوع شهره CSS
• اندازه شهره CSS
• شهره گوگل CSS
• ویژگی‌های کوتاه شهره CSS
• آیکون CSS
• لینک CSS
• لیست CSS
• جداول CSS

تدریس متوسطه CSS

• نمایش CSS
• CSS max-width
• تعیین مکان CSS
• CSS z-index
• پرجمعیت CSS
• شناور کردن CSS
• حذف شناور کردن CSS
• مثال شناور CSS
• CSS inline-block
• ترازبندی CSS
• کامباینرهای CSS
• پseudo-class CSS
• پseudo-element CSS
• شفافیت CSS
• نوار ناوبری CSS
• نوار ناوبری عمودی CSS
• نوار ناوبری افقی CSS
• منو فروپاشی CSS
• کتابخانه تصاویر CSS
• تصویر اسپری CSS
• انتخاب‌گرهای ویژگی CSS
• فرم CSS
• شمارنده CSS
• طرح‌بندی وب‌سایت CSS
• واحدهای CSS
• ویژگی‌های خاص CSS
• CSS !important
• توابع ریاضی CSS

تدریس پیشرفته CSS3

• کруг‌های CSS
• تصویر کناره CSS
• پس‌زمینه CSS
• رنگ‌های CSS
• واژه‌های رنگی CSS
• تغییرات رنگ CSS
• تغییرات رنگ رادیال CSS
• ت_SHADOW CSS
• ت_SHADOW box CSS
• تأثیرات متن CSS
• فونت‌های شبکه‌ای CSS
• تغییرات 2D CSS
• تغییرات 3D CSS
• گذرهای CSS
• آنی‌سازی‌های CSS
• نویدهای ابزار CSS
• طراحی تصاویر CSS
• ویژگی object-fit CSS
• CSS object-position
• پوشش‌های CSS
• دکمه‌های CSS
• صفحات‌بندی CSS
• ستون‌های چندگانه CSS
• رابط کاربری CSS
• متغیرهای CSS
• متغیرهای پوشانده شده CSS
• متغیرهای CSS - JavaScript
• متغیرهای CSS - پرسش‌وپاسخ‌های رسانه
• CSS @property
• اندازه‌گیری جعبه CSS
• Flexbox CSS
• جستجوهای رسانه‌ای CSS
• مثال‌های جستجوهای رسانه‌ای CSS

طراحی واکنش‌گرای CSS

• مقدمه RWD
• منظره RWD
• نمای شبکه RWD
• پرسش‌وپاسخ‌های RWD
• تصاویر RWD
• ویدئوهای RWD

تدریس شبکه CSS

• مدول شبکه‌بندی CSS
• کنترنرهای شبکه CSS
• عناصر شبکه CSS

مثال‌های CSS

• مثال‌های CSS

آزمون‌های CSS

• آزمون‌های CSS

دستورالعمل‌های CSS

• دستورالعمل‌های CSS
• پشتیبانی مرورگرهای CSS
• انتخاب‌گرهای CSS
• توابع CSS
• واحدهای CSS
• شنیداری CSS
• فونت‌های امن شبکه‌ای CSS
• قابلیت‌های آنی‌سازی CSS
• واحدهای CSS
• رنگ‌های CSS
• مقدارهای رنگ CSS
• مقدارهای پیش‌فرض CSS
• اشیاء CSS

درس‌های اختیاری

پیشنهاد دوره:

• کیت‌های ابزار CodeW3C.com

انتخاب‌گرهای CSS

انتخاب‌کنندگان CSS برای «جستجو» (یا انتخاب) عناصر HTML‌ای که باید استایل داده شوند استفاده می‌شوند.

ما می‌توانیم انتخاب‌کنندگان CSS را به پنج دسته تقسیم کنیم:

• انتخاب‌کننده ساده (بر اساس نام، id، کلاس برای انتخاب عنصر استفاده می‌شود)
• انتخاب‌کننده ترکیبی(بر اساس رابطه خاصی که بین آن‌ها وجود دارد، عنصر را انتخاب می‌کند)
• انتخاب‌کننده pseudo-class(بر اساس حالت خاصی که عنصر در آن قرار دارد، عنصر را انتخاب می‌کند)
• انتخاب‌کننده پseudo-element(برای انتخاب بخشی از عنصر و تنظیم استایل آن استفاده می‌شود)
• انتخاب‌کننده ویژگی(بر اساس ویژگی یا مقدار ویژگی برای انتخاب عنصر)

این صفحه توضیح می‌دهد که انتخاب‌کنندگان CSS پایه‌ای را چگونه ارائه می‌دهند.

انتخاب‌گرهای عناصر CSS

انتخابگرهای عنصر بر اساس نام عنصر HTML انتخاب می‌کنند.

مثال

در اینجا، همه عناصر <p> صفحه قرار داده شده‌اند و دارای استایل居zent و رنگ متن قرمز هستند:

p {
  text-align: center;
  color: red;
}

آزمایش کنید

انتخابگرهای id CSS

انتخابگرهای id از属性 id عناصر HTML برای انتخاب عناصر خاص استفاده می‌کنند.

id عنصر در صفحه منحصر به فرد است، بنابراین انتخابگرهای id برای انتخاب یک عنصر خاص استفاده می‌شوند!

برای انتخاب عنصری که دارای id خاصی است، یک علامت نگین (＃) بنویسید، سپس id آن عنصر.

مثال

این قوانین CSS به عنصر HTML با id="para1" اعمال می‌شود:

#para1 {
  text-align: center;
  color: red;
}

آزمایش کنید

توجه داشته باشید:نام id نمی‌تواند با عدد شروع شود.

انتخابگرهای کلاس CSS

انتخابگرهای کلاس انتخابگرهای HTML دارای属性 کلاس خاصی را انتخاب می‌کنند.

برای انتخاب عنصری که دارای class خاصی است، یک علامت نقطه (.) بنویسید، سپس نام کلاس.

مثال

در این مثال، همه عناصر HTML دارای class="center" قرمز و居zent می‌شوند:

.center {
  text-align: center;
  color: red;
}

آزمایش کنید

شما همچنین می‌توانید مشخص کنید که تنها عناصر خاصی از HTML تحت تأثیر کلاس قرار می‌گیرند.

مثال

در این مثال، تنها عناصر <p> دارای class="center" می‌توانند به وسط قرار گیرند:

p.center {
  text-align: center;
  color: red;
}

آزمایش کنید

عناصر HTML نیز می‌توانند کلاس‌های چندگانه را ارجاع دهند.

مثال

در این مثال، عنصر <p> بر اساس class="center" و class="large" برای تنظیم استایل استفاده می‌شود:

<p class="center large">این پاراگراف دو کلاس را ارجاع می‌دهد.</p>

آزمایش کنید

توجه داشته باشید:نام کلاس نمی‌تواند با عدد شروع شود!

انتخابگر عمومی CSS

انتخابگر عمومی (*). همه عناصر HTML موجود در صفحه را انتخاب می‌کند.

مثال

قوانین CSS زیر تأثیر همه عناصر HTML صفحه را می‌گذارند:

* {
  text-align: center;
  color: blue;
}

آزمایش کنید

انتخابگرهای گروه‌بندی شده CSS

انتخابگرهای گروه‌بندی شده تمام عناصر HTML دارای تعریف استایل مشابه را انتخاب می‌کنند.

به تصویر زیر نگاه کنید (عناصر h1، h2 و p دارای تعریف استایل مشابه هستند):

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

بهترین کار این است که انتخابگرها را گروه‌بندی کنید تا کد به حداقل کاهش یابد.

برای گروه‌بندی انتخابگرها، از کاما برای جدا کردن هر انتخابگر استفاده کنید.

مثال

در این مثال، ما انتخابگرهای بالا را در کد زیر گروه‌بندی می‌کنیم:

h1, h2, p {
  text-align: center;
  color: red;
}

آزمایش کنید

همه انتخابگرهای CSS ساده

خواندن بیشتر

کتاب درسی:انتخاب‌گرهای عناصر CSS

کتاب درسی:گروه‌بندی انتخاب‌گرهای CSS

کتاب درسی:توضیحات انتخاب‌گرهای کلاسی CSS

کتاب درسی:توضیحات انتخاب‌گرهای ID CSS

کتاب درسی:توضیحات انتخاب‌گرهای属性 CSS

کتاب درسی:انتخاب‌گرهای انتخاب‌گرهای نسل‌های CSS

کتاب درسی:انتخاب‌گرهای انتخاب‌گرهای فرزند CSS

کتاب درسی:انتخاب‌گرهای انتخاب‌گرهای همسایه CSS

ابزارخانه

دستورالعمل‌های CSS

مثال‌های CSS

آزمون‌های CSS

کتاب‌های درسی CSS

لینک‌های اسپانسر