CSS

جلسه 5: خاصیت Border در CSS

خواندن این مطلب 4 دقیقه زمان میبرد
FormatFactoryhero min
FormatFactoryhero min

خاصیت border در  css این اجازه را به شما می دهد تا برای عناصر خود مرزبندی یا حاشیه مشخص کنید.

border style

خاصیت border-style برای مشخص کردن نوع مرزبندی یا حاشیه است.

مقادیر زیر سبک های مختلفی هستند که برای اعمال حاشیه استفاده می شوند و قابل اعمال هستند:

  • dotted – مرزبندی نقطه نقطه
  • dashed – مرزبندی فاصله دار  یا خط فاصله
  • solid – مرزبندی به صورت خط ممتد(حالت پیشفرض)
  • double – مرزبندی به صورت 2 خط موازی
  • groove – نوعی مرزبندی 3 بعدی
  • ridge – نوعی مرزبندی 3 بعدی
  • inset – مرزبندی 3 بعدی، رنگ بندی به سمت داخل
  • outset – مرزبندی 3 بعدی، رنگ بندی به سمت بیرون
  • none – در صورت وجود مرزبندی، آن را حذف می کند، در واقع هیچگونه مرزبندی نمایش داده نمی شود
  • hidden – مرزبندی را پنهان می کند، وجود دارد ولی نمایش داده نمی شود

برای استفاده از این خاصیت به صورت زیر عمل کنید:

border-style: نوع سبک حاشیه

به مثال زیر دقت کنید، تا با نحوه نمایش این مرزبندی ها آشنا شوید:

<!DOCTYPE html>
<html>
<head>
<style>
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;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">مرزبندی dotted </p>
<p class="dashed">مرزبندی dashed </p>
<p class="solid">مرزبندی solid</p>
<p class="double">مرزبندی double </p>
<p class="groove">مرزبندی groove </p>
<p class="ridge">مرزبندی ridge </p>
<p class="inset">مرزبندی inset </p>
<p class="outset">مرزبندی outset </p>
<p class="none">مرزبندی none</p>
<p class="hidden">مرزبندی hidden </p>
</body>
</html>

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

مرزبندی dotted

مرزبندی dashed

مرزبندی solid

مرزبندی double

مرزبندی groove

مرزبندی ridge

مرزبندی inset

مرزبندی outset

مرزبندی none

مرزبندی hidden

Border Width

خاصیت border-width برای مشخص کردن عرض مرزبندی یا حاشیه استفاده می شود.

برای مشخص کردن میزان عرض مرزبندی شما می توانید از واحدهای اندازه گیری em, cm, pt, px و همچنین مقادیر از پیش تعریف شده thin(نازک), medium(متوسط) و thick(ضخیم) استفاده کنید.

اندازه مرزبندی را می توان برای 4 جهت مرزبندی(بالا، پایین، چپ و راست) مشخص نمود.

برای استفاده از این خاصیت به صورت زیر عمل کنید:

border-width: اندازه ی عرض حاشیه

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

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px;

p.seven {
  border-style: solid;
  border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>

<p class="one">مرزبندی در CSS - عرض حاشیه: 5 پیکسل</p>
<p class="seven">مرزبندی در CSS - عرض حاشیه: به صورت متفاوت</p>

</body>
</html>

نتیجه به صورت زیر است:

مرزبندی در CSS – عرض حاشیه: 5 پیکسل

مرزبندی در CSS – عرض حاشیه: به صورت متفاوت

Border Color

برای مشخص کردن رنگ مرزبندی می توانید از خاصیت Border-Color استفاده کنید.

برای اعمال رنگ میتوانید از مقادیر زیر استفاده کنید:

  • استفاده از نام رنگ، به عنوان مثال: “red”
  • استفاده از کد رنگ HEX به عنوان مثال: ff0000#
  • استفاده از کد رنگ RGB به عنوان مثال: (255,0,0)RGB
  • transparent یا شفاف

برای مشاهده لیست کامل مقادیر رنگ پیشنهاد می شود مطلب نام و کد رنگ ها در CSS را مطالعه نمایید.

رنگ مرزبندی را می توان برای 4 جهت مرزبندی(بالا، پایین، چپ و راست) مشخص نمود.

به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
} 

p.three {
  border-style: solid;
  border-color: red green blue yellow;
} 
</style>
</head>
<body>

<p class="one">حاشیه با رنگ قرمز</p>
<p class="two">حاشیه با رنگ سبز</p>
<p class="three">حاشیه چند رنگه</p>

</body>
</html>

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

حاشیه با رنگ قرمز

حاشیه با رنگ سبز

حاشیه چند رنگه

مرزبندی مختصر

همانطور که در مثال های بالا دیدید، برای اعمال حاشیه به عناصر، با ویژگی های زیادی روبرو هستید.

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

خاصیت border دارای مقادیر زیر است:

  • border-width(عرض حاشیه)
  • border-style(سبک حاشیه) – الزامی
  • border-color(رنگ حاشیه)

برای نوشتن این مقادیر ترتیب خاصی لازم نیست، فقط وارد کردن border-style(سبک استایل) الزامیست.

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 5px solid red;
}
</style>
</head>
<body>

<p>خاصیت border، برای مختصر کردن کدها</p>

</body>
</html>

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

خاصیت border، برای مختصر کردن کدها

مثال:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<p>مثبت 1 - دنیای علم و فناوری</p>

</body>
</html>

نتیجه:

مثبت 1 – دنیای علم و فناوری

مثال:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<p>مثبت 1 - دنیای علم و فناوری</p>

</body>
</html>

نتیجه:

مثبت 1 – دنیای علم و فناوری

Rounded Borders

برای گرد کردن حاشیه شما می توانید از خاصیت Rounded-Borders استفاده کنید.

خاصیت Rounded-Borders فقط یک مقدار میگیرد و آن هم میزان گرد شدن حاشیه است.

به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid red;
}

p.round1 {
  border: 2px solid red;
  border-radius: 5px;
}

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
}
</style>
</head>
<body>

<p class="normal">حاشیه نرمال</p>
<p class="round1">حاشیه گرد شده - 5 پیکسل</p>
<p class="round2">حاشیه گرد شده - 8 پیکسل</p>
<p class="round3">حاشیه گرد شده - 12 پیکسل</p>

</body>
</html>

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

حاشیه نرمال

حاشیه گرد شده – 5 پیکسل

حاشیه گرد شده – 8 پیکسل

حاشیه گرد شده – 12 پیکسل

 

جلسه بعد 

جلسه قبل

5/5 - (2 امتیاز)
برچسب ها
خواندن این مطلب 4 دقیقه زمان میبرد

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا