hody.ir

css html border14_border در css | هودی | آموزشای متنی

14_border در css

css

با سلام در این جلسه از دوره css به کار با border ها پرداختیم

Border ها دستورات مختص به خودشون رو در CSS دارا هستن.

 وظیفه Border در CSS، به وجود آوردن حاشیه و مرز برای عناصر است.

پس اگر به دنبال جواب نحوه کادر بندی در html بودید، فکر کنم حالا به جوابتون رسیدید که با استفاده از CSS می‌تونیم این کار را در صفحات HTML انجام بدیم.

به طور کلی با border ما یک خط مانند دیوار میکشیم و آن متنی که با html نوشتیم وارد یک چهار ضلعی میشود ( حالا یکی میاد میگه لوزی که نمیشه 🙂

بعد از اون ما باید اندازه و ضخامت border رو مشخص کنیم

خواص border

  • ‌border-style نوع حاشیه رو مشخص می‌کنه.
  • border-color رنگ حاشیه رو مشخص می‌کنه.
  • ‌border-width ضخامت حاشیه رو مشخص می‌کنه.
  • border تمام کار ها رو یک جا انجام میده. (این خاصیت ها به خاصیت های shorthand معروفن و کار چندین خاصیت رو در یک خاصیت جا می‌دن).
  • border-image به جای رنگ زدن حاشیه، روی اون عکس قرار می‌ده.

نوع حاشیه (border-style)

این خاصیت، می‌تونه مقادیر زیر رو قبول کنه:

None: هیچ حاشیه ای تعریف نمیشه. ( فرقی با فرانخوندن border-style نداره )

 Dotted: حاشیه به شکل نقطه چین تعریف می‌کنه.

 Dashed: حاشیه به شکل خط چین تعریف می‌کنه.

 Solid: حاشیه به شکل خط ممتد تعریف می‌کنه.

Double: حاشیه به شکل دو خط موازی و روی هم تعریف می‌کنه.

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

 Ridge: در این حالت خطوط حاشیه به صورت سه بعدی و با طیف رنگی نمایش داده می شن.

 Inset: این مقدار یک حاشیه ی داخلی سه بعدی تعریف می‌کنه که در اون معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگه هستن.

 Outset: حاشیه ی سه بعدی خارجی تعریف می‌کنه که در اون خطوط پایینی و سمت راست دارای سایه و تیره تر از خطوط دیگه هستن.

ضخامت حاشیه (border-width)

 border-width با این خاصیت از css میتوانیم ضخامت خط حاشیه رو تعیین کنیم

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

این خاصیت برای تنظیم و مقدار دهی استفاده میشه همانطور که در آموزش های قبل هم گفتم میتونیم از همان سه نوع رنگ استفاده کنیم

RGB , HEX ,HSL

خاصیت border یا border-shorthand

در تعریف خاصیت ها گفتیم که این خاصیت، تمام کار ها رو یک جا انجام میده! و واقعا هم همینطوره.

ما می‌تونیم بدون تعریف کردن border-style، border-width و border-color، تنها با خاصیت border، یک حاشیه کامل برای عنصرمون تعریف کنیم.

اینو هم بگم کهدر اینجا هم، اولین قدم برای ساختن حاشیه، مشخص کردن نوع حاشیه هست و در صورت انجام ندادن این کار، حاشیه ای تعریف نمی کنه.

به مثال زیر توجه کنید

p {
   border: 5px solid red;
}

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

فرض کنین که ما به حاشیه ای نیاز داریم که دارای مرز های متفاوت باشه.

برای مثال مرز چپ یک شکل و مرز پایین یک شکل دیگه داشته باشه.

برای این منظور، می‌تونیم از این دو روش استفاده کنیم:

شکستن خاصیت ها

تو این روش، می‌تونیم خاصیت های مورد نظرمون رو متناسب با هر کدوم از طرف های border بشکنیم.

به مثال زیر که تو اون، border-style رو شکوندیم توجه کنین:

p {
   /* --- استایل حاشیه بالا --- */
   border-top-style: dotted;
   /* --- استایل حاشیه راست --- */ 
   border-right-style : solid;
   /* --- استایل حاشیه پایین --- */ 
   border-bottom-style: dotted;
   /* --- استایل حاشیه چپ --- */ 
   border-left-style: solid;
}

همونطور که می‌بینین، تونستیم به هر کدوم از طرفین حاشیه، استایل متفاوتی رو اختصاص بدیم.

استفاده از مقادیر متوالی

با این روش، بدون شکستن خاصیت مورد نظر، کافیه مقادیر مورد نظرمون رو به صورت متوالی وارد کنیم.

برای نمونه، استایل دهی مثال قبل رو، تو اینجا فقط با یک خاصیت و چند مقدار انجام دادیم:

p {
   /* --- استایل تمامی حاشیه ها --- */ 
   border-style: dotted solid; 
}

حالا این مقدار دهی چطور کار می‌کنه؟ کافیه به مثال های زیر توجه کنین:

مقدار دوگانه :

p{
   border-style: dotted solid;
   border-color:#23282d;
   border-width:3px;
}

خاصیت border-style در اینجا، دو مقدار رو قبول کرده.

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

border-style: [حاشیه چپ و راست] [حاشیه بالا و پایین];

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

مقدار سه گانه :

p{
   border-style: dotted solid double;
   border-color:#99D9EA;
   border-width:3px;
}

این خاصیت، سه مقدار رو قبول کرده. الگوی سه مقدار به شکل زیر خواهد بود:

border-style: [حاشیه پایین] [حاشیه چپ و راست] [حاشیه بالا];

بنابراین داریم:

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

مقدار چهارگانه :

p{
   border-style: dotted solid double dashed;
   border-color:#99D9EA;
   border-width:3px;
}

تو این کد، خاصیت border-style چهار خاصیت رو قبول کرده. الگوی چهار خاصیت به شکل زیر خواهد بود:

border-style: [حاشیه چپ] [حاشیه پایین] [حاشیه راست] [حاشیه بالا];

با توجه به الگوی بالا داریم:

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

حالت پیشفرض :

p{
   border-style: dotted;
   border-color:#23282d;
   border-width:3px;
}

نتیجه

در اینجا حالت پیش فرض و تک مقدار اولیه رو داریم. الگوی این حالت به شکل زیره:

border-style:[تمام حاشیه ها];

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

خاصیت های border-color و border-width رو هم می‌تونیم مانند مثال های بالا، تغییر بدیم و مقدار دهی کنیم.

تعریف انحنا برای گوشه عناصر

در این بخش میخوام یاد بدم که چطور میتونیم برای گوشه عناصرمون انحنا و خمودگیبه وجود بیاریم

ما در تعریف انحنا، بر خلاف تعریف border، با چپ، راست، بالا و پایین روبرو نیستیم. بلکه سمت های ما عبارت خواهد بود از:

  • top-left: بالا چپ
  • top-right: بالا راست
  • bottom-right: پایین راست
  • bottom-left: پایین چپ

تعریف انحنا برای عناصر، می‌تونه توسط دو روش انجام بگیره:

  • استفاده از خاصیت های مجزا
  • استفاده از خاصیت border-radius

مقدار مورد قبول این خاصیت ها، دقیقا مثل border، می‌تونه بر حسب پیکسل و درصد بیان بشه.

استفاده از خاصیت های مجزا

خاصیت های مجزایی که به ما برای تعریف انحنا کمک می‌کنن، عبارت هستن از:

  • border-top-left-radius: انحنای گوشه ی بالا چپ عنصر
  • border-top-right-radius: انحنای گوشه ی بالا راست عنصر
  • border-bottom-left-radius: انحنای گوشه ی پایین چپ عنصر
  • border-bottom-right-radius: انحنای گوشه ی پایین راست عنصر

به مثال زیر توجه کنید

تو مثال بالا، گوشه های بالا چپ، و پایین چپ، به شکل منحنی تغییر کردن.

فقط اینکه تصاویر بالا نتیجه کد هست اما من با paint درست کردم ولی اگر کد پایین رو بزنید و در مرورگر باز کنید مانند تصویر بالا خواهد بود

برای بدست آوردن نتیجه بالا، از کد زیر می‌تونیم استفاده کنیم:

div{
   /* --- گوشه بالا سمت چپ --- */
   border-top-left-radius: 30px;
   /* --- گوشه بالا سمت راست --- */
   border-bottom-left-radius: 30px;
}

استفاده از خاصیت border-radius

این خاصیت، خاصیت کوتاه شده یا shorthand property خاصیت های مجزا به حساب میاد.

توسط این خاصیت، می‌تونیم چندین انحنای مختلف رو فقط با یک دستور تعریف کنیم.

مقدار دهی به این خاصیت، در چهار حالت مختلف، می‌تونه اتفاق بیفته:

مقدار چهار گانه:

در این حالت، خاصیت border-radius، چهار حالت قبول می‌کنه.

الگوی قبول این چهار حالت، به فرم زیر خواهد بود:

border-radius: [بالا چپ]  [بالا راست]  [پایین راست]  [پایین چپ];

مقدار سه گانه:

در حالت سه گانه، به خاصیت border-radius، سه مقدار اختصاص می‌دیم.

الگوی قبول خاصیت، به فرم زیر خواهد بود:

border-radius: [بالا چپ]  [بالا راست | پایین چپ]  [پایین راست];

حالت دو گانه:

در این حالت، خاصیت مورد نظر ما پذیرای دو مقدار خواهد بود.

این دو مقدار، طبق الگوی زیر نوشته می‌شن:

border-radius: [بالا چپ | پایین راست]  [بالا راست | پایین چپ];

حالت پیش فرض

حالت پیشفرض، عمومی ترین حالتی هست که مورد استفاده قرار می‌گیره.

در این حالت، خاصیت border-radius تنها یک مقدار قبول می‌کنه:

border-radius: [تمام گوشه ها];

تعریف دایره

یکی دیگه از قابلیت های خاصیت border-radius، اینه که می‌تونیم با کمک اون شکل هایی مثل دایره و یا بیضی بسازیم.

این عملیات، توسط مقدار های درصدی انجام می‌شه.

برای ساختن شکل دایره از کد زیر استفاده میکنیم

div.circle{
   padding:40px;
   border-radius: 50%;
}

و برای ساخت بیضی از کد زیر

div.ellipse{
width:100px;
border-radius: 50%;
padding:40px;

دایره سازی عناصر مورد نظر با دستور border-radius:50% انجام می‌شه.

نکته: خاصیت width برای بیضی سازی عنصر دوم به کار رفته. در مورد این خاصیت تو مقاله عرض و ارتفاع در میزفا بیشتر مطالعه کنین.

نکته: دایره زمانی شکل می‌گیره که عرض و ارتفاع عنصر مورد نظر با هم برابر باشن.

به علت کبود زمان نتونستم مثال های تصویری براتون بگذارم در روز های آینده میگذارم و در جلسات بعدی دوره css اطلاع خواهم داد ممنون که تا اینجا همراهیمون کردید خدانگهدار

اگر سوالی داشتید میتونید در گروه html css در تلگرام بپرسید

4 1 vote
Article Rating
Subscribe
اطلاع از
guest
0 Comments
Inline Feedbacks
View all comments