Css

|

اموزش Css و کادر بندی

یکی طراح و وب نویس مبتدی برای کادربندی کردن صفحات از جدول و table استفادهمی کنداستفاده از این کد ها برای برنامه نویس راحت میباشد ولی برای مرورگرهای وب پیچیده و دشوار است ولی شما با استفاده از border style میتوانید اجزای صفحه را به راحتی کادر بندی کنید.

کادر بندی کردن انواع مختلفی دارد که میتوانیم نسبت به نیاز صفحه از انها استفاده کنیم.

None: با استفاده از این کد به مرورگر دستور میدهیم نمیخواهیم کادری داشته باشیم. برای مثال شاید شما در استایل دهی کلی که در این مقاله توضیح دادیم در صفحه ای از کادر استفاده کرده باشید ولی مایل نیستید یکی از صفحات کادر داشته باشد با استفاده از این کد میتوانید کادر آن صفحه مورد نظر را بردارید.

Solid: یک خط صاف و ممتد

Dashed: کادر به صورت مستطیل ها کوچک

Dotted: کادر به صورت نقطه ای

Double: کادر به صورت 2 خط صاف و ممتد

برای یادگیری سریع تر تمامی این کادر ها را در صفحه خود بسازید و همان طور که مشاهده میکنید عرض این کادر ها زیاد میباشد چرا که ما اندازه ای برای آنها تعیین نکرده ایم و با مشخصه width به آنها اندازه میدهیم.

<div style="width:300px; border-style:solid">برای این کادر عرض 300 پیکسل تعیین شده است.</div>

اندازه کادر border-width

برای اندازه دادن به کادر راه های زیادی وجود دارد:

مقدار عددی بر حسب پیکسل:

با استفاده از این مشخصه برحسب پیکسل به borde اندازه میدهیم:

<div style="border-style:solid; border-width:10px">این کادر 10 پیکسل ضخامت دارد</div>

Thin

همان طور که از ترجمه آن مشخص است با استفاده از این دستور کادر نازک میشود:

<div style="border-style:solid; border-width:thin">ضخامت این کادر thin در نظر گرفته شده است.</div>

Thick

و این مشخصه نیز کادر را صخیم میکند:

<div style="border-style:solid; border-width:thick">ضخامت این کادر thick در نظر گرفته شده است.</div>

border-color

یکی دیگر از راه های زیبا سازی کادر رنگ دادن به آن است. برای رنگ دهی به کادر از border-color استفاده میکنیم که طبق آموزش های گذشته میدانیم که به صورت رنگ های انگلیسی میتوان نوشت هم انتخاب رنگ با استفاده از معادل هگزا دسیمال های آن.

<div style="border-style:solid; border-color:red">این کادر به رنگ قرمزخواهد بود.</div>

<div style="border-style:solid; border-color:#008000">این کادر به رنگ سبز خواهد بود.</div>

css اموزش css طراحی سایت

دریافت آخرین مطالب وبلاگ در کانال داتینه

بهاره شهسواری

بهاره شهسواری ، کارشناس نرم افزار هستم .
از سال 91 مشغول به یادگیری زبان های css ,html , javascript و jquery شدم
و از سال 93 به صورت اختصاصی به فعالیت در حوزه css و html پرداختم. علاوه بر کد نویسی به گرافیک هم علاقه مند هستم.

نظرات
نظر بدهید