در این جلسه از آموزش CSS میخوایم حاشیه ها در CSS رو بررسی کنیم . ویژگی border قابلیت تغییر استایل – ضخامت و رنگ حاشیه رو برای المان ها فراهم میکنه . حاشیه ها قابلیت های خوبی به رابط کاربری و تجربه کاربری وب سایت شما میده و باعث میشه بتونین تفکیک المان ها رو از هم داشته باشین . فقط توجه کنید حتما باید سلیقه طراحی داشته باشین تا بتونین ازین قابلیت های CSS به خوبی استفاده کنین و وب سایت خوبی داشته باشین .
ویژگی border-style
انواع مختلف حاشیه توی CSS تعریف شده و میتونین از این استایل های مختلف استفاده کنین. هر نوع استایل بستگی به مقدار ویژگی برای خصوصیت border-style قیافه خاصی به طرح میده. انواع مختلف استایل های حاشیه : dotted – dashed – solid – double – groove – ridge – inset – outset – none – hidden هستش . از رایج ترین و مورد استفاده ترین این استایل ها هم میشه به این مقادیر : solid – none و inset اشاره کرد . ولی باز هم بستگی به طرح خودتون داره .
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;}
ویژگی border-width
این ویژگی برای هر چهار جهت بالا – راست – پایین و چپ ضحامت حاشیه رو تعیین می کند. این ضحامت می تواند به واحد پیکسل – سانتیمتر و … قرار داده شود . علاوه بر این موارد می توان برای آن از واحد و اندازه های ثابت تعریف شده در مرورگرها استفاده کرد . سه مقدار thin, medium, or thick مشخص کننده مقادیر خاصی هستن .
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
حالتی هم وجود داره که میتونیم با یک سلکتور انواع حاشیه های اطراف المان رو کنترل کنیم و ضخامت های متفاوتی بدیم بهشون .
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
ویژگی border-color
از رنگ هایی که در حلسات قبل در آموزش CSS و دوره قبلی در آموزش HTML داشتیم هم میتونیم برای اختصاص رنگ به این حاشیه ها استفاده کنیم و کمی متفاوت جلوه بدیم حاشیه ها رو . مثل قسمت قبلی هم میتونین برای هر طرف حاشیه رنگ متفاوت بدین
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}
مشخص کردن سمت حاشیه !
خب همونطوری که قسمت های بالا یاد گرفتیم میشه برای حاشیه ها رنگ داد و ضخامت و حتی برای هر طرف و سمت از حاشیه ها رنگ و ضخامت خاصی تعریف کرد . حالا یه قابلیت هم وجود داره که میتونیم بیایم فقط برای یک طرف یا سمت از حاشیه کد بزنیم . بالا – پایین – راست و چپ ! مثال زیر رو ببینین کاملا واضح میشه براتون :
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
حالا اگه بخوایم خلاصه شده کد بالا رو بزنیم میشه کد زیر :
p {
border-style: dotted solid;
}
فقط یادتون باشه هر چقدر کدها رو بهینه تر و کوتاه تر بزنین سرعت سایت خیلی خوب میشه و نتیجه بهتری برای بهینه سازی وب سایت برای موتورهای جستجو می گیرین.
کدهای کوتاه شده برای حاشیه ها
خب تا الان این ویژگی ها حاشیه رو یاد گرفتیم که بیایم استایل و ضخامت و رنگ بدیم به المان. حالا یه قابلیت هم وجود داره که کدهای ما رو سریع تر میکنه. ویژگی border در CSS میاد به طرح المان ما یه حاشیه میده با مشخصات کلی ضخامت – استایل و رنگ . مثال زیر رو ببینین :
p {
border: 5px solid red;
}
اگر هم بخوایم به یک طرف حاشیه بدیم و کدهای کلی خلاصه شده استفاده کنیم براش از کدهای زیر استفاده می کنیم :
p {
border-left: 6px solid red;
}
p {
border-bottom: 6px solid red;
}
دورگرد کردن گوشه حاشیه ها
توی برخی از طراحی های رابط کاربری گوشه های حاشیه ها رو دورگرد پیاده سازی میکنن . چرا که در رابط کاربری بعضا گوشه های تیز باعث میشه کاربر حس امنیت نداشته باشه و ایجاد ترس بکنه ! (سلیقه هستش و عمومیت نداره ! ممکنه طرحی با المان های طراحی گرافیکی شارپ استفاده بشه و خیلی هم اوکی باشه ! ) برای این موارد گوشه های حاشیه رو دورگرد میکنن و از ویژگی border-radius استفاده میکنن . مثال های زیر رو ببینین :
p {
border: 2px solid red;
border-radius: 5px;
}
