آموزش CSS بخش پنجم

خب تا الان با شکل کلی دستورات CSS و چگونگی اون آشنا شدید. از الان سعی می کنم کلیه دستورات مربوط به یک خاصیت رو بذارم.

از خاصیت border شروع می کنیم. border یا همون کادر می تونه دور پاراگراف ها و بخش ها بیاد. border چند خاصیت رو می تونه بپذیره :

border-top, border-left, border-right, border-bottom

برای تعیین خواص مربوط به کادر بالا و پایین و چپ و راست هست که هر کدوم خواص دیگه ای به شرح زیر می گیرن :

style, width, color

خاصیت style به صورت زیر مقادیری رو می پذیره :

This is a none border style sample in css

This is a solid border sample style in css

This is a dashed border sample style in css

This is a dotted border sample style in css

This is a double border sample style in css

This is a groove border sample style in css

This is a hidden border sample style in css

This is a inset border sample style in css

This is a outset border sample style in css

This is a ridge border sample style in css

none کادر نمایش داده نمیشه.

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

dashed به صورت نقطه چین بزرگ نمایش میده.

dotted به صورت نقطه چین کوچک نمایش میده.

double به صورت 2کادری یا 2 خطی نمایش میده.

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

hidden مثل none هست و نمایش داده نمیشه.

inset به صورت گودی و تو رفته نمایش میده.

outset به صورت برجسته با سایه زیاد تر نمایش میده.

ridge به صورت برجسته با سایه کمتر نشون میده.

<p style="border-style:none">This is a none border style sample in css</p>
<p style="border-style:solid">This is a solid border sample style  in css</p>
<p style="border-style:dashed">This is a dashed border sample style  in css</p>
<p style="border-style:dotted">This is a dotted border sample style  in css</p>
<p style="border-style:double">This is a double border sample style  in css</p>
<p style="border-style:groove">This is a groove border sample style  in css</p>
<p style="border-style:hidden">This is a hidden border sample style  in css</p>
<p style="border-style:inset">This is a inset border sample style  in css</p>
<p style="border-style:outset">This is a outset border sample style  in css</p>
<p style="border-style:ridge">This is a ridge border sample style  in css</p>

خاصیت width مقادیر ی رو به صورت زیر می پذیره :

This is a usual solid border style sample in css

This is a thin solid border sample style in css

This is a medium solid border sample style in css

This is a thick solid border sample style in css

This is a 10px width solid border sample style in css

thin کادر رو بصورت نازک نمایش میده.

medium متوسط و thick ضخیم و همچنین می تونید خودتون برحسب پیکسل عرض کادرتون رو مشخص کنید.

<p style="border-style:solid">This is a usual solid border style sample in css</p>
<p style="border-style:solid;border-width:thin;">This is a thin solid border sample style  in css</p>
<p style="border-style:solid;border-width:medium;">This is a medium solid border sample style  in css</p>
<p style="border-style:solid;border-width:thick;">This is a thick solid border sample style  in css</p>
<p style="border-style:solid;border-width:10px;">This is a 10px width solid border sample style  in css</p>

خاصیت color که رنگ ها رو بر اساس rgb به صورت هگزادسیمال یا مبنای 16 می پذیره و رنگ کادر رو تعیین می کنه :

This is a green solid border sample style in css

<p style="border-color:#0f0;">This is a green border sample style in css</p>

شما می تونید مثل کد زیر برای هر کدوم از خطوط کادرتون یک خاصیت جداگانه به کار ببرید:

This is a customize border sample style in css

  <p style="border-style:solid;
  border-left-style:hidden;
  border-right-style:hidden;
  border-top-style:solid;
  border-top-color:#0f0;
  border-bottom-color:#00f;
  border-bottom-width:5px;">This is a customize border sample style in css</p>