ساخت Panel : ایجاد margin (حاشیه) به اندازه 16px در بالا و پایین و همچنین padding (حاشیه) به اندازه 16px در سمت چپ و راست عناصر صفحه HTML ، با کلاس w3-panel ، در W3.CSS
هنگامی که ما وب سایتی را طراحی می کنیم، نیاز داریم که فاصله محتوای موجود در عناصر مختلف صفحات HTML وب سایت، یکسان باشد. علاوه بر این، حتما باید یک مقدار فاصله از بالا و پایین و همچنین از سمت چپ و راست صفحه وجود داشته باشد، در غیر این صورت، وب سایت ساختار مناسبی نخواهد داشت و از زیبایی آن کم می شود. بنابراین باید یک یا چند کلاس (Class) داشته باشیم که اگر عناصر مورد نظرمان از صفحه HTML را در آن کلاس ها (Class) قرار دهیم، یک سری فاصله های استاندارد را برای محتوای درون عنصرها به وجود بیاورند.
دو کلاس w3-panel و w3-container از چارچوب W3.CSS ، می توانند برای این منظور به کار روند که ما در این کلید آموزشی، کلاس w3-panel را شرح می دهیم و توضیحات در مورد کلاس w3-container را نیز می توانید در کلید شماره 26162 بخوانید.
دو کلاس w3-panel و w3-container ، هر دو برای ایجاد padding (حاشیه) به اندازه 16px در سمت چپ و راست عناصر صفحه HTML به کار می روند، اما کلاس w3-panel علاوه بر این مورد، دارای اثر ایجاد margin (حاشیه) به اندازه 16px در بالا و پایین عنصر نیز خواهد بود.
دو ویژگی margin و padding از CSS ، هر دو برای ایجاد حاشیه (فضای خالی) در اطراف عنصر به کار می روند، اما تفاوتشان در این است که فضای خالی به وجود آمده توسط padding ، جزء محدوده عنصر است، اما فضای خالی ایجاد شده توسط margin ، جزء محدوده عنصر نیست.
این تفاوت زمانی آشکار می شود که یک رنگ پس زمینه برای عنصر مشخص کنیم، در این حالت، اگر از padding استفاده شده باشد، چون فضای خالی جزء عنصر است، رنگ پس زمینه آن نیز تغییر می کند، اما اگر از margin استفاده شده باشد، رنگ پس زمینه آن تغییر نمی کند.
کلاس w3-panel برای ایجاد margin (حاشیه) به اندازه 16px در بالا و پایین و همچنین padding (حاشیه) به اندازه 16px در سمت چپ و راست عناصر صفحه HTML ، به کار می رود.
به عنوان مثال، برای تگ div می توانیم کد زیر را بنویسیم :
با توجه به مناسب بودن مثال های وب سایت w3schools.com ، مثال های این آموزش را بر اساس آنها خواهیم نوشت.
به مثال زیر توجه کنید :
با این مثال، قصد داریم که تفاوت بین دو کلاس w3-panel و w3-container را نمایش بدهیم (در واقع تفاوت در ایجاد margin در بالا و پایین عنصر).
بخش مهم کدها :
کلاس w3-red ، رنگ پس زمینه عنصر را به رنگ قرمز و همچنین کلاس w3-green ، رنگ پس زمینه عنصر را به رنگ سبز تغییر می دهد.
کد کامل صفحه HTML :
نتیجه :
مشاهده می کنید که کلاس w3-panel ، باعث ایجاد margin در بالا و پایین عنصر می شود، اما کلاس w3-container ، این اثر را ندارد.
ساخت یادداشت (Note)، با استفاده از کلاس w3-panel در W3.CSS :
کلاس w3-panel در W3.CSS ، می تواند برای ساخت یادداشت (Note) به کار رود. تنها کافی است که برای عنصر دارای محتوای مربوط به یادداشت (Note) (یا عناصر سطح بالاتر)، کلاس w3-panel را ذکر کنیم. همچنین معمولا یک کلاس مربوط به یک رنگ انتخابی نیز برای آن عنصر تعیین می شود تا رنگ پس زمینه عنصر مشخص شود.
به عنوان مثال :
بخش مهم کدها :
کلاس w3-pale-yellow ، تعیین می کند که رنگ پس زمینه عنصر برابر رنگ pale-yellow باشد.
کد کامل صفحه HTML :
نتیجه :
ساخت نقل قول (Quote)، با استفاده از کلاس w3-panel در W3.CSS :
کلاس w3-panel می تواند برای ساخت نقل قول (Quote) به کار رود. البته ما باید فونت و اندازه فونت و رنگ پس زمینه و سایر موارد مورد نظرمان برای نقل قول (Quote) را نیز بر اساس کلاس های موجود در W3.CSS تعیین کنیم.
به عنوان مثال :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
ساخت هشدار (Alert)، با استفاده از کلاس w3-panel در W3.CSS :
برای ساخت هشدار (Alert)، با استفاده از کلاس w3-panel ، تنها کافی است که رنگ پس زمینه عنصر را برابر رنگ قرمز تعیین کنیم.
به عنوان مثال :
بخش مهم کدها :
کلاس w3-red ، رنگ پس زمینه عنصر را به رنگ قرمز (red) تغییر می دهد.
کد کامل صفحه HTML :
نتیجه :
ساخت کارت (Card)، با استفاده از کلاس w3-panel و کلاس های مربوط به ساخت کارت (Card)، در W3.CSS :
در چارچوب، W3.CSS ، کلاس هایی (Class) برای ساخت کارت (Card) به کار می روند، مثل کلاس w3-card-4 (در نام این کلاس ها، کلمه card وجود دارد). حال برای ایجاد فاصله مناسب برای محتوای قرار گرفته در آنها، می توانیم کلاس w3-panel را برای آنها ذکر نماییم.
به عنوان مثال :
بخش مهم کدها :
کلاس w3-purple ، رنگ پس زمینه عنصر را به رنگ بنفش (purple) تغییر می دهد.
کد کامل صفحه HTML :
نتیجه :
ایجاد گوشه گرد شده (Rounded) برای یک Panel :
برای ایجاد گوشه گرد شده (Rounded) برای یک Panel ، می توانیم یکی از کلاس های مربوط به ایجاد گوشه گرد شده (Rounded) را برای آن ذکر کنیم، مثل کلاس w3-round-xlarge (در نام این کلاس ها، کلمه round نوشته می شود).
به عنوان مثال :
بخش مهم کدها :
کلاس w3-brown ، رنگ پس زمینه عنصر را به رنگ قهوه ای (brown) تغییر می دهد.
کد کامل صفحه HTML :
نتیجه :
پنهان کردن یک Panel :
برای ایجاد قابلیت پنهان شدن Panel ها، می توانیم یک دکمه با علامت x برای آنها ایجاد کنیم (البته با استفاده از تگ span) و تعیین کنیم که با کلیک بر روی آن، یک سری کد javascript اجرا شوند که Panel را پنهان کنند.
برای درک این موضوع، به مثال زیر توجه کنید :
بخش مهم کدها :
بر اساس کد بالا، چنانچه بر روی عنصر span کلیک شود، کد javascript زیر اجرا خواهد شد (بر اساس مشخصه onclick برای تگ span) :
اجرای کد javascript بالا، باعث پنهان شدن Panel می شود.
کد کامل صفحه HTML :
نتیجه :
نمایش (باز کردن) یک Panel :
ما می توانیم تعیین کنیم که یک Panel ابتدا به صورت پنهان شده باشد و پس از کلیک کردن کاربر بر روی یک دکمه (دکمه ساخته شده با تگ button)، آن Panel نمایش داده شود و کاربر بتواند آن را ببینید.
برای درک این موضوع، به مثال زیر توجه کنید :
بخش مهم کدها :
در کد بالا دقت کنید که برای عنصر، یک id تعیین کرده ایم که نقش مهمی در شناسایی عنصر و نمایش دادن آن دارد.
کد javascript مربوط به نمایش Panel ، به صورت زیر می باشد (اجرای آن بر اساس مشخصه onclick برای تگ button می باشد) :
که باعث می شود عنصر بر اساس id آن، شناسایی شده و از حالت پنهان در بیاید و به کاربر نمایش داده شود.
پنهان بودن اولیه عنصر بر اساس کد زیر تعیین شده است :
کد کامل صفحه HTML :
نتیجه :
- فهرست مباحث
- 1 معرفی چارچوب W3.CSS برای ساخت یک وب سایت واکنش گرا (Responsive) و طراحی گرافیکی آن، تنها با یک فایل CSS
- 2 افزودن چارچوب W3.CSS به صفحات وب سایت
- 3 شیوه نامگذاری کلاس ها (Class)، در چارچوب W3.CSS
- 4 رنگ ها (Color)، در W3.CSS
- 5 ساخت Container : ایجاد padding (حاشیه) به اندازه 16px در سمت چپ و راست عناصر صفحه HTML ، با کلاس w3-container ، در W3.CSS
- 6 ساخت Panel : ایجاد margin (حاشیه) به اندازه 16px در بالا و پایین و همچنین padding (حاشیه) به اندازه 16px در سمت چپ و راست عناصر صفحه HTML ، با کلاس w3-panel ، در W3.CSS
- 7 ساخت کارت (card) : ایجاد حاشیه سایه دار (bordered shadow) به دور عنصر، با کلاس های w3-card و w3-card-2 و w3-card-4 ، در W3.CSS
- 8 تعیین اندازه فونت ها (Font)، در W3.CSS
-
نکته : این فهرست مباحث، صرفا منتخبی از کلیدهای آموزشی این موضوع است (که خواندن متوالی آنها توصیه می شود) و برای دیدن کلیدهای آموزشی بیشتر از این موضوع، می توانید بر روی دسته بندی های ستون سمت راست کلیک نمایید.
