اطراف

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

از مثال‌های صفحات قبلی مشاهده کردید که می‌توان کادرهای مختلفی را برای هر طرف (هر ضلع کادر) مشخص کرد.[۱]

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

1 p {
2   border-top-style: dotted;
3   border-right-style: solid;
4   border-bottom-style: dotted;
5   border-left-style: solid;
6 }


مثال بالا نتیجه‌ای مشابه با مثال پایین دارد:

مثال
p {
  border-style: dotted solid;
}


بنابراین، نحوه کار به صورت زیر است:

اگر ویژگی border-style دارای چهار مقدار باشد:
  • کادر بالایی به صورت نقطه چین است
  • کادر سمت راست به صورت solid است
  • کادر پایین به صورت double است
  • کادر سمت چپ خط چین است
border-style: dotted solid double dashed;
اگر ویژگی border-style دارای سه مقدار باشد:
  • کادر بالایی به صورت نقطه چین است
  • کادرهای سمت راست و چپ از نوع solid هستند
  • کادر پایین از نوع double است
border-style: dotted solid double;
اگر ویژگی border-style دو مقدار داشته باشد:
  • کادرهای بالا و پایین از نوع نقطه چین هستند
  • کادرهای راست و چپ نیز از نوع solid هستند
border-style: dotted solid;
اگر border-style فقط دارای یک مقدار باشد:
  • تمامی چهار جهت از نوع نقطه چین هستند
border-style: dotted;


مثال
 1 /* Four values */
 2 p {
 3   border-style: dotted solid double dashed;
 4 }
 5 
 6 /* Three values */
 7 p {
 8   border-style: dotted solid double;
 9 }
10 
11 /* Two values */
12 p {
13   border-style: dotted solid;
14 }
15 
16 /* One value */
17 p {
18   border-style: dotted;
19 }


ویژگی border-style در مثال بالا استفاده شده‌است. با این حال، این ویژگی با ویژگی‌های border-width و border-color نیز کار می‌کند.


منابع آموزشی