آموزش برنامه نویسی CSS به زبان ساده جلسه (3)

آموزش برنامه نویسی CSS به زبان ساده جلسه (3)

CSS Border
در CSS خصوصیات Border را می توانید تنظیم نمایید. برای مثال می توانید رنگ Border، نوع آن، عرض و ارتفاع را تنظیم نمایید.
نوع Border شامل گزینه های زیادی می شود. در زیر انواع Border توضیح داده شده است:
1- Dotted
این گزینه Border را به صورت نقطه نقطه نمایش می دهد.
2- dashed
این گزینه Border را به صورت قطعه قطعه نمایش می دهد.
3- solid
این گزینه Border را به صورت ساده و پیش فرض نمایش می دهد.
4- double
این گزینه Border را به صورت دو خط نمایش می دهد.
5- groove
این گزینه Border را به صورت شیار نمایش می دهد.
6- Hidden
این گزینه Border را مخفی می نماید.

Border Width
این گزینه عرض Border را مشخص می نماید.

Border Color
این گزینه رنگ Border را مشخص می نماید.

Border - Individual Sides
می توان هر طرف از Border را به نوعی نمایش داد. برای مثال کد زیر را مشاهده نمایید:

شما می توانید هر طرف Border را به صورت جداگانه تنظیم نمایید. برای این کار باید از خصوصیات border-left، border-bottom، border-Top و border-Right استفاده نمایید.

Rounded Borders
شما می توانید بجای استفاده از Border پیش فرض تنظیماتی را بر روی آن اعمال نمایید که اندکی با نوع پیش فرض آن متفاوت باشد.
برای مثال می توانید گوشه های Border را گرد نمایید. برای این کار از خصوصیت border-radius استفاده می نماییم و مقدار آن را عدد قرار می دهیم.

هرچه عدد border-radius بزرگتر باشد گوشه های Border گردتر می شوند.

CSS Margins
با این خصوصیت فضای اطراف عناصر را می توانید کنترل نمایید. با این گزینه تنظیم حاشیه از راست، چپ، پایین و بالا قابل انجام است.
margin-top : فاصله عنصر از بالا را تعیین می نماید.
margin-right: فاصله عنصر از راست را تعیین می نماید.
margin-bottom : فاصله عنصر از پایین را تعیین می نماید.
margin-left: فاصله عنصر از چپ را تعیین می نماید.

راه کوتاهتری نیز برای کد نویسی این قسمت امکان پذیر است بدین صورت که تنها مقادیر مربوط به این خصوصیات را می نویسید.

عدد اول برای فاصله از بالا، عدد دوم برای فاصله از راست، عدد سوم برای فاصله از پایین و عدد چهارم برای فاصله از چپ است.