HTML Colors
با دقت کردن در کدهای html ، در قسمت هایی که برای تنظیم رنگ متن ، پس زمینه ، حاشیه و … متوجه می شوید که معمولا رنگ را با یک کد رنگ خاص به کار برده شده است . چیزی شبیه ssrrhh# . امروز می خوایم به صورت کامل و مفصل در مورد نام و کد رنگ ها در زبان html صحبت کنیم . :: معمولا رنگ ها به سه روش در میان کدهای html و css استفاده می شود . این سه شیوه را در ادامه به همراه توضیحان و نمونه کد بیان می کنیم :
۱- Color Names
در HTML، رنگ ها با استفاده از نام رنگ مشخص ومعین می شوند.
به کد زیر و خروجی آن دقت کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!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 برای رنگ ها به رسمیت می شناسد، ۱۴۰ نام رنگ است. هر نامی رنگی خارج از این تعداد برای HTML قابل شناسایی و در نتیجه قابل اجرا نیست بنابراین نتیجه ای در خروجی نشان داده نمی شود. در اینجا می توانید این ۱۴۰ نام را مشاهده کنید.
ویژگی Background Color
این ویژگی به شما این امکان را می دهد که بتوانید برای نوشته های خود متن های رنگی قرار دهید.
به نمونه کد زیر و خروجی آن دقت کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;direction:rtl"> شنیده هایمان و خوانده ها بسیار است، ولى عاقلانه نیست که بلندگوى تکرار شنیده ها و خوانده ها باشیم، بى آنکه آنچه را مى گویند و مى نویسند، به محک بزنیم و بسنجیم. </p> <p style="background-color:yellow;direction:rtl"> با ما ا از طریق کانال ارتباطیinfo@abatech.ir در ارتباط باشید.</p> </body> </html> |
ویژگی Text Color
این ویژگی سبب می شود که شما بتوانید رنگ متن خود را از حالت پیش فرض که مشکی تنظیم شده است متناسب با سلیقه خود تغییر دهید.
به نمونه کد زیر و خروجی آن دقت کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <h3 style="color:Tomato;">Hello World</h3> <p style="color:DodgerBlue;direction:rtl"> HTML مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است..</p> <p style="color:MediumSeaGreen;direction:rtl">کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند</p> </body> </html> |
ویژگی Border Color
شما می توانید متن خود را درون کادر قرار دهید و به کادرتان رنگ دلخواه دهید.
به نمونه کد زیر و خروجی آن دقت کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <h1 style="border: 2px solid Tomato;">HTML - زبان برنامه نویسی صفحات وب</h1> <h1 style="border: 2px solid DodgerBlue;">HTML - زبان برنامه نویسی صفحات وب</h1> <h1 style="border: 2px solid Violet;">HTML - زبان برنامه نویسی صفحات وب</h1> </body> </html> |
این پست ادامه دارد…