آموزش کار با مرزها borders در CSS

بازدید: 428 بازدید
کار با مرزها در CSS

مرزها borders خطوطی هستند که اطراف المان های شما را در برمی گیرند. شما می توانید از این خطوط برای محاصره یک المان در یخش مورد نظرتان صفحه و یا جدا کردن بخشی از متن از سایر بخش ها، یا رسم خطوط با اندازه و شکل دلخواه استفاده کنید. در ادامه این آموزش ، نحوه ی کار با مرزها borders در css ، در حالت های مختلف به شما آموزش داده می شود. همراه ما باشید.

با سلام خدمت شما همراهان گرامی سایت پرنیان طرح

امروز قصد داریم کار با مرزها borders در css را به شما آمورش دهیم. css به شما اجازه می دهد که در اطراف المان های خود، خطوطی که با عنوان border یا مرز نامیده می شوند رسم کنید. همچنین می توانید فقط یک خط صاف رسم کنید و اندازه و ضخامت آنرا تعیین کنید، صاف و پیوسته و یا مُقطع بودن آنرا تعیین کنید و رنگ آن را تغییر دهید. لبه های آنها را گرد کنید و یا یک طرف مرز را ضخیم تر کنید. برای این کار کافیست کدهایی که در ادامه می آیند را در قسمت کدهای css و برای المان مورد نظر خودتان وارد کنید.

شما می توانید کد رنگ ها را از اینجا مشاهده و استفاده کنید.

 

border style

این خاصیت در css به شما کمک می کند که نوع مرز را تعیین کنید. منظور ما از نوع مرز، همان شکل مرز یعنی صاف و مقطع بودن یا سه بعدی بودن و سایر ویژگی های ظاهری خطوط است.

مقادیری که برای این خاصیت مرز معتبر هستند به همراه تصویر آنها و کد cssدر ادامه آموزش داده می شود.

 

  • dotted: این حالت یک مرز نقطه نقطه را دور یک پاراگراف ترسیم می کند.

[php]
p.dotted {border-style: dotted;}
[/php]

مرز نقطه ای
مرز نقطه ای

 

  • dashed: این حالت یک مرز با خطوط کوتاه را دور یک پاراگراف  ترسیم می کند.

[php]
p.dashed {border-style: dashed;}
[/php]

مرز با خطوط کوتاه
مرز با خطوط کوتاه

 

  • solid: این حالت یک مرز با خط ساده و پیوسته را دور یک پاراگراف  ترسیم می کند.

[php]
p.solid {border-style: solid;}
[/php]

خط ساده
خط ساده

 

  • double: این حالت یک مرز با خط ساده و پیوسته را به صورت دوخط ، دور یک پاراگراف  ترسیم می کند.

[php]
p.double {border-style: double;}
[/php]

مرز ساده دو خط
مرز ساده دو خط

 

  • groove: این حالت یک مرز سه بعدی گود (فرورفته) را دور یک پاراگراف  ترسیم می کند. مقدار وضوح سه بعدی بودن آن بودن بستگی به مقدار borde-color یا رنگ مرز دارد.

[php]
p.groove {border-style: groove;}
[/php]

مرز سه بعدی
مرز سه بعدی
  • ridge: این حالت یک مرز سه بعدی برجسته را دور یک پاراگراف  ترسیم می کند.مقدار وضوح سه بعدی بودن آن بودن بستگی به مقدار borde-color یا رنگ مرز دارد.

[PHP]
p.ridge {border-style: ridge;}
[/PHP]

مرز سه بعدی برجسته
مرز سه بعدی برجسته

 

  • inset: این حالت یک مرز سه بعدی برجسته را دور یک پاراگراف  ترسیم می کند.مقدار وضوح سه بعدی بودن آن بودن بستگی به مقدار borde-color یا رنگ مرز دارد. مرز از سمت بالا و چپ سایه دارد.

[PHP]
p.inset {border-style: inset;}
[/PHP]

مرز برجسته با سایه از چپ و بالا
مرز برجسته با سایه از چپ و بالا
  • outset: این حالت یک مرز سه بعدی برجسته را دور یک پاراگراف  ترسیم می کند.مقدار وضوح سه بعدی بودن آن بودن بستگی به مقدار borde-color یا رنگ مرز دارد. مرز از سمت پایین و راست سایه دارد.

[PHP]
p.outset {border-style: outset;}
[/PHP]

  • none: یک باکس بدون مرز دور المان مورد نظر شما تعریف می کند.

[PHP]
p.none {border-style: none;}
[/PHP]

باکس بدون مرز
باکس بدون مرز

 

  • hidden: یک باکس با مرزهای پنهان دور پاراگراف تعیین می کند.

[PHP]
p.hidden {border-style: hidden;}
[/PHP]

باکس با مرز پنهان

باکس با مرز پنهان

  • mix : شما می توانید در CSS برای ایجاد یک مرز ، در ضلع های مختلف از حالت ها STYLEهای مختلف موجود که در بالا آموزش داده شد استفاد کنید.برای این کار کافیست کد زیر را با حالت های دلخواه خود در قسمت کدهای CSSوارد کنید.

[PHP]
p.mix {border-style: dotted dashed solid double;}
[/PHP]

مرز با استایل های مختلف
مرز با استایل های مختلف

در ادامه با ویژگی های دیگر BORDER آشنا خواهید شد. شما می توانید با استفاده از هریک از این ویژگی ها، مرزها BORDERهای سفارشی شده خودتان را با حالت های دلخواه ایجاد کنید.

ویژگی border-width

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

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

border-width همچنین، امکان تعیین مقادیر زیر را برای شما فراهم می کند.

top border                  مرز بالایی

right border                مرز راست

bottom border            مرز پایین

left border                  مرز چپ

در کدهای زیر مثال هایی از موارد گفته شده را مشاهده می کنید:

کدهای زیر را در بخش کدهای cssوارد کنید:

[php]
p.one {
border-style: solid;
border-width: 5px;
}
[/php]

حالا کدهای زیر را در بخش کدهای html وارد کنید:
[php]
<“p class=”one>
Some text

[/php]

نتیجه کار، شکل زیر خواهد بود:

نمونه سفارشی شده
نمونه سفارشی شده

 

یک مثال دیگر

مانند مثال قبل ابتدا کدهای زیر را در بخش css وارد کنید:

[php]
p.seven {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
[/PHP]
و کدهای زیر را در بخش html وارد کنید:

[php]
<“p class=”seven>
Some text

[/php]

نتیجه کار، شکل زیر را خواهد بود:

نمونه 2
نمونه 2
ویژگی BORDER-COLOR

این ویژگی به شما در تعیین رنگ اضلاع مرز کمک می کند. شما می توانید از سه روش HEX و RGB و COLOR NAME برای تعین رنگ مرز استفاده کنید. نحوه استفاده و کار با رنگ ها را اینجا مطالعه کنید. همچنین می توانید از این لینک تمامی کد رنگ ها را برای تمامی روش های مقدار دهی مطالعه کنید.

BORDER-COLOR هم مانند BORDER-STYLE به شما اجازه می دهد تا برای هر یک از اضلاع مرز، رنگ متفاوتی را در نظر بگیرید.

مانند مثال های قبل ابتدا کدهای زیر را در بخش CSS وارد کنید:

[PHP]
p.one {
border-style: solid;
border-color: red;
}
[/PHP]

و در نهایت کد زیر را در بخش HTML وارد کنید:

[PHP]
<“p class=”one>
A solid red border

[/PHP]

نتیجه ، شکل زیر خواهد بود:

رنگ قرمز
رنگ قرمز

 

میخواهم بیشتر بدانم.

دسته بندی آموزش css
اشتراک گذاری
مقالات مرتبط

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

سبد خرید

هیچ محصولی در سبد خرید نیست.