close
تبلیغات در اینترنت
رنگ ها در HTML,انواع رنگ ها در html,کار با رنگ ها در html,انواع مقادیر
صفحه اصلی پرشین استک

{ پرشین استک }

به دنیای برنامه نویسی خوش آمدید
|


پرشین استک تنها یک سایت نیست ، بلکه یک پروژه همگانی می باشد .


تعداد مطالب :
142


تعداد توسعه دهندگان :
11


تاریخ امروز :
یکشنبه 02 اردیبهشت 1397

به کانال تلگرام ما بپیوندید


×

لیست سوالات من

افزودن

قسمت دوازدهم - رنگ ها در HTML

در HTML می توان رنگ ها را با استفاده از نام آنها مشخص کرد . مانند زیر :

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>

! خودتو امتحان کن

 

این زبان 140 نام رنگ را که استاندارد هستند ، پشتیبانی می کند .

 

رنگ پس زمینه

شما می توانید در HTML رنگ پس زمینه عناصر را تغییر دهید . مانند زیر :

<h1 style="background-color:DodgerBlue;">سلام HTML</h1>
<p style="background-color:Tomato;">پرشین استک</p>
! خودتو امتحان کن

 

 رنگ متن در HTML

شما می توانید در HTML ، رنگ متن را تغییر دهید . مانند زیر :

<h1 style="color:Tomato;">سلام HTML</h1>
<p style="color:DodgerBlue;">پرشین استک</p>
<p style="color:MediumSeaGreen;">پرشین استک</p>
! خودتو امتحان کن

 

رنگ حاشیه (Border)

شما می توانید در HTML ، رنگ حاشیه عناصر را تغییر دهید . مانند زیر :

<h1 style="border:2px solid Tomato;">سلام HTML</h1>
<h1 style="border:2px solid DodgerBlue;">سلام HTML</h1>
<h1 style="border:2px solid Violet;">سلام HTML</h1>
! خودتو امتحان کن

 

همچنین در HTML می توان رنگ ها را با مقادیر RGB ، HEX ، HSL ، RGBA و HSLA مشخص کرد . مانند زیر :

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
! خودتو امتحان کن


مقادیر RGB

برای مشخص کردن رنگ ها در HTML با مقادیر RGB باید از فرمول زیر استفاده کنید :

rgb(red, green, blue)

هر کدام از مقادیر red ، green و blue ، مقدار همان رنگ را مشخص می کنند . این مقدار با یک عدد بین 0 تا 255 مشخص می شود .

به عنوان مثال rgb(255, 0, 0) ، رنگ قرمز را مشخص می کند زیرا مقدار قرمز بیشترین عدد یعنی 255 بوده در حالی که مقدار رنگ های سبز و آبی ، کمترین عدد یعنی 0 می باشد .

برای نمایش رنگ سیاه باید تمامی مقادیر 0 باشند مانند rgb(0, 0, 0) و برای سفید باید تمامی مقادیر 255 باشند مانند rgb(255, 255, 255) .

مثال :

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

</body>
</html>

! خودتو امتحان کن

 

مقادیر HEX

برای مشخص کردن رنگ ها با استفاده از مقادیر HEX باید از فرمول زیر استفاده کنید :

rrggbb#

 

مقدار rr رنگ قرمز ، مقدار gg رنگ سبز و مقدار bb رنگ آبی را مشخص می کند . هر کدام از این مقادیر می توانند بین 00 تا ff در هگزادسیمال باشند که همان 0 تا 255 در دسیمال می شود .

به عنوان مثال ff0000 # رنگ قرمز را مشخص می کند زیرا قرمز دارای بیشترین مقدار خود یعنی ff بوده ولی سایر رنگ ها دارای کمترین مقدار خود یعنی 00 هستند .

مثال :

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

</body>
</html>

! خودتو امتحان کن

 

مقادیر HSL

در HTML می توانید رنگ ها را با استفاده از مقادیر HSL و با ترکیبی از متغیر های hue ، saturation و lightness بوجود بیاورید . برای مشخص رنگ ها باید از فرمول زیر استفاده کنید :

hsl(hue, saturation, lightness)

 

Hue یک درجه برای رنگ ها است که مقدار آن بین 0 تا 360 متغیر است .0 برای رنگ قرمز ، 120 برای رنگ سبز و 240 برای رنگ آبی می باشد .

Saturation یک مقدار درصدی برای نشان دادن میزان رنگ خاکستری می باشد . 0% به معنای رنگ خاکستری و 100% به معنای رنگ کامل می باشد .

Lightness یک مقدار درصدی بین رنگ های سیاه و سفید می باشد . 0% به معنای رنگ سیاه ، 50% به معنای رنگ خاکستری و 100% به معنای رنگ سفید می باشد .

مثال :

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

</body>
</html>

! خودتو امتحان کن

 

مقادیر RGBA

RGBA یک RGB توسعه داده شده است که دارای یک متغیر آلفا برای مشخص کردن Opacity رنگ می باشد . یک رنگ RGBA با فرمول زیر مشخص می شود :

rgba(red, green, blue, alpha)

 

alpha یک متغیر برای مشخص کردن میزان Opacity رنگ می باشد و مقدار آن بین 0 تا 1 می باشد . 0 به معنای رنگ نامرئی و 1 به معنای رنگ مرئی می باشد .

مثال :

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

</body>
</html>

! خودتو امتحان کن

 

مقادیر HSLA

HSLA هم یک HSL توسعه داده شده است که دارای متغیر آلفا برای تنظیم میزان Opacity رنگ می باشد . فرمول رنگ HSLA به شکل زیر می باشد :

hsla(hue, saturation, lightness, alpha)

 

alpha میزان Opacity رنگ را نشان می دهد و مقدار آن بین 0 تا 1 می باشد . 0 رنگ نامرئی و 1 رنگ مرئی را مشخص می کند .

مثال :

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

</body>
</html>

! خودتو امتحان کن

 

صفحه اصلی

17

02 / 08 / 1396

PERSIAN STACK


دانلود تمامی API های اندروید

ادامه مطلب

687

چرا گاهی اوقات API موقعیت مکانی سرویس گوگل پلی ، موقعیت مکانی اشتباهی را برمی گرداند ؟

ادامه مطلب

651

چگونه نرم افزار ضبط صدای اندرویدی بسازیم ؟

ادامه مطلب

551

چرا TextView کلمات را با حروف می شکند ؟

ادامه مطلب

511

چگونه Google API برای سطح API 25 را پیدا کنیم ؟

ادامه مطلب

381

چرا وبسایت تجارت الکترونیک Magento 2 در Webview اندروید کار نمی کند ؟

ادامه مطلب

381

دانلود پروژه نمایش جستجوی کتاب برای اندروید

ادامه مطلب

347

قسمت شانزدهم - جدول ها در HTML

ادامه مطلب

269

دانلود کتابخانه Retrofit برای اندروید + پروژه

ادامه مطلب

265

دانلود سورس کد بازی اندرویدی Klooni 1010! + فایل APK

ادامه مطلب

261

در تکمیل خودکار اندروید ، دلیل dispatchProvideAutofillStructure() not laid out چیست ؟

ادامه مطلب

247

چرا زمانی که با استفاده از cordova در اندروید 7.0 ، اس ام اس ارسال می کنیم ، با اثتثنای (Exception) امنیتی مواج

ادامه مطلب

245

آیا راهی برای یافتن تغیرات ماه در نمای تقویم اندروید (calendar view) وجود دارد ؟

ادامه مطلب

243

چگونه ارور com.bumptech.glide.Registry$NoModelLoaderAvailableException: Failed to find any ModelLoaders را در اندروید رفع کنیم ؟

ادامه مطلب

205

دانلود سورس کد اپلیکیشن هواشناسی برای اندروید + فایل APK

ادامه مطلب

199

دانلود سورس کد اپلیکیشن اسکنر بارکد برای اندروید + فایل APK

ادامه مطلب

157

دانلود سورس کد تمامی نسخه های تلگرام + فایل های نصبی

ادامه مطلب

153

آموزش استفاده از دیتابیس آماده در پروژه اندرویدی

ادامه مطلب

147

دانلود تمامی نسخه های gradle برای اندروید

ادامه مطلب

143

دانلودسورس کد اپلیکیشن موزیک پلیر برای اندروید + فایل APK

ادامه مطلب

141

دانلود اسکریپت جاوای PS-CH# - ایجاد ورودی متنی پیشرفته

ادامه مطلب

یکشنبه 05 آذر 1396

قسمت هفدهم - لیست ها در HTML

ادامه مطلب

یکشنبه 21 آبان 1396

چگونه می توان با استفاده از CSS ، رنگ placeholder را تغییر داد ؟

ادامه مطلب

یکشنبه 21 آبان 1396

قسمت شانزدهم - جدول ها در HTML

ادامه مطلب

شنبه 20 آبان 1396

دانلود تمامی نسخه های gradle برای اندروید

ادامه مطلب

شنبه 20 آبان 1396

قسمت پانزدهم - عکس ها در HTML

ادامه مطلب

جمعه 19 آبان 1396

قسمت چهاردهم - لینک ها در HTML

ادامه مطلب

یکشنبه 14 آبان 1396

آموزش ساخت و شخصی سازی Navigation Drawer در اندروید استودیو

ادامه مطلب

یکشنبه 14 آبان 1396

قسمت سیزدهم - CSS در HTML

ادامه مطلب

شنبه 13 آبان 1396

قسمت بیست و پنجم (قسمت آخر) - آموزش ساخت بازی حدس

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و چهارم - آموزش نحوه ی پردازش فایل ها در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و سوم - برنامه تکمیلی جاوا (6)

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و دوم - معرفی آرایه ها در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و یکم - برنامه تکمیلی جاوا (5)

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیستم - معرفی مفهوم وراثت در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت نوزدهم - برنامه تکمیلی جاوا (4)

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت هجدهم - معرفی عبارات کنترلی در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت هفدهم - برنامه تکمیلی جاوا (2-3)

ادامه مطلب

چهارشنبه 10 آبان 1396

چگونه در برنامه نویسی اندروید ، یک ListView با متن و عکس بسازیم ؟

ادامه مطلب

سه شنبه 09 آبان 1396

چگونه در برنامه نویسی اندروید از فونت شخصی خود استفاده کنیم ؟

ادامه مطلب

سه شنبه 09 آبان 1396

قسمت هفدهم - لیست ها در HTML

ادامه مطلب

چگونه می توان با استفاده از CSS ، رنگ placeholder را تغییر داد ؟

ادامه مطلب

قسمت شانزدهم - جدول ها در HTML

ادامه مطلب

قسمت پانزدهم - عکس ها در HTML

ادامه مطلب

قسمت چهاردهم - لینک ها در HTML

ادامه مطلب

قسمت سیزدهم - CSS در HTML

ادامه مطلب

کد های 140 رنگ استاندارد در HTML

ادامه مطلب

قسمت یازدهم - کامنت ها در HTML

ادامه مطلب

قسمت دهم - المان های نقل قول و استنادی در HTML

ادامه مطلب

جلسه ی نهم - فرمت متن در HTML

ادامه مطلب

جلسه ی هشتم - استایل در HTML

ادامه مطلب

چگونه از HdmiControlService استفاده کنیم ؟

ادامه مطلب

چگونه می توان برای وبسایت / وبلاگ ، منویی ساخت که روی تمام دستگاه ها قابل نمایش باشد ؟

ادامه مطلب

چگونه می توان نوار Toast برای وبسایت / وبلاگ ساخت ، طوری که بتوان از آن جهت نمایش هشدار استفاده کرد ؟

ادامه مطلب

چگونه می توان با استفاده از HTML و CSS یک Tooltip شخصی سازی شده ساخت ؟

ادامه مطلب

چگونه یک برای سایت یا وبلاگ خود یک نوار مهارت (Skill Bar) انیمیشن دار بسازیم ؟

ادامه مطلب

چگونه برای سایت یا وبلاگ خود یک فیلتر لیست یا Filter List بسازیم ؟

ادامه مطلب

چگونه برای سایت یا وبلاگ خود یک گالری عکس یا Lightbox بسازیم ؟

ادامه مطلب

چگونه می توانم فرم های رزبلاگ را شخصی سازی کنم ؟

ادامه مطلب

چگونه یک مدل ایمیج (Modal Image) برای وبسایت یا وبلاگ خود طراحی کنیم ؟

ادامه مطلب

× برای نظر گذاشتن یا پاسخ دادن به سوالات باید در سایت عضو باشید !

برای حمایت از ما روی بنر های زیر کلیک کنید .

برای سفارش تبلیغات به ما ایمیل بزنید .

×

ارتباط با ما