طراحی سایت
ساناتک
چهارشنبه 22 شهريور 1396
0
Style دهی به اضلاع یک تگ

علاوه بر تنظیم حاشیه‌ تمامی اظلاع یک تگِ block-level، شما می‌توانید تک‌تکِ اظلاع را نیز به طور جداگانه با استفاده از دستورات border-top، border-bottom، border-left و border-right تنظیم نمایید. به مثالی در رابطه با تنظیمات جداگانه اظلاع توجه کنید:

.highlight {

border-top-width: 1px;

border-top-style: solid;

border-top-color: red;

border-bottom-width: 3px;

border-bottom-style: dotted;

border-bottom-color: blue;

border-left-width: 5px;

border-left-style: dashed;

border-left-color: yellow;

border-right-width: 7px;

border-right-style: double;

border-right-color: fuchsia;

}

بیایید با یک‌دیگر صادق باشیم، همان‌طور که در عکس 4.15 نتیجه کار را مشاهده می‌کنید به نظر اندکی زشت و بدقواره می‌آید! گرچه، استفاده جدا از هم این دستورات در CSS کاربردی می‌باشد. مثلا شما می‌توانید با استفاده از دستور border-bottom محتوای صفحه وب خود را بخش‌بندی کنید.

حاشیه متفاوت تک تک اضلاع

عکس 4.15: در نظر گرفتن حاشیه متفاوت برای تک‌تکِ اظلاع

 

دستور کوتاه‌ِ border برای تنظیم Style حاشیه‌ها

همان‌طور که در مثال‌های گذشته دیدیم، امکانات متفاوتی که CSS برای زیباسازی کار به ما می‌دهد بسیار زیاد است. به نظر شما جالب نیست که تنها با یک دستور حاشیه مورد نظر را در CSS تعریف کنیم؟ خوشبختانه این کار شدنی است:

.highlight {

border: 5px solid black;

}

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

نکات مثبت در این رابطه کم شدن حجم CSS دانلودی توسط کاربر، زودتر بارگذاری شدن سایت و البته کم کردن زحمت تایپ شما می‌باشد. با استفاده از این میان‌بر شما می‌توانید حتی دستورات border-top، border-bottom، border-left و border-right که برای جدا کردن بخش‌های گوناگون محتوا استفاده می‌شد را نیز زودتر بنویسید.

style-دهی با انواع حاشیه (border)

‌نمونه‌های بالا تعداد زیادی از کاربرد‌های دستورات حاشیه را به شما نشان داد. در پایین لیستی از تمامی انتخاب‌های در دسترس در این راستا برای شما قرار می‌دهیم؛ سعی کنید با تمامی گزینه‌های موجود بازی کنید و استفاده‌های ترکیبی آن‌ها را تجربه کنید.

ضخامت حاشیه

با استفاده از واحدهای px، pt و ems می‌توانید مقدار این متغییر را تعریف کنید.

علاوه بر آن می‌توانید با استفاده از کلمات thin، medium، thick به ترتیب به معنی باریک، متوسط و ضخیم نیز کار تعریف میزان ضخامت را به انجام برسانید.

انواع حاشیه‌های تعریفی

حاشیه می‌تواند یکی از انواع زیر باشد:

solid(پیش‌فرض)

double

dotted

dashed

groove

ridge

inset

outset

رنگ حاشیه

رنگ تعیین شده حاشیه به همان روشی تعریف می‌شود که برای سایر تگ‌ها دیده بودیم. این کار یا با استفاده از کدهای hexadecimal و یا از طریق کلمات خود رنگ‌ها انجام می‌شود. در بخش بعدی تمامی دستورات گفته شده را بر روی پروژه سایت غواصی پیاده می کنیم.

تعداد بازدید: 28
مطالب دیگر آموزش طراحی سایت
margin و مرزبندی تگ هااستفاده از padding در تنظیم حاشیهجداسازی تگهای سایت غواصیحاشیه دار کردن Block level Element هاتنظیم ارتفاع با ویژگی height در css
 
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید