با سلام خدمت شما همراهان گرامی سایت پرنیان طرح
امروز قصد داریم کار با مرزها 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]
نتیجه کار، شکل زیر را خواهد بود:
ویژگی 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]
نتیجه ، شکل زیر خواهد بود: