پس زمینه و کادر

پس زمینه و کادر در css

برای درک و دیدن تغییرات یک عنصر در هنگام نوشتن سند html تان و همچنین برای زیبا سازی سایت خود نیاز دارید تا برای هر قسمت از سند html یک کادر border و یا یک پس زمینه background انتخاب کنید.

با صفت background می توانید برای هر عنصر یک پس زمینه (رنگ یا تصویر) درنظر بگیرید:

background-color:red;   background: url(../image)

با صفت border نیز می توانید یک کادر برای هر عنصر به صورت خط چین یا نقطه چین و… در نظر بگیرید.

border:solid thin red;  border:dotted thick blue;  border:dashed 2px black;

همان طور که در بالا مشاهده کردید border یا کادر سه پارامتر را در نظر می گیرد، نوع کادر، ضخامت آن و رنگ کادر.

همچنین می توانید تنها کادر بالا، پایین، چپ یا راست را برای یک بخش مقدار دهی کنید. در ادامه برخی از استایل هایی که می توانید با دو خاصیت border و background ایجاد نمایید را ملاحضه می فرمایید.


نتایج با style های داده شده به صورت زیر خواهد بود:
محتوا محتوا محتوا محتوا

html
<div>محتوا</div>
style:
div{background-color:gray;
border-bottom:dashed 4px green}
div{background-color:cornflowerblue;
border-right:solid thick red}
div{background-color:yellowgreen;
border:dotted thin blue}
div{background-color:yellow;
border-radius:3vw}


برای زیبا سازی سایت می توانید از موارد دیگری همچون box-shadow , outline رنگ برای متن ها و … نیز استفاده کنید.

 

صفحه بعدیصفحه قبلی

 

تاریخ آخرین بروز رسانی:2017/12/30

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *