آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

Border در CSS

CSS

فصل چهارم : Properties در CSS

جلسه چهارم  : Border در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

دوستان در این جلسه ی آموزشی راجع به خاصیت border در CSS صحبت میکنیم .

توسط این خاصیت شما میتونید یک خط با ضخامت دلخواه در حاشیه ی باکس ها ، تصاویر و تمامی element های موجود در صفحه ایجاد کنید . مثلا شما میخواین دور تصویرتون یک خط با ضخامت ۳ پیکسل با رنگ قرمزایجاد کنید تا تصویرتون رو زیباتر کنید . برای این کار از خاصیت  border استفاده می کنید .

دستور استفاده از خاصیت  Border به این شکل هست :

border-width : ضخامت خط رو مشخص می کنه .

border-style : استایل خط رو مشخص میکنه که شامل مقادیر زیر میشه :

none : خط رو حذف میکنه .

Hidden : برابره با none هست و خط رو حذف میکنه .

Dotted : خط رو بصورت نقطه چین نمایش میده .

Dashed : خط رو بصورت خط چین نمایش میده .

Solid : خط رو بصورت ممتد و صاف نمایش میده .

Double : خط رو بصورت دو خط موازی نمایش میده .

Groove : خط رو بصورت سه بعدی از داخل نمایش میده .

Ridge : خط رو بصورت سه بعدی از خارج نمایش میده .

Inset : خط رو بصورت سه بعدی از داخل نمایش میده .

outset: خط رو بصورت سه بعدی از خارج نمایش میده .

Initial : مقدار پیش فرض و قرار میده .

Inherit : با توجه به مقدار عنصر والد مقدار و مشخص میکنه . مثلا اگر برای عنصر والد border-style مقدار solid مشخص شده باشه ، برای عنصر فرزند هم مقدار  solid مشخص میشه .

Border-color : رنگ خط رو مشخص میکنه . برای تعیین رنگ میتونید از نام رنگ ها ، کدهای hex و rgb ها استفاده کنید . حتی میتونید با rgba مقدار opacity خط رو کم و زیاد کنید .

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

البته در برخی موارد مجبورید که از خلاصه نویسی دست بردارید و  از خاصیت ها بصورت جداگانه استفاده کنید . به عنوان مثال شما میخواین تصویری مانند تصویر زیر ایجاد کنید :

triangle

برای ترسیم مثلت با استفاده از خاصیت  border میتونید به شکل زیر عمل کنید :

 

در برخی موارد مثل مورد بالا شما مجبورید از خاصیت های border به شکل جداگانه استفاده کنید . اما برای border های ساده پیشنهاد میشه بصورت خلاصه نویسی از border استفاده کنید .

 

Border Radius ها در  CSS

گاهی اوقات شما میخواین دور تصاویر ، باکس ها و element هاتون و گرد کنید و شکلی شبیه به تصویر زیر ایجاد کنید :

rectangular

برای این کار از خاصیت  border-radius استفاده می کنید . با این خاصیت میتونید دور المان هارو گرد کنید . نحوه ی استفاده از این خاصیت به شکل زیر هست :

برای مرورگرهای قدیمی و مرورگرهایی مثل safari , chrome و … از خاصیت های زیر استفاده می کنید :

 

حالا ممکنه بخواین دایره ترسیم کنید :

circle

برای اینکار از مقدار درصدی استفاده می کنیم ، البته لازم به ذکره که باید عرض و طول رو برای عنصر مشخص کنید :

برای ایجاد radius های مختلف میتونید از سایت http://border-radius.com استفاده کنید .

 

تمامی خاصیت های Border در  CSS

خاصیت هایی که برای border  میتونید استفاده کنید به شرح زیر هست ، تمامی موارد به همین شکلی که مثال زدیم استفاده میشه ، فقط برخی از خاصیت ها ممکنه براتون نا آشنا باشه که براتون توضیح میدم :

Border-bottom

Border-bottom-color

Border-bottom-left-radius

Border-bottom-right-radius

Border-bottom-style

Border-bottom-width

Border-top

Border-top-color

Border-top-style

Border-top-width

Border-top-left-radius

Border-top-right-radius

Border-collapse

این خاصیت برای جداول کاربرد بسیاری داره ، این خاصیت شامل مقادیر زیر میشه :

Separate : بین سلول های جدول فاصله ایجاد می کنه و فضایی رو بین سلول ها مشخص میکنه . 1

Collapse : فضا و فاصله ی بین سلول هارو برمیداره و جدول رو بصورت خط کشی ساده نمایش میده . 2

Border-color

Border-image

با استفاده از این خاصیت میتونید در حاشیه ی عناصر یک تصویر درج کنید ، به عنوان مثال یک pattern رو به عنوان خطوط حاشیه ی عنصر قرار بدید . اما این خاصیت در مرورگر opera و IE10 به پایین پشتیبانی نمیشه .

Border-image-repeat

چگونگی تکرار image-borderرو تعیین می کنه . این خاصیت توسط مرورگرهای اصلی پشتیبانی نمیشه .

Border-image-slice

حاشیه ی داخلی رو تعیین می کنه ، به عنوان مثال از لبه ی عکس به داخل ۵۰ درصد برش بخوره :

 

این خاصیت توسط مرورگرهای اصلی پشتیبانی نمیشه .

Border-image-source

Border-image-width

Border-radius

Border-left

Border-left-color

Border-left-style

Border-left-width

Border-right

Border-right-color

Border-right-style

Border-right-width

Border-spacing

این خاصیت هم برای جداول استفاده میشه و فاصله بین سلول هارو مشخص میکنه .

Border-style

Border-width

 

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

تهیه شده در مدرسه مجازی ایرانیان

 

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟