در طراحی و استایلینگ وب‌سایت‌ها، مفهوم حاشیه به یک عنصر تزئینی یا عملکردی اشاره دارد که محتوای یک شیء را، مانند یک جعبه متن، تصویر یا هر عنصر HTML دیگری در صفحه وب، در اطراف خود می‌احاطه می‌کند.
ویژگی border برای ایجاد حاشیه دور یک عنصر مانند یک div، تصویر یا متن استفاده می‌شود. این ویژگی به شما امکان می‌دهد که ظاهر حاشیه را سفارشی‌سازی کنید، شامل رنگ، عرض و نوع آن.
حاشیه‌ها نقش حیاتی در زیبایی کلی و طراحی صفحه وب ایفا می‌کنند.
اهمیت حاشیه‌ها (Importance of borders)
اهمیت استفاده از حاشیه‌ها در CSS می‌تواند به شرح زیر خلاصه شود:
-
جداسازی بصری: حاشیه‌ها به جدا کردن بصری عناصر مختلف در یک صفحه وب کمک می‌کنند، این امر باعث می‌شود کاربران بهتر بتوانند لی آوت و ناوبری را درک کنند.
-
سازماندهی و ساختاردهی: حاشیه‌ها می‌توانند به گریدها، جداول یا حتی جعبه‌ها داده شوند که باعث می‌شود محتوا به نظر سازمان‌یافته و ساختارمندتری بنظر برسد.
-
تاکید و تمرکز: حاشیه‌ها می‌توانند به عناصر داده شوند تا آنها را تاکید و برجستگی ببخشند.
-
طراحی و زیبایی: حاشیه‌ها به شما امکان می‌دهند تا تزئیناتی به عناصر اضافه کنید تا جذابیت بصری را افزایش دهید. این امر با استفاده از نوع، رنگ و عرض حاشیه قابل دستیابی است.
اینجا جدولی از ویژگی‌های مختلف حاشیه، توضیحات آنها و مقادیر پیش‌فرضی که نگه می‌دارند، آورده شده است:
style نشان می‌دهد آیا یک حاشیه باید یک خط جامد، خط تیره، خط دوتایی یا یکی از مقادیر دیگر ممکن باشد
none width عرض حاشیه را مشخص می‌کند
medium color رنگ حاشیه را مشخص می‌کند رنگ جلویی عنصر و اگر عنصر خالی باشد، آنگاه رنگ عنصر والد حالا، ما خواهیم دید که چگونه این ویژگی‌ها را با مثال‌ها استفاده کنیم.
ویژگی border-style
ویژگی border-style یکی از ویژگی‌های اساسی حاشیه است. مقادیر زیر می‌توانند به border-style منتقل شوند:
- none: بدون حاشیه
- hidden: یک حاشیه پنهان، مشابه ‘none’ به جز برای عناصر جدول
- dotted: یک سری نقاط
- dashed: یک سری خط‌های کوتاه
- solid: یک خط جامد
- double: دو خط موازی با فاصله‌ی کوچک بین آنها
- groove: یک حاشیه که به نظر می‌رسد که در صفحه حک شده است
- ridge: یک حاشیه که به نظر می‌رسد که کمی بالاتر از صفحه است
- inset: یک حاشیه که به نظر می‌رسد که در صفحه جاسازی شده است
- outset: یک حاشیه که به نظر می‌رسد که کمی از صفحه بالاتر است
- initial: ویژگی border-style را به مقدار پیش‌فرضش تنظیم می‌کند
- inherit: ویژگی border-style را از عنصر والد به ارث می‌برد
در این مثال، از انواع مختلفی از ویژگی border-style استفاده شده است تا حاشیه‌های متفاوتی برای متن‌ها (عناصر p) ایجاد شود. برای هر نوع حاشیه، یک کلاس CSS تعریف شده است که ویژگی border-style مربوطه را تنظیم می‌کند.
<html>
<head>
<style>
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.dotted {border-style: dotted;}
p.dashes {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.mixed {border-style: none dashed solid dotted;}
</style>
</head>
<body>
<h2>border-style Property</h2>
<p class="none">No border.</p>
<p class="hidden">Hidden border.</p>
<p class="dotted">Dotted border.</p>
<p class="dashes">Dashed border.</p>
<p class="solid">Solid border.</p>
<p class="double">Double border.</p>
<p class="groove">Groove border.</p>
<p class="ridge">Ridge border.</p>
<p class="inset">Inset border.</p>
<p class="outset">Outset border.</p>
<p class="mixed">A mixed border.</p>
</body>
<html>در اینجا یک لیست از انواع مختلف حاشیه‌ها استفاده شده است:
- no border: بدون حاشیه
- hidden border: حاشیه پنهان
- dotted border: حاشیه نقطه‌ای
- dashed border: حاشیه خط‌های تیره
- solid border: حاشیه جامد
- double border: حاشیه دوبل
- groove border: حاشیه بافت
- ridge border: حاشیه ریج
- inset border: حاشیه درون‌نشین
- outset border: حاشیه بیرون‌نشین
- mixed border: حاشیه مختلط
این انواع حاشیه‌ها به ترتیب در پاراگراف‌های مختلف نمایش داده شده‌اند. هر پاراگراف یکی از نوع حاشیه‌ها را داراست که با استفاده از کلاس CSS مربوطه تنظیم شده است.
<html>
<head>
<style>
p {border-top-style: dotted; border-right-style: solid; border-bottom-style: dashed; border-left-style: double;
padding: 2em;}
</style>
</head>
<body>
<h2>border-style (single-side)</h2>
<p>Different border styles on all sides.</p>
</body>
<html>در مثال دوم، از ویژگی‌های border-style مربوط به هر یک از اضلاع یک المان استفاده شده است. این ویژگی‌ها به صورت جداگانه برای هر یک از اضلاع (بالا، راست، پایین و چپ) تنظیم می‌شوند، که به ترتیب توسط border-top-style، border-right-style، border-bottom-style و border-left-style مشخص می‌شوند. در این مثال، برای هر یک از اضلاع یک نوع خاص از حاشیه اعمال شده است، که با استفاده از خصوصیت‌های مختلف border-style مشخص شده است.
ویژگی border-width
ویژگی border-width، پس از تنظیم نوع حاشیه، در خط بعدی قرار دارد. این ویژگی به شما امکان می‌دهد عرض حاشیه را سفارشی کنید. در زیر لیستی از مقادیری که می‌توانید به border-width منتقل کنید آمده است:
- thin: حاشیه نازک
- medium: عرض متوسط حاشیه
- thick: حاشیه ضخیم
- length: هر طول مشخص شده (مانند 0.1em، 5px)
قبل از تعریف border-width، باید یک border-style تعریف کنید، در غیر این صورت اثر حاشیه دیده نخواهد شد.
در مثال زیر، عرض حاشیه برای متن‌ها (عناصر p) با و بدون تعیین نوع حاشیه نمایش داده شده است.
<html>
<head>
<style>
p.thin {border-width: thin;}
p.medium {border-width: medium;}
p.thick {border-width: thick;}
p.length {border-width: 100px;}
p.thin1 {border-style: double; border-width: thin;}
p.medium1 {border-style: dashed; border-width: medium;}
p.thick1 {border-style: solid; border-width: thick;}
p.length1 {border-style: dotted; border-width: 10px;}
</style>
</head>
<body>
<h2>border-width without <i>border-style</i> property</h2>
<p class="thin">Thin border.</p>
<p class="medium">Medium border.</p>
<p class="thick">Thick border.</p>
<p class="length">Specific length border.</p>
<h2>border-width with <i>border-style</i> property</h2>
<p class="thin1">Thin width.</p>
<p class="medium1">Medium width.</p>
<p class="thick1">Thick width.</p>
<p class="length1">Specific length width border.</p>
</body>
</html>در بخش اول، border-width بدون تعیین border-style نمایش داده شده است. در بخش دوم، border-style به همراه border-width تعیین شده است.
در CSS، ویژگی border-width را می‌توان برای هر یک از چهار طرف یک المان به صورت جداگانه تعیین کرد. این امکان به شما اجازه می‌دهد تا عرض حاشیه را برای هر طرف به صورت مستقل تنظیم کنید. مقادیر مشابهی می‌توان برای هر طرف انتخاب شود، که عبارتند از:
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
در مثال زیر، عرض حاشیه برای متن‌ها (عناصر p) برای هر یک از چهار طرف مجزا تنظیم شده است. به این ترتیب، حاشیه‌های مختلفی برای هر طرف اعمال می‌شود:
<html>
<head>
<style>
p {
border-style: solid;
border-top-width: thin;
border-right-width: thick;
border-bottom-width: medium;
border-left-width: 10px;
padding: 2em;
}
</style>
</head>
<body>
<h2>border-width (single-side)</h2>
<p>Different border widths on all sides.</p>
</body>
</html>
ویژگی border-color
ویژگی border-color سومین ویژگی از حاشیه است. این ویژگی رنگ حاشیه را تعیین می‌کند.
حاشیه می‌تواند یک، دو، سه یا هر چهار مقدار داشته باشد.
اگر رنگی برای حاشیه مشخص نشود، مقدار پیش‌فرض currentcolor یعنی رنگ جلویی است.
هر نوع مقدار رنگی می‌تواند استفاده شود، مانند RGB، RGBA، شش‌رقمی و غیره.
مقادیر زیر می‌توانند به border اختصاص داده شوند:
color حاشیه رنگ مشخصی دارد
transparent حاشیه شفاف خواهد بود
inherit مقدار عنصر والد به ارث برده می‌شود
قبل از تعیینborder-color، یک border-style باید تعیین شود، در غیر این صورت تاثیر حاشیه مشاهده نخواهد شد.
بیایید یک مثال را ببینیم (با و بدون تعیین border-style):
<html>
<head>
<style>
p.color1 {border-color: red;}
p.hexa1 {border-color: #00ff00;}
p.color2 {border-style: dashed; border-color: red;}
p.hexa2 {border-style: solid; border-color: #00ff00;}
</style>
</head>
<body>
<h2>border-color بدون ویژگی <i>border-style</i></h2>
<p class="color1">رنگ قرمز با نام.</p>
<p class="hexa1">رنگ سبز با مقدار شش‌رقمی.</p>
<h2>border-color با ویژگی <i>border-style</i></h2>
<p class="color2">رنگ قرمز با نام.</p>
<p class="hexa2">رنگ سبز با مقدار شش‌رقمی.</p>
</body>
</html>
رنگ حاشیه می‌تواند به طور مستقیم برای هر یک از طرف‌های حاشیه تعیین شود. همین مقادیر می‌توانند به هر یک از طرف‌های حاشیه اختصاص یابند:
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
یک مثال را ببینید:
<html>
<head>
<style>
p {border-style: solid;
border-top-color: red;
border-right-color: #0000ff;
border-bottom-color: rgb(100,123,111);
border-left-color: rgba(50,123,111,0.4);
padding: 0.5in;}
</style>
</head>
<body>
<h2>رنگ‌های مختلف حاشیه در تمامی طرف‌ها</h2>
<p>رنگ‌های حاشیه را بررسی کنید!!!</p>
</body>
</html>
با استفاده از این ویژگی‌ها، می‌توانید رنگ‌های مختلف را برای حاشیه‌ها در نقاط مختلف المان‌های خود تنظیم کنید.
خصوصیت‌های کوتاه‌نویسی یک طرفه (Single-Side Shorthand Properties)
در CSS، می‌توانید تمام ویژگی‌های حاشیه مانند نوع، عرض و رنگ را برای هر یک از طرف‌های یک المان به صورت خلاصه تعیین کنید. این ویژگی به شما این امکان را می‌دهد که حاشیه را بر روی یک طرف خاص از یک المان اعمال کنید.
برای مثال، اگر می‌خواهید ویژگی‌های حاشیه را برای طرف بالایی یک عنصر h2 اعمال کنید، می‌توانید از دستورالعمل زیر استفاده کنید:
h2 {border-top: thin solid red;}
چهار ویژگی مختصر بر اساس هر یک از طرف‌های یک المان به شرح زیر هستند:
- border-top
- border-right
- border-bottom
- border-left
یک مثال را ببینید:
<html>
<head>
<style>
p {border-top: red dashed thick;
border-right: solid #0000ff medium;
border-bottom: thin double rgb(100,123,111);
border-left: rgba(50,123,111,0.4) 15px solid;
padding: 2cm;}
</style>
</head>
<body>
<h2>ویژگی‌های حاشیه مختصر یک طرف</h2>
<p>حاشیه‌ها را بررسی کنید!!!</p>
</body>
</html>
این کد، ویژگی‌های حاشیه را برای هر یک از طرف‌های یک پاراگراف (p) مشخص کرده است. در هر خط، یکی از طرف‌های حاشیه با نوع، رنگ و عرض مشخص شده است.
خصوصیت کوتاه‌نویسی (Shorthand Property)
ویژگی کوتاه‌نویسی border در CSS، کوتاه‌ترین روش برای تعیین ویژگی‌های حاشیه بر روی تمام طرف‌های یک عنصر است. این ویژگی به شما این امکان را می‌دهد که به صورت کوتاه و با یک خط کد، نوع، ضخامت و رنگ حاشیه را برای همه طرف‌های عنصر تعیین کنید.
دستورالعمل زیر را برای استفاده از ویژگی کوتاه‌نویسی border در نظر بگیرید:
h2 {border: thick dotted green;}
کد فوق یک حاشیه سبز رنگ، خط‌خطی و ضخیم را بر روی همه چهار طرف عنصر h2 اضافه می‌کند.
یک مثال را ببینید:
<html>
<head>
<style>
p {border: green dashed thick;
padding: 2cm;}
</style>
</head>
<body>
<h2>ویژگی کوتاه‌نویسی حاشیه</h2>
<p>حاشیه‌ها را بررسی کنید!!!</p>
</body>
</html>
اما شما همچنان امکان دارید که ویژگی کوتاه‌نویسی border را با هر ویژگی موجودیتی تنها که به صورت انحصاری منتقل شده است، بازنویسی کنید. برای روشن شدن این نکته، به کد نمونه زیر مراجعه کنید:
h2 {border: thin solid gray;}
h2 {border-bottom-width: 15px;}
کد فوق حاشیه‌ای با ضخامت نازک، خطی و خاکستری بر روی همه طرف‌ها دارد، به جز طرف پایین که ضخامت آن 15 پیکسل است.
یک مثال را ببینید:
<html>
<head>
<style>
p {border: #0000ff dashed thick;
border-bottom-width: 15px;
padding: 2cm;}
</style>
</head>
<body>
<h2>ویژگی کوتاه‌نویسی حاشیه</h2>
<p>حاشیه‌ها را بررسی کنید!!!</p>
</body>
</html>
حاشیه‌ها و عناصر درون‌خطی (Borders and Inline Elements)
این بخش در مورد اعمال حاشیه به المان‌های درون خطی در CSS است. حاشیه می‌تواند به هر المان درون خطی به همان روش داده شود. ضخامت حاشیه تأثیری بر ارتفاع خط المان ندارد. اگر حاشیه‌های چپ و راست در یک المان درون خطی مشخص شود، متن را اطراف حاشیه منتقل می‌کند.
نحوه استفاده از حاشیه برای المان‌های درون خطی به این صورت است:
strong {
border-top: thin solid green;
border-bottom: 5px dotted #ff00ff;
}
کد فوق حاشیه را به متنهای استفاده شده برای توکید در پاراگراف اعمال می‌کند، به صورتی که حاشیه سبز رنگ، نازک و خطی بر روی بالای متن قرار می‌گیرد و حاشیه مجازی به رنگ مجازی، 5 پیکسل خط خطی بر روی پایین متن قرار می‌گیرد.
یک مثال را ببینید:
<html>
<head>
<style>
strong {
border-top: thick solid green;
border-bottom: 5px dashed #ff00ff;
background-color: silver;
}
</style>
</head>
<body>
<div>
<p>بررسی کنید <strong>المان‌های درون خطی با حاشیه</strong> و بقیه حاشیه ندارند.</p>
</div>
</body>
</html>
در مثال فوق، متن داخل <strong> با حاشیه بالا به شکل خطی و ضخیم به رنگ سبز و حاشیه پایین به شکل خط‌خطی با ضخامت 5 پیکسل و رنگ نارنجی رنگ داده شده است.
عناصر جایگزین (Replaced Elements)
در CSS، وقتی حاشیه به عنصرهای جایگزین (replaced elements) مانند تصویر اعمال می‌شود، ارتفاع خط توسط حاشیه تحت تأثیر قرار می‌گیرد.
نحوه استفاده از حاشیه برای عناصر جایگزین به این صورت است:
img {
border: 2em solid #ff00ff;
}
کد فوق یک حاشیه جامد با عرض 2em و رنگ ماجنتا را دور تصویر اعمال می‌کند.
یک مثال را ببینید:
<html>
<head>
<style>
img {
border: 1em solid #ff00ff;
}
</style>
</head>
<body>
<div>
<p>بررسی کنید لوگو <img src="images/logo.png" alt="تصویر لوگو"> با حاشیه‌هایی که ارتفاع خط را تغییر می‌دهند.</p>
</div>
</body>
</html>
در مثال فوق، یک حاشیه با عرض 1em و رنگ ماجنتا دور تصویر اعمال شده است. این حاشیه باعث تغییر ارتفاع خط در اطراف تصویر می‌شود.
تصویرها (Images)
در CSS، می‌توانید یک تصویر را به عنوان حاشیه به یک عنصر اضافه کنید تا حاشیه را جذاب‌تر و پیچیده‌تر کنید. برای این کار، باید یک منبع برای تصویر خود با استفاده از خاصیت border-image-source ارائه دهید.
نکاتی که باید به یاد داشته باشید:
-
حتماً قبل از ارائه یک منبع تصویر، باید border-style را اعلام کنید، در غیر این صورت هیچ تصویری به عنوان حاشیه نمایش داده نخواهد شد.
-
اگر عرض حاشیه (border-width) مشخص نشده باشد، به طور پیش‌فرض به میانی (medium) است، که تقریباً 3 پیکسل است.
border-image-source: این ویژگی منبع تصویر را برای استفاده به عنوان حاشیه یک عنصر مشخص می‌کند.
نحوه استفاده:
border: 10px solid;
border-image-source: url('آدرس_تصویر');
border-image-slice: تصویر مشخص شده با استفاده از ویژگی border-image-source می‌تواند با استفاده از ویژگی border-image-slice برش داده شود.
این ویژگی برای برش یک تصویر استفاده می‌شود. این تصویر را به 9 بخش تقسیم می‌کند، با 4 گوشه، 4 لبه و یک منطقه میانی.
نحوه استفاده:
border: 20px solid;
border-image-source: url('آدرس_تصویر');
border-image-slice: 25%;
در این مثال، حاشیه با عرض 20 پیکسل تعیین شده است، سپس تصویر به عنوان منبع حاشیه مشخص شده است و در نهایت با استفاده از ویژگی border-image-slice، تصویر به نسبت 25٪ برش داده می‌شود.
ویژگی (border-image-width)
border-image-width: این ویژگی عرض تصویری را که به عنوان حاشیه تنظیم شده است، مشخص می‌کند. برای استفاده از این ویژگی می‌توانید از ویژگی border-image-width استفاده کنید.
نحوه استفاده:
border: 20px solid;
border-image-source: url('آدرس_تصویر');
border-image-width: 15px;
border-image-slice: 33.33%;
در این مثال، عرض تصویر به عنوان حاشیه به 15 پیکسل تعیین شده است.
ویژگی (border-image-outset)
برای جلوگیری از همپوشانی حاشیه‌های تصویر و محتوا، می‌توانید از ویژگی border-image-outset استفاده کنید.
این ویژگی تصویر حاشیه را به بیرون از جعبه حاشیه پرتاب می‌کند، فراتر از جعبه حاشیه.
نحوه استفاده:
border: 20px solid;
padding: 1em;
border-image-source: url('آدرس_تصویر');
border-image-width: 1;
border-image-slice: 10;
border-image-outset: 8px;
در این مثال، تصویر حاشیه به بیرون از جعبه حاشیه، به فاصله 8 پیکسل از جعبه حاشیه پرتاب می‌شود.
ویژگی (border-image-repeat)
به طور پیش‌فرض، تصویر حاشیه در امتداد کناره‌ها کشیده می‌شود، اما می‌توانید این رفتار را با استفاده از ویژگی border-image-repeat تغییر دهید.
این ویژگی تصویر مشخص شده را در امتداد کناره‌های حاشیه تکرار می‌کند، تا تمام طول و عرض پر نشده نشود.
نحوه استفاده:
border: 20px solid;
padding: 1em;
border-image-source: url('آدرس_تصویر');
border-image-repeat: repeat;
این ویژگی همچنین می‌تواند مقدار round را هم بپذیرد، به جز stretch و repeat.
CSS Border Image – Shorthand: برای کوتاهی، یک کوتاهی برای تنظیم تصویر حاشیه وجود دارد، یعنی border-image. مقادیر ارسال شده به کوتاهی border-image با استفاده از نماد solidus (/) جدا می‌شوند. این مقادیر باید به ترتیب خاصی فهرست شوند، که ابتدا slice، سپس width و آخرین offset است.
نحوه استفاده:
border-image: url('آدرس_تصویر'), 40% 25% 20% fill / 12px 5px / 5px space;
توجه: همچنین می‌توانید ویژگی border-image را با یک مقدار ویژه یعنی URL اعلام کنید و مقادیر دیگر به طور پیش‌فرض تعیین می‌شوند.
تمام ویژگی‌های مربوط به حاشیه در جدول زیر فهرست شده‌اند:
- border: یک ویژگی مختصر برای تنظیم تمام ویژگی‌های حاشیه در یک اعلامیه است.
- border-bottom: یک ویژگی مختصر برای تنظیم حاشیه پایین المان است.
- border-bottom-color: رنگ حاشیه پایین المان را تعیین می‌کند.
- border-bottom-width: عرض حاشیه پایین المان را تنظیم می‌کند.
- border-bottom-style: سبک حاشیه پایین المان را تنظیم می‌کند.
- border-color: یک ویژگی مختصر برای تنظیم رنگ حاشیه یک المان است.
- border-left: یک ویژگی مختصر برای تنظیم حاشیه چپ المان است.
- border-left-color: رنگ حاشیه چپ المان را تعیین می‌کند.
- border-left-width: عرض حاشیه چپ المان را تنظیم می‌کند.
- border-left-style: سبک حاشیه چپ المان را تنظیم می‌کند.
- border-right: یک ویژگی مختصر برای تنظیم حاشیه راست المان است.
- border-right-color: رنگ حاشیه راست المان را تعیین می‌کند.
- border-right-width: عرض حاشیه راست المان را تنظیم می‌کند.
- border-right-style: سبک حاشیه راست المان را تنظیم می‌کند.
- border-style: یک ویژگی مختصر برای تنظیم سبک حاشیه یک المان است.
- border-top: یک ویژگی مختصر برای تنظیم حاشیه بالای المان است.
- border-top-color: رنگ حاشیه بالای المان را تعیین می‌کند.
- border-top-width: عرض حاشیه بالای المان را تنظیم می‌کند.
- border-top-style: سبک حاشیه بالای المان را تنظیم می‌کند.
- border-width: یک ویژگی مختصر برای تنظیم عرض حاشیه یک المان است.
- border-image: یک ویژگی مختصر برای تنظیم تصویر حاشیه است.
- border-image-outset: تنظیم شیب تصویر، یعنی تا چه اندازه منطقه تصویر حاشیه از جعبه حاشیه بیرون می‌رود.
- border-image-repeat: این ویژگی تعیین می‌کند که آیا تصویر حاشیه باید تکرار شود، گرد شود، فاصله گرفته شود یا کشیده شود.
- border-image-source: تعیین منبع/مسیر یک تصویر برای گذر از حاشیه به یک عنصر.
- border-image-slice: این ویژگی نشان می‌دهد که چگونه تصویر را در یک حاشیه برش می‌زند.
- border-image-width: تنظیم عرض تصویر برای تنظیم حاشیه.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام