هر آنچه که از پیکربندی با «سی اس اس» باید بدانید

در ابتدا تذکر می دهم که اگر این مطلب را از طریق لینک مستقیم صفحه می بینید، از elementهای اضافی صفحه وحشت نکنید! همچنین به منظور یادگیری بهتر، یک وبسایت در همین زمینه آماده شده است، که از آدرس fa.learnlayout.com قابل دسترسی است. در اینجا سعی دارم تا به مروری کلی درباره پیکربندی با CSS بپردازم. من فرض را بر آن می گیرم که شما از قبل می دانید که Selectorها، Propertyها و Valueها چه هستند. و همچنین شما باید بدانید که پیکربندی یعنی چه! و یا حداقل در حال یادگیری آن باشید.اگر که مبتدی هستید و می خواهید Html و CSS را فرا بگیرید من توصیه می کنم که از این لینک آغاز کنید.

استفاده نکردن از پیکربندی

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

بپردازیم.

display

قطعا مهمترین چیز برای کنترل پیکربندی display است. هر عنصر به طور پیش فرض این صفت را مقدار دهی کرده است، و این که چه مقداری دارد، به نوع آن عنصر وابسته است. این مقدار، به طور پیش فرض برای اکثر عنصر ها block یا inline است.

block

<div>
div

یک عنصر سطح بلاک است. یک عنصر سطح بلاک، از خط جدید آغاز می شود و از چپ و راست تا جایی که می تواند به کناره ها کشیده می شود. سایر عناصر معمول سطح بلاک عبارتند از p و form و در HTML5 عناصر جدیدتر header، footer، section اضافه شده اند. عناصر زیاد دیگری هم وجود دارند. </div>

inline

span

عنصر استاندارد نوع inline است.یک عنصر inline می تواند متن را در درون یک پاراگراف جایگذاری کند. <span> مثل این، </span> بدون آنکه مزاحمتی برای سایر بخش های پاراگراف ایجاد کند. همچنین عنصر a معمول ترین نوع inline است، زیرا که برای پیوندها استفاده می شود.

none

یک نوع دیگر از مقادیر قابل قبول برای display مقدار none
است. برخی از عنصر های خاص مثل script از این مقدار به عنوان مقدار پیش فرض استفاده می کنند. همچنین با کمک جاوااسکریپت، از این عنصر برای پنهان سازی عناصر درون صفحه، بدون آنکه حذف شوند استفاده می شود.
دقت شود که این با آنکه از صفت visibility
استفاده کنیم فرق می کند. وقتی که از visibility برای پنهان سازی استفاده می کنیم، وقت نمایش داده شدن عنصر را از بین برده ایم، و جای آن را یک فضای خالی می گیرد. اما در این حالت، گویی که عنصر وجود ندارد.

مقادیر دیگر

همچنین برای display مقادیر دیگری هم مثل list-item
و table وجود دارد، که برای مشاهده ی لیست کاملی از آنها می توانید به این لیست مراجعه کنید. ما در باره ی inline-block و flex به صحبت خواهیم پرداخت.
همان طور که گفتم، هر عنصری به طور پیش فرض برای display مقداری تعیین کرده است، اما همیشه این مقدار قابل بازنویسی است! اگر چه این بی معنی است که یه div را به صورت inline استفاده کنیم، اما این امکان وجود دارد، تا گاهی که معنی خاصی مد نظر است بتوان انجام داد. یک نوع معمول از این بازنویسی برای عنصر li
به کار می رود تا آن را به حالت inline استفاده کنیم. این باعث می شود که لیست ها و فهرست های افقی داشته باشیم.

margin: auto;

#main {
 width: 600px;
 margin: 0 auto; 
}

<div id="main">
مقداردهی width

برای یک عنصر سطح بلاک، از اینکه آن عنصر تا حد ممکن به کناره ها کشیده شود جلوگیری می کند. همچنین شما با قرار دادن مقدار margin های چپ و راست به auto می توانید آن را به صورت وسط چین تغییر حالت بدهید. با این کار، عنصر، آن مقداری که شما برای پهنای آن در نظر گرفته بودید را می گیرد، و بقیه ی جای باقی مانده به صورت مساوی به طرفین آن تقسیم می شود.
تنها زمانی مشکل ایجاد می شود که اندازه ی صفحه کمتر از اندازه ی عنصر شما باشد. در این حالت مرورگر، یک scrollbar افقی ایجاد می کند، که زیاد جالب به نظر نمی رسد. در ادامه به حل این مشکل می پردازیم...
</div>

max-width

#main {
 max-width: 600px;
 margin: 0 auto; 
}

<div id="main">
استفاده از max-width

به جای width راه حل مناسب تری به نظر می رسد. به خصوص این مساله وقتی جدی تر می شود که بخشی از مخاطب ها از موبایل استفاده می کنند. به هر حال، max-width در اکثر مرورگر ها پشتیبانی می شود حتی IE7! به همین خاطر نیازی به نگرانی در استفاده از آن نیست. </div>

لایه های تو در تو

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

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
}

<div class="simple">
کوچکتر ...
</div>

<div class="fancy">
بزرگتر ...
</div>

برای مدت زمان طولانی این مساله راه حلی نداشت، یا اینکه تنها راه حل آن استفاده از محاسبات ذهنی بود. به این صورت که باید یک مقداری کمتر از آنچه که مد نظر بود برای پهنا استفاده می شد تا با مقدار حاشیه و padding به اندازه ی مناسب برسد. اما خوشبختانه دیگر نیازی به استفاده از این روش نیست ...

یکپارچه سازی

با گذشت زمان آشکار شد که استفاده از محاسبات ذهنی چندان جالب نیست، به همین خاطر یک صفت جدید ساخته شد که این مشکل را بر طرف می کند: box-sizing

. وقتی که شما برای یک عنصر box-sizing: border-box; را مقداردهی می کنید، دیگر حاشیه و padding باعث بزرگتر شدن عنصر نمی شوند. به نمونه های زیر دقت کنید، اینها همان نمونه های قبلی هستند، با این تفاوت که برای هر دوی آنها box-sizing: border-box; مقداردهی شده است.

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

<div class="simple">
جعبه ای که کوچکتر بود
</div>

<div class="fancy">
جعبه ای که بزرگتر بود
</div>

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

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

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

از آنجایی که box-sizing

جدید است، باید آن را با پیشوندهای -webkit- و -moz- استفاده کرد، همان طور که در مثال ها هم آمده است. همچنین در خاطر داشته باشید که این ویژگی در مروگر لعنتی IE از نسخه ی ۸ به بعد اضافه شده است.

position

اگر بخواهیم پیکربندی های پیچیده تری داشته باشیم باید راجه به position

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

static

.static {
  position: static;
}

<div class="static">
حالت static

برای position مقدار پیش فرض است. یک عنصر با position: static; شکل خاصی برای جایگیری ندارد، و در هر کجا که آورده شود در همانجا هم نمایش داده می شود. </div>

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

<div class="relative1">
مقدار relative

نیز مانند مقدار static است، با این تفاوت که کمی ویژگی های اضافه نیز به آن اضافه می شود. </div>

<div class="relative2">
با استفاده از تغییر دادن top

، right، bottom، و left می توان جای عنصر را نسبت به آن جایی که باید قرار بگیرد تغییر داد. همچنین فضایی که با جا به جا شدن عنصر ما خالی می شود،‌ برای سایر عناصر غیر قابل دسترسی خواهد ماند. </div>

fixed

در جایگذاری ثابت یک عنصر، جای آن عنصر نسبت به viewport تعیین می شود و با scroll کردن پنجره هم تغییر نمی کند. برای تعیین جای یک عنصر باید از relative

، top، right، bottom و left اسفاده کرد.

حتما به عنصر زرد رنگ گوشه ی تصویر دقت کرده اید. برای آن از CSS های زیر استفاده شده است:

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

یک عنصر با جایگذاری ثابت در صفحه هیچ فضای خالی ای ایجاد نمی کند.

مرورگرهای موبایل از این ویژگی به صورت خیلی متزلزل پشتیبانی می کنند، برای اطلاعات بیشتر می توانید به اینجا سر بزنید

absolute

مقدار absolute

نیز مانند حالت قبل است. با این تفاوت که جایگذاری در آن وابسته به نزدیک ترین پدر جایگذاری شده است و نه viewport. اگر یک عنصر با جایگذاری absolute هیچ پدر جایگذاری شده ای نداشته باشد، آنگاه از body برای جایگذاری استفاده می کند و با scroll کردن صفحه بالا و پایین می کند. دقت شود که یک عنصر جایگذاری شده، به هر عنصری گفته می شود که در آن position هر چیزی باشد غیر از static.

در اینجا یک مثال ساده را می بینیم:

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

<div class="relative">
مقدار position

برای این عنصر relative است. اگر این برای این عنصر position: static; باشد، آنگاه عنصر فرزند، این عنصر را تکذیب کرده و از body برای جایگذاری استفاده می کند.

<div class="absolute">
جایگذاری این عنصر absolute است و برای آن از عنصر پدر کمک می گیرد.
</div>

</div>

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

position example

با این مثال کمی روش های به کار گیری position در عمل بیشتر مشخص می شود.

.container {
  position: relative;
}
nav {
  position: absolute;
  left: 0px;
  width: 200px;
}
section {
  /* position is static by default */
  margin-left: 200px;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  width: 100%;
}
body {
  margin-bottom: 70px;
}

<section> با کمک margin-left

مطمئن می شویم که برای ستون کناری جا به اندازه ی کافی باز کرده ایم. </section>

<section> حملات سایبری که از چندی پیش یک به یک سیستم‌های مالی و سایت‌های آمریکایی را هدف گرفته ‌و به حملات سایبری گروه مبارزان سایبری عزالدین قسام معروف است، اکنون وارد هفته دوم از فاز سوم خود شده است؛ حملاتی که روز به روز جدی‌تر می‌شود و ایالات متحده ایران و چین را در قبال آن متهم کرده است.
</section>

<section> دقت کنید که اگر مرورگر خود را تغییر اندازه بدهید هنوز هم به درستی کار می کند!
</section>

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

float

یکی دیگر از صفت های CSS که برای پیکربندی استفاده می شود float

است. کار اصلی آن قرار دادن عکس درون متن است، به گونه ای که متن دور عکس را بگیرد.

img {
  float: right;
  margin: 0 0 1em 1em;
}

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

clear

برای کنترل کردن رفتار float استفاده از clear

ضروری است. این دو مثال را مقایسه کنید:

<div class="box">...</div>
<section>...</section>

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box">
عنصر شناور
</div>

<section> در این حالت عنصر section

بعد از div ایجاد شده است. اما با توجه به اینکه div به سمت چپ float شده است، عنصر section سعی می کند که آن را - همانند یک عکس درون متن - احاطه کند و نتیجه این می شود که هر دو عنصر روی هم می افتند. حال اگر ما می خواستیم که عنصر section واقعا بعد از div نمایش داده شود چه؟ </section>

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">
عنصر شناور
</div>

<section class="after-box"> با استفاده از clear

ما section را به پایین تر از div انتقال داده ایم. اگر از مقدار left استفاده شود، فقط عناصری که به چپ شناور شده اند تحت تاثیر قرار داده می شوند،‌ همچنین می توانید از right و both استفاده کنید. </section>

ترفند استفاده از clearfix

در این قسمت یکی از دشواری هایی که به هنگام استفاده از floats ممکن است رخ بدهد را ملاحظه می کنید:

img {
   float: right;
}

<div>

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

اما با استفاده از ترفند استفاده از clearfix می توان این مشکل را برطرف کرد!

اگر دستورات زیر را اضافه کنیم:

.clearfix {
   overflow: auto;
}

این اتفاق می افتد:

<div class="clearfix"> An Image

خیلی بهتر شد!

این ترفند برای مرورگرهای مدرن کار می کند، اما اگر می خواهید که برای مرورگر IE6 هم کار کند (چه کسی اهمیت می دهد!) باید از دستورات زیر استفاده کنید:

.clearfix {
   overflow: auto;
   zoom: 1;
}

همچنین به عنوان نکته ی آخر، مرورگرهای عجیب و غریب فراوانی وجود دارند که در این زمینه ممکن است توجه ویژه نیاز داشته باشند. استفاده از clearfix ممکن است کمی ترسناک به نظر برسد، اما روش ارائه شده در بالا تقریبا با همه ی مرورگر ها به درستی کار می کند.

مثال عملی از float

استفاده از float

برای تمام پیکربندی خیلی معمول است. در اینجا همان پیکربندی قبلی را که ساخته بودیم، دوباره می سازیم، ولی این بار با استفاده از float.

nav {
float: left;
width: 200px;
}
section {
margin-left: 200px;
}

<section> می بینید که درست مثل همان حالت قبلی ساخته شد! دقت شود که ما یک clearfix

را در container قرار داده ایم که در این مثال بود و نبود آن فرقی نمی کند. اما اگر ارتفاع nav از ارتفاع container بیشتر باشد، ناگزیر به استفاده از آن خواهیم بود. </section>

percent width

استفاده از پهنای درصدی، به اندازه ی container وابسته است. این حالت برای عکس ها خیلی پرکاربرد است؛ مثل مثال زیر که در آن عکس، 50٪ از container را گرفته است. برای فهم بیشتر آن بهتر است مرورگر خود را تغییر اندازه بدهید تا نتیجه ملموس تر باشد.

article img {
  float: right;
  width: 50%;
}

<article class="clearfix"> an image

همچنین برای کنترل حداقل و حداکثر اندازه می توانید از min-width

و max-width استفاده کنید. </article>

پیکربندی با پهنای درصدی

برای پیکربندی ها شما می توانید از پهناهای درصدی استفاده کنید. در این مثال nav

را به صورت درصدی به کار برده ایم:

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}

<section> وقتی که این پیکربندی خیلی کم عرض باشد nav

له می شود. از آن بدتر این است که از min-width نمی توانید استفاده کنید، زیرا که ستون سمت راست از آن تبعیت نمی کند. </section>

media queries

در طراحی یک اصل توصیه می شود: خوب باشد، مهم نیست چه داریم و چه نداریم.

یکی از مهمترین و قدرتمند ترین ابزارها برای این منظور Media queriy است. اگر همان پیکربندی قبلی خودمان را که از درصد استفاده می کرد و به هنگام کوچک شدن صفحه ستون کناری له می شد را دوباره نویسی کنیم و این بار از media استفاده کنیم:

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

<section> حال وقتی که مرورگر خود را تغییر اندازه داده و کوچک کنید اتفاق جالبی می افتد!
</section>

به این ترتیب پیکربندی بر روی موبایل ها هم به خوبی کار می کند. در اینجا شما می توانید لیستی از سایت های معروف که از media به این شکل استفاده می کنند را ببینید. برای اطلاعات بیشتر می توانید به مستندات MDN مراجعه کنید.

ابزار

با استفاده از meta viewport شما می توانید طراحی پیکربندی را برای مویایل به شکل بهتری انجام دهید.

inline-block

می توان یک جدول را با استفاده از جعبه هایی از div ساخت. برای مدت طولانی این کار را با استفاده از float

انجام می دادند، اما حالا با inline-block این کار آسان تر هم شده است.

راه سخت با استفاده از float

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">
من شناور هستم!
</div>

<div class="after-box"> در این قسمت از clear استفاده شده است، پس در کنار سایر جعبه ها قرار نمی گیرد.
</div>