| قدم قبلی > | < قدم بعدی |
خصوصیات حاشیه ها در CSS
در CSS شما می توانید بوسیله خصوصیات حاشیه ها (Borders)، سبک (style)، عرض (width) و رنگ (color) حاشیه هر عنصر را مشخص کنید.
سبک حاشیه ها (Border Style)
ویژگی حاشیه ی سبک نوع حاشیه را برای نمایش مشخص می کند.
مقادیر زیر برای حاشیه مجاز می باشند:
نقطه نقطه(dotted) – یک حاشیه نقطه خالص را تعریف می کند.
قطعه قطعه شده (dashed)– حاشیه نقاطی را تعریف می کند.
محکم(solid)– یک حاشیه محکم را تعریف می کند.
دوگانه(double)– حاشیه دوگانه را تعریف می کند.
شیار(groove)– حاشیه سه بعدی را مشخص می کند. اثر بستگی به مقدار حاشیه رنگ دارد.
برآمدگی(ridge)– حاشیه سه بعدی را مشخص می کند. اثر بستگی به مقدار حاشیه رنگ دارد.
وصله(inset)– یک حاشیه سه بعدی را تعریف می کند. اثر بستگی به مقدار حاشیه رنگ دارد.
آغاز (outset)– تعریف یک حاشیه بی پایان ۳D است. اثر بستگی به مقدار حاشیه رنگ دارد.
هیچ کدام (none)– هیچ حاشیهی را تعریف نمی کند.
پنهان (hidden)– حاشیه پنهان را تعریف می کند.
ویژگی های سبک حاشیه ها می تواند از یک تا چهار ارزش (برای حاشیه بالا، حاشیه راست، حاشیه پایین، و حاشیه چپ) داشته باشد، در این خصوص به نمونه آخر توجه کنید.
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
می توانید در تصویر زیر نمونه هر کدام از مقادیر مجاز برای حاشیه را ببینید.
توجه: هیچ یک از ویژگی‌های دیگر حاشیه در CSS که در زیر توضیح داده شده‌است هیچ تاثیری نخواهد داشت مگر اینکه خصیصه حاشیه ی سبک تنظیم شود !
عرض حاشیه (Border Width)
ویژگی border-width عرض چهار طرف حاشیه ها را مشخص می کند.
عرض را می توان به عنوان یک اندازه مشخص کرد (در مقادیر: px، pt، cm، em) یا با استفاده از یکی از سه مقدار از پیش تعیین شده: نازک، متوسط یا ضخیم تنظیم کرد.
ویژگی عرض حاشیه می تواند از یک تا چهار مقدار (برای حاشیه بالا، حاشیه راست، حاشیه پایین و حاشیه چپ) داشته باشد.
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ | <head> <style> p.one { border-style: solid; border-width: ۵px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: dotted; border-width: ۲px; } p.four { border-style: dotted; border-width: thick; } p.five { border-style: double; border-width: ۱۵px; } p.six { border-style: double; border-width: thick; } p.seven { border-style: solid; border-width: ۲px ۱۰px ۴px ۲۰px; } </style> </head> <body> <h2>The border-width Property</h2> <p>This property specifies the width of the four borders:</p> <p class="one">Some text.</p> <p class="two">Some text.</p> <p class="three">Some text.</p> <p class="four">Some text.</p> <p class="five">Some text.</p> <p class="six">Some text.</p> <p class="seven">Some text.</p> <p><b>Note:</b> The "border-width" property does not work if it is used alone. Always specify the "border-style" property to set the borders first.</p> </body> </htm |
رنگ حاشیه ها (Border Color)
ویژگی رنگ حاشیه برای تنظیم رنگ چهار طرف حاشیه استفاده می شود.
رنگ را می توان توسط روش های زیر تعیین کرد:
- نام رنگ – مشخص کردن یک نام رنگ ، مانند ” قرمز “
- شانزده‌شانزدهی – مقدار مبنای شانزده‌شانزدهی را مشخص کند ، مثل ” # ff۰۰۰۰ “
- یک مقدار RGB را مشخص کنید ، مانند ” rgb ( ۲۵۵ ، ۰ ، ۰ ) “
- شفاف
خصوصیات رنگ حاشیه می تواند از یک تا چهار ارزش (برای حاشیه بالا، حاشیه راست، حاشیه پایین و حاشیه چپ) داشته باشد.
اگر رنگ حاشیه تنظیم نشده باشد، رنگ عنصر را ارث می برد.
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ | <html> <head> <style> p.normal { border: ۲px solid red; } p.round1 { border: ۲px solid red; border-radius: ۵px; } p.round2 { border: ۲px solid red; border-radius: ۸px; } p.round3 { border: ۲px solid red; border-radius: ۱۲px; } </style> </head> <body> <h2>The border-radius Property</h2> <p>This property is used to add rounded borders to an element:</p> <p class="normal">Normal border</p> <p class="round1">Round border</p> <p class="round2">Rounder border</p> <p class="round3">Roundest border</p> <p><b>Note:</b> The "border-radius" property is not supported in IE8 and earlier versions.</p> </body> </html> |
با اجرا کردن کد بالا تصویر زیر را خواهید دید:
حاشیه – کناره های تکی
از توجه به مثال های بالا مشخص می شود که ممکن است حاشیه دیگری برای هر کناره مشخص شود.
در CSS، برای مشخص کردن هر یک از کناره های حاشیه ها (بالا، راست، پایین و سمت چپ) نیز ویژگی هایی وجود دارد:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ | <html> <head> <style> p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } </style> </head> <body> <p>۲ different border styles.</p> </body> </html> |
با اجرا کردن کد بالا تصویر زیر را خواهید دید:
با اجرا کردن کد زیر نتیجه ی مشابهی نسبت به نمونه بالا بدست می آورید:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ | <html> <head> <style> p { border-style: dotted solid; } </style> </head> <body> <p>۲ different border styles.</p> </body> </html> |
مثال:
در اینجا دستورالعملی برای این که چگونه کار کنید، وجود دارد:
اگر خصوصیات حاشیه دارای چهار مقدار است:
سبک حاشیه: dotted solid double dashed
- حاشیه بالا dotted است
- حاشیه راست solid است
- حاشیه پایین double است
- حاشیه چپ dashed است
اگر خصوصیات حاشیه دارای سه مقدار باشد:
سبک حاشیه: dotted solid double؛
- حاشیه بالا dotted است
- حاشیه های راست و چپ solid هستند
- حاشیه پایین double است
اگر خصوصیات حاشیه دارای دو مقدار باشد:
سبک حاشیه: dotted solid
- حاشیه های بالا و پایین dotted هستند
- حاشیه های راست و چپ solid هستند
اگر خصوصیات حاشیه یک مقدار دارد:
سبک حاشیه: dotted
- تمام چهار حاشیه dotted هستند
خصوصیت سبک حاشیه در مثال های بالا استفاده شده. البته، آن هم با عرض حاشیه و رنگ حاشیه کار می کند.
حاشیه – ویژگی های کوتاه
همانطور که می توانید از مثال های بالا مشاهده کنید، در هنگام کار با حاشیه ها، ویژگی های زیادی وجود دارد.
برای کوتاه کردن کد، همچنین می توان تمام خصوصیات حاشیه های تکی را در یک ویژگی مشخص کرد.
خصیصه حاشیه یک ویژگی مختصر و کوتاه شده برای ویژگی های حاشیه تکی است:
- عرض حاشیه
- سبک حاشیه (مورد نیاز)
- رنگ حاشیه
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ | <html> <head> <style> p { border: ۵px solid red; } </style> </head> <body> <h2>The border Property</h2> <p>This property is a shorthand property for border-width, border-style, and border-color.</p> </body> </html> |
با اجرا کردن کد بالا تصویر زیر را خواهید دید:
شما همچنین می توانید تمام خصوصیات حاشیه تکی را فقط برای یک طرف مشخص کنید:
حاشیه چپ
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ | <html> <head> <style> p { border-left: ۶px solid red; background-color: lightgrey; } </style> </head> <body> <h2>The border-left Property</h2> <p>This property is a shorthand property for border-left-width, border-left-style, and border-left-color.</p> </body> </html> |
حاشیه پایین
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ | <html> <head> <style> p { border-bottom: ۶px solid red; background-color: lightgrey; } </style> </head> <body> <h2>The border-bottom Property</h2> <p>This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.</p> </body> </html> |
حاشیه های گرد
ویژگی border-radius برای اضافه کردن حاشیه های گرد به یک عنصر استفاده می شود:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ | <html> <head> <style> p.normal { border: ۲px solid red; } p.round1 { border: ۲px solid red; border-radius: ۵px; } p.round2 { border: ۲px solid red; border-radius: ۸px; } p.round3 { border: ۲px solid red; border-radius: ۱۲px; } </style> </head> <body> <h2>The border-radius Property</h2> <p>This property is used to add rounded borders to an element:</p> <p class="normal">Normal border</p> <p class="round1">Round border</p> <p class="round2">Rounder border</p> <p class="round3">Roundest border</p> <p><b>Note:</b> The "border-radius" property is not supported in IE8 and earlier versions.</p> </body> </html> |
با اجرا کردن کد بالا تصویر زیر را خواهید دید:
توجه: خصوصیات border-radius در IE8 و نسخه های قبلی پشتیبانی نمی شود.
اگر رنگ حاشیه ای تنظیم نشده باشد، رنگ عنصر را ارث می برد.
| گام قبلی > | < گام بعدی |
هنوز دیدگاهی برای این مطلب ثبت نشده است.