ساخت Container : ایجاد padding (حاشیه) به اندازه 16px در سمت چپ و راست عناصر صفحه HTML ، با کلاس w3-container ، در W3.CSS
هنگامی که ما وب سایتی را طراحی می کنیم، نیاز داریم که فاصله محتوای موجود در عناصر مختلف صفحات HTML وب سایت، یکسان باشد. علاوه بر این، حتما باید یک مقدار فاصله از بالا و پایین و همچنین از سمت چپ و راست صفحه وجود داشته باشد، در غیر این صورت، وب سایت ساختار مناسبی نخواهد داشت و از زیبایی آن کم می شود. بنابراین باید یک یا چند کلاس (Class) داشته باشیم که اگر عناصر مورد نظرمان از صفحه HTML را در آن کلاس ها (Class) قرار دهیم، یک سری فاصله های استاندارد را برای محتوای درون عنصرها به وجود بیاورند.
دو کلاس w3-container و w3-panel از چارچوب W3.CSS ، می توانند برای این منظور به کار روند که ما در این کلید آموزشی، کلاس w3-container را شرح می دهیم و توضیحات در مورد کلاس w3-panel را نیز می توانید در کلید شماره 26163 بخوانید.
دو کلاس w3-panel و w3-container ، هر دو برای ایجاد padding (حاشیه) به اندازه 16px در سمت چپ و راست عناصر صفحه HTML به کار می روند، اما کلاس w3-panel علاوه بر این مورد، دارای اثر ایجاد margin (حاشیه) به اندازه 16px در بالا و پایین عنصر نیز خواهد بود.
دو ویژگی margin و padding از CSS ، هر دو برای ایجاد حاشیه (فضای خالی) در اطراف عنصر به کار می روند، اما تفاوتشان در این است که فضای خالی به وجود آمده توسط padding ، جزء محدوده عنصر است، اما فضای خالی ایجاد شده توسط margin ، جزء محدوده عنصر نیست.
این تفاوت زمانی آشکار می شود که یک رنگ پس زمینه برای عنصر مشخص کنیم، در این حالت، اگر از padding استفاده شده باشد، چون فضای خالی جزء عنصر است، رنگ پس زمینه آن نیز تغییر می کند، اما اگر از margin استفاده شده باشد، رنگ پس زمینه آن تغییر نمی کند.
کلاس w3-container در W3.CSS ، برای ایجاد padding به اندازه 16px در سمت چپ و راست عناصر صفحه HTML به کار می رود. بنابراین می توانیم آن را در تگ هایی مثل div و article و section و header و footer و form و ... از صفحه HTML که برای نمایش محتوای بخش های مختلف وب سایت به کار می روند، قرار دهیم.
به عنوان مثال، برای تگ div می توانیم کد زیر را بنویسیم :
با توجه به مناسب بودن مثال های وب سایت w3schools.com ، مثال های این آموزش را بر اساس آنها خواهیم نوشت.
اکنون برای اینکه تفاوت بین دو حالت استفاده از کلاس w3-container یا عدم استفاده از آن را درک کنید، به مثال زیر توجه نمایید :
در کدهای صفحه HTML ، دو تگ div که دقیقا دارای محتوایی مثل یکدیگر می باشند را یکی با کلاس w3-container و دیگری را بدون آن کلاس می نویسیم. بنابراین در خروجی صفحه HTML می توانیم مقایسه کنیم که این دو حالت، چه تفاوتی با یکدیگر دارند.
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
تغییر رنگ پس زمینه عنصر :
چنانچه قصد داشته باشیم که رنگ پس زمینه عنصر مورد نظر را نیز تغییر بدهیم، باید کلاس مربوط به آن رنگ نیز برای آن عنصر ذکر گردد. به عنوان مثال، کلاس w3-blue متناظر با رنگ آبی است و به صورت زیر می توانیم آن را به عنوان رنگ پس زمینه عنصر ذکر کنیم :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
ساخت Header و Footer :
برای ساخت Header در صفحه HTML ، به صورتی که کلاس w3-container نیز برای آن ذکر شده باشد و دارای فاصله مناسب از سمت راست و چپ صفحه باشد، باید کدهای آن را به صورت زیر بنویسیم :
در کد بالا، کلاس w3-teal ، رنگ پس زمینه را تعیین کرده است که در صورت تمایل، می توانید به جای آن، کلاس مربوط به هر رنگ دیگری را ذکر نمایید.
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
برای ساخت Footer می توانیم کدها را به صورت زیر بنویسیم :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
اگر بخواهیم که عنوان بزرگتری برای خط اول Footer تعیین شود، می توانیم به جای تگ h5 ، از تگ h3 استفاده کنیم. بنابراین این بار، کدها را تنها با تغییر تگ h5 به h3 می نویسیم :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
استفاده در تگ های article و section :
به کار بردن کلاس w3-container در تگ های article و section ، به صورت زیر می باشد :
در این مثال، سه حالت را برای درج متن به کار می بریم :
1- استفاده از تگ div
2- استفاده از تگ article
3- استفاده از تگ section
بخش مهم کدها :
کد کامل صفحه 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
-
نکته : این فهرست مباحث، صرفا منتخبی از کلیدهای آموزشی این موضوع است (که خواندن متوالی آنها توصیه می شود) و برای دیدن کلیدهای آموزشی بیشتر از این موضوع، می توانید بر روی دسته بندی های ستون سمت راست کلیک نمایید.
