مرزبندی در css

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

اطلاعات بیشتر در مورد مرزها

مرزبندی در CSS مقادیر متعددی را برای مرزها در یک اعلامیه تعریف می کند.

مثال زیر دارای سه مقدار است ، عرض ، سبک و رنگ. خواهید دید که حاشیه اطراف یک عنصر <p> آبی ، نقطه ای و ضخامت 3 پیکسل خواهد بود.

p {
   border: 3px dotted blue;
}

توجه: اگر مقادیر را از خلاصه مقاله حذف کنید ، مرز مقادیر پیش فرض آن خواص را می گیرد.

مقادیر پیش فرض موارد زیر است:

• عرض حاشیه: متوسط.
• border-color: (رنگ فعلی عنصر).
• border-style: مقدار پیش فرض ندارد.

هشدار: بدون مقادیر برای سبک حاشیه ، خلاصه نوشتاری حاشیه کار نمی کند.

این مثال کد ، روش استاندارد استفاده از مختصر حاشیه CSS را نشان می دهد:

h1 {
   border: 5px solid red;
}
a {
   border: 2px solid green; 
}

مرز برای ایجاد چهار مرز یکسان که یک عنصر را احاطه کرده اند مناسب است. برای ایجاد حاشیه های منحصر به فرد ، باید با استفاده از ویژگی های زیر هر حاشیه را جداگانه سبک کنید:

Description	Property
ویژگی مختصر برای همه ویژگی های سبک حاشیه بالا	border-top
ویژگی مختصر برای همه ویژگی های سبک حاشیه سمت راست	border-right
ویژگی مختصر برای همه ویژگی های سبک حاشیه پایین	border-bottom
ویژگی مختصر برای همه ویژگی های سبک حاشیه چپ	border-left

نکته: از مرز برای تنظیم منحصر به فرد تصویر نمی توان استفاده کرد. از این خاصیت جدا استفاده کنید.

در مثال زیر ، از ویژگی نوشتاری حاشیه سمت چپ و رنگ زمینه استفاده می کنیم.

p {
   border-left: 3px solid green;
   background-color: grey;
}

سبک مرزبندی در CSS

ویژگی به سبک حاشیه چگونگی نگاه به چهار خط مرزی را تعیین می کند.

ویژگی می تواند هر یک از مقادیر زیر را داشته باشد:

توجه: وجود یک حاشیه سبک ترکیبی امکان پذیر است.

آخرین خط در مثال زیر نشان می دهد که ترکیب سبک های مختلف حاشیه CSS برای یک عنصر آسان است.

p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.inset {border-style: inset;}
p.ridge {border-style: ridge;}
p.dashed {border-style: dashed;}
p.dotted {border-style: dotted;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
p.none {border-style: none;}
p.mixed {border-style: groove dotted solid dashed;}

مثال بعدی نشان می دهد که خصوصیت به سبک حاشیه می تواند از یک تا چهار مقدار سبک حاشیه HTML داشته باشد: بالا ، راست ، پایین ، چپ.

p.none {
   border-style: none;
}

p.dotted {
   border-style: dotted;
}

p.mixed {
   border-style: dotted dashed solid double;
}

• اگر دو مقدار اضافه کنید ، CSS فرض می کند که اولین مقدار مربوط به بالا و پایین و مقدار دوم مربوط به راست و چپ است.
• اگر سه مقدار اضافه کنید ، CSS فرض می کند که مقدار اول برای بالا ، دومی برای راست و چپ و سوم برای دیوار پایین است.
• اگر چهار مقدار اضافه کنید ، این ترتیب است: بالا ، راست ، پایین و چپ.

عرض حاشیه

خاصیت عرض حاشیه ضخامت حاشیه های CSS را تعیین می کند.

توجه: هر دو پارامتر خاص (مانند pt ، cm ، px ، em) و مقادیر از پیش تعریف شده (مانند ضخیم ، متوسط یا نازک) با این ویژگی کار می کنند.

ویژگی عرض حاشیه می تواند مقادیری داشته باشد که ضخامت حاشیه را برای هر چهار طرف به یکباره تعریف کند. همچنین می تواند ضخامت حاشیه را برای هر دیواره جداگانه حاشیه (بالا ، راست ، چپ ، پایین) تعیین کند.

مثال زیر نشان می دهد که عرض حاشیه چگونه بر ظاهر مرزها تأثیر می گذارد:

• CSS عرض حاشیه اول را با کلمه کلیدی نازک تعریف می کند.
• مورد دوم دارای مقدار مشخصی است (3 پیکسل).
• مورد آخر دارای مقادیر مختلفی برای هر دیوار است.

p.thin {
   border-width: thin;
   border-style: solid;
}

p.inpix {
   border-width: 3px;
   border-style: solid;
}

p.mix {
   border-width: 2px 5px 4px 5px;
   border-style: solid;
}

• اگر دو مقدار اضافه کنید ، CSS فرض می کند که مقدار اول مربوط به دیوارهای افقی (بالا و پایین) و دیگری برای دیوارهای عمودی (راست و چپ) است.
• اگر سه مقدار اضافه کنید ، CSS مقادیر اول را برای بالا ، دومی را برای راست و چپ و سوم را برای دیواره پایین فرض می کند.
• اگر چهار مقدار اضافه کنید ، مقادیر با این ترتیب اعمال می شوند: بالا ، راست ، پایین و چپ.

رنگ لبه

رنگ حاشیه رنگ ها را برای حاشیه ها تعیین می کند. حاشیه CSS می تواند مقادیری در قالب های زیر داشته باشد:

• کلمات کلیدی – نام رنگی مانند آبی
• HEX – ارزش هگزادسیمال مانند # 0000FF
• RGB – مقدار آبی سبز قرمز مانند rgb (0 ، 0 ، 255)
• HSL – رنگ ، اشباع و سبک بودن مانند hsl (0 ، 50٪ ، 50٪)

مرزبندی شفاف

توجه: همچنین می توانید از ویژگی border-color برای تعیین رنگ حاشیه CSS برای هر دیوار حاشیه به طور جداگانه با استفاده از بالا ، چپ ، راست و پایین استفاده کنید.

در مثال زیر ، می توانید نحوه تعریف رنگ حاشیه را با استفاده از شاخص های مختلف رنگ CSS مشاهده کنید:

• مورد اول دارای یک کلمه کلیدی رنگی سیاه است.
• مورد دوم با ارزش HEX # E9385A.
• مورد آخر برای هر دیوار جداگانه نام رنگی مشخص شده است.

p {
   border-color: black;
   border-style: solid;
}

p.hex {
   border-style: solid;
   border-color: #e3985a;
}

p.mix {
   border-color: red green blue orange;
   border-style: solid;
}

• دو مقدار: مقدار اول مربوط به بالا و پایین و مقدار دوم مربوط به راست و چپ است.
• سه مقدار: CSS فرض می کند که اولین مورد برای بالا ، دوم برای راست و چپ و سوم برای دیوار پایین است.
• چهار مقدار: بالا ، راست ، پایین و چپ.

شعاع مرزی

ویژگی border-radius حاشیه های گرد شده را به عنصر HTML اضافه می کند.

در مثال زیر ، ما از یک حاشیه استفاده می کنیم و عرض (2 پیکسل) ، سبک (جامد) ، رنگ (# e9385a #) و شعاع حاشیه (5 پیکسل) را اختصاص می دهیم.

p {
   border: 2px solid #e9385a;
   border-radius: 5px;
}

شعاع مرزی می تواند از یک تا چهار مقدار داشته باشد:

• یک مقدار شعاع را به هر چهار گوشه تنظیم می کند.
• دو مقدار: اولی در گوشه های بالا و پایین و راست اعمال می شود ، دومی در گوشه های بالا و راست و پایین و چپ اعمال می شود.
• سه مقدار: مقدار دوم بالا راست و پایین چپ را تنظیم می کند.
• چهار مقدار به این ترتیب شعاع اعمال می کنند: گوشه های بالا چپ ، بالا راست ، پایین راست ، پایین سمت چپ.

توجه: می توانید مقادیر را با هر یک از شاخص های خاص مانند pt ، cm ، px ، em یا استفاده از مقادیر درصد از 0 to تا 100 تعریف کنید. پیش فرض 0 است.

مرزهای فردی در CSS

برای مشخص کردن هر سبک حاشیه به صورت جداگانه ، از ویژگی های زیر استفاده کنید:

• به سبک مرزی – چپ
• سبک حاشیه درست
• سبک حاشیه ای
• سبک حاشیه-پایین

در مثال زیر ، یک عنصر <p> حاشیه اختصاص می دهیم. با استفاده از خصوصیات یک ظاهر طراحی حاشیه ، دیوارهای عمودی (چپ و راست) را جامد و دیواره های افقی (بالا و پایین) را نقطه چین می کنیم.

p {
   border-right-style: solid;
   border-left-style: solid;
   border-bottom-style: dotted;
   border-top-style: dotted; 
}

خلاصه مرزبندی CSS:

• مرزهای CSS شبیه رئوس مطالب هستند. بزرگترین تفاوت این است که رئوس مطالب هیچ فضایی را اشغال نمی کنند زیرا خارج از محتوای عناصر است.
• با تعریف مرزها در CSS با یک اعلامیه ، کدی تولید می کنید که مدیریت آن آسان تر است.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.