طراحی سایت
ساناتک
سه شنبه 21 شهريور 1396
0
حاشیه دار کردن Block level Element ها

شما می‌توانید افکت‌های گوناگونی به حاشیه Block-level Element های خود اضافه کنید، ضخامت‌های گوناگون، Style های گوناگون(solid lines، dotted lines و بیشتر)، و رنگ‌های متنوع از جمله این افکت‌ها هستند. این افکت‌ها شامل border-width، border-style و border-color می‌باشند.

بیایید در مثال‌های عملی بیشتر با این بخش کار آشنا شویم.

نمونه‌هایی از حاشیه بلوک‌ها:

حاشیه ساده مشکی‌ رنگ

عکس 4.5 حاشیه ساده مشکی رنگی را با ضخامت 5 پیکسل نشان می‌دهد.

حاشیه ساده و استاندارد

عکس 4.5: حاشیه‌ای ساده و استاندارد

کدِ CSS برای داشتن حاشیه بالا به این صورت می‌باشد:

.highlight {

border-width: 5px;

border-style: solid;

border-color: black;

}

در اینجا می‌بینید که از کلاس highlight استفاده کردیم. این دستور زمانی که به نشان کردن بخشی از محتوا نیاز پیدا کردیم به کارمان می‌آید. نمونه جالبی است، در واقع این مثال به شما نشان می‌دهد که چگونه می‌توانید اسامی قوانین وضع شده خود را در راستای هدف و کاری که از آن‌ها انتظار دارید انتخاب کنید.

شاید اندکی وسوسه‌انگیز باشد که نام قوانین وضع شده‌تان را بر اساس آن‌چه در ظاهر کار دیده می‌شوند انتخاب کنید، برای مثال می‌توانستیم نام کد بالای خود را blackborder یعنی حاشیه سیاه انتخاب کنیم، این کار اشتباه است، از آنجایی که شاید روزی قصد کردیم بخش‌های مهم را به صورت حاشیه قرمز مشخص کنیم، در آن صورت دیگر این نام برای کاری که انجام می‌دهد معتبر نخواهد بود. پس همیشه اسامی را از روی هدف نهایی و کلی کد خود انتخاب می‌کنیم تا روزی درگیر سردرگم اسامی این‌چنینی نشویم.

حاشیه سه‌بعدی

اگر خطوط ساده مشکی رنگ کار شما را راه نمی‌اندازند می‌توانید از حاشیه نشان داده شده در عکس 4.6 استفاده کنید.

حاشیه بعد دار

عکس 4.6: حاشیه‌ای بُعد دار

رنگی که در مثال بالا نشان داده شده است خاکستری سایه دار است، در کد پایین با اعداد hexdecimal نوشته شده است:

.highlight {

border-width: 10px;

border-style: inset;

border-color: #999999;

}

حاشیه رنگی برجسته

با استفاده از چندین رنگ در یکی از انواع معرفی شده حاشیه نیز می‌توانید به آن‌چه در ذهن دارید برسید. در عکس 4.7 حاشیه‌ای برجسته به خوبی با رنگ قرمز ادغام شده است. به خاطر داشته باشید که نباید به مثال‌های معرفی شده ما محدود شده و از آن‌چه خود در نظر دارید غافل بمانید.

حاشیه رنگ برجسته در css

عکس 4.7: حاشیه رنگیِ برجسته

کد سازنده عکس 4.7 در زیر نشان داده شده است:

.highlight {

border-width: 10px;

border-style: ridge;

border-color: red;

}

افکت‌های Bold شده

شما محدود به استفاده از حاشیه‌های ساده در تمامی کار نیستید. در عکس‌های 4.8 و 4.9 حاشیه‌هایی بنفش رنگ به صورت نقطه‌دار و خط فاصله‌ای با عرض ده پیکسل نشان داده شده‌اند.

حاشیه نقطه ای در css

عکس 4.8: حاشیه‌ای نقطه‌ای

.highlight {

border-width: 10px;

border-style: dotted;

border-color: purple;

}

حاشیه خط فاصله ای

عکس4.9: حاشیه خط فاصله‌ای

 

.highlight {

border-width: 10px;

border-style: dashed;

border-color: purple;

}

تمامی نمونه‌های بالا که با هم مرور کردیم اندکی ضمخت هستند، به نمونه‌های ساده‌تر آمده در ادامه مطلب توجه کنید.

حاشیه ساده خاکستری

در عکس 4.10 حاشیه‌ای تک پیکسلی و خاکستری رنگ نشان داده شده است.

حاشیه ساده

عکس 4.10: حاشیه ساده خاکستری

CSS-ای که نمونه بالا را به دست می‌دهد به صورت زیر است:

.highlight {

border-width: 1px;

border-style: solid;

border-color: gray;

}

حاشیه خاکستری ساده (نسخه دوم!)

در عکس 4.11 حاشیه استفاده شده اندکی ضخیم‌تر شده است، اما از آن‌جا که رنگ آن را روشن‌تر تعریف کرده‌ایم این ضخامت بیشتر به چشم نمی‌آید:

حاشیه خاکستری در CSS

عکس 4.11: نسخه دوم حاشیه خاکستری

و کد مربوطه:

.highlight {

border-width: 2px;

border-style: solid;

border-color: silver;

}

حاشیه نقطه‌ایِ قرمزرنگ

در نمونه نشان داده شده عکس 4.12 رنگ قرمز زیاد چشم را نمی‌زند، از آن‌جا که ضخامت تنها یک پیکسل در نظر گرفته شده و حالت نقطه‌ای نیز به کمرنگ‌تر دیده شدن رنگ قرمز کمک می‌کند.

حاشیه نقطه ای و قرمز رنگ در css

عکس 4.12: نقطه‌ای و قرمزرنگ

و کد CSS:

.highlight {

border-width: 1px;

border-style: dotted;

border-color: red;

}

 

حاشیه خط‌دار و خاکستری

این نسخه از حالت قبل بسیار ظریف‌تر است، اما قطعا استفاده‌های خاص خود را برای شما خواهد داشت.

حاشیه خط دار و حاکستری

عکس 4.13: خط‌دار و خاکستری

.highlight {

border-width: 1px;

border-style: dashed;

border-color: gray;

}

حاشیه دوخطی

در عکس 4.14 می‌توانید این حالت خاص را نیز مشاهده نمایید.

حاشیه دو خطی

عکس 4.14: حاشیه دوخطی

markup حاشیه بالا:

.highlight {

border-width: 5px;

border-style: double;

border-color: silver;

}

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

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