امتیاز موضوع:
  • 16 رأی - میانگین امتیازات: 3
  • 1
  • 2
  • 3
  • 4
  • 5
نحوه ایجاد کادر برای عناصر صفحه با استفاده از استایل
#1
[تصویر:  Mimetypes-text-css-icon.png]
کادر (Boder)

border-style

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

[تصویر:  dot-Mac-Logo-icon.png] none

با استفاده از این مقدار تعیین می کنیم که نمی خواهیم کادر داشته باشیم. در صورتی که مقداری غیر از none تعیین شود کادر خواهیم داشت.


[تصویر:  dot-Mac-Logo-icon.png] solid

[تصویر:  13458245331.bmp]


[تصویر:  dot-Mac-Logo-icon.png] dashed

[تصویر:  13458248081.bmp]


[تصویر:  dot-Mac-Logo-icon.png] dotted

[تصویر:  13458249431.bmp]


[تصویر:  dot-Mac-Logo-icon.png] double

[تصویر:  13458250641.bmp]


[تصویر:  dot-Mac-Logo-icon.png] groove

[تصویر:  13458251711.bmp]


[تصویر:  dot-Mac-Logo-icon.png] hidden

[تصویر:  13458252681.bmp]


[تصویر:  dot-Mac-Logo-icon.png]inset
[تصویر:  13458253811.bmp]


[تصویر:  dot-Mac-Logo-icon.png]outset

[تصویر:  13458255671.bmp]


[تصویر:  dot-Mac-Logo-icon.png] ridge

[تصویر:  13458268851.bmp]


همانطور که می بینید عرض این کادرها بیش از آن چیزی است که ما نیاز داریم چون ما برای این کادرها عرضی مشخص نکردیم. اگر بخواهیم عرض این کادرها به اندازه مشخصی باشد باید از پارامتر width که قبلاً با آن آشنا شدیم استفاده کنیم. به مثال زیر توجه کنید:


کد:
<div style="width:300px; border-style:solid">برای این کادر عرض 300 پیکسل تعیین شده است.</div>

نتیجه به این صورت خواهد بود:


[تصویر:  13458270401.bmp]



border-width

این پارامتر به ما اجازه می دهد تا میزان ضخامت کادرها را تعیین کنیم. این پارامتر می تواند مقادیر زیر را داشته باشد:


[تصویر:  dot-Mac-Logo-icon.png] مقدار عددی بر حسب پیکسل

در این روش می توانیم مقدار ضخامت کادر را بر حسب پیکسل تعیین کنیم. به مثال زیر توجه کنید:


کد:
<div style="border-style:solid; border-width:10px">این کادر 10 پیکسل ضخامت دارد</div>

این هم کادر به دست آمده:


[تصویر:  13458283801.bmp]


[تصویر:  dot-Mac-Logo-icon.png] thin
این مقدار به ما یک کادر ضخیم خواهد داد. به مثال زیر توجه کنید:

کد:
<div style="border-style:solid; border-width:thin">ضخامت این کادر thin در نظر گرفته شده است.</div>

[تصویر:  13458291721.bmp]

[تصویر:  dot-Mac-Logo-icon.png] thick

این مقدار به ما یک کادر ضخیم خواهد داد. به مثال زیر توجه کنید:

کد:
<div style="border-style:solid; border-width:thick">ضخامت این کادر thick در نظر گرفته شده است.</div>

[تصویر:  13458290141.bmp]



دیگه حوصله ندارم!بقیه ش باشه واسه بعد!
پاسخ
#2
border-color

شما می توانید در صورت تمایل رنگ کادرهای خود را تغییر دهید. برای این کار باید از پارامتر border-color استفاده کنید. برای مقدار این پارامتر می توانید از نام رنگها استفاده کنید. در صورتی که از نام رنگها استفاده کنید فقط می توانید از تعداد کمی از رنگها استفاده کنید. راه دیگری که برای انتخاب رنگ وجود دارد استفاده از معادل هگزادسیمال رنگها است که نسبت به نام رنگها انعطاف پذیری بیشتری دارد. اگر جدول معادل هگزا دسیمال رنگها را می خواهید اینجا را کلیک کنید.
به یک نمونه برای تغییر رنگ کادر توجه کنید:
استفاده از نام رنگها:


کد:
<div style="border-style:solid; border-color:green">این کادر به رنگ سبز خواهد بود.</div>

[تصویر:  13459068221.bmp]


استفاده از معادل هگزا دسیمال رنگها:


کد:
<div style="border-style:solid; border-color:#008000">این کادر به رنگ سبز خواهد بود.</div>

[تصویر:  13459068221.bmp]
پاسخ


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  اعمال تغییر بر روی لینکها در صفحه با استفاده از استایل انجمن مخ ها 0 243 27-08-2012، 09:06 PM
آخرین ارسال: انجمن مخ ها
  تغییر شکل نشانگر ماوس با استفاده از استایل انجمن مخ ها 0 242 27-08-2012، 08:58 PM
آخرین ارسال: انجمن مخ ها
  تنظیمات موقعیت عکس زمینه عناصر صفحه با CSS انجمن مخ ها 0 233 26-08-2012، 07:00 PM
آخرین ارسال: انجمن مخ ها
  کار با تصویر زمینه در طراحی صفحات با استایل انجمن مخ ها 0 262 26-08-2012، 06:53 PM
آخرین ارسال: انجمن مخ ها
  تغییر رنگ و تصویر زمینه عناصر HTML با CSS انجمن مخ ها 0 265 26-08-2012، 06:24 PM
آخرین ارسال: انجمن مخ ها
  تنظیم فونت صفحه با استفاده از استایل(CSS) انجمن مخ ها 0 233 26-08-2012، 02:29 PM
آخرین ارسال: انجمن مخ ها
  تغییر موقعیت عناصر صفحه با استفاده از CSS انجمن مخ ها 0 217 25-08-2012، 10:57 PM
آخرین ارسال: انجمن مخ ها
  تنظیم حاشیه و فاصله از لبه در عناصر صفحه انجمن مخ ها 0 220 25-08-2012، 08:23 PM
آخرین ارسال: انجمن مخ ها

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان