تغییر رنگ پس زمینه در html با کدهای Css
رنگ پس زمینه در html با استفاده از زبان Css و خود Html قابل تغییر است. ما در این جلسه از دوره آموزش های رایگان قصد داریم تا تغییر رنگ پس زمینه در html با کدهای Css را آموزش دهیم. همچنین در ادامه با اعمال رنگ پس زمینه گرادیانت آشنا خواهید شد.
تغییر رنگ پس زمینه در html
برای تغییر رنگ پس زمینه در html می توان از خصیصه bgcolor در تگ body استفاده کرد. تعیین رنگ بر اساس سه مدل به شکل RGB,HSB و کدهای هگزا دسیمال که در نهایت بصورت RGB تعیین می شوند، می باشد. نکته قابل توجه این است که تغییر رنگ پس زمینه در html با محدودیت هایی روبرو است. به صورتی که شما با html فقط می توانید رنگ پس زمینه صفحه را تغییر دهید و برای تغییر پس زمینه یک بخشی مانند تگ div باید از Css کمک بگیرید. یا برای ایجاد پس زمینه های گرادیانت و متحرک باید از CSS استفاده کنید.
این کد با استفاده از روش تعریف رنگ هگزا دسیمال رنگ پس زمینه را به مشگی تغییر می دهد.
<html> <head></head> <body bgcolor="#000"> </body> </html>
حال چگونه می توانیم رنگ پس زمینه را با کدهای Css تغییر دهیم. می توانید از تکه کدهای زیر استفاده کنید. با Css می توانید برای هربخش رنگ پس زمینه تعیین کنید همچنین می توانید یک تصویر را در آن قرار دهید.
تغییر رنگ پس زمینه با Css
<html> <head></head> <body style="background-color:#000"> </body> </html>
توجه:
تعریف کدهای Css به سه روش صورت می پذیرد
۱- درخط Inline
۲- داخلی Internal
3- خارجی External
روشی که ما تعریف کردیم روش Inline است. روش استاندارد روش External می باشد که در یک فایل جداگانه کدهای Css نوشته می شوند. در روش داخلی مانند روش internal، کدهای Css در صفحه Html نوشته می شوند، با این تفاوت که کدها در داخل تگ ها تعریف نمی شوند و صرفا از تگ style استفاده می کنند. در روش Inline کدهای Css در داخل تگ ها تعریف می شوند.
پس زمینه گرادیانت
پس زمینه گرادیانت خطی از ترکیب چند رنگ تشکیل می شود. با استفاده از کد زیر می توانید پس زمینه گرادیانت را ایجاد کنید:
background: #c31432; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #240b36, #c31432); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
همچنین می توانید از وب سایت های ساخت گرادیانت خطی استفاده کنید.
Comment (1)
سلام
جالب بود