شاید دلتون می خواد سی اس اس رو یاد بگیرین و باهاش کادر های قشنگ درست کنین. ولی هر چی میگردین آموزش به زبان پارسی روان و ساده که خودمونی بهتون یاد بده پیدا نمی کنین.
شما می تونین با این آموزش کادر های حرفه ای و زیبا برای باکس های خودتون درست کنید.
مثال
همون طور که می دونید باید کد های سی اس اس رو داخل تگ style قرار داد و این تگ هم برای سئو هم که شده باید درون تگ head باشه. در کد بالا انتخابگر div روی تمام تگ های div اثر میذاره. شما معنی border رو به خوبی می دونید که میشه کادر.
در کد بالا شما می تونید فاصله ها رو بردارین یعنی متننتون رو پشت سر هم بنویسید. خیلی از کد نویسان برای راحتی کارشون در بین کد ها فاصله های اینجوری میدارن تا بعدا برای ویرایش کردن سریع تر و با دقت بیشتری کارشون رو انجام بدن. این جور کد نوشتن هیچ تاثیری بر روی عملکرد کد ها نداره. برای مثال شما می تونین کدتون رو اینجوری بنویسید.
که اینطوری بود قبلا:
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 میشه رو یک جا می نویسن که باعث میشه روی تمام کادر ها در تمام سمت های باکس عمل کنه یعنی مثل زیر میشه:
| گزینه | توضیحات |
|---|---|
| 2px | دو پیکسل به معنی اینه که کادر به اندازه 2 پیکسل باشه ؛ شما می تونید به جای px از واحد های اندازه گیری دیگری استفاده کنید. |
| #000 | این یک رنگ می باشد. |
| solid | مدل کادر را مشخص می کند که می توان به جای آن از مدل های دیگری استفاده کرد. |
| گزینه | توضیحات |
|---|---|
| solid | کادر را به حالت معمولی یا همون خط صاف در می آورد. |
| dashed | کادر را به حالت خط چین در می آورد. |
| dotted | کادر را به حالت نقطه چینی در می آورد. |
| double | دو خط کنار هم برای کادر می کشد. |
| outset | کادری را می کشد که کاربر احساس می کند که آن کادر روی بلندی قرار دارد. |
| inset | دقیقا برعکس outset |
| ridge | در این کادر هم مانند دو نوع کادر بالایی هست ولی کمی تفاوت دارد که باید خودتان امتحان کنید. |
| groove | دقیقا برعکس ridge |
| hidden | در این حالت کادری مشاهده نمی شود. |
| none | کادر را به طور کامل حذف می کند. |
| inherit | کادر را به حالت معمولی که به طور کلی تعیین شده بر می گرداند (این گزینه تقریبا برای تمام کد های سی اس اس موجود است) |
چطوری میشه یه طرف کادر رو برداشت؟
بعضی مواقع دوستان کد نویس به مشکلی بر می خورن که می خوان کادری که در یک صفحه هست رو جوری درست کنن که مثلا کادر سمت راست نباشه و با تلاش بسیار و رنجی کثیر تمام کادر ها رو دونه دونه درست می کنن یعنی مثل زیر عمل می کنند که اشتباهی نابخشودنی است زیرا کاربر بدبخت باید چقدر حجم داشته باشه تا این آتو آشقالا رو لود کنه؟ ها؟
border-top: 1px #000 solid;
border-right: none;
border-bottom: 1px #000 solid;
border-left: 1px black solid;
}
برای درست نوشتن یا بهتر بگم کم نوشتن میشه به راحتی همه کادر ها رو به یه حالت در آورد و بعد از border-right یا بقیه اش استفاده کرد و اون کادر رو حذف کرد. یعنی اینطوری:
border: 1px #000 solid;
border-right: none;
}
 | در کد بالا می بینید که از کلمه none استفاده شده که این کلمه تقریبا در تمام کد های CSS عملکردی مشابه داره. یعنی هر جا که بیاد معنی «هیچ» میده و مثلا اگه در background استفاده بشه باعث میشه که اون کادر یا هر چیز دیگه ای هیچ پس زمینه ای نداشته باشه. |
پس بقیه کد هایی که نوشته چیه؟
بقیه کد ها هر کدوم یه قسمت خاص از border رو نشون میدن که مشخصه هر کدوم مال کدومه ؛ شما بهتره از این نوع کد ها استفاده نکنید زیرا هم حجمو بالا میبره هم وقت گیره نوشتنش ولی مثلا زمانی که می خواین با بردن ماوس روی باکس نوع کادرش تغییر کنه یا اندازه کادرش تغییر کنه این کد ها استفاده خوبی می تونن داشته باشن.
ببخشید
کاراییborder-radius رو نگفتین
خیلی مشتاقم بدونم خواهشا بگین
ممنون
برای توضیحات بیشتر در انجمن سوال کنید.
با تشکر