طراحی سایت | طراحی اسلایدر | خدمات سئو | سئو وبسایت | خدمات طراحی وبسایت | پشتیبانی وبسایت |
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

Border ها در CSS

Border ها در CSS:

Border در CSS، این امکان را را برای ما فراهم میکند که خطوط حاشیه ای را برای عناصر HTML ایجاد کنیم. نه تنها میتوان این خطوط را ایجاد کرد بلکه حتی نوع استایل، پهنا و رنگ خطوط را نیز میتوان تعیین کرد.در این قسمت با نحوه ی به کارگیری صفت Border آشنا میشویم.

صفات Border در CSS:

صفات border در زبان CSS به شما اجازه خواهند داد که استایل، پهنا و رنگ یک border از یک عنصر را تعیین کنید.

در عناصر مشخص شده در پایین، هرکدام از عناصر به روشی متفاوت از صفت Border ها در CSS استفاده کرده اند :

صفت border-style:

یکی دیگر ازصفات Border ها در css ،صفت border-style است که نوع border را برای نمایش مشخص میکند. مقادیر زیر برای این صفت استفاده میشود :

  • dotted – یک border با استایل نقطه ای
  • dashed – یک border با استایل خطوط فاصله
  • solid – یک border با استایل خط مستقیم
  • double – یک border با استایل دو خط مستقیم
  • groove – یک border سه بعدی با استایل grooved. نوع اثر آن بستگی به مقدار صفت border-color دارد.
  • ridge – یک border سه بعدی با استایل ridge. نوع اثر آن بستگی به مقدار صفت border-color دارد.
  • inset – یک border سه بعدی با استایل inset. نوع اثر آن بستگی به مقدار صفت border-color دارد.
  • outset – یک border سه بعدی با استایل outset. نوع اثر آن بستگی به مقدار صفت border-color دارد.
  • none – بدون border
  • hidden – یک border پنهان

صفت border-style میتواند شامل یک تا چهار مقدار باشد (برای border بالایی، border سمت راست، border پایینی، border سمت چپ).

                 {;p.dotted {border-style: dotted
                 {;p.dashed {border-style: dashed
                   {;p.solid {border-style: solid
                 {;p.double {border-style: double
                 {;p.groove {border-style: groove
                   {;p.ridge {border-style: ridge
                   {;p.inset {border-style: inset
                 {;p.outset {border-style: outset
                     {;p.none {border-style: none
                 {;p.hidden {border-style: hidden
{;p.mix {border-style: dotted dashed solid double

و نتیجه به شکل زیر خواهد بود:

نکته: بدون مقداردهی صفت border-style هیچکدام از صفات border ایی که در ادامه فصل توضیح داده خواهد شد، تاثیری نخواهند داشت.

صفت Border-width:

صفت border-width پهنای هر چهار border (بالا، راست، پایین، چپ) را مشخص میکند.

پهنا میتواند به عنوان یک اندازه ی مشخص تنظیم شود (in px, pt, cm, em, etc). و یا به وسیله ی یکی ازسه مقدار پیشفرض تعیین شده مقدار دهی شود : thin , medium , thick

در نمونه مثال زیر نحوه ی مقداردهی صفت border-width با مقادیر مختلف نشان داده شده است :

                             } p.one 
               ;border-style: solid
                 ;border-width: 5px
                                   {
                             } p.two 
               ;border-style: solid
              ;border-width: medium
                                   {
                           } p.three 
              ;border-style: dotted
                 ;border-width: 2px 
                                   {
                           } p.three
              ;border-style: dotted
               ;border-width: thick
                                   {
                                   

صفت Border-color:

صفت border-color برای تنظیم رنگ هر چهار border (بالا، راست، پایین، چپ) استفاده میشود.

رنگ میتواند به وسیله ی مقادیر زیر تعیین شود :

  • یک نام معتبر برای یک رنگ – مانند “red”
  • یک مقدار هگزادسیمال – مانند “ff0000#”
  • یک مقدار RGB – مانند “(rgb(255,0,0”

اگر مقدار border-color تنظیم نشود از رنگ عنصر به عنوان رنگ پیشفرض استفاده میکند.

در نمونه مثال زیر نحوه ی مقداردهی border-color با یک یا چند مقدار مشخص شده است :

                               } p.one 
                 ;border-style: solid
                   ;border-color: red
                                     {
                               } p.two 
                 ;border-style: solid
                 ;border-color: green
                                     {
                             } p.three
                 ;border-style: solid
 ;border-color: red green blue yellow
                                     {

Border – تعیین نوع border برای هر سمت به طور جداگانه:

در CSS صفتی وجود دارد که به استفاده از آن میتوان برای هر سمت از یک عنصر نوع border را مشخص نمود.مثال :

                              } p 
       ;border-top-style: dotted
      ;border-right-style: solid
    ;border-bottom-style: dotted
       ;border-left-style: solid
                                {

نتیجه:

نمونه کد بالا را میتوان به شکل زیر هم نوشت که هیچ تفاوتی در نتیجه ی تولید شده ندارد :

                            } p 
   ;border-style: dotted solid
                              {

اما نمونه کدهای بالا چطور کار میکنند :

اگر صفت border-style دارای چهار مقدار باشد :

  • border بالایی از نوع dotted است
  • border سمت راست از نوع solid است
  • border پایینی از نوع double است
  • border سمت چپ از نوع dashed است

اگر صفت border-style دارای سه مقدار مقدار باشد : 

  • border بالایی از نوع dotted است
  • border سمت چپ و راست از نوع solid هستند
  • border پایینی از نوع  double است

 اگر صفت border-style دارای دو مقدار باشد :

  • border بالایی و پایینی از نوع dotted هستند
  • border سمت چپ و راست از نوع solid هستند

  اگر صفت border-style دارای یک مقدار باشد :

هر چهار border از نوع dotted میباشند

                           /* Four values */
                                         } p 
  ;border-style: dotted solid double dashed
                                           {
                          /* Three values */
                                         } p
         ;border-style: dotted solid double
                                           {
                            /* Two values */
                                         } p
                ;border-style: dotted solid
                                           {
                             /* One value */
                                         } p
                      ;border-style: dotted
                                           {

در مثال های بیان شده در بالا از صفت border-style استفاده شده است. با این حال ترتیب مقداردهی برای جهات مختلف در عناصر border-width و border-color نیز یکسان است.

Border – صفت کوتاه شده:

همانطور که در مثال های بالا دیدید برای تعیین یک border ساده نیاز به مقداردهی چندین صفت از نوع border داریم. برای کوتاه نویسی در کد این امکان وجود دارد که تمام صفات ذکر شده را در یک صفت جمع کنیم. این صفات عبارت اند از :

  • border-width
  • border-style
  • border-color 

که میتوان به شکل زیر آنها را در یک خط نوشت :

                        } p
    ;border: 5px solid red
                          {

 نتیجه عبارت است از :

در مثال بالا مقادیر استفاده شده برای هر چهار border اعمال میشوند اما میتوان این مقادیر را بر روی یک سمت هم به کار برد :

border سمت چپ :

                               } p
      ;border-left: 6px solid red
     ;background-color: lightgrey
                                 {
                              } p
   ;border-bottom: 6px solid red
    ;background-color: lightgrey
                                {

صفت border-radius:

از صفت border-radius برای ایجاد border های گرد (دارای گوشه های گرد) استفاده میشود :

                        } p
    ;border: 2px solid red
       ;border-radius: 5px
                          {
دیدگاه‌های نوشته

Share via
ارسال این به یک دوست