رنگ‌ها

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

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

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

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

گوجه‌ای
نارنجی
آبی تیره
سبز روشن
خاکستری
آبی مایل به خاکستری
بنفش
خاکستری روشن


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

Hello World

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 در فصل‌های بعدی خواهید آموخت.


منابع آموزشی