» مقالات » مقالات هایبرد » خواص مرز کادرها (راهنمای html)

خواص مرز کادرها (راهنمای html)

خواص مرز کادرها (راهنمای html)

4704  تعداد بازدید  |  سه شنبه 23 تیر ماه 1394

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

انها تعیین نمود و پهنا و رنگ مرزها را مشخص کرد.
خاصیت border-style. این خاصیت، سبک ظاهری مرزها را تعیین میکند. مقدار پیش فرض آن none است و معنایش این است که مرزی رسم نشود.مقادیر این خاصیت عبارتند از :



خاصیت border-style مرزهای هر چهار طرف کادر را تعیین میکند. برای تعیین هر چهار طرف کادر به طور جداگانه، می توان از سبکهای border-top-style (برای بالا)، border-bottom-style (برای پایین)، border-left-Style (برای سمت چپ) و border-right-style (برای سمت راست) استفاده کرد. در خاصیت border-style می توان نوع مرز هر چهار طرف را تعیین کرد. اولین مقدار مربوط به سمت بالا، دومین مقدار مربوط به سمت راست، سومین مقدار مربوط به پایین و چهارمین مقدار مربوط به سمت چپ است. وقتی مقادیری که ذکر می شوند کمتر از ۴ باشند، طرف مقابل، به طور خودکار مقدار می گیرد. به عنوان مثال، اگر سبک مرز بالایی تعیین شود ولی سبک مرز پایینی تعیین نشود، سبک مرز پایینی مثل سبک مرز بالایی منظور خواهد شد. هر کدام از دستورات زیر، مرزهای دو خطی را در بالا و پایین کادر منظور می کنند: 


{border-style : double none} {border-style : double none double none} {border-top-style : double ; border-bottom-style : double ; border-left  style : none; border-right-style : none}

خاصیت border-Width. خواصی گوناگونی برای تعیین پهنای مرزها به کار می روند. صفت border-Width پهنای هر چهار طرف کادر را مشخص میکند و رفتار آن مثل bOrder-Style است. برای تعیین هر کدام از چهار طرف کادر به طور جداگانه، از خواص border-top-width (برای پهنای بالا)، border-right-width (برای پهنای سمت راست)، border-bottom-width (برای پهنای پایین) و border-left-width (برای پهنای سمت چپ) استفاده می شود. پهنای مرزها را با کلمات کلیدی medium ،thin و thick یا با استفاده از مقادیری مثل ۵، ۱۰ و غیره تعیین کرد. دستورات زیر را ببینید: 


{border-style : solid; border-width: 10 px} {border-style : double ; border-width ; thick) {border-style : solid; border-width ; thick thin} {border-style : double none ; border-width: thick) 


خاصیت border-color. این خاصیت رنگ مرزها را تعیین میکند. رنگها را می توان با نام یا اعداد مبنای ۱۶ بیان کرد. این خاصیت، رنگ هر چهار طرف کادر را تعیین میکند و از یک تا چهار مقدار را می پذیرد. مقادیر ذکر شده، در جهت چرخش عقربه های ساعت (رنگ بالا، راست، پایین و سمت چپ) اعمال میشوند. برای تعیین رنگ هر مرز به طور جداگانه از خواص border-bottom-color . border-right-color . border-top-color و  استفاده می شود. دستورات زیر را ببینید:  


{border-style : solid; border-color : green} {border-style : solid; border-top-color: green ;border-right-color: #FF0000; border-bottom-color : yellow ; border-left-color : blue}

 

 

 

مقالات مرتبط به طراحی سایت :

تنظیم تصویر در صفحه وب (راهنمای html)
چند رسانه ای در وب ( راهنمای html)
خواص لیستها(راهنمای html)
خواص فاصله گذاری(راهنمای html)
خواص مرز کادرها (راهنمای html)
خواص شیوه نامه ها (راهنمای html)
شیوه نامه ها (راهنمای html)
اسکریپت و نقشه های تصویری(راهنمای html)
ایجاد نقشه تصویری کاربر(راهنمای html)
تصاویر و پیوند(راهنمای html)
قرار دادن تصویر در صفحه وب(راهنمای html)
پیوند در HTML (راهنمای جامع html)