+- انجمن های تخصصی فلش خور (http://www.flashkhor.com/forum)
+-- انجمن: رایانه (http://www.flashkhor.com/forum/forumdisplay.php?fid=27)
+--- انجمن: آموزش رایانه و اینترنت (http://www.flashkhor.com/forum/forumdisplay.php?fid=60)
+--- موضوع: آموزش کار با حاشیه ها یا Borders در CSS (/showthread.php?tid=296876)
آموزش کار با حاشیه ها یا Borders در CSS - Mohlek - 11-05-2021
سایت آموزشی فری لرن
خانه آموزش 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>