• صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Search
Close this search box.
۰ تومان 0 Cart
  • ورود
  • ثبت نام
Menu
  • ورود
  • ثبت نام
Search
Close this search box.
۰ تومان 0 Cart
Menu
  • ورود
  • ثبت نام
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما

آموزش رایگان CSS – جلسه 7

تیر 30, 1400
نویسنده حامد نجفی
HTML-CSS ، برنامه نویسی
212 بازدید
آموزش رایگان css- جلسه 7| border در CSS

در این جلسه قصد داریم به ویژگی حاشیه ها یا border در CSS بپردازیم و با انواع آنها و کاربردهایشان آشنا شویم. با ما تا پایان همراه باشید.

در جلسه ی ششم با پس زمینه ها ( Background ) و نحوه ی استفاده از آنها در CSS آشنا شدیم, اگر این جلسه را مطالعه نکرده اید می توانید از لینک قرار داده شده به آن دسترسی داشته باشید.

border در CSS چیست؟

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

 

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

 

می خواهیم دیوار بکشیم!!!!!!

کاربرد حاشیه یا Border ها دقیقا مانند دیوار کشیدن دور چیزی است. شما عناصر <p> و <div> را در نظر بگیرید. تصور کنید که می خواهیم دور آنها دیوار یا همان Border بکشیم.

خب این دیوار باید ضخامت خاص و رنگ و یا حتی تصویر خاصی داشته باشد. همه ی این ویژگی ها با استفاده از Border ها امکان پذیر است.

 

آموزش رایگان css- جلسه 7| border در CSS
آموزش رایگان CSS- جلسه 7| border در CSS

خواص کاربردی border ها

 

همانطور که گفتیم border ها امکان تعیین رنگ, ضخامت و حتی شکل حاشیه ها را به ما میدهند, اما چطور؟

  • border-style ؛ این ویژگی نوع حاشیه را مشخص می کند.
  • border-width ؛ میزان ضخامت را مشخص می کند.
  • border-color ؛ رنگ حاشیه با این ویژگی تعیین میشود.
  • border-image ؛این ویژگی به جای رنگ کردن حاشیه به آن یک تصویر دلخواه اختصاص می دهد.
  • border-radius ؛این ویژگی باعث می شود که گوشه های عناصر انحنا داشته باشند.

خب حالا بریم ببینیم که از هر کدام از این ویژگی ها را چطور می توانیم استفاده کنیم.

border-style

در زبان CSS هر عنصر را میتوان از چهار جهت اصلی استایل دهی کرد. یعنی از هر چهار جهت بالا,پایین, چپ و راست میتوان یک استایل متفاوت تعریف کرد.

با استفاد ه از border-style میتوان شکل, نوع و طرح حاشیه ی عنصر مورد نظر را تعریف کرد.
border-style می تواند مقادیر زیر را قبول کند. در جدول زیر میتوانید ببینید هر مقدار چه کاربردی دارد؛

 

None

استفاده از این ویژگی باعث میشود هیچ حاشیه ای تعریف نشود یعنی فرقی با فرانخوندن border-style ندارد.

Dotted

این ویژگی حاشیه ها را به شکل نقطه چین تعریف می کند.

Dashed

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

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

Double

حاشیه به شکل دو خط موازی و روی هم قرار می گیرند
Groove

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

Ridge

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

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

Outset

این ویژگی حاشیه ی سه بعدی خارجی تعریف می‌کند
hidden

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

 

آموزش رایگان css- جلسه 7| border در CSS
آموزش رایگان CSS- جلسه 7| border در CSS

به این نکته دقت کنید که برای داشتن حاشیه ی برای یک عنصر باید در ابتدا ویژگی border-style را تعریف کنیم. یعنی اگر border-style نداشته باشیم نمی توانیم خط, رنگ یا هر چیز دیگر برای آن تعریف کنیم.

به مثال زیر نگاه کنید. سعی کردیم از تمامی این ویژگی ها برای آن استفاده کنیم؛

<style>

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;}/*به ترتیب برای بالا ، راست ، پایین و چپ استایل دهی می شود*/
</style>

 

کلاس mix ترکیبی از border-style ها است که می توانید از چند border-style برای یک عنصر استفاده کنید.

border-width

ضخامت خط حاشیه با این خاصیت تعیین میشود. عرض مورد نظر را می توان به دو صورت زیر تعریف کرد؛

  1. با استفاده از مقادیر و واحدهایی مانند px ، pt ، em ، cm و … مثلا 7px
  2. یا با تعریف مقادیر thin, medium, thick

مثال زیر را ببینید؛

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

p.two {
border-style: dotted;
border-width: medium;
}

می توانید برای هر یک از جهات مقادیر متفاوتی درنظر بگیرید مانند؛

p. {
border-style: solid;
border-width: 7px 2px 5px 0px;
}

 

border-color

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

همانطور که در جلسه ی قبل گفتیم رنگ ها را میتوان به سه شکل زیر برای عناصر و ویژگی ها تعیین کرد؛

  1.  نام رنگ – مانند “red“
  2.  هگزادسیمال – مانند “fff#“
  3.  یک مقدار RGB – مانند “(255,0,0) rgb“
  4.  مقدار hsl- مانند “hsl(0deg 100% 50%)“

مثال؛

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

p.two {
border-style: dotted;
border-width: medium;
border-color: #98bf21;
}
div {
border-style: ridge;
border-width: 4px;
border-color: rgb(170, 50, 220);

}

border-image

همانطور که اشاره کردیم  border-image امکان این کار را برای ما فراهم می کند تا به جای استفاده از رنگ, از تصاویر دلخواه برای حاشیه ها استفاده کنیم. به عنوان نمونه مثال زیر را در نظر بگیریرد؛

مثال؛

از این تصویر به عنوان تصویر border استفاده می کنیم.

اموزش رایگان CSS- جلسه 14| تصاویر در CSS<div id=”myDIV”>
استفاده از تصویر برای حاشیه
</div>
<style>
#myDIV {
border: 15px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
</style>

نتیجه کد بالا تصویر زیر است؛

برای درک بهتر border-image از ابزار زیر استفاده کنید.

Border Image Generator

 

برای آشنایی بیشتر با ویژگی های مختلف  border-image منتظر جلسات آینده‌ی آموزش CSS باشید.🧐

border-radius

با اضافه کردن این ویژگی گوشه های عناصر منحنی میشوند و از حالت تیزی خارج میشوند نحوه ی استفاده از آن نیز به صورت زیر میباشد.

مثال؛

img
{
border-radius : 20px;
}

div
{
background: red;
color: #fff;
border: 4px solid #fdcc18;
border-radius: 10px 0 20px 5px;
}

p
{
background: #8dccd6;
color: #05589e;
padding: 17px;
border: 8px double #18befd;
border-radius: 20px/60px;
}

اگر می خواهید به یکی از گوشه ها انحنا بدهید از ویژگی border-radius به صورت border-top-left-radius استفاده کنید که بامشخص کردن جهت ها گوشه ی مورد نظر را انتخاب می کند.

خلاصه یا کوتاه نویسی

با هدف کم کردن فضای اشغال شده از توضیحات یا کاهش حجم فایل CSS مورد نظر بهتر است که تمامی این ویژگی ها را در یک خط و به صورت پشت سر هم بنویسیم. به مثال های زیر دقت کنید؛
یادتان نرود که حتما باید border-style را تعریف کنیم چون در غیر این صورت چیزی با ویژگی های تعریف شده نخواهیم داشت.

p {
border: 7px solid red;
}

در مثال بالا حاشیه ای با ضخامت 7 پیکسل و به صورت خط های ممتد و به رنگ قرمز برای عنصر مورد نظر تعریف کردیم.
گاهی ممکن است بخواهیم به یکی از جهت های بالا ، پایین ، چپ یا راست border بدهیم پس در این صورت کد مورد نظر را مانند نمونه ی زیر می نویسیم. به جای border-top از ویژگی های border-right ، border-bottom و border-left برای جهات دیگر می توانید استفاده کنید.

h2 {
border-top: 4px dotted blue;
}
div {
border-top: double;
}

در بعضی مواقع نیاز است که از کدهای زیر برای border دادن به عناصر استفاده کنیم مانند بالا, می توانیم از جهات دیگر به جای top نیز استفاده کنیم.

border-top-width
border-top-style
border-top-color

مثلا در این کد border عنصر با ضخامت 4px و خط ممتد قرمز رنگ است اما استایل جهت بالای آن متفاوت است و با ضخامت 2px و نقطه چین آبی رنگ مشخص شده است.

div {
border: 4px solid red;
border-top-style: dotted;
border-top-color:blue;
border-top-width:2px;
}

 

دوره ی آموزش html و css

 

4.7/5 - (3 امتیاز)
اشتراک گذاری:
برچسب: border در CSSCssآشنایی با cssآموزش رایگان CSS
About حامد نجفی

بعد از گذشت 9 سال کار با وردپرس و فعالیت اینترنتی هر روز علاقه ام به این کار بیشتر میشه. سختی های زیادی تو این راه کشیدم و دوست دارم به شما کمک کنم این مسیر رو سریعتر طی کنین. با من در شبکه های اجتماعی در تماس باشید :)

More Posts by حامد نجفی
تبلیغات
هاست وردپرس

مطالب زیر را حتما مطالعه کنید

آموزش رایگان CSS- جلسه 16| جدول ها در CSS

آموزش رایگان CSS- جلسه 16

آموزش رایگان CSS- جلسه 15| لیست ها در CSS

آموزش رایگان CSS- جلسه 15

اموزش رایگان CSS- جلسه 14| تصاویر در CSS

آموزش رایگان CSS- جلسه 14

آموزش رایگان CSS - جلسه 13| لینک ها در CSS

آموزش رایگان CSS – جلسه 13

آموزش رایگان CSS- جلسه 12| فونت ها در css

آموزش رایگان CSS- جلسه 12

آموزش رایگان CSS - جلسه 11| متن ها در CSS

آموزش رایگان CSS – جلسه 11

قدیمی تر آموزش رایگان CSS - جلسه 6
جدیدتر دانلود قالب رایگان مکانیکی Advance Automobile

1 Comment

Join the discussion and tell us your opinion.

  • front-end گفت:
    مرداد 30, 1400 در 3:00 ب.ظ

    سلام
    خسته نباشید عالی بود
    مخصوصا قسمت border-style ها
    همیشه فقط solid استفاده میکردم ولی الان کاملا اشنا شدم.

    پاسخ

دیدگاهتان را بنویسید لغو پاسخ

Search for:
نوشته‌های تازه
  • تقویم محتوا چیست؟ (جلسه 33)
  • استراتژی تولید محتوا (جلسه 32)
  • عادت‌ نویسندگان مشهور و سرشناس (جلسه 31)
  • راهنمای کامل تغذیه محتوا نویس (جلسه 30)
  • چگونه یک محتوای تصویری خوب بسازیم؟ (جلسه 29)
آخرین دیدگاه‌ها
  • نوبتی در قالب رایگان چند منظوره وردپرس Accelerate
  • امیر در دانلود قالب آموزشی رایگان وردپرس – Education Zone
  • 989177822446 در قالب خدماتی Krystal Lawyer ویژه وکالت
  • وردپرس در قالب رایگان چند منظوره وردپرس Accelerate
  • مژگان فردمنش در هاور ستون ها در المنتور (جلسه 37)

یاد باد آنکه ز رخسار تو هر صبحدمی

افق دیده پر از شعله خور بود مرا

دسته بندی بلاگ

  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس
  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس

خدمات مشتریان

  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها
  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها

دسترسی سریع

  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام
  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام

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

ورود
استفاده از موبایل
استفاده از آدرس ایمیل
آیا هنوز عضو نیستید؟ اکنون عضو شوید

بازنشانی رمز عبور
استفاده از موبایل
استفاده از آدرس ایمیل
عضویت
قبلا عضو شدید؟ اکنون وارد شوید

7 + 10 =