جدول دوره

آموزش‌های پیشرفته CSS

• کتاب درسی CSS
• مقدمه CSS
• اساس‌های گرامری CSS
• گرامری پیشرفته CSS
• انتخاب‌گرهای مشتق CSS
• انتخاب‌گرهای id CSS
• انتخاب‌گرهای class CSS
• ایجاد CSS
• زمینه CSS
• متن CSS
• قلم CSS
• لیست CSS

مدل جعبه CSS

• مقدمه به مدل جعبه CSS
• حاشیه داخلی CSS
• کناره CSS
• حاشیه خارجی CSS
• ادغام حاشیه خارجی CSS

تعیین مکان CSS

• مقدمه به قرارگیری CSS
• قرارگیری نسبی CSS
• قرارگیری مطلق CSS
• شناور CSS

انتخاب‌گر CSS

• انتخاب‌گرهای عناصر CSS
• گروه‌بندی انتخاب‌گرهای CSS
• تفصیل انتخاب‌گرهای class CSS
• تفصیل انتخاب‌گرهای id CSS
• تفصیل انتخاب‌گرهای ویژگی CSS
• انتخاب‌گرهای نسل CSS
• انتخاب‌گرهای فرزند CSS
• انتخاب‌گرهای برادران مجاور CSS

درس‌های انتخابی

پیشنهاد دوره:

• جعبه ابزار CodeW3C.com

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

به دلیل اینکه جعبه شناور در جریان مستند مستند نیست، بنابراین جعبه‌های مستند در جریان مستند مثل اینکه جعبه شناور وجود ندارد، عمل می‌کنند.

شناور CSS

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

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

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

ویژگی float CSS

در CSS، ما از ویژگی float برای ایجاد شناوری عناصر استفاده می‌کنیم.

برای اطلاعات بیشتری در مورد ویژگی float، به منوی مرجع مراجعه کنید:ویژگی float CSS。

جعبه خط و پاکسازی

جعبه خط کنار جعبه شناور کوتاه می‌شود، بنابراین فضایی برای جعبه شناور باقی می‌ماند و جعبه خط به دور جعبه شناور می‌چرخد.

بنابراین، ایجاد جعبه شناور باعث می‌شود که متن به دور تصویر بچرخد:

برای جلوگیری از چرخش جعبه خط به دور جعبه شناور، نیاز به اعمال آن به جعبه است ویژگی clearمقدار ویژگی clear می‌تواند left، right، both یا none باشد، که نشان‌دهنده این است که کدام لبه‌های جعبه نباید به جعبه شناور نزدیک شوند.

برای ایجاد این اثر، باید در عنصر پاکسازی شده،مargins خارجیبه اندازه کافی فضای اضافی اضافه کنید تا لبه بالایی عنصر به زیر شناور برسد:

این ابزار مفیدی است که به عناصر اطراف اجازه می‌دهد تا به عناصر شناور فضا اختصاص دهند.

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

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>texte</p>
</div>

در این حالت، مشکلی ایجاد می‌شود. زیرا عناصر شناور از جریان مستند جدا شده‌اند، بنابراین div محصور شده در تصویر و متن فضا نگرفته‌اند.

چگونه می‌توانیم عناصر محصور را بصری‌سازی کنیم تا به عناصر شناور محصور شده در آن‌ها چسبیده باشند؟ باید در مکانی از این عنصر clear را اعمال کنیم:

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

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>texte</p>
<div class="clear"></div>
</div>

این کار باعث می‌شود که به اثری که می‌خواهیم برسیم، برسیم، اما نیاز به اضافه کردن کد اضافی داریم. معمولاً عناصری وجود دارند که می‌توانند از clear استفاده کنند، اما گاهی اوقات باید برچسب‌های بی‌معنا را برای انجام طرح اضافه کنیم.

اما ما راه دیگری نیز داریم، و آن این است که div محتوی را شناور کنیم:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>texte</p>
</div>

این کار باعث می‌شود که به اثری که می‌خواهیم برسیم، برسیم. اما متاسفانه، عناصر بعدی تحت تأثیر این عنصر شناور قرار می‌گیرند. برای حل این مشکل، برخی از افراد تصمیم می‌گیرند که همه چیز را در طرح شناور کنند و سپس از عناصر معنادار مناسب (معمولاً پاورقی وب‌سایت) برای پاکسازی شناورها استفاده کنند. این کار به کاهش یا حذف برچسب‌های غیرضروری کمک می‌کند.

در واقع، تمام صفحات وب‌سایت CodeW3C.com از این تکنیک استفاده می‌کنند. اگر فایل CSS را باز کنید، خواهید دید که ما به div پاورقی خود پاکسازی کرده‌ایم و سه div بالای آن به سمت چپ شناور شده‌اند.

ویژگی clear CSS

ما دقیقاً درباره اصول کار و روش استفاده از ویژگی clear در CSS بحث کردیم. اگر می‌خواهید اطلاعات بیشتری درباره ویژگی clear بدست آورید، لطفاً به منوی مرجع مراجعه کنید:ویژگی clear CSS。

ابزارخانه

دستورالعمل‌های مرجع CSS

مثال CSS

آزمون CSS

آموزش CSS

لینک‌های حامی