اموزش css قسمت 4 - مبین گراف
سفارش تبليغات در انجــمن قالب گراف ورود به تاپيک اطلاعيه هاي تابستانه قالب گراف
امور گرافيکي و کدنويسي وب خود را به جي جي ميزبان بسپاريد
نام کاربري : پسورد : فراموش

در جلسات پیش تا حدی با شیوه نوشتن دستورات 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;}


امضاي کاربر :


دانلود قالب و کدهای متنوع برای وبلاگ و سایت : mobingraph.ir
پاسخ ها

براي نمايش پاسخ جديد نيازي به رفرش صفحه نيست روي تازه سازي پاسخ ها کليک کنيد !



برای ارسال پاسخ ابتدا باید لوگین یا ثبت نام کنید.