رنگ ها در چهار بخش تشريح ميگردند .بخش اول در مورد كليات كه در همين صفحه بحث ميشود و سه بخش ديگر در صفحات بعدي، مطابق جدول زير ارائه ميگردند.
| عنوان بخش | لينك بخش |
|---|---|
| رنگهاي فرم آرج بيHTML RGB and RGBA Colors - | RGB an RGBA Colors |
| رنگ فرم هگزاHTML Hex Color - | HEX Colors |
| رنگ فرم اچ اس الHTML HSL and HSLA Colors - | HSL and HSLA Colors |
رنگها درHTML با نامهاي ازپيش تعريف شده يا با RGB,HEX,HSL,RGBA يا HSLA مقدار دهي ميشوند.
درhtml يك رنگ ميتواند با نام مشخص شود .بعضي نامها مثلTomato,Orange,Gray و ... ميباشند. در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>
ميتوان براي رنگ پس زمينه عناصرhtml آنرا مقدار دهي كرد، مطابق نمونه زير:
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
مثال ـ مقدار دهيBackground-color براي عناصر
<!DOCTYPE html> <html> <body> <h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;"> 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. </p> </body> </html>
با ويژگيcolor ميتوان رنگ محتواي عناصر را اعلام كرد .
<h3style="color:Tomato;">Hello World</h3>
مثال ـ نمونه استفاده ازcolor براي رنگ محتواي عناصر
<!DOCTYPE html> <html> <body> <h3style="color:Tomato;">Hello World</h3> <p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>
با ويژگيborder ميتوان رنگ حاشيه عناصر را تنظيم نمود . دو نمونه زير
<h1 style="border: 2px solid Tomato;">Hello World</h1> <h1 style="border: 2px solid DodgerBlue;">Hello World</h1> <h1 style="border: 2px solid Violet;">Hello World</h1>
مثال ـ استفاده از ويژگيborder براي حاشيه عناصر
<!DOCTYPE html> <html> <body> <h1 style="border: 2px solid Tomato;">Hello World</h1> <h1 style="border: 2px solid DodgerBlue;">Hello World</h1> <h1 style="border: 2px solid Violet;">Hello World</h1> </body> </html>
مقادير رنگ درHTML با فرمت هايRGB,HEX,HSL,RGBA و HSLA ميتواند اعلام شود .
مثال ـ نمونه هاي مختلف اعلام مقادير رنگ
<!DOCTYPE html> <html> <body> <p>Same as color name "Tomato":</p> <h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1> <h1 style="background-color:#ff6347;">#ff6347</h1> <h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1> <p>Same as color name "Tomato", but 50% transparent:</p> <h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1> <p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p> </body> </html>
در فصل بعدي در موردRGB,HEX وHSL مطالب بيشتري ارائه ميشود.