ایجاد حاشیه برای تصاویر توسط css

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

نوع حاشیه: border-style

              صفحات حاشیه: border-width
رنگ حاشیه: border-color
 

برخی مقادیر قابل قبول برای ویژگی border-style (نوع حاشیه) شامل لیست زیر می باشد:

نقطه چین: Dotted

خط چین: dashed

خط ممتد: solid

خط دو خطی: double

ضخامت حاشیه سه حالت دارد: نازک، متوسط و ضخیم. اما همچنین می تواند ضخامت دقیق را به واحد پیکسل تعیین نمایید. ویژگی Border colour نیز رنگ حاشیه را مشخص می کند که می تواند هر یک از مقادیر قابل قبول رنگ (نام رنگ، مقدار هگزا دسیمال  و یا مقدار rgb) را بپذیرد.

تمرین: استایل های زیر را به کلاس TextWrap خود اضافه نمایید:

در اینجا، ما ضخامتی از نوع خط ممتد و ضخامت 2 پیکسل و رنگ دلخواه ایجاد کرده ایم. تغییرات را ذخیره و نتیجه را در مرورگر مشاهده نمایید.

تمرین: سایر انواع حاشیه(border styles) را که بالاتر توضیح داده شد را در تمرین قبلی امتحان نمایید. همچنین ضخامت و رنگ را نیز تغییر دهید و نتیجه را مشاهده کنید.

حاشیه ای که توسط css ایجاد کرده ایم را می توان بر عناصر مختلف html اعمال کرد. بعنوان مثال، چنانچه حاشیه ای در اطراف یک پاراگراف متنی بخواهیم، تنظیمات را نوشته و کلاس آن را به تگ <p> اعمال می کنیم مانند:

(مقدار padding در مثال فوق، فاصله را میان حاشیه و متن ایجاد می کند).

ویژگی Background (پشت زمینه).

عناصر در html، می تواند رنگ یا تصویری در پشت زمینه خود داشته باشند. (منظور از عناصر، تمام تگهای استفاده شده در میان تگ BODY می باشد).

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

با اعمال ویژگی فوق، کل صفحه رنگ جدید را به خود می گیرد، به این دلیل که ما رنگ را بر روی تگ BODY اعمال کرده ایم.

همچنین می توانید تنظیماتی را با استفاده از کلاس برای یک پاراگراف تنها ایجاد نمایید:

نتیجه به شکل زیر خواهد بود:

در مثال فوق، پشت زمینه به رنگ سبز، فاصله ای میان متن و حاشیه برابر با 20 پیکسل، و حاشیه ای از نوع خط ممتد و صخامت 2 پیکسل تنظیم شده است. تنظیمات فوق برای پاراگراف هایی که دارای کادر هستند مناسب است.

همچنین می توان کادرهای فانتزی به صورت زیر ایجاد کرد:

نتیجه تنظیمات فوق به شکل زیر خواهد بود:

توجه فرمایید که در مثال فوق، 3 ویژگی CSS برای یک مقدار بکار برده شده است:

border-top: 2px #159648 dotted;
border-bottom: 2px #159648 dotted;

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

در درس بعدی با تصاویر پشت زمینه در CSS آشنا خواهیم شد.