آموزش کار با حاشیه ها یا Borders در CSS

[Mohlek]

سایت آموزشی فری لرن
خانه آموزش CSS آموزش CSS مقدماتی
آموزش CSSآموزش CSS مقدماتی
آموزش کار با حاشیه ها یا Borders در CSS
توسط صادق اسدی - ۱۳۹۸-۰۶-۲۰
مرتبط با این آموزشآموزش های بیشتر

آموزش CSS مقدماتی
آموزش نحوه اولویت بندی عناصر در CSS

آموزش CSS مقدماتی
آموزش کامل واحدهای اندازه گیری در CSS

آموزش CSS مقدماتی
آموزش کار با منوها یا Navigation Bar در CSS

آموزش CSS مقدماتی
آموزش کامل Image Sprites در CSS

آموزش CSS مقدماتی
آموزش کامل ترازبندی متن ها در CSS + انواع ترفند
آموزش کار با حاشیه ها یا Borders در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با حاشیه ها یا Borders در CSS با من همراه باشید.

آموزش کار با حاشیه ها یا Borders در CSS

Free-Learn
آنچه در این جلسه میخوانید : [مخفی کن]

1 کار با حاشیه ها یا Borders در CSS
2 آموزش ویژگی border-style در CSS
3 ویژگی border-width در CSS
4 ویژگی border-color در CSS
5 خلاصه نویسی ویژگی های CSS
کار با حاشیه ها یا Borders در CSS
حاشیه یا بوردر یا به انگلیسی Border به یک خط به دور لبه های یک عنصر گفته می شود، این ویژگی دارای چندین حالت می باشد که این حالت ها به شرح زیر می باشد :

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

یعنی میتونیم بفرض مثال برای لبه بالا یک نوع شکل و اندازه و رنگ مشخص کنیم و برای لبه پایین یک نوع دیگه، پس میخوام بگم که بدونید میشه برای هر ۴ جهت استایل تعریف کرد.

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

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

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
مثال : در مثال زیر از تمامی مقادیر بالا استفاده شده است.


<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>