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

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


امیر سروری ۲ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت جمعه, 17th ژوئن , 2011 11446 بازدید

خلاصه نویسی دستورات 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. مجتبي
    28 ژوئن 2011

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

    .imgborder {
    border : 1px solid #000000
    }

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

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

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




    • امیر سروری
      28 ژوئن 2011

      مجتبی @ برای اینکه مجبور نباشی به تک تک 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]



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

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