آموزش CSS (بخش چهارم)

مرزها (Borders) در css :

خصوصیات border در CSS به شما اجازه می دهد که style، اندازه و رنگ مرز یک عنصر را مشخص کنید.

نکته : دقت کنید که هیچ کدام از خاصیت های Border تا زمانی که خاصیت Border-style را مقداردهی نکرده باشید، تاثیری نخواهند داشت.

خاصیت های border:

Border Style

مقدار این خصوصیت border مشخص می کند چه نوع مرزی برای نمایش شکل آن بکار برده شود، که شامل مقادیر زیر می باشند:

• None دراین حالت هیچ مرزی تعریف نمی شود.
• Solid یک خط مرزی ممتد رسم می کند.
• Dotted یک مرز نقطه چین تعریف می کند.
• Dashed یک مرزخط چین تعریف می کند.
• Double یک مرز دو خطی ایجاد می کند.
• Groove یک مرز سه بعدی ایجاد می کند که در آن خطوط بالایی و سمت چپ پررنگ تر ازخطوط دیگر هستند.
• Ridge در این حالت خطوط مرزی به صورت سه بعدی و با طیف رنگی نمایش داده می شوند.
• Inset این مقدار یک مرز داخلی سه بعدی تعریف می کند که در آن معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگر هستند.
• Outset این مقدار یک مرز سه بعدی خارجی تعریف می کند که در آن خطوط پایینی و سمت راست دارای سایه و تیره تر از خطوط دیگر هستند.

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;}

ضخامت حاشیه مرزی (Border Width)

با استفاده از این خاصیت می توانید ضخامت خط مرزی را تعیین کنید. عرض خط مرزی را می توان به عنوان یک اندازه مشخص (توسط px، pt، cm، em، و غیره) یا با استفاده از یکی از سه مقدار از پیش تعیین شده: thin ، medium و thick تنظیم کرد. خاصیت border-width می تواند از یک تا چهار مقدار (برای مرز بالا(top)، مرز راست(right)، مرز پایین(bottom) و مرز چپ(left)) داشته باشد.

p.one {
   border-style: solid;
   border-width: 5px;
}
p.two {
   border-style: solid;
   border-width: medium;
}
p.three {
   border-style: dotted;
   border-width: 2px;
}
p.four {
   border-style: dotted;
   border-width: thick;
}
p.five {
   border-style: double;
   border-width: 15px;
}
p.six {
   border-style: double;
   border-width: thick;
}
p.seven {
   border-style: solid;
   border-width: 2px 10px 4px 20px;
}

رنگ خط مرزی Border Color

خاصیت border-color برای تنظیم و مقداردهی رنگ خط مرزی مورد استفاده قرار می گیرد، که می توان توسط استفاده از نام رنگ (مثلا red)، تعیین مقدار RGB (مانند rgb(255,0,0) ) و یا توسط مقدار دهی HEX (مانند #ff0000) آن را تنظیم کرد.

خاصیت border-color می تواند از یک تا چهار ارزش (برای مرز بالا(top)، مرز راست(right)، مرز پایین(bottom) و مرز چپ(left)) داشته باشد.

p.one {
   border-style: solid;
   border-width:3px;
   border-color: red;
}
p.two {
   border-style: solid;
   border-width:3px;
   border-color: green;
} 
p.three {
   border-style: solid;
   border-width:3px;
   border-color: red green blue yellow;
} 

تعریف مرز به صورت مجزا برای هر طرف

از مثال های بالا دیده شده است که ممکن است مرز دیگری برای هر طرف مشخص شود(برای هر طرف یک مرزی متفاوت داشت). در CSS، برای مشخص کردن هر یک از مرزها (بالا، راست، پایین و سمت چپ) نیز ویژگی هایی وجود دارد:

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

۲ different border styles.

خاصیت border-style می تواند از یک تا چهار مقدار را داشته باشد:

border-style: dotted solid double dashed;

• مرز بالایی نقطه چین می شود.
• مرز سمت راست عنصر با خطی معمولی کشیده می شود.
• مرز پایین با دو خط نمایش داده می شود.
• مرز سمت چپ خط چین می شود.

border-style: dotted solid double;

• مرز سمت بالا نقطه چین می شود.
• مرزهای سمت راست و چپ با خط معمولی ترسیم می شوند.
• مرز سمت پایین دو خطه می شود.
  
  

border-style: dotted solid;

• مرزهای سمت بالا و پایین نقطه چین می گردند.
• مرزهای سمت راست و چپ با خطی معمولی کشیده می شوند.
  
  

border-style: dotted;

هر چهار حاشیه با خطی معمولی تعریف می شوند.

خاصیت Border-Shorthand

همانطور که می توانید از مثال های بالا مشاهده کنید، در هنگام برخورد با مرزها، ویژگی های زیادی وجود دارد. به منظور کاهش اندازه ی کد (مختصر نویسی یا بهینه نوشتن کد)، می توان تمامی خاصیت های جداگانه را در یک خاصیت واحد تعریف کرد. این خاصیت را مختصر نویسی کد یا همان short-hand property می نامند.

• border-width
• border-style (الزامی )
• border-color
•  

p {
   border: 5px solid red;
}

شما همچنین می توانید تمام خصوصیات مرزی فرد را فقط برای یک طرف مشخص کنید:

p {
   border-left: 6px solid red;
}

گرد کردن گوشه های خطوط مرزی Rounded Borders

ویژگی border-radius برای اضافه کردن مرزهای گرد به یک عنصر استفاده می شود:

p {
   border: 2px solid red;
}
p {
   border: 2px solid red;
   border-radius: 5px;
}
p {
   border: 2px solid red;
   border-radius: 8px;
}
p {
   border: 2px solid red;
   border-radius: 12px;
}