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

{ پرشین استک }

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


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


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


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


تاریخ امروز :
جمعه 29 تیر 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>

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

 

صفحه اصلی

30

02 / 08 / 1396

PERSIAN STACK


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

ادامه مطلب

613

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

ادامه مطلب

549

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

ادامه مطلب

497

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

ادامه مطلب

435

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

ادامه مطلب

419

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

ادامه مطلب

363

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

ادامه مطلب

347

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

ادامه مطلب

345

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

ادامه مطلب

259

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

ادامه مطلب

243

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

ادامه مطلب

231

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

ادامه مطلب

227

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

ادامه مطلب

211

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

ادامه مطلب

195

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

ادامه مطلب

179

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

ادامه مطلب

173

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

ادامه مطلب

121

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

ادامه مطلب

117

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

ادامه مطلب

113

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

ادامه مطلب

111

دانلود اسکریپت جاوای 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) برای وبسایت یا وبلاگ خود طراحی کنیم ؟

ادامه مطلب

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

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

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

ارتباط با ما