در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش گام به گام CSS قسمت چهارم: حاشیه ها

در جلسات پیش تا حدی با شیوه نوشتن دستورات CSS آشنا شدید و با رنگ ها و پشت زمینه ها نیز آشنایی پیدا کردید، در جلسه امروز می خواهیم شیوه استفاده از Border و حاشیه ها در CSS را فرا بگیریم. حاشیه از جمله مهمترین المنت ها و اجزای یک صفحه وب است، توسط یک حاشیه می توانید حیطه فعالیت یک متن، تصویر و... را مشخص کنید. همچنین برای جلوگیری از شلوغ شدن یک صفحه وب باید از حاشیه ها استفاده کنیم، توضیحات کافی است بریم سروقت دستورات:

به صورت کلی حاشیه ها می توانند از چهار جهت وجود داشته باشند، همچنین می توان فقط از یک طرف باشند. کنترل چگونگی نمایش حاشیه ها نیز در دستان شماست.


Border-style: برای تعیین حاشیه یک المنت باید از این دستور در استایل مربوط به آن المنت استفاده کنید. مقادیر این دستور عبارت است از:

• dotted – تعریف یک حاشیه به صورت ........

• dashed - تعریف حاشیه به صورت - - - -

• solid - تعریف حاشیه به صورت خط مستقیم

• double - تعریف حاشیه به صورت دو خط مستقیم

• groove - تعریف حاشیه به صورت سه بعدی

• ridge - تعریف حاشیه به صورت سه بعدی

• inset - تعریف حاشیه به صورت سه بعدی

• outset - تعریف حاشیه به صورت سه بعدی

• none - بدون حاشیه

• hidden - تعریف یک حاشیه مخفی

• mix– حالت مخلوط

روش استفاده از این مقادیر بسیار آسان است، کافی است مقدار border-style مربوط به یک المنت را برابر مقادیر بالا در نظر بگیرید. به این دستور توجه کنید:

p
{
border-style:outset;
}

آخرین حالت و در عین حال جالبترین حالت حاشیه ها از نوع mix است، این حالت باعث می شود کنترل کاملی روی تمام جهت های حاشیه داشته باشید.

p
{
border-style: double dashed solid dotted;
}

مقادیر به ترتیب، بالا، راست، پایین و چپ می باشد.


border-width: برای تعیین اندازه عرض حاشیه ها از این دستور استفاده می شود. اگر می خواهید که هر چهار طرف حاشیه دارای یک اندازه عرض باشد به این دستور فقط یک مقدار با واحد px بدهید اما اگر می خواهید چهار طرف با همدیگر متفاوت اندازه گیری شود باید چهار مقدار متفاوت به حاشیه بدهید. به مثال های زیر توجه کنید.

p
{
	width:auto;
	height:100px;
	border-style:solid;
	border-width: 2px;
}
p
{
	width:auto;
	height:100px;
	border-style:solid;
	border-width: 2px 2px 2px 10px;
}

border-color: رنگ حاشیه ها نیز از مهمترین قسمت های یک حاشیه است، نکته ای که در مقدار دهی تمام اجزای دستور border وجود دارد اینست که اگر تک مقداری باشد به کلیه قسمت های حاشیه اعمال می شود اما اگر چند مقدار باشد به جهات مختلف مقدار دهی می شود. برای مثال اگر مقدار این دستور blue باشد تمام حاشیه ها به رنگ آبی تبدیل می شوند اما اگر blue red green black باشد حاشیه بالا آبی، راست قرمز، پایین سبز و چپ سایه تبدیل می شود. امیدوارم از این مسئله متوجه شده باشید.

p
{
border-style:solid;
border-color: blue red green black;
}

کوتاه کردن اجزای دستور border: اگر بخواهیم حاشیه ای از نوع نقطه ای، با رنگ سبز و اندازه 5 پیکسل سه دستور جداگانه برای هر کدام از آنها بنویسید اما یکی راه دیگر همیشه وجود دارد، به تفاوت دو دستور زیر توجه کنید:

p
{
border-style: dotted;
border-color: #00ff00;
border-width: 5px;
}
p
{
border: dotted #00ff00 5px;
}

اگر توجه داشته باشید در درس قبل هم این قضیه برای دستور background وجود داشت.


اعمال محدودیت در حاشیه ها: وقتی برای المنتی حاشیه می سازید، این حاشیه در چهار طرف اعمال می شود. اما اگر بخواهیم صرفا یک طرف المنت حاشیه داشته باشد چه؟ کافی است بجای استفاده از border-style از border - left right top bottom استفاده کنید. به مثال زیر توجه کنید.

p
{
border-left:solid 5px #ff00ff;
}

یک اشتباه بزرگ: بعضی از دوستان بجای استفاده از حالت mix در broder-style به هر کدام از جهت های حاشیه به جدای استایل می دهند، مثال زیر اشتباه است:

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

مثال زیر درست است:

p{
border-style: dotted dashed solid double;
}

border-radius: گوشه های حاشیه در حالت عادی تیز هستند، برای آنکه گوشه های حاشیه گرد شود از این دستور استفاده می شود. به مثال زیر توجه کنید.

p {
    border: 2px solid red;
    border-radius: 5px;
}

نویسنده : ارسطو عباسی

منبع : انجمن تخصصی فناوری اطلاعات ایران

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#آموزش_گام_به_گام_css #آموزش_css #آموزش_سی_اس_اس #آموزش_مقدماتی_css
عنوان
1 آموزش گام به گام CSS قسمت اول : معرفی و آشنایی با نوشتن دستورات رایگان
2 آموزش گام به گام CSS قسمت دوم: شیوه های استفاده از CSS رایگان
3 آموزش گام به گام CSS قسمت سوم : رنگ ها و پشت زمینه ها رایگان
4 آموزش گام به گام CSS قسمت چهارم: حاشیه ها رایگان
5 آموزش گام به گام CSS قسمت پنجم: Margin , Padding , height , Width رایگان
6 آموزش گام به گام CSS قسمت ششم: متون رایگان
7 آموزش گام به گام CSS قسمت هفتم : فونت‌ و قالب‌های متنی رایگان
8 آموزش گام به گام CSS قسمت هشتم: لینک ها و لیست ها رایگان
9 آموزش گام به گام CSS قسمت نهم: جداول رایگان
10 آموزش گام به گام CSS قسمت دهم: Display و Max-width رایگان
11 آموزش گام به گام CSS قسمت یازدهم: موقعیت ها , Overflow رایگان
12 آموزش گام به گام CSS قسمت دوازدهم: جهت ها, تراز ها و غلظت رایگان
13 آموزش گام به گام CSS قسمت سیزدهم: شفافیت رایگان
14 آموزش گام بە گام CSS: قسمت چهاردهم: واکنشگرایی چیست؟ رایگان
15 آموزش گام بە گام CSS: قسمت پانزدهم: Viewport چیست؟ رایگان
زمان و قیمت کل 0″ 0
2 نظر
vahidkazem

تشکر

عالی

ارسطو  عباسی

قربان شما، خواهش میکنم.

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....