آموزش CSSآموزش طراحی سایت

Border در CSS

در ادامه آموزش CSS با دستورات مربوط به ساختارلایه ها و باکس ها آشنا خواهید شد. توسط دستورات ساختار و لایه بندی باکس ها در  css می‌توانید ظاهر کلیه عناصری را که در صفحه HTML مورد استفاده قرار داده‌اید، تغییر دهید. شما می‌توانید حاشیه ها، ساختار خطوط بیرونی، فاصله از لبه داخلی باکس را به  هر آنچه  که مد نظر شماست ، توسط این دستورات تغییر دهید. در بخش اول از این دسته آموزش ، به بررسی حاشیه(Border) میپردازیم و دستورات را مورد برسی قرار میدهیم.

 

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

  • حاشیه (Border) (این پست)
  • خطوط بیرونی (Outline)
  • فاصله از لبه بیرونی باکس (Margin)
  • فاصله از لبه داخلی باکس (Padding)

 

خاصیت 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;
 }

 

اینم بخون، جالبه
استایل Link در CSS

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

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

Name -اسم رنگ دلخواه را مشخص می کند، مانند ” red”

RGB -یک مقدار red blue green) RGB )  تعریف می کند.

Hex- یک مقدار شانزده شانزدهی(hex) مانند “#ff0000” مشخص می کند

 نکته : چنانچه رنگ خط حاشیه مقداردهی نشده باشد، 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

اینم بخون، جالبه
استایل background در CSS

 

p {

border: 5px solid red;

}

خب این قسمت از آموزش برنامه نویسی به اتمام رسید، در بخش های آینده از مباحث آموزش CSS به مباحث دیگر این زبان می پردازیم. و شما میتوانید لیست این دوره را در سایدبار مشاهده نمایید. با ما همراه باشید .

 

Border در CSS
امتیاز 5 از 1 رای
برچسب ها

پوریا آریافر

اولین کسب و کار آنلاین خودم را در فیسبوک راه‌اندازی کردم و در سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال را داشتم. سپس وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت را دریافت کردم، در دوران خدمت سربازی مسئول بهینه سازی یک وبسایت خبری معتبر شدم و آشنایی با سئو را آموختم و در سال ۲۰۱۴ توانستم به رتبه ۴۰۰ الکسا نزدیک کنم. برخلاف میل درونی، وارد دانشگاه شدم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، در همان سال بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو را داشتم، که فروختم تا بتوانم تمرکز را فقط بر روی سئو بگذارم، فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌می‌گیرد، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کرده‌ام. در همه ابزارهای گوگل به جز adwords تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری را یادگیری و یاددادن می‌دانم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شده، می‌تواند چنین بستر مناسبی را فراهم کند. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم ...

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره رایگان سئو