آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش CSS Border

خاصیت Border در CSS

خاصیت های Border به شما این مکان را می دهند که style، اندازه و رنگ حاشیه ی یک المان را تغییر دهید.

توجه داشته باشید که هیچ یک از خاصیت های Border تا زمانی که خاصیت Border-style مقداردهی نشده باشند، تاثیری نخواهند داشت.

مقادیر Border-style

  • None:هیچ حاشیه ای تعریف نمی شود.
  • Dotted:حاشیه ی نقطه چین تعریف می کند.
  • Dashed:حاشیه ی خط چین تعریف می کند.
  • Solid:یک حاشیه با خط ممتد رسم می کند.
  • Double:دو خط حاشیه تعریف می کند.
  • Groove:یک خط حاشیه ی سه بعدی نمایش می دهد که در آن خطوط بالایی و سمت چپ پررنگ تر از خطوط دیگر هستند.
  • Ridge:در این حالت خطوط حاشیه به صورت سه بعدی و با طیف رنگی نمایش داده می شوند.
  • Inset:این مقدار یک حاشیه ی داخلی سه بعدی تعریف می کند که در آن معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگر هستند.
  • Outset:حاشیه ی سه بعدی خارجی تعریف می کند که در آن خطوط پایینی و سمت راست دارای سایه و تیره تر از خطوط دیگر هستند.

ضخامت حاشیه( (Border width

با استفاده از خاصیتBorder-widthمی توان ضخامت خط حاشیه را تنظیم کرد.

عرض ((widthیا بر حسب پیکسل تنظیم می شود و یا با بهره گیری از سه مقدار از پیش تعریف شده ی thin، medium و thick.

توجه:

خاصیت "Border-width "زمانی که به تنهایی بکار برده می شود، کار خاصی انجام نمی دهد. ابتدا باید به وسیله ی خاصیت "Border-style "خطوط حاشیه را مقدار دهی (تنظیم) کنید.

مثال:

نمونه یک

        p.one {
            border-style: solid;
            border-width: 5px;
        }

        p.two {
            border-style: solid;
            border-width: medium;
        }
امتحان کنید

رنگ خط حاشیه ( (Border color

خاصیتborder-colorبه منظور تنظیم و مقداردهی رنگ خط حاشیه مورد استفاده قرار می گیرد.

رنگ خط حاشیه را می توان با مقادیر زیر تنظیم کرد.

  • Name-اسم رنگ دلخواه را مشخص می کند، مانند " red ".
  • RGB-یک مقدار RGB (red blue green) تعریف می کند.
  • Hex-یک مقدار شانزده شانزدهی(hex)مانند "#ff0000" مشخص می کند.

همچنین می توان رنگ پس زمینه را شفاف "transparent " انتخاب کرد.

چنانچه رنگ خط حاشیه مقداردهی نشده باشد،border رنگ خود را از خاصیت colorمربوطه به ارث می برد.

توجه:

خاصیت "border-color "اگر به تنهایی بکار گرفته شود، هیچ اثری نخواهد داشت. بدین معنا که شما باید در مرحله ی اول با استفاده از خاصیت "border-style "، خطوط حاشیه را مقداردهی کنید.

مثال:

نمونه دو

        p.one {
            border-style: solid;
            border-color: red;
        }

        p.two {
            border-style: solid;
            border-color: #98bf21;
        }
امتحان کنید

تعریف حاشیه به صورت مجزا برای هر طرف در CSS

این امکان وجود دارد که برای حاشیه ی هر طرف ظاهری متفاوت تعریف کرد (برای هر طرف یک حاشیه ی متفاوت داشت).

مثال:

نمونه سه

        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-style: dotted solid double dashed; 
                        

حاشیه ی بالایی نقطه چین می شود.

حاشیه ی سمت راست عنصر با خطی معمولی کشیده می شود.

حاشیه ی پایین با دو خط نمایش داده می شود.

حاشیه ی سمت چپ خط چین می شود.

                       
                 border-style: dotted solid double;
                 

حاشیه سمت بالا نقطه چین می شود.

حاشیه های سمت راست و چپ با خط معمولی ترسیم می شوند.

حاشیه ی سمت پایین دو خطه می شود.

                                   
                border-style: dotted solid;
                 

حاشیه های سمت بالا و پایین نقطه چین می گردند.

حاشیه های سمت راست و چپ با خطی معمولی کشیده می شوند.

            
                    border-style: dotted;
                

هر چهار حاشیه با خطی معمولی تعریف می شوند.

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

Border-Shorthand

همان طور که در مثال های فوق مشاهده می کنید، خاصیت های مختلفی وجود دارند که در برخورد و کار با خطوط حاشیه باید به آن ها توجه داشت.

به منظور کاهش اندازه ی کد (مختصر نویسی یا بهینه نوشتن کد)، همچنین می توان تمامی خاصیت های جداگانه را در یک خاصیت واحد تعریف کرد. این خاصیت را مختصر نویسی کد یا همان short-hand property می نامند.

خاصیت ذکر شده در واقع فشرده یا خلاصه ی خاصیت های مجزای زیر است.

         
                        border-width
                        border-style (الزامی)
                        border-color            
                     
مثال:

نمونه پنج

        p {
            border: 5px solid red;
        }
امتحان کنید

تمامی خاصیت های مربوط به خطوط حاشیه در CSS

شرح
خاصیت
کلیه ی خصوصیت های border را در تنها یک تعریف (declaration) ، تنظیم می کند
boarder
تمامی خصوصیت های خط حاشیه ی پایین (bottom border) را در یک تعریف تنظیم می کند; در برگيرنده خواص کلی خط حاشيه برای خط حاشيه پايين عنصر به صورت يک خاصيت چند مقداری است
boarder-bottom
رنگ حاشیه ی سمت پایین (پایین عنصر) را تنظیم می کند
boarder-bottom-color
style خط حاشیه ی پایین عنصر را تعریف می کند
border-bottom-style
ضخامت یا پهنای خط حاشیه ی عنصر سمت پایین را تنظیم می کند
border-bottom-width
رنگ خط حاشیه های هر چهار سمت را تعیین می کند
border-color
تمامی خصوصیت های خط حاشیه ی سمت چپ را در تعریفی واحد (تنها یک تعریف) تنظیم می کند
border-left
رنگ خط حاشیه ی سمت چپ (عنصر) را تعیین می کند
border-left-color
مقدار دهی به style خط حاشیه ی سمت چپ
border-left-style
ضخامت یا پهنای خط حاشیه ی سمت چپ را تنظیم م مقداردهی می کند
border-left-width
تمامی خصوصیت های خط حاشیه ی سمت راست را تعیین می کند
border-right
رنگ خط حاشیه ی سمت راست را تعیین می کند
border-right-color
سبک دهی (style) خط حاشیه ی سمت راست را مقداردهی می کند
border-right-style
پهنای خط حاشیه ی سمت راست را تنظیم می کند
border-right-width
سبک دهی (style) خط حاشیه ی هر چهار طرف را تنظیم می کند
border-style
کلیه ی خصوصیت های حاشیه ی سمت بالای عنصر را در یک تعریف مقداردهی می کند
border-top
رنگ خط حاشیه ی سمت بالا را تنظیم می کند
border-top-color
Style (سبک دهی) خط حاشیه ی سمت بالا را تنظیم می کند
border-top-style
ضخامت خط حاشیه ی سمت بالا را تنظیم می کند
border-top-width
پهنای خط حاشیه ی هر چهار طرف را تنظیم می کند
border-width
  • 3486
  •    2188
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .