بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

رنگها HTML



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


نام رنگها

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

Tomato قرمز گوجه ای
Orange نارنجی
Dodgerblue آبی
Mediumseagreen رنگ سبز دریایی
Gray خاکستری
Red قرمز
Violet بنفشه
LightGray خاکستری روشن

خودتان آزمایش کنید »

140 نام استاندارد رنگ در HTML پشتیبانی می شود.


Background Color - رنگ پس زمینه

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

سلام دنیا


لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

مثال

<h1 style="background-color:DodgerBlue;">سلام دنیا</h1>
<p style="background-color:Tomato;"> ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و ... </p>

خودتان آزمایش کنید »

Text Color - رنگ متن

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

سلام دنیا

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و

تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.

مثال

<h1 style="color:Tomato;">سلام دنیا</h1>
<p style="color:DodgerBlue;">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و</p>
<p style="color:MediumSeaGreen;">تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p>
خودتان آزمایش کنید »

Border Color - رنگ حاشیه

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

سلام دنیا

سلام دنیا

سلام دنیا

مثال

<h1 style="border:2px solid Tomato;">سلام دنیا</h1>
<h1 style="border:2px solid DodgerBlue;">سلام دنیا</h1>
<h1 style="border:2px solid Violet;">سلام دنیا</h1>
خودتان آزمایش کنید »

مقادیر رنگ

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

همان نام رنگ "قرمز گوجه ای" هستند تمامی این مقادیر :

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

همان نام رنگ " قرمز گوجه ای" ، اما 50٪ شفاف تر:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

مثال

<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( R قرمز, G سبز, B آبی)

هر پارامتر (قرمز ، سبز و آبی) شدت رنگ را از 0 تا 255 تعریف می کند.

به عنوان مثال rgb (255 ، 0 ، 0) به عنوان قرمز نمایش داده می شود زیرا قرمز در بالاترین مقدار تنظیم شده است ارزش (255) و بقیه روی 0 تنظیم شده اند.

برای نمایش سیاه ، همه گزینه های رنگ را روی 0 تنظیم کنید ، مانند اینجا: rgb (0 ، 0 ، 0).

برای نمایش سفید ، همه گزینه های رنگ را روی 255 تنظیم کنید ، مانند اینجا: rgb (255 ، 255 ، 255).

با مخلوط کردن مقادیر RGB در زیر آزمایش کنید:

 

RED قرمز

255

GREEN سبز

0

BLUE آبی

0

مثال

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

خودتان آزمایش کنید »

مقیاس خاکستری اغلب با استفاده از مقادیر برابر برای هر سه منبع نور تعریف می شود:

مثال

rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)

خودتان آزمایش کنید »

مقدار HEX

در HTML ، یک رنگ را می توان با استفاده از مقدار هگزادسیمال در فرم تعیین کرد:

rrggbb#

جایی که rr (red), و gg (green) و bb (blue) مقادیر هگزادسیمال 00 تا ff (همان اعشاری 0-255). هستند

برای مثال، #ff0000 قرمز نشان داده می شود زیرا قرمز روی بالاترین مقدار (ff) و بقیه در کمترین مقدار (00) تنظیم می شوند.

مثال دیگر ، #00ff00 به عنوان سبز نمایش داده می شود ، زیرا رنگ سبز در بالاترین مقدار (ff) قرار گرفته و دو مورد دیگر (قرمز و آبی) روی 00 تنظیم شده اند.

برای نمایش سیاه ، همه پارامترهای رنگ را روی 00 تنظیم کنید ، مانند این: # 000000. برای نمایش سفید ، تمام پارامترهای رنگ را روی ff تنظیم کنید ، مانند این: #ffffff.

مثال

#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd

خودتان آزمایش کنید »

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

مثال

#000000
#3c3c3c
#787878
#b4b4b4
#f0f0f0
#ffffff

خودتان آزمایش کنید »

مقدار HSL

در HTML می توان با استفاده از رنگ ، اشباع و سبک بودن یک رنگ را مشخص کرد - HSL در فرم:

hsl(hue, saturation, lightness)

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

(saturation) اشباع یک مقدار درصد است ، 0٪ به معنای سایه خاکستری و 100٪ تمام رنگ است.

سبکی (lightness) نیز یک مقدار درصد است ، 0٪ سیاه و 100٪ سفید است.

مثال

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

خودتان آزمایش کنید »

اشباع

اشباع را می توان به عنوان شدت یک رنگ توصیف کرد.

100٪ رنگ خالص و بدون سایه خاکستری است

50٪ 50٪ خاکستری است ، اما هنوز هم رنگ را می بینید.

0٪ کاملاً خاکستری است ، دیگر نمی توانید رنگ آن را ببینید.

مثال

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

خودتان آزمایش کنید »

سبکی

سبک بودن یک رنگ را می توان اینگونه توصیف کرد که شما می خواهید به چه مقدار نور رنگ بدهید ، جایی که 0٪ به معنای عدم نور (سیاه) ، 50٪ به معنای 50٪ نور (نه تاریک و نه روشن) 100٪ به معنای روشنایی کامل (سفید) است.

مثال

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

خودتان آزمایش کنید »

سایه های خاکستری

مقیاس خاکستری اغلب با تنظیم رنگ و اشباع روی 0 و تنظیم روشنایی از 0٪ تعیین می شود تا 100 to برای به دست آوردن سایه های تیره / روشن:

مثال

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

خودتان آزمایش کنید »

مقادیر رنگی HSLA

مقادیر رنگ HSLA پسوند مقادیر رنگ HSL با یک کانال آلفا است - که میزان کدری برای یک رنگ را مشخص می کند.

مقدار رنگ HSLA با:

rgba(red, green, blue, alpha)

پارامتر آلفا عددی بین 0.0 (کاملاً شفاف) و 1.0 است (به هیچ وجه شفاف نیست):

مثال

rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)

خودتان آزمایش کنید »






این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir