آشنایی با حاشیه بندی یا Border در CSS
Your browser doesn't support video.
Please download the file: video/mp4
با سلام و خسته نباشید خدمات شما علاقه مندان به آموزش طراحی وب. علیرضا حاتمی نیا هستم با قسمتی دیگر از آموزش های طراحی وب HTML CSS در خدمت شما هستم.
در جلسه پیش با آموزش بلاک بندی در html در خدمت شما بودیم. در این جلسه با خصوصیت border در CSS جهت تعریف حاشیه یا لبه برای عناصر HTML آشنا می شویم.
حاشیه یا border
شاید شما قصد داشته باشید برای عناصری در صفحه مانند تصاویر، پاراگرافها، div ها و … حاشیه یا لبه تعریف کنید. لبه ها معمولا دارای خصوصیاتی مانند رنگ، ضخامت و نوع (مثلا خط، نقطه چین و...) می باشند.
در شکل زیر برای 3 عنصر div در صفحه حاشیه های جداگانه تعریف کرده ایم.
خصوصیت border-style
این خصوصیت نوع border را مشخص می کند. اهمیت این خصوصیت از آنجایی ست که اگر مقدار آن تعیین نشود لبه یا border کلا نمایش داده نمی شود.
مهمترین مقادیری که این خصوصیت دریافت می کند عبارتند از:
- solid : لبه به صورت یکپاچه و ادامه دار نمایش داده می شود. (در تصویر بالا مانند div1 )
- dashed : لبه به صورت خط های تیره نمایش داده می شود. (در تصویر بالا مانند div2)
- dotted : لبه به صورت نقطه چین نمایش داده می شود. ( در تصویر بالا مانند div3)
- double : دو لبه برای عنصر نمایش داده می شود.
.div1 { border-style:solid;}
.div2 { border-style: dashed;}
.div3 { border-style: dotted;}
.div4 { border-style: double;}
خصوصیت border-width
برای تعیین اندازه ضخامت border از این خصوصیت استفاده می شود. مقداری که این خصوصیت دریافت می کند پیکسل است که با px نشان داده می شود.
مثلا مقدار 5 پیکسل به صورت 5px نمایش داده می شود.
.div1 { border-style:solid; border-width: 1px;}
.div2 { border-style: dashed; border-width: 5px;}
.div3 { border-style: dotted; border-width: 3px;}
.div4 { border-style: double; border-width: 10px;}
خصوصیت border-color
برای تعیین رنگ لبه یا border مورد نظر از این خصوصیت استفاده می شود. مقدار این خصوصیت از قوانین رنگها پیروی می کند.
.div1 { border-style:solid; border-width: 1px; border-color:red;}
.div2 { border-style: dashed; border-color: #1dd13f;}
.div3 { border-style: dotted; border-color:blue;}
.div4 { border-style: double; border-color:green;}
تعریف لبه یا border به صورت جداگانه
شما می توانید در CSS برای عناصر لبه هایی جداگانه تعریف کنید. مثلا فقط برای لبه بالا یا فقط برای لبه های چپ و راست و یا تعریف لبه فقط برای لبه پایین و چپ.
.div1 { border-top-style:dotted;}
.div2 { border-right-style:solid;}
.div3 { border-left-style:solid;}
.div4 { border-bottom-style:dotted;}
خصوصیت border جهت خلاصه نویسی
در CSS شما می توانید تمامی خواص بالا را به صورت یک خاصیت و یا به اصطلاح مختصر نویسی کنید.
برای این منظور به جای خواص گفته شده در بالا از خاصیت border استفاده می کنیم.
مقداری که این خاصیت دریافت می کند به ترتیب عبارتند از :
- border-width
- border-style
- border-color
به جز مقدار border-width می توانید بقیه مقادیر را وارد نکنید.
.div1 { border:5px solid blue;}
.div2 { border:2px dashed red;}
.div3 { border:5px dotted red;}
.div4 { border: solid red;}
نظرات کاربران