آموزش مقدماتیHTMLوCSS(جلسه ۸:باز کردنBox Model-بخش دو)
1398/02/21 15:55 , میلاد صاحب نظر

آموزش مقدماتیHTMLوCSS(جلسه ۸:باز کردنBox Model-بخش دو)

در جلسه قبل با مفهوم box model، تعریف و ویژگی‌های آن آشنا شدید. در مورد بخش‌های مختلف box office و چگونگی تغییر آن‌ها صحبت شد. در واقع فقط ظاهر box model مورد بررسی قرار گرفت. در این جلسه در مورد محتوای درون box model صحبت می‌کنیم و این مبحث را کامل خواهیم کرد. با ما همراه باشید‌!

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

جعبه محتوا (Content Box)

مقدار Content – box یک مقدار پیش‌فرض است که box model را به یک طراحی افزایشی یا additive تبدیل می‌کند. اگر از ویژگی box – sizing استفاده نکنیم، این مقدار پیش‌فرض برای همه عنصر‌ها اعمال خواهد شد.

سایز یک عنصر با ویژگی‌های width و height شروع شده و بعد یکی از مقادیر ویژگی‌های border، padding یا margin اضافه می‌شود و به همین شکل ادامه می‌یابد تا تکمیل شود.

div {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

ویژگی‌ها و مقادیر مخصوص مرورگر

قطعاً برایتان سؤال پیش آمد که آن خط تیره‌ها و حروف عجیب به کار رفته در ویژگی box – sizing چه هستند، درست است؟

از زمانی که CSS3 معرفی شد، مرورگرها شروع به پشتیبانی از ویژگی‌ها و مقادیر مختلفی کردند، یکی از آن‌ها ویژگی box – sizing است که به صورت vendor prefix از آن استفاده شد. وقتی بخش‌های تعیین مشخصات CSS3 طراحی نهایی شدند و ورژن‌های جدیدی از مرورگرها منتشر شد، این vendor prefixها کم‌کم کنار گذاشته شدند.

احتمالاً در آینده نزدیک دیگر Vendor prefixها لزومی نخواهند داشت و مشکلی ایجاد نمی‌کنند. البته، هنوز هم برای برخی از مرورگرهای قدیمی که آن‌ها را پشتیبانی می‌کنند، کاربرد دارند. در طول دوره هر از گاهی به آن‌ها برمی‌خوریم و حتی اگر بخواهیم مرورگرهای قدیمی را هم پشتیبانی کنیم، احتمال دارد از آن‌ها استفاده کنیم.

Vendor prefixها ممکن است هم در ویژگی‌ها و هم در مقادیر مشاهده شوند. همه چیز بستگی به مشخصات CSS دارد. در مثال بالا، آن‌ها در ویژگی box – sizing به کار رفتند. تأمین‌کنندگان (Vendorهای) مرورگر می‌توانند تصمیم بگیرند که برای مرورگرشان از یک پیشوند استفاده بشود یا نه.

بنابراین، بعضی از ویژگی‌ها و مقادیر برای مرورگرهای خاص به vendor prefixها نیاز دارند، اما اکثراً نیازی به آن‌ها نیست.

بگذریم، وقتی یک ویژگی یا مقدار به یک vendor prefix نیاز دارد، پیشوند فقط در بخش معرفی یا تعریف آن ویژگی یا مقدار استفاده می‌شود (با این هدف که کد ما راحتی و خوانایی‌اش را از دست ندهد). در هنگام نوشتن کد، vendor prefixها ضروری و لازم را فراموش نکنید.

محض اطلاعتان، مرسوم‌ترین vendor prefixها به شرح زیر هستند:

  • موزیلا فایرفاکس: -moz-
  • مایکروسافت اینترنت اکسپلورر: -ms-
  • Webkit  (اپل سافاری و گوگل کروم): -webkit-

Padding Box

مقدار padding-box با افزودن مقادیر ویژگی padding درون عنصرهای width و box model ، height را تغییر می‌دهد. وقتی از مقدار padding-box استفاده می‌کنید، اگر یک عنصر دارای ویژگی width با مقدار ۴۰۰ پیکسل و ویژگی padding با مقدار ۲۰ پیکسل در هر سمت باشد، آنگاه مقدار واقعی width همان ۴۰۰ پیکسل باقی می‌ماند.

هر چه مقادیر padding افزایش یابند، سایز محتوای درون یک عنصر متناسب با آن کاهش می‌یابد.

اگر یک border یا margin اضافه کنیم، آن مقادیر به ویژگی‌های width یا height اضافه می‌شوند تا سایز کامل جعبه محاسبه شود. برای مثال، اگر یک border با مقدار ۱۰ پیکسل و یک padding با مقدار ۲۰ پیکسل به هر سمت از عنصری که دارای width با مقدار ۴۰۰ پیکسل است اضافه کنیم، عرض کلی و واقعی ۴۲۰ پیکسل خواهد شد.

div {
  box-sizing: padding-box;
}

مقدار padding-box منسوخ شده است

با تکامل و پیشرفت مشخصات و قابلیت‌های CSS، مقدار padding-box برای ویژگی box-sizing منسوخ شده و نباید استفاده شود.

Border-box

در آخر، مقدار border-box به گونه‌ای box model را تغییر می‌دهد که همه مقادیر ویژگی‌های border یا padding درون width و height یک عنصر قرار گیرند.

وقتی از مقدار border-box استفاده می‌کنید، اگر یک عنصر دارای width با مقدار ۴۰۰ پیکسل، یک padding با مقدار ۲۰ پیکسل در هر سمت و یک border با مقدار ۱۰ پیکسل در هر سطح داشته باشید، عرض واقعی ۴۰۰ پیکسل باقی خواهد ماند.

اگر یک margin اضافه کنیم، برای محاسب سایز کامل جعبه ، آن مقادیر باید افزوده شوند. مهم نیست کدام مقدار ویژگی box-sizing استفاده می‌شود، به هر حال برای محاسبه سایز کامل عنصر همه مقادیر margin باید محاسبه شوند.

div {
  box-sizing: border-box;
}

مقادیر مختلف box-sizing امکانی ایجاد می‌کنند تا عرض یک عنصر (و جعبه‌اش) از جهات مختلفی محاسبه شود.

تصویر ۸.۱. مقادیر مختلف box-sizing امکانی ایجاد می‌کنند تا عرض یک عنصر (و جعبه‌اش) از جهات مختلفی محاسبه شود.

انتخاب سایز جعبه (Box Size)

کلاً، بهترین مقدار box-sizing که می‌توان استفاده کرد، border-box است. مقدار border-box باعث می‌شود محاسبات ریاضی خیلی خیلی آسان‌تر شوند. اگر می‌خواهیم یک عنصر ۴۰۰ پیکسل پهنا داشته باشد، مهم نیست چه padding یا مرزی (border) به آن اضافه کنیم، به هر حال مقدار عرضش همان ۴۰۰ پیکسل باقی می‌ماند.

علاوه بر این، می‌توانیم به آسانی مقادیر طول را با هم ترکیب کنیم. فرض کنید می‌خواهیم جعبه ۴۰درصد عرض داشته باشد.

افزودن یک padding با مقدار ۲۰ پیکسل و یک border با مقدار ۱۰ پیکسل در اطراف هر عنصر کار مشکلی نیست و هنوز می‌توانیم تضمین کنیم که عرض واقعی جعبه ما علی رغم استفاده از مقادیر پیکسل در محل‌های دیگر، همان ۴۰ درصد باقی می‌ماند.

تنها نقطه ضعف استفاده از ویژگی box-sizing این است که به عنوان بخشی از مشخصات CSS3، همه مرورگرها از آن پشتیبانی نمی‌کنند. به خصوص مرورگرهای قدیمی اصلاً از آن پشتیبانی نمی‌کنند.

خوشبختانه هر چه مرورگرهای جدیدتری منتشر می‌شوند، این ویژگی رو به اضمحلال می‌رود. احتمال دارد که بتوانیم بدون مشکل از ویژگی box-sizing استفاده کنیم، اما اگر با هر مشکلی مواجه شدیم، باید دقت کنیم که آن مشکلات در کدام مرورگرها رخ می‌دهند.

Developer Tools

اکثر مرورگرها از چیزی که به ابزارهای توسعه‌دهنده (Developer Tools) معروف است، برخوردار هستند.

این ابزارها به ما امکان می‌دهند تا یک عنصر در صفحه را بررسی کنیم، ببینیم آن عنصر در کجای سند HTML قرار گرفته است و چه ویژگی‌ها و مقادیری از CSS برای آن اعمال شده‌اند. اکثر این ابزارها همچنین شامل یک نمودار box model برای نمایش سایز محاسبه شده از یک عنصر هستند.

برای دیدن Developer Tools در گوگل کروم، در نوار منو روی View کلیک کنید و سپس به قسمت Developer بروید و بعد روی Developer Tools کلیک کنید. با این کار، یک میز کار در پایین پنجره مرورگر باز می‌شود که شامل چند ابزار برای بررسی کد شما است.

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

بعد از انتخاب یک عنصر، در سمت راست پنل عنصرها درون Developer Tools چند تب مشاهده می‌کنیم. اگر تب Computed را انتخاب کنید، مدل تجزیه شده‌ای از box model مخصوص عنصر انتخابی ما را نمایش می‌دهد.

باز هم در Developer Tools پرسه بزنید، به خصوص در مرورگرهای گوگل کروم، موزیلا فایرفاکس، اپل سافاری یا مرورگرهای دیگر. با بررسی کدتان می‌توانید چیزهای زیادی بیاموزید. کلاً عادت کنید که وقتی در حال کد نوشتن با زبان‌های HTML و CSS هستید، همیشه میز کار Developer Tools را باز نگه دارید.

همچنین کدهای سایت‌های دیگر را نیز با استفاده از این ابزار بررسی کنید تا ببینید چگونه ساخته شده‌اند.

Developer Tools

شکل ۸.۲. Developer Tools در گوگل کروم، که در بررسی کدهای HTML و CSS در هر صفحه‌ای به ما کمک می‌کنند.

Box model یکی از گیج‌کننده و گمراه‌کننده‌ترین بخش‌های یادگیری کد نوشتن با HTML و CSS است. همچنین یکی از قدرتمند‌ترین بخش‌های HTML و CSS نیز هست و وقتی بر آن مسلط شدید، اکثر مباحث آینده (مانند موقعیت گذاری محتوا) برایتان خیلی آسان خواهد شد.

تمرین

بسیار خب برگردیم به سراغ تمرین وبسایت Styles Conference خودمان. قصد داریم محتوای آن را در مرکز صفحه قرار دهیم و محتوای بیشتری هم به آن اضافه کنیم.

  1. کار را با تنظیم سایز جعبه شروع می‌کنیم تا بتوانیم از نسخه border-box از box model استفاده کنیم، که باعث می‌شود سایزبندی تمام عنصرهایمان خیلی آسان‌تر شود. درون فایل css، درست در زیر کدهای reset، یک کامنت قرار دهیم که برای شناسایی کدهایی که قرار است grid را تشکیل دهند و layout و طراحی وبسایت ما را مشخص کنند کمک بزرگی است. این کامنت را در زیر Reset قرار می‌دهیم تا درون cascade در موقعیت مناسبی قرار بگیرد.
    از اینجا به بعد، می‌توانیم از انتخاب کننده کلی یا جهانی (یعنی *) همراه با عنصرهای pseudo (یعنی *:before و *:after) استفاده کنیم تا همه عنصرهای موجود را انتخاب کنیم و box-sizing آن‌ها را به border-box تغییر دهیم. به یاد داشته باشید، قصد ما این است که vendor prefixهای ضروری را برای ویژگی box-sizing به کار ببریم، چون box-sizing یک ویژگی بسیار جدید است.
/*
  ========================================
  Grid
  ========================================
*/

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
  1. سپس می‌خواهیم یک کلاس ایجاد کنیم که به عنوان ظرفی برای عنصرهای ما عمل می‌کند. می‌توانیم از این کلاس ظرف برای تنظیم یک width مشترک استفاده کنیم، عنصرها را در مرکز صفحه قرار دهیم و چند padding افقی مشترک ایجاد کنیم.
    درست در زیر مجموعه قوانین Selector جهانی، یک Selector همراه با کلاسی به نام container ایجاد می‌کنیم. درون این Selector مقدار ویژگی width را ۹۶۰ پیکسل، paddingهای left و right را روی ۳۰ پیکسل، marginهای top و bottom را روی ۰ و marginهای left و right را روی auto تنظیم می‌کنیم.
    تنظیم یک width به مرورگر ما می‌گوید که هر عنصر درون کلاس container چقدر باید عرض داشته باشد. با استفاده از مقدار auto در marginهای left و right همراه با width، مرورگر به صورت خودکار متوجه می‌شود که marginهای left و right برای عنصر باید برابر باشند، بنابراین آن را در مرکز صفحه قرار می‌دهد. در آخر، paddingهای right و left اطمینان می‌دهند که محتوای ما دقیقاً در لبه‌های عنصر قرار نگیرد و کمی فضا برای محتوا فراهم می‌کنند.
    .container {
      margin: 0 auto;
      padding-left: 30px;
      padding-right: 30px;
      width: 960px;
    }
    ​
  2. حالا که یک کلاس container برای استفاده داریم، پس ادامه می‌دهیم و کلاس container خود را از طریق HTML برای عنصرهای <header> و <footer> در هر صفحه اعمال می‌کنیم، به خصوص در فایل‌های html، schedule.html، speakers.html، index.html و register.html.
    <header class="container">...</header>
    
    <footer class="container">...</footer>​
  3. حالا که تا اینجای کار آمدیم اجازه دهید محتوا را در تمام صفحه‌هایمان در مرکز قرار دهیم. در صفحه خانه، یعنی فایل html یک کلاس container برای هر عنصر <section> در صفحه اضافه می‌کنیم، یکی برای بخش قهرمان (همان بخشی که کنفرانس ما را معرفی می‌کند) و یکی برای تیزرها.
    <section class="container">...</section>
    ​

    علاوه بر این، تمام عنصرهای <h1> در هر صفحه را با استفاده از یک عنصر <section> درون کلاس container جمع می‌کنیم.
    <section class="container">
      <h1>...</h1>
    </section>
    ​

    بعداً به سراغ این عنصرها و کلاس‌ها برمی‌گردیم و آن‌ها را تنظیم می‌کنیم، اما فعلاً در مسیر درستی قرار داریم.
  4. حالا که همه محتوای ما در مرکز صفحه قرار گرفته‌اند، اجازه دهید چند فضای عمودی بین عنصرها ایجاد کنیم. برای شروع، یک bottom margin با مقدار۲۲ پیکسلی برای چند مورد از عنصرهای هدینگ و پاراگراف قرار می‌دهیم. این typographyها را در زیر استایل‌های Grid قرار می‌دهیم و برای آن‌ها کامنت می‌گذاریم.
    /*
      ========================================
      Typography
      ========================================
    */
    
    h1, h3, h4, h5, p {
      margin-bottom: 22px;
    }​

    از عمد از عنصرهای <h2> و <h6> گذشتیم، چون طراحی در عنصرهای <h2> حاشیه‌ها یا marginها را فراخوانی نمی‌کند و همچنین در حال حاضر از هیچ عنصر <h6> استفاده نمی‌کنیم.
  5. همچنین اجازه دهید یک مرز و چند گوشه گرد شده‌ نیز ایجاد کنیم. کارمان را با قرار دادن یک کلید (button) درون عنصر <section> بالایی در صفحه خانه شروع می‌کنیم، دقیقاً در زیر هدر.
    از قبل یک عنصر <a> درون این عنصر <section> اضافه کردیم. حالا کلاس‌های btn و btn-alt را به این anchor اضافه می‌کنیم.
    <a class="btn btn-alt">...</a>
    ​

    حالا اجازه دهید چند استایل برای آن کلاس‌ها درون CSS ایجاد کنیم. در زیر مجموعه قوانین typography، یک بخش جدید از فایل CSS برای کلید‌ها ایجاد می‌کنیم.
    برای شروع، کلاس btn را اضافه کرده و چند استایل مرسوم که می‌توان آن‌ها را در بین همه کلید‌ها به اشتراک گذاشت را اضافه می‌کنیم. می‌خواهیم همه کلید‌هایمان دارای brder-radius با مقدار ۵ پیکسل باشند. آن‌ها باید به عنوان عنصرهای inline-block نمایش داده شوند، تا بتوانیم به اطراف تمام چهار وجه آن‌ها بدون هیچ مشکلی padding اضافه کنیم. همه marginها را حذف می‌کنیم.
    /*
      ========================================
      Buttons
      ========================================
    */
    
    .btn {
      border-radius: 5px;
      display: inline-block;
      margin: 0;
    }
    ​

    همچنین می‌خواهیم استایل‌های مخصوص به این کلید را درج کنیم، که این کار را با استفاده از کلاس btn-alt انجام می‌دهیم. در اینجا یک border صاف، خاکستری و دارای مقدار ۱ پیکسل، paddingهای top و bottom کلید با مقدار ۱۰ پیکسل و paddingهای left و right کلید با مقدار ۳۰ پیکسل اضافه می‌کنیم.
    .btn-alt {
      border: 1px solid #dfe2e5;
      padding: 10px 30px;
    }
    ​

    استفاده از هر دو کلاس‌های btn و btn-alt در یک عنصر <a> مشترک، امکان لایه‌بندی این استایل‌ها و رندر کردن تمام استایل‌ها در یک عنصر فراهم می‌شود.
  6. چون روی صفحه خانه کار می‌کنیم، همچنین کمی padding به عنصر <section> که شامل عنصر <a> و کلاس‌های btn و btn-alt است، اضافه می‌کنیم. این کار را با افزودن یک اتریبیوت کلاس با مقدار hero به عنصر <section> و همچنین مقدار اتریبیوت کلاس container انجام می‌دهیم (چون این کد بخش آغازین و شروع وبسایت ما است).
    <section class="hero container">
      ...
    </section>
    ​

    سپس یک بخش جدید درون فایل CSS برای استایل‌های صفحه خانه ایجاد می‌کنیم و وقتی آماده شدیم، از کلاس hero برای اعمال padding در اطراف هر چهار وجه از عنصر <section> استفاده می‌کنیم.
    /*
      ========================================
      Home
      ========================================
    */
    
    .hero {
      padding: 22px 80px 66px 80px;
    }
    ​

    وبسایت ما کم‌کم دارد شکل می‌گیرد، به خصوص صفحه خانه.

صفحه خانه سایت Styles Conference

شکل ۸.۳. صفحه خانه سایت Styles Conference، بعد از چند به روز رسانی دیگر درست و حسابی شکل می‌گیرد

دمو و کد منبع

در زیر، می‌توانید وبسایت Styles Conference را در وضعیت فعلی‌اش مشاهده کنید و همچنین می‌توانید کد منبع وضعیت فعلی وبسایت را نیز دانلود کنید.

لینک مشاهده وبسایت Styles Conference                    کد منبع وبسایت Styles Conference

Selector جهانی

در اولین قدم این تمرین از selector جهانی صحبت کردیم. در CSS، علامت ستاره (*) یک selector جهانی است، که تمام عنصرها را انتخاب می‌کند. به جای اینکه تمام عنصرهای موجود را لیست کنیم، می‌توانیم از * برای انتخاب تمام عنصرها استفاده کنیم.

عنصرهای  pseudo (سودو) before: و after: نیز در این قدم معرفی شدند. این دو عنصرهایی هستند که می‌توان آن‌ها را به صورت پویا با CSS تولید کرد. قرار نیست درون پروژه این دوره از این عنصرها استفاده کنیم. به هر حال، وقتی از Selector جهانی استفاده می‌کنید، فکر خوبی است که از این عنصرهای سودو نیز استفاده کنید.

خلاصه

یادگیری تمام بخش‌های مختلف box model اصلاً قدم کوچکی نیست. این مفاهیم، اگرچه به اختصار بیان شدند، اما زمان زیادی برای مسلط شدن بر آن‌ها نیاز است و شما نیز در مسیر درستی قرار دارید.

به طور خلاصه، در جلسات هفتم و هشتم موارد زیر پوشش داده شدند:

  • چگونگی نمایش عنصرهای مختلف
  • Box model چیست و چرا اهمیت دارد
  • چگونه سایز را تغییر دهیم، به خصوص عنصرهای height و width
  • چگونه padding، margin و border به عنصرها اضافه کنیم
  • چگونه سایزبندی جعبه عنصرها و تأثیراتی که بر box model دارند را تغییر دهیم

حالا که درک بهتری نسبت به چگونگی نمایش عنصرها و سایزبندی آن‌ها دارید، وقت آن است که به سراغ موقعیت گیری این عنصرها برویم.

با MUG همراه باشید!

منبع: learn,shayhowe

جلسه بعد                                                     جلسه قبل

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
 بهترین قالب‌های رایگان HTML5 و CSS3
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات