Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

آموزش کار کردن با کادر (border) در کد های CSS

شاید دلتون می خواد سی اس اس رو یاد بگیرین و باهاش کادر های قشنگ درست کنین. ولی هر چی میگردین آموزش به زبان پارسی روان و ساده که خودمونی بهتون یاد بده پیدا نمی کنین.

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

مثال


همون طور که می دونید باید کد های سی اس اس رو داخل تگ style قرار داد و این تگ هم برای سئو هم که شده باید درون تگ head باشه. در کد بالا انتخابگر div روی تمام تگ های div اثر میذاره. شما معنی border رو به خوبی می دونید که میشه کادر.

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

div{ border:1px black solid;border-top:1px #000 dashed;border-right:1px #000 dotted;border-bottom:1px #000 double;border-left:1px black inset; }

که اینطوری بود قبلا:

div{
    border: 1px black solid;
    border-top:
1px #000 solid;
    border-right:
1px #000 solid;
    border-bottom:
1px black solid;
    border-left:
1px black solid;

    border-width: 1px;
    border-color: black;
    border-style: solid;
}

کد border یا کادر را چطوری می نویسن؟

این کد ها معمولا به صورت کد اول نوشته میشن یعنی همه خاصیت هایی که مربوط به کادر یا border میشه رو یک جا می نویسن که باعث میشه روی تمام کادر ها در تمام سمت های باکس عمل کنه یعنی مثل زیر میشه:

border: 2px #000 solid
گزینه توضیحات
2px دو پیکسل به معنی اینه که کادر به اندازه 2 پیکسل باشه ؛ شما می تونید به جای px از واحد های اندازه گیری دیگری استفاده کنید.
#000 این یک رنگ می باشد.
solid مدل کادر را مشخص می کند که می توان به جای آن از مدل های دیگری استفاده کرد.


گزینه توضیحات
solid کادر را به حالت معمولی یا همون خط صاف در می آورد.
dashed کادر را به حالت خط چین در می آورد.
dotted کادر را به حالت نقطه چینی در می آورد.
double دو خط کنار هم برای کادر می کشد.
outset کادری را می کشد که کاربر احساس می کند که آن کادر روی بلندی قرار دارد.
inset دقیقا برعکس outset
ridge در این کادر هم مانند دو نوع کادر بالایی هست ولی کمی تفاوت دارد که باید خودتان امتحان کنید.
groove دقیقا برعکس ridge
hidden در این حالت کادری مشاهده نمی شود.
none کادر را به طور کامل حذف می کند.
inherit کادر را به حالت معمولی که به طور کلی تعیین شده بر می گرداند (این گزینه تقریبا برای تمام کد های سی اس اس موجود است)

چطوری میشه یه طرف کادر رو برداشت؟

بعضی مواقع دوستان کد نویس به مشکلی بر می خورن که می خوان کادری که در یک صفحه هست رو جوری درست کنن که مثلا کادر سمت راست نباشه و با تلاش بسیار و رنجی کثیر تمام کادر ها رو دونه دونه درست می کنن یعنی مثل زیر عمل می کنند که اشتباهی نابخشودنی است زیرا کاربر بدبخت باید چقدر حجم داشته باشه تا این آتو آشقالا رو لود کنه؟ ها؟

div{
    border-top:
1px #000 solid;
    border-right:
none;
    border-bottom:
1px #000 solid;
    border-left:
1px black solid;

}

برای درست نوشتن یا بهتر بگم کم نوشتن میشه به راحتی همه کادر ها رو به یه حالت در آورد و بعد از border-right یا بقیه اش استفاده کرد و اون کادر رو حذف کرد. یعنی اینطوری:

div{
    border:
1px #000 solid;
    border-right:
none;

}


attention
در کد بالا می بینید که از کلمه none استفاده شده که این کلمه تقریبا در تمام کد های CSS عملکردی مشابه داره. یعنی هر جا که بیاد معنی «هیچ» میده و مثلا اگه در background استفاده بشه باعث میشه که اون کادر یا هر چیز دیگه ای هیچ پس زمینه ای نداشته باشه.

پس بقیه کد هایی که نوشته چیه؟

بقیه کد ها هر کدوم یه قسمت خاص از border رو نشون میدن که مشخصه هر کدوم مال کدومه ؛ شما بهتره از این نوع کد ها استفاده نکنید زیرا هم حجمو بالا میبره هم وقت گیره نوشتنش ولی مثلا زمانی که می خواین با بردن ماوس روی باکس نوع کادرش تغییر کنه یا اندازه کادرش تغییر کنه این کد ها استفاده خوبی می تونن داشته باشن.

سلام
ببخشید
کاراییborder-radius رو نگفتین
خیلی مشتاقم بدونم خواهشا بگین
ممنون
پاسخ : border-radius برای گرد کردن دور کادر یک باکس هست.
برای توضیحات بیشتر در انجمن سوال کنید.
با تشکر

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

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

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36613
افراد آنلاین : 5
بازدید امروز : 871
بازدید دیروز : 1,373
گوگل امروز : 73
گوگل دیروز : 164
بازدید هفته : 8,143
بازدید ماه : 30,499
بازدید سال : 376,098
بازدید کلی : 10,770,574