آموزش حاشیه در CSS
آموزش حاشیه در CSS
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش حاشیه در CSS خواهیم پرداخت.
ویژگی های حاشیه به شما این امکان را می دهد تا تعیین کنید که حاشیه کادر نمایانگر یک عنصر چگونه باشد. سه ویژگی حاشیه وجود دارد که می توانید تغییر دهید –
- border-color رنگ حاشیه را مشخص می کند.
- border-color مشخص می کند که آیا یک حاشیه باید خط صاف باشد، خط چین باشد، دو خط باشد یا یکی دیگر از مقادیر ممکن باشد.
- border-width عرض یک حاشیه را مشخص می کند.
اکنون، نحوه استفاده از این خصوصیات را با مثال خواهیم دید.
ویژگی border-color
ویژگی border-color به شما امکان می دهد رنگ حاشیه اطراف یک عنصر را تغییر دهید. با استفاده از ویژگی ها می توانید به صورت جداگانه رنگ قسمت های پایین، چپ، بالا و راست حاشیه عنصر را تغییر دهید –
- border-bottom-color رنگ حاشیه پایین را تغییر می دهد.
- border-top-color رنگ حاشیه بالا را تغییر می دهد.
- border-left-color رنگ حاشیه چپ را تغییر می دهد.
- border-right-color رنگ حاشیه راست را تغییر می دهد.
مثال زیر تأثیر همه این ویژگی ها را نشان می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<html> <head> <style type = "text/css"> p.example1 { border:1px solid; border-bottom-color:#009900; /* Green */ border-top-color:#FF0000; /* Red */ border-left-color:#330000; /* Black */ border-right-color:#0000CC; /* Blue */ } p.example2 { border:1px solid; border-color:#009900; /* Green */ } </style> </head> <body> <p class = "example1"> This example is showing all borders in different colors. </p> <p class = "example2"> This example is showing all borders in green color only. </p> </body> </html> |
خروجی به صورت زیر می باشد:
|
1 2 3 |
This example is showing all borders in different colors. This example is showing all borders in green color only. |
ویژگی border-style
ویژگی border-style به شما امکان می دهد تا یکی از سبک های زیر را برای حاشیه انتخاب کنید –
none– بدون مرز. (معادل عرض حاشیه: 0 ؛)
solid – حاشیه یک خط صاف واحد است.
dotted – حاشیه یک سری نقاط است.
– dashed یک سری خطوط کوتاه است.
double – حاشیه دو خطی است.
groove – به نظر می رسد حاشیه در صفحه حک شده است.
ridge – حاشیه برعکس شیار به نظر می رسد.
–inset حاشیه باعث می شود کخ به نظر می رسد جعبه درون صفحه جاسازی شده است.
outset – حاشیه باعث می شود جعبه به نظر می رسد از بوم خارج می شود.
hidden – مشابه هیچکدام،
با استفاده از مشخصات زیر می توانید به صورت جداگانه سبک حاشیه های پایین، چپ، بالا و راست یک عنصر را تغییر دهید –
- border-bottom-style سبک حاشیه پایین را تغییر می دهد.
- border-top-style سبک حاشیه بالا را تغییر می دهد.
- border-left-style حاشیه چپ را تغییر می دهد.
- border-right-style حاشیه راست را تغییر می دهد.
مثال زیر همه این سبک های حاشیه را نشان می دهد –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
Live Demo <html> <head> </head> <body> <p style = "border-width:4px; border-style:none;"> This is a border with none width. </p> <p style = "border-width:4px; border-style:solid;"> This is a solid border. </p> <p style = "border-width:4px; border-style:dashed;"> This is a dashed border. </p> <p style = "border-width:4px; border-style:double;"> This is a double border. </p> <p style = "border-width:4px; border-style:groove;"> This is a groove border. </p> <p style = "border-width:4px; border-style:ridge"> This is a ridge border. </p> <p style = "border-width:4px; border-style:inset;"> This is a inset border. </p> <p style = "border-width:4px; border-style:outset;"> This is a outset border. </p> <p style = "border-width:4px; border-style:hidden;"> This is a hidden border. </p> <p style = "border-width:4px; border-top-style:solid; border-bottom-style:dashed; border-left-style:groove; border-right-style:double;"> This is a a border with four different styles. </p> </body> </html> |
خروجی به صورت زیر می باشد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
This is a border with none width. This is a solid border. This is a dahsed border. This is a double border. This is a groove border. This is aridge border. This is a inset border. This is a outset border. This is a hidden border. This is a a border with four different styles. |
ویژگی border-width
ویژگی border-width به شما امکان می دهد عرض حاشیه های عنصر را تنظیم کنید. مقدار این ویژگی می تواند به طول px ، pt یا cm باشد یا باید روی نازک، متوسط یا ضخیم تنظیم شود.
با استفاده از ویژگی های زیر می توانید عرض حاشیه های پایین، بالا، چپ و راست یک عنصر را تغییر دهید –
- border-bottom-width عرض حاشیه پایین را تغییر می دهد.
- border-top-width عرض حاشیه بالا را تغییر می دهد.
- border-left-width عرض حاشیه چپ را تغییر می دهد.
- border-right-width عرض حاشیه راست را تغییر می دهد.
مثال زیر تمام این عرض حاشیه را نشان می دهد –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<html> <head> </head> <body> <p style = "border-width:4px; border-style:solid;"> This is a solid border whose width is 4px. </p> <p style = "border-width:4pt; border-style:solid;"> This is a solid border whose width is 4pt. </p> <p style = "border-width:thin; border-style:solid;"> This is a solid border whose width is thin. </p> <p style = "border-width:medium; border-style:solid;"> This is a solid border whose width is medium; </p> <p style = "border-width:thick; border-style:solid;"> This is a solid border whose width is thick. </p> <p style = "border-bottom-width:4px;border-top-width:10px; border-left-width: 2px;border-right-width:15px;border-style:solid;"> This is a a border with four different width. </p> </body> </html> |
خروجی به صورت زیر می باشد:
|
1 2 3 4 5 6 7 8 9 10 11 |
This is a solid border whose width is 4px. This is a solid border whose width is 4pt. This is a solid border whose width is thin. This is a solid border whose width is medium; This is a solid border whose width is thick. This is a a border with four different width. |
ویژگی حاشیه با استفاده از مختصرنویسی
ویژگی حاشیه به شما امکان می دهد رنگ، سبک و عرض خطوط را در یک ویژگی مشخص کنید –
مثال زیر نحوه استفاده از هر سه ویژگی را در یک ویژگی واحد نشان می دهد. این خاصیت بیشترین استفاده برای تنظیم حاشیه هر عنصر است.
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> <p style = "border:4px solid red;"> This example is showing shorthand property for border. </p> </body> </html> |
خروجی به صورت زیر می باشد:
|
1 |
This example is showing shorthand property for border. |
لیست جلسات قبل آموزش CSS
.svg)
دیدگاه شما