TimTim

سایت خبر خوان

آموزش CSS – بخش سه (پس زمینه و حاشیه)

دوشنبه 22 بهمن 97 | 13:13 - virgool.io - 5
دوره تکمیلی HTML... با ما همراه باشید
بنیاد سخن به نام حق، نِه ... کز هرچه بِه است نام حق بِه


در پستهای گذشته با کلیات و ساختار CSS آشنا شدیم؛ در این پست قصد دارم تا مهمترین ویژگی های استایل دهی مربوط به پس زمینه(background) و حاشیه (border) رو براتون بیان کنم. پس در ادامه با من همراه باشید.


پس زمینه  یا background

پس زمینه یکی از اجزایی هست که واقعا نیاز به توضیح نداره، چرا که همه ما بطور روزانه با اون سر و کار داریم (پس زمینه صفحه کامپیوتر، پس زمینه گوشی موبایل و ...) . یکی از مهمترین جاهایی که پس زمینه مورد استفاده قرار میگیره در طراحی وبه. مثلا پس زمینه وبسایتمون رنگ باشه یا عکس ! اگه رنگ باشه چه رنگی و اگه عکس باشه چه عکسی ؟ اگه عکس باشه، بطورت تمام صفحه باشه یا اینکه بصورت تکرار شونده در کنار هم قرار بگیره... اینها همه جزو ویژگی های این المان هستند که قصد داریم تک تک اونها رو بررسی کنیم.

ویژگی background-color

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

background-color: #c4b23f ;

ویژگی background-image

از این ویژگی برای انتخاب تصویر بعنوان پس زمینه استفاده می کنیم. برای استفاده از این ویژگی کافیه لینک تصویر مورد نظر رو داخل پرانتز بصورت زیر وارد کنیم:

background-image: url("link tasvir");

ویژگی background-repeat

از این ویژگی برای تکرار یا عدم تکرار تصویر پس زمینه استفاده می کنیم. برای تکرار در جهت x (افقی) عبارت repeat-x ، برای تکرار در جهت y (عمودی) عبارت repeat-y و برای عدم تکرار تصویر پس زمینه عبارت no-repeat را در مقابل  background-repeat می نویسیم؛ پس خواهیم داشت:

background-repeat: repeat-x;

یا

background-repeat: repeat-y;

یا

background-repeat: no-repeat;

ویژگی background-position

در صورتی که تصویر مورد نظر در حالت غیر تکرار شونده (no-repeat) باشد، با استفاده از این ویژگی مکان قرار گیری تصویر در صفحه را مشخص می کنیم؛ برای مثال :

background-position: right top;

جمع بندی

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

حالا بریم سراغ حاشیه ...

حاشیه یا border

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

ویژگی border-style

این ویژگی بیان کننده استایل یا حالت حاشیه ست، و دارای مقایری مثل dotted،dashed،solid،double،groove،ridge،inset،outset،none،hidden هست که تفاوت هر کدوم رو با مشاهده تصویر زیر متوجه خواهید شد :

ویژگی border-width

از این ویژگی برای بیان ضخامت حاشیه یا border استفاده میشه.

ویژگی border-color

از این ویژگی برای مشخص کردن رنگ حاشیه استفاده میشه.

ویژگی border-radius

از این ویژگی برای ایجاد خم در گوشه های حاشیه استفاده می کنیم تا از اون حالت تیزی که داره خارج بشه و زیبایی بیشتری به طراحیمون ببخشه.

یک مثال کلی

حاشیه ای از نوع نقطه ای به ضخامت 3px و رنگ قرمز  و خم  5px بسازید؛ پس داریم :

border-style: dotted;
border-width: 3px;
border-color: red;
border-radius: 5px;


ویژگی های مربوط به حاشیه رو هم بررسی کردیم؛ تا اینجای آموزش چندان دشوار نبود و فقط با خوندن همین پست ها میتونستید منظور من رو بطور کامل متوجه بشید، اما از این به بعد چون CSS یه مقدار پیچیده میشه (نترسین، پیچیده به این معنی که بصورت تئوری نمیتونم منظورمو بطوری که 100% متوجه صحبتهام بشید بهتون منتقل کنم) سعی می کنم سایر مفاهیم باقیمونده رو بصورت مثال های کاربردی براتون بیان کنم و جز به جز بخش ها و کاربردهاشو با هم تحلیل می کنیم تا برای ورود به بخش طراحی قالب آماده بشیم؛ پس همچنان با من و مدرسه کوچک تیتکا همراه باشید.

ویرگول,برنامه نویسی,آموزش,رایانه,css,html,