رنگ‌ها

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های Float
۲۶	مقدار Inline-block
۲۷	ترازکردن
۲۸	ترکیب کننده‌ها
۲۹	شبه کلاس
۳۰	شبه عنصر
۳۱	ویژگی Opacity
۳۲	نوار Navigation ناوبری ناوبری عمودی ناوبری افقی
۳۳	منو آبشاری
۳۴	گالری تصویر
۳۵	Image Sprites
۳۶	انتخاب‌گرهای خاصیت
۳۷	فرم‌ها
۳۸	شمارنده‌ها
۳۹	چیدمان وب‌سایت
۴۰	واحدها
۴۱	اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

رنگ‌ها با استفاده از نام‌های رنگ از پیش تعریف شده یا مقادیر RGB ,HEX ,HSL ,RGBA ,HSLA مشخص می‌شوند.

نام‌های رنگ در CSS

در CSS، رنگ را می‌توان با نام رنگ مشخص کرد:

گوجه‌ای

نارنجی

آبی تیره

سبز روشن

خاکستری

آبی مایل به خاکستری

بنفش

خاکستری روشن

مشاهدهٔ نتیجه

CSS/HTML ۱۴۰ رنگ استاندارد را پشتیبانی می‌کند.

رنگ پس زمینه در CSS

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

می‌توانید رنگ پس زمینه را برای عناصر HTML تنظیم کنید:

مثال

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

مشاهدهٔ نتیجه

رنگ متن در CSS

می‌توانید رنگ متن را تنظیم کنید:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

مثال

1 <h1 style="color:Tomato;">Hello World</h1>
2 <p style="color:DodgerBlue;">Lorem ipsum...</p>
3 <p style="color:MediumSeaGreen;">Ut wisi enim...</p>

مشاهدهٔ نتیجه

رنگ کادر (به انگلیسی: Border) در CSS

شما می‌توانید رنگ حاشیه را تنظیم کنید:

Hello World

مثال

1 <h1 style="border:2px solid Tomato;">Hello World</h1>
2 <h1 style="border:2px solid DodgerBlue;">Hello World</h1>
3 <h1 style="border:2px solid Violet;">Hello World</h1>

مشاهدهٔ نتیجه

مقادیر رنگ در CSS

در CSS، می‌توان رنگ‌ها را با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA مشخص کرد:

همانند نام رنگ «گوجه‌ای» (به انگلیسی: tomato):

همانند نام رنگ «گوجه‌ای»، اما با ۵۰٪ شفافیت:

مثال

1 <h1 style="background-color:rgb(255, 99, 71);">...</h1>
2 <h1 style="background-color:#ff6347;">...</h1>
3 <h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
4 
5 <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
6 <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

مشاهدهٔ نتیجه

در مورد مقدار رنگ‌ها بیشتر بیاموزید

در مورد مقادیر رنگ مطالب بیشتری را در مورد HEX ,RGB و HSL در فصل‌های بعدی خواهید آموخت.

صفحهٔ بعد»

«صفحهٔ قبل