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

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


امیر سروری 2 دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت Friday, 17th June , 2011 13600 بازدید

خلاصه نویسی دستورات 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 به صورت پیش فرض مقدار 3px برای آن تعیین می گردد .



p {

  border:5px solid;

}

نکته

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


p {

  border:dashed;

}

نکته

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



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 – خواهد بود



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

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


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


  1. مجتبي
    28 June 2011

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

    .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]



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

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