Border – خلاصه نویسی دستورات CSS

راهنمای خلاصه نویسی دستورات CSS برای Border


امیر سروری ۲ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت جمعه, ۲۷ام خرداد , ۱۳۹۰ 8151 بازدید

خلاصه نویسی دستورات CSS – Border


Border properties – خواص و توانایی های Border

element {

  border-width: number+unit;

  border-style: (numerous);

  border-color: color || #hex || (rgb / % || 0-255);

}

the border shorthand property – توانایی های Border به صورت خلاصه نویسی شده

element {

  border: border-width border-style border-color;

}

example – مثال


p {

  border: 10px solid #ddd;

}

تعیین نکردن مقادیر برای Border در خلاصه نویسی می تواند وضعیت های متفاوتی را به وجود آورد که در زیر به آنها خواهیم پرداخت



p {

  border: solid #ddd;

}

نکته

در مثال بالا مقدار ضخامت Border مشخص نشده است . در صورت تعیین نشدن ضخامت Border به صورت پیش فرض مقدار ۳px برای آن تعیین می گردد .



p {

  border:5px solid;

}

نکته

در مثال بالا مقداری برای رنگ Border تعیین نشده است . در صورت تعیی نشدن رنگ Border به صورت پیش فرض مقدار Black برای آن در نظر گرفته می شود .


p {

  border:dashed;

}

نکته

با توجه به مثال بالا در صورت تعیین نشدن مقادیر برای رنگ و اندازه ضخامت Border به ترتیب مقادیر Black و ۳px برای آنها جایگذاری خواهند شد .



p { border:10px red; }

p { border:10px; }

p { border:red; }

نکته

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


با توجه به قوانین موجود در CSS ممکن است در تعیین رنگ پیش فرض ( Black ) مشکلات خاصی به وجود آید . در زیر به بررسی نکاتی در همین مورد خواهیم پرداخت

p {

  border:dotted;

  color:red;

}

در مثال بالا رنگ پیش فرض برای Border با توجه به مقدار رنگ تعیین شده برای p قرمز – red – خواهد بود


body {

  color:blue;

}

body p {

  border:5px solid;

}

در مثال بالا مقدار رنگ پیش فرض با توجه به رنگ تعیین شده برای body آبی – blue – خواهد بود



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۲ دیدگاه برای این نوشته ثبت شده است


  1. مجتبي
    ۷ تیر ۱۳۹۰

    با سلام
    من میخوام تو البوم تصاویر دور هر عکس یه کادر بندازم از کد زیر استفاده کردم

    .imgborder {
    border : 1px solid #000000
    }

    اما یه جایی خوندم برای اینکه مجبور نباشیدبه همه تک های img کلاس بالا رو نسبت بدین یه id تعریف کنین

    #album img {
    border :1px solid #000000}

    و دستور فوق به تمامی تک های img داخل این id اثر میکنه اگه ممکنه این موضوع id رو توضیح بدی ممنون میشم ؟




    • امیر سروری
      ۷ تیر ۱۳۹۰

      مجتبی @ برای اینکه مجبور نباشی به تک تک img ها border و کلاس بدی میتونی همه این Img i ها رو داخل یک div بزاری و به اون div کلاس بدی ( در اینجا من کلاس imageWraper استفاده کردم ) . بعد با استفاده از گزینشگرهای تو در تو در CSS می تونی به تمامی img های زیر مجموعه دسترسی پیدا کنی .

      کلاسش هم به این صورت میشه


      .imageWraper img {border:1px solid #ddd;}



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.