آموزش مقدماتی CSS خواص مقدماتی (خطوط حاشیه) – جلسه چهارم

در جلسه قبل از آموزش css در مورد نحوه استایل دهی به پس زمینه عناصر  که در حقیقت همان خاصیت background بود آشنا شدید ، در این پست خاصیت‌های خطوط حاشیه عناصر در css را بررسی خواهیم کرد .

 

تعیین خطوط حاشیه عناصر در css با استفاده از خاصیت border

 

خاصیت border :

با استفاده از مجموعه خواص border در css ، می توان برای بیشتر عنصرهای HTML خطوط حاشیه تعیین کرد ک این خطوط به دور یک عنصر در چهار جهت بالا ، پایین ، راست و چپ کشیده می شوند . این مجموعه در یک خاصیت اصلی به نام  border قرار دارد که در ادامه ویژگی های خواص border را بحث خواهیم کرد ، این ویژگی ها شامل لیست زیر می باشند :

  • border-width
  • border-style
  • border-color
  • border-top
  • border-right
  • border-bottom
  • border-left
نام خاصیت مفدار قابل  قبول توضیحات
border-width thin
medium
thick
length
توسط این خاصیت می توان ضخامت خطوط حاشیه را در css به وسیله یکی از حالت های زیر تعیین کرد :
thin : خطوط حاشیه نازک
medium : خطوط حاشیه متوسط
thick :  خطوط حاشیه ضخیم
length : صخامت خطوط حاشیه  بر حسب واحدی مثل پیکسل ( pixel ) یا نقطه ( pt ) تعیین می‌شود
border-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
تعیین کننده حالت  خطوط حاشیه در css می‌باشد که می‌تواند در یکی از حالات زیر باشد :
none : بدون خطوط حاشیه
hidden : خطوط حاشیه مخفی
dotted : خطوط حاشیه نقطه‌ نقطه
dashed : خطوط حاشیه بریده بریده
solid : خطوط حاشیه معمولی
doubled : خطوط حاشیه دو خطی
groove : خطوط حاشیه ۳D با خطوط بالایی و سمت چپ پر رنگ تر
ridge : خطوط حاشیه ۳D با طیف رنگی
inset : خطوط حاشیه ۳D با خطوط بالایی و سمت چپ دارای سایه و تیره تر از سایر خطوط
outset : خطوط حاشیه ۳D با خطوط پایینی و سمت راست دارای سایه و تیره تر از سایر خطوط
border-color نام رنگ
(r,g,b)
عدد هگزادسیمال
تعیین کننده رنگ خطوط حاشیه در css است . رنگ میتواند به روش های زیر تعیین شود :

  1. نام رنگ مثل blue یا red .
  2. تعیین رنگ به وسیله تابع rgb به صورت زیر :
    ( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb
  3. نعیین رنگ به صورت عددی ترکیبی در مبنای ۱۶ هگزادسیمال :
    میزان رنگ آبی میزان رنگ سبز میزان رنگ قرمز #

 

یک مثال ساده برای گفته های بالا :

< div style="border-width:medium; border-style:dashed; border-color:#77C6BD" > 
مثال خطوط حاشیه
< /div > 

 

خروجی مثال :

مثال خطوط حاشیه

خطوط حاشیه برای هر عنصر در ۴ جهت بالا ، راست ، پایین و چپ می‌تواند به صورت جدا که می‌تواند به روش خاصیت چند مقداری یا خاصیت تک مقداری تعیین شوند

  • روش اول :هر یک از خواص border-color , border-width , border-style در css معرفی شده در قسمت بالا می توانند خصوصیات ۴ جهت خطوط حاشیه به دور یک عنصر را به صورت کامل در قالب یک خاصیت به شرح زیر دریافت کنند :
    border- style : خط بالاstyle   خط راستstyle   خط پایینstyle   خط چپstyle
    border- width : خط بالاwidth   خط راستwidth   خط پایینwidth   خط چپwidth
    border- color : خط بالاcolor   خط راستcolor   خط پایینcolor   خط چپcolor 
    
  • روش دوم :

    هر یک از خواص فوق را می توان به صورت تک مقداری ،  مقدار دهی کرد . مجموعه خواص جدول زیر در برگیرنده کلیه صفات ممکن برای خطوط ۴ گانه هستند :

نام خاصیت توضیحات
border-right در برگیرنده خواص کلی خط حاشیه برای خط حاشیه سمت راست عنصر به صورت یک خاصیت چند مقداری است

border-right : [ border-right-width] [ border-right-style ] [ border-right-color ]

border-top در برگیرنده خواص کلی خط حاشیه برای خط حاشیه بالای عنصر به صورت یک خاصیت چند مقداری است

border-top : [ border-top-width] [ border-top-style ] [ border-top-color ]

border-bottom در برگیرنده خواص کلی خط حاشیه برای خط حاشیه پایین عنصر به صورت یک خاصیت چند مقداری است

border-bottom : [ border-bottom-width] [ border-bottom-style ] [ border-bottom-color ]

border-left در برگیرنده خواص کلی خط حاشیه برای خط حاشیه سمت چپ عنصر به صورت یک خاصیت چند مقداری است

border-left : [ border-left-width] [ border-left-style ] [ border-left-color ]

border-right-color تعیین کننده رنگ خط حاشیه سمت راست عنصر
border-top-color تعیین کننده رنگ خط حاشیه بالای عنصر
border-bottom-color تعیین کننده رنگ خط حاشیه پایین عنصر
border-left-color تعیین کننده رنگ خط حاشیه سمت چپ عنصر
border-right-style تعیین کننده style خط حاشیه سمت راست عنصر
border-top-style تعیین کننده style خط حاشیه بالای عنصر
border-bottom-style تعیین کننده style خط حاشیه پایین عنصر
border-left-style تعیین کننده style خط حاشیه سمت چپ عنصر
border-right-width تعیین کننده پهنای خط حاشیه سمت راست عنصر
border-top-width تعیین کننده پهنای خط حاشیه بالای عنصر
border-bottom-width تعیین کننده پهنای خط حاشیه پایین عنصر
border-left-width تعیین کننده پهنای خط حاشیه سمت چپ عنصر
نگارش و انتشار توسط میلاد صادقیان

فعال در زمینه های : برنامه نویسی پویا تحت ویندوز ، طراحی رابط کاربری UI ، توسعه و طراحی وب

دیدگاه شما

ایمیل شما نزد ما محفوظ خواهد بود.