قاب هایی که در اطراف تصاویر یا متن قرار گرفته اند ، سایت را تزئین می کنند و به طراحی آن تنوع می بخشند. اگر برای ایجاد حاشیه از جداول استفاده می کنید ، کد هر حاشیه فضای زیادی را اشغال می کند. همچنین ، در این حالت ، باید کد HTML را برای هر فریم بازنویسی کنید. با استفاده از CSS می توانید با نوشتن یک کد ساده برای همه عناصری که توسط این حاشیه احاطه می شوند ، به راحتی می توانید حاشیه ای از هر ضخامت و رنگ مورد نظر خود ایجاد کنید. این فناوری در صورت لزوم به شما امکان می دهد ظرف چند دقیقه نوع فریم های سایت را تغییر دهد.
لازم است
- - وب سایت خود را داشته باشید.
- - بدانید CSS چیست و این سبک ها در سایت کجا نوشته شده اند.
دستورالعمل ها
مرحله 1
برای ایجاد حاشیه ، ابتدا کد زیر را در CSS بنویسید:
رامکا {}
گام 2
برای ایجاد حاشیه به اندازه دلخواه ، از پارامتر width-width استفاده کنید ، که عرض خط را به پیکسل تنظیم می کند. به عنوان مثال ، اگر عرض فریم باید 3 پیکسل عرض داشته باشد ، ورودی به این شکل خواهد بود:
ramka {عرض عرض: 3px؛}
مرحله 3
اکنون سبک حاشیه را با استفاده از پارامتر style-border تعریف کنید. اگر می خواهید حاشیه ای ایجاد کنید که کناره های آن خطوط منظم منظمی باشد ، ورودی زیر را در کد بین پرانتزهای حلقه ای قرار دهید - به سبک حاشیه: جامد.
مرحله 4
حاشیه نقطه ای را می توان با نوشتن آن به صورت زیر بدست آورد: border-style: dotted. بررسی سبک حاشیه: خط تیره حاشیه ای به شما می دهد.
مرحله 5
می توانید حاشیه را به یک خط ثابت و مضاعف بدین شکل تبدیل کنید: border-style: double. از سبک حاشیه ای: شیار یا حاشیه استفاده کنید: خط الراس برای فریم دادن متن یا تصاویر به فریم هایی با عوارض جانبی سه بعدی. تفاوت این دو گزینه در این است که در حالت اول ، قاب از خطوط فرورفتگی تشکیل شده است و در حالت دوم ، خطوط محدب.
مرحله 6
از این کد استفاده کنید: border-style: inset برای ایجاد جلوه یک inset با حاشیه عنصر سایت. برای اینکه محتوای حاشیه ، همراه با حاشیه ، برعکس ، محدب باشد ، به سبک حاشیه بنویسید: ابتدا.
مرحله 7
می توانید با استفاده از پارامتر حاشیه رنگ ، که در بین بریس های فر قرار دارد ، رنگ مورد نظر را به قاب اضافه کنید. اگر می خواهید حاشیه را قرمز کنید ، پس رنگ حاشیه را بنویسید: قرمز ، آبی - حاشیه ای: آبی ، نارنجی - حاشیه ای: نارنجی.
مرحله 8
کد حاشیه CSS ، شامل همه گزینه ها ، به صورت زیر است:
ramka {عرض-عرض: 3px؛ سبک مرزی: جامد؛ حاشیه رنگ: آبی؛}
مرحله 9
اکنون ، در HTML ، این را بنویسید:
محتوای قاب به جای عبارت "محتوای قاب" ، متن یا کد عکس مورد نظر را وارد کنید.
مرحله 10
بنابراین ، می توانید تعداد نامحدودی از عناصر را در سایت طراحی کنید. برای تغییر شکل قاب ، فقط باید کد CSS را تغییر دهید.
