لیست کامل عناصر css

دستور Box-shadow (سایه باکس)و border-image

ویژگی box-shadow در CSS برای ایجاد سایه در اطراف یک المان استفاده می شود. با این ویژگی می توان جلوه های زیبا و سه بعدی روی جعبه ها، دکمه ها یا هر عنصر دیگری ایجاد کرد.

ساختار کلی به این صورت است:

box-shadow: offset-x offset-y blur-radius spread-radius color;

offset-x: مشخص می کند سایه به سمت چپ یا راست برود. مقدار مثبت سایه را به سمت راست و مقدار منفی به سمت چپ می برد.

offset-y: مشخص می کند سایه به بالا یا پایین برود. مقدار مثبت سایه را به سمت پایین و مقدار منفی به سمت بالا می برد.

blur-radius: اندازه محو شدن سایه را مشخص می کند. هر چه این عدد بزرگ تر باشد سایه نرم تر دیده می شود.

spread-radius: میزان گسترش یا جمع شدن سایه را تعیین می کند. مقدار مثبت باعث بزرگ تر شدن سایه و مقدار منفی باعث کوچک تر شدن آن می شود.

color: رنگ سایه را تعیین می کند.

div {
  width: 200px;
  height: 100px;
  background: lightblue;
  box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
}

در این مثال سایه با فاصله 10 پیکسل به راست و 10 پیکسل به پایین با محوی 15 پیکسل و رنگ خاکستری نیمه شفاف نمایش داده می شود.

مثال با همه گزینه‌ها:

box-shadow: 4px 4px 8px 2px rgba(0,0,0,0.3);

مثال سایه داخلی:

box-shadow: inset 2px 2px 5px rgba(0,0,0,0.7);

برای داشتن وب‌سایتی حرفه‌ای و منطبق با نیازهای کسب‌وکارتان، می‌توانید سفارش طراحی سایتخود را ثبت کنید.

تگ border-image (تصویر برای حاشیه)

این ویژگی باعث می شود قاب های صفحه وب زیباتر و خلاقانه تر به نظر برسند و می توان آن را روی هر عنصری که دارای مرز است اعمال کرد.

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

نحوه استفاده:

border-image: url(path/to/image.png) slice width outset repeat;

url(): آدرس تصویر حاشیه

slice: بخش‌هایی از تصویر که برای حاشیه برش می‌خورند (معمولاً با مقادیر px یا درصد)

width (اختیاری): ضخامت حاشیه

outset (اختیاری): فاصله حاشیه نسبت به عنصر

repeat (اختیاری): نوع تکرار تصویر در حاشیه (stretch, repeat, round)

.my-box {
 border-width: 30px;
 border-style: solid;
 border-image: url(border.png) 30 round;
}

در اینجا تصویر border.png به ۴ بخش تقسیم می‌شود و به دور باکس تکرار می‌شود.

نکات مهم:

برای نمایش تصویر حاشیه، باید حتما border-style و border-width تنظیم شده باشند.

اگر border-style برابر none باشد، تصویر حاشیه نمایش داده نمی‌شود.

پیشنهاد مطالعه: معماری‌های وب مدرن ۲۰۲۵: انتخاب بین SPA، PWA و Serverless

انواع  (Border) در CSS

ویژگی border در CSS برای کشیدن خط دور عناصر استفاده می شود. این ویژگی به ما امکان می دهد ظاهر حاشیه المان ها را به دلخواه تنظیم کنیم و شامل چند بخش اصلی است:

ضخامت حاشیه (border-width)

این بخش مشخص می کند که خط دور المان چقدر ضخامت داشته باشد. می توان مقادیری مثل ۱px، ۲px، ۳px و یا مقادیر بزرگتر برای ضخیم تر کردن مرز استفاده کرد.

نوع حاشیه (border-style)

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

رنگ حاشیه (border-color)

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

انواع مقدار border-style:

none: بدون حاشیه (پیش‌فرض)

solid: خط ساده و پیوسته

dotted: نقطه‌چین (دونه‌دونه)

dashed: خط‌چین (خط‌های کوتاه و فاصله‌دار)

double: دو خط موازی

groove: شبیه یک خط برجسته و فرورفته (سه‌بعدی)

ridge: برعکس groove، برجسته به نظر میرسه

inset: به نظر میرسه داخل صفحه فرورفته

outset: به نظر میرسه از صفحه بیرون زده

div {
 border-width: 3px;
 border-style: dashed;
 border-color: red;
}

یا می‌تونی همه رو یکجا بنویسی:

div {
 border: 3px dashed red;
}

بخش‌های حاشیه در CSS

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

border-top

این ویژگی حاشیه بالای المان را تعیین می کند. می توان ضخامت، نوع و رنگ مرز بالا را به دلخواه تنظیم کرد.

border-right

با این ویژگی می توان حاشیه سمت راست المان را تعریف کرد و آن را از سایر طرف ها مستقل کرد.

border-bottom

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

border-left

با این ویژگی می توان حاشیه سمت چپ المان را جداگانه کنترل کرد.

نکات مهم

• با استفاده از این ویژگی ها می توان طراحی انعطاف پذیر و خلاقانه داشت، مثلا فقط یک طرف المان خط داشته باشد یا رنگ هر طرف متفاوت باشد.
• هر یک از این ویژگی ها می توانند شامل سه بخش ضخامت، نوع و رنگ باشند، همانند ویژگی border کلی.

div {
 border-top: 2px solid blue;
 border-bottom: 1px dotted gray;
}

پیشنهاد مطالعه: مقایسه جامع React و Vue در سال ۲۰۲۵: بهترین فریم‌ورک برای پروژه شما

مفهوم کلاس‌ها در CSS

در CSS، کلاس‌ها ابزاری برای گروه‌بندی و سبک‌دهی به المان‌های HTML هستند. وقتی می‌خواهیم چند المان مشابه را با یک سبک مشخص کنیم، به جای اینکه برای هر المان جداگانه استایل بنویسیم، یک کلاس تعریف می‌کنیم و آن کلاس را به همه المان‌های موردنظر اضافه می‌کنیم.

تو CSS، کلاس‌ها با نقطه شروع میشن، مثلا .red-text

تو HTML، به کمک صفت class به عنصر اختصاص میدیم: 

مثال:

<p >این متن مهم است</p>
<p >این هم یک متن مهم دیگر است</p>

در CSS می‌توانیم برای کلاس highlight استایل تعریف کنیم:

.highlight {
 color: red;
 font-weight: bold;
}

 نقطه . قبل از اسم کلاس نشان می‌دهد که ما داریم یک کلاس را هدف می‌گیریم.

تمام المان‌هایی که کلاس highlight را داشته باشند، متنشان قرمز و ضخیم می‌شود.

مزایای استفاده از کلاس‌ها:

استفاده مجدد: می‌توانیم یک کلاس را به چند المان بدهیم و همه آنها یک ظاهر یکسان پیدا کنند.

سادگی در مدیریت: تغییر استایل کلاس، ظاهر همه المان‌های مرتبط را همزمان تغییر می‌دهد.

انعطاف‌پذیری: یک المان می‌تواند چند کلاس داشته باشد و استایل‌های مختلف را ترکیب کند.

<p >این متن بزرگ و مهم است</p>

.large-text {
 font-size: 24px;
}

حالا این متن هم قرمز و ضخیم است و هم بزرگ است، بدون اینکه بخواهیم استایل‌ها را تکرار کنیم.

نحوه تعریف و استفاده از کلاس‌ها

برای تعریف کلاس، از نقطه . قبل از نام کلاس استفاده می‌کنیم و سپس درون { } استایل‌ها را می‌نویسیم.

.highlight {
  color: blue;
  font-weight: bold;
  background-color: yellow;
}

.highlight نام کلاس است و color رنگ متن، font-weight ضخامت متن و background-color رنگ پس‌زمینه را تعیین می‌کند.

افزودن کلاس به المان‌های HTML

برای اینکه یک المان HTML از این کلاس استفاده کند، از attribute به نام class استفاده می‌کنیم:

<p >این متن مهم است</p>

حالا این پاراگراف تمام ویژگی‌های تعریف شده در کلاس highlight را دریافت می‌کند.

استفاده همزمان چند کلاس روی یک المان

یک المان می‌تواند چند کلاس داشته باشد. برای این کار، نام کلاس‌ها را با فاصله از هم جدا می‌کنیم:

<p >این متن بزرگ و مهم است</p>

.large-text {
 font-size: 24px;
}

این متن هم استایل highlight را دارد و هم اندازه متن بزرگ است.

مزایای استفاده از کلاس‌ها

استفاده مجدد: می‌توان یک کلاس را برای چند المان استفاده کرد.

سادگی: تغییر در کلاس، روی همه المان‌هایی که آن کلاس را دارند اعمال می‌شود.

ترکیب استایل‌ها: المان‌ها می‌توانند چند کلاس داشته باشند و استایل‌ها ترکیب شوند.

استفاده از کلاس در HTML

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

افزودن یک کلاس به المان

برای افزودن یک کلاس، نام کلاس را در داخل attribute class می نویسیم:

<p >این یک متن مهم است</p>

در این مثال، پاراگراف از کلاس highlight استفاده می کند. اگر در CSS استایل های زیر را داشته باشیم:

.highlight {
 color: red;
 font-weight: bold;
}

متن پاراگراف به رنگ قرمز و با ضخامت بیشتر نمایش داده می شود.

استفاده از چند کلاس روی یک المان

یک المان HTML می تواند بیش از یک کلاس داشته باشد. برای این کار، نام کلاس ها را با فاصله از هم جدا می کنیم:

<p >این متن بزرگ و مهم است</p>

.highlight {
 color: red;
 font-weight: bold;
}
.large-text {
 font-size: 24px;
}

در این حالت، متن هم قرمز و ضخیم است و هم اندازه آن بزرگ است.

نکات مهم

• نام کلاس ها به حروف کوچک حساس هستند و بهتر است از حروف کوچک و بدون فاصله استفاده شود.
• یک المان می تواند چند کلاس داشته باشد و استایل ها به صورت ترکیبی اعمال می شوند.
• کلاس ها برای استفاده مجدد و مدیریت آسان استایل ها بسیار کاربردی هستند.

مفهوم هاور (Hover)

Hover یک پیوستگی وضعیت (pseudo-class) در CSS است. وقتی یک المان، مثلا دکمه یا لینک، حالت هاور دارد، می توانیم رنگ، سایز، پس‌زمینه یا هر ویژگی دیگر را تغییر دهیم تا کاربر بداند می تواند روی آن کلیک کند یا با آن تعامل داشته باشد.

<a href="#" >کلیک کن</a>

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: green;
  color: yellow;
}

کلاس button ظاهر اولیه دکمه را مشخص می کند.

وقتی موس روی دکمه قرار می گیرد (:hover)، پس‌زمینه سبز و متن زرد می شود.

ویژگی transition باعث می شود تغییر رنگ به صورت نرم و تدریجی انجام شود.

 تغییر شکل نشانگر موس (Cursor)

در CSS می توان شکل نشانگر موس را هنگام حرکت روی المان های مختلف تغییر داد. این کار با استفاده از ویژگی cursor انجام می شود. تغییر شکل نشانگر موس باعث می شود کاربر بداند که روی المان چه عملی می تواند انجام دهد، مثلا کلیک کردن، کشیدن یا انتخاب متن.

button {
  cursor: pointer;
}

p {
  cursor: text;
}

div {
  cursor: move;
}

move: نشانگر به شکل چهار جهتی می شود و معمولاً برای المان هایی که قابل جابجایی هستند کاربرد دارد.

default: شکل معمولی موس

pointer: شکل دست (معمولاً برای لینک‌ها)

text: نشانگر متن (مثل خط عمودی)

wait: نشانگر ساعت شنی یا بارگذاری

دستور @font-face برای افزودن فونت دلخواه

دستور @font-face در CSS به ما اجازه می دهد فونت دلخواه خود را به وب سایت اضافه کنیم. با استفاده از این دستور، می توانیم فونتی که در سیستم کاربر نصب نشده است را هم برای نمایش متن ها در صفحه وب استفاده کنیم.

@font-face {
  font-family: "MyCustomFont";
  src: url("fonts/MyCustomFont.woff2") format("woff2");
}

body {
 font-family: "MyCustomFont", sans-serif;
}

font-family: اسم فونت که می‌خوای بهش بدی.

src: آدرس فایل فونت (معمولاً فرمت‌های woff، woff2 یا ttf).

وقتی این کد رو گذاشتی، می‌تونی در CSS از اسم فونت استفاده کنی.

پیشنهاد مطالعه: مقایسه سند نیازمندی (Requirements Document) و RFP (Request for Proposal) در پروژه‌های نرم‌افزاری

فاصله بین حروف (letter-spacing)

ویژگی letter-spacing در CSS برای تنظیم فاصله افقی بین حروف یک متن استفاده می شود. به عبارت دیگر، با این ویژگی می توان مشخص کرد چقدر بین هر حرف فاصله وجود داشته باشد.

نحوه کارکرد:

مقدارش معمولاً با واحد پیکسل px یا em تعیین میشه _ مقدار مثبت یعنی افزایش فاصله بین حروف _ مقدار منفی یعنی کاهش فاصله بین حروف (حروف به هم نزدیک‌تر میشن)

h1 {
 letter-spacing: 2px; /* بین حروف 2 پیکسل فاصله میندازه */
}

p {
 letter-spacing: -1px; /* حروف رو کمی به هم نزدیک‌تر می‌کنه */
}

کاربردهای فاصله بین حروف (letter-spacing)

ویژگی letter-spacing در CSS چند کاربرد مهم دارد و طراحان وب و گرافیک از آن برای بهبود ظاهر متن استفاده می کنند:

بهتر کردن ظاهر فونت‌ها

با تنظیم فاصله بین حروف می توان خوانایی متن را افزایش داد و ظاهر نوشته ها را حرفه‌ای تر کرد.

طراحی لوگو یا تیترها

در طراحی تیترها، بنرها یا لوگوها، تنظیم فاصله بین حروف باعث ایجاد جلوه خاص و جذاب می شود و متن برجسته تر دیده می شود.

هماهنگی با سبک کلی صفحه

گاهی فونت ها یا طرح صفحه نیاز دارند که فاصله بین حروف بیشتر یا کمتر شود تا با سبک کلی سایت هماهنگ شود. این ویژگی به طراح امکان می دهد متن با سایر المان ها هماهنگ و زیبا باشد.

فاصله بین خطوط (line-height)

ویژگی line-height در CSS برای تنظیم فاصله عمودی بین خطوط یک متن استفاده می شود. به عبارت دیگر، با این ویژگی می توان مشخص کرد که چقدر فاصله بین یک خط و خط بعدی وجود داشته باشد.

p {
 line-height: 1.5;
}

در این مثال فاصله بین خطوط متن داخل تگ p برابر ۱.۵ برابر ارتفاع خط پیش فرض خواهد بود.

نحوه کارکرد ویژگی line-height

ویژگی line-height در CSS تعیین می کند که چقدر فاصله بین خطوط متن وجود داشته باشد و می تواند به چند روش مقداردهی شود:

عدد بدون واحد: اگر مقدار به صورت عدد بدون واحد باشد، فاصله بین خطوط نسبت به اندازه فونت متن محاسبه می شود.
مثال: اگر اندازه فونت 16px باشد و مقدار line-height برابر 1.5 تنظیم شود، فاصله بین خطوط برابر 24px خواهد بود.

مقدار دقیق با واحد: می توان مقدار دقیق را با واحدی مثل px تعیین کرد.

p {
 line-height: 24px;
}

در این حالت فاصله بین خطوط دقیقاً 24 پیکسل خواهد بود.

درصد: می توان فاصله بین خطوط را به صورت درصدی نسبت به اندازه فونت تعیین کرد.

p {
 line-height: 150%;
}

در این حالت فاصله بین خطوط برابر 150 درصد اندازه فونت خواهد بود.

اهمیت ویژگی line-height

ویژگی line-height در CSS اهمیت زیادی دارد زیرا خوانایی و ظاهر متن را به طور مستقیم تحت تاثیر قرار می دهد:

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

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

p {
 font-size: 16px;
 line-height: 1.8; /* فاصله بین خطوط 1.8 برابر اندازه فونت */
}

یا با مقدار پیکسل:

p {
 font-size: 14px;
 line-height: 20px; /* فاصله ثابت 20 پیکسل */
}

تراز کردن متن (text-align)

ویژگی text-align در CSS برای تعیین نحوه تراز شدن متن درون یک عنصر استفاده می شود. به عبارت دیگر، با این ویژگی مشخص می کنیم که متن داخل یک بلاک مثل div یا p چگونه قرار بگیرد.

مقادیر رایج:

left: متن چپ‌چین میشه (پیش‌فرض در زبان‌هایی مثل فارسی)

right: متن راست‌چین میشه (برای زبان‌هایی مثل عربی)

center: متن وسط‌چین میشه

justify: متن به صورت تراز شده در میاد؛ یعنی خطوط متن طوری کشیده میشن که هر دو طرف متن (چپ و راست) به لبه‌ها بچسبن.

p {
 text-align: justify;
}

در این حالت، متن طوری تراز میشه که هر دو طرفش صاف و مرتب دیده بشه.

کاربرد ویژگی text-align

ویژگی text-align در CSS کاربردهای مهمی دارد و طراحان وب از آن برای تنظیم دقیق ظاهر متن استفاده می کنند:

تنظیم دقیق ظاهر متن: با استفاده از این ویژگی می توان مشخص کرد که متن داخل یک عنصر چگونه قرار بگیرد و ظاهر آن مرتب و حرفه ای شود.

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

طراحی صفحات چند زبانه: در صفحات وب چند زبانه، تراز متن باید متناسب با زبان باشد. برای مثال، زبان هایی که از راست به چپ نوشته می شوند، معمولاً متن باید راست چین شود تا ظاهر طبیعی و خوانا داشته باشد.

حذف خط زیر لینک (text-decoration: none)

به طور پیش فرض، مرورگرها برای لینک ها تگ a یک خط زیر متن لینک قرار می دهند تا کاربر متوجه شود متن، لینک است.

ویژگی text-decoration در CSS به شما امکان می دهد این رفتار را تغییر دهید.

نحوه حذف خط زیر لینک:

a {
  text-decoration: none;
}

با این دستور، خط زیر لینک حذف می شود و لینک بدون خط زیر نمایش داده می شود.

کاربرد ویژگی text-decoration: none

ویژگی text-decoration: none در CSS برای حذف خط زیر لینک استفاده می شود و چند کاربرد مهم دارد:

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

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

شفاف کردن پس‌زمینه (background-color: transparent)

ویژگی background-color در CSS برای تعیین رنگ پس‌زمینه یک عنصر استفاده می شود.

زمانی که می خواهید پس‌زمینه عنصر شفاف باشد و رنگ پس‌زمینه والد یا پشت آن دیده شود، از مقدار transparent استفاده می کنید:

div {
 background-color: transparent;
}

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

نکات مهم

• مقدار transparent باعث می شود عنصر بی رنگ و شفاف باشد، اما محتوا و متن داخل آن همچنان قابل مشاهده است.
• این ویژگی برای طراحی وب کاربرد دارد، مخصوصاً زمانی که می خواهید عنصر روی پس‌زمینه دیگری قرار بگیرد و ظاهر سبک و باز داشته باشد.
• می توان شفافیت را با سایر ویژگی ها مثل opacity یا rgba ترکیب کرد تا جلوه های جذاب تری ایجاد شود.

مثال ترکیبی:

فرض کن می‌خوای یک دکمه با متن داشته باشی ولی پس‌زمینه دکمه شفاف باشه:

button {
 background-color: transparent;
 border: 2px solid blue;
 color: blue;
 padding: 10px 20px;
}

اینجوری دکمه پس‌زمینه نداره ولی حاشیه و متن داره.

CSS خارجی (External CSS) 

CSS خارجی به روشی گفته می شود که استایل های صفحات وب در یک فایل جداگانه با پسوند .css نوشته می شوند و سپس به فایل HTML متصل می شوند.

این روش به شما امکان می دهد تمام استایل های سایت را در یک فایل واحد مدیریت کنید و تغییرات را به صورت مرکزی روی همه صفحات اعمال کنید.

برای اتصال فایل CSS خارجی به HTML، از تگ <link> در بخش head استفاده می کنیم:

<head>
 <link rel="stylesheet" href="style.css">
</head>

در این مثال، فایل style.css شامل تمام قوانین CSS است و به صفحه HTML متصل شده است.

مزایای CSS خارجی

مدیریت آسان استایل ها

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

استفاده مجدد در صفحات مختلف

یک فایل CSS خارجی را می توان به چندین صفحه HTML متصل کرد و ظاهر یکسانی برای همه صفحات ایجاد کرد.

افزایش سرعت بارگذاری صفحات

مرورگرها فایل CSS خارجی را کش می کنند و این باعث می شود صفحات سریع تر بارگذاری شوند.

 نحوه فراخوانی CSS خارجی

برای اینکه فایل CSS خارجی را به یک صفحه HTML متصل کنیم، از تگ link در بخش head صفحه استفاده می‌کنیم.

<head>
 <link rel="stylesheet" href="styles.css">
</head>

 مزایای CSS خارجی

مدیریت آسان استایل ها

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

استفاده مجدد در صفحات مختلف

یک فایل CSS خارجی را می توان به چندین صفحه HTML متصل کرد و ظاهر یکسانی برای همه صفحات ایجاد کرد.

افزایش سرعت بارگذاری صفحات

مرورگرها فایل CSS خارجی را کش می کنند و این باعث می شود صفحات سریع تر بارگذاری شوند.

تگ یا ویژگی z-index 

ویژگی z-index در CSS برای کنترل ترتیب لایه‌ای عناصر روی هم (stacking order) استفاده می‌شود. به عبارت دیگر، وقتی چند عنصر روی هم قرار می‌گیرند، z-index مشخص می‌کند کدام عنصر جلوتر یا عقب‌تر دیده شود.

div {
 position: relative;
 z-index: 2;
}
div.other {
 position: relative;
 z-index: 1;
}

در این مثال، عنصر با z-index برابر 2 جلوتر از عنصر با z-index برابر 1 نمایش داده می‌شود.

کاربرد z-index

ویژگی z-index در CSS برای کنترل ترتیب نمایش عناصر روی هم استفاده می‌شود. این ویژگی زمانی اهمیت پیدا می‌کند که چند عنصر در یک محل قرار بگیرند، مثل یک تصویر و یک متن روی آن.

عدد بزرگ‌تر یعنی عنصر جلوتر است و روی عناصر با عدد کمتر قرار می‌گیرد.

عدد کوچک‌تر یعنی عنصر عقب‌تر است و پشت سایر عناصر قرار می‌گیرد.

با استفاده از z-index می‌توان ظاهر عناصر روی هم را به دلخواه تنظیم کرد و جلوه های تصویری و رابط کاربری حرفه‌ای ایجاد نمود.

نکات مهم

1. فقط عناصر با موقعیت position مشخص (مثل relative، absolute، fixed یا sticky) می‌توانند z-index داشته باشند.
2. مقدار بالاتر z-index یعنی عنصر جلوتر دیده می‌شود و مقدار پایین‌تر یعنی عنصر عقب‌تر.
3. مقدار z-index می‌تواند عدد مثبت، صفر یا منفی باشد، که عدد منفی عنصر را پشت سایر عناصر قرار می‌دهد.

مثال ساده:

.box1 {
 position: relative;
 z-index: 1;
 background-color: red;
 width: 100px;
 height: 100px;
}

.box2 {
 position: relative;
 z-index: 2;
 background-color: blue;
 width: 100px;
 height: 100px;
 margin-top: -50px; /* باعث می‌شود روی هم قرار بگیرند */
}

در اینجا .box2 (آبی) به دلیل z-index: 2 روی .box1 (قرمز) نمایش داده می‌شود.

چند نکته کاربردی:

z-index می‌تواند مقدار منفی هم داشته باشد. مثل z-index: -1; که عنصر را پشت همه می‌برد.

عناصر با z-index یکسان، ترتیبشان براساس ترتیب در HTML مشخص می‌شود (عنصر پایین‌تر در کد روی عنصر بالاتر قرار می‌گیرد).

position 

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

مقادیر رایج position

static

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

relative

عنصر نسبت به موقعیت طبیعی خودش جابجا می‌شود. می‌توان با مقادیر top، bottom، left، right مکان آن را کمی تغییر داد بدون اینکه جایگاه سایر عناصر به هم بخورد.

absolute

عنصر نسبت به اولین والد با position غیر static قرار می‌گیرد و از جریان طبیعی صفحه جدا می‌شود. یعنی می‌توان آن را دقیقاً در جایی از صفحه یا والد قرار داد.

fixed

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

sticky

عنصر در ابتدا مانند relative رفتار می‌کند و وقتی به محدوده مشخصی از صفحه برسد، مانند fixed ثابت می‌شود.

/* relative */
.relative-box {
 position: relative;
 top: 10px;   /* 10 
 left: 20px;  /* 20
}

/* absolute */
.absolute-box {
 position: absolute;
 top: 50px;   /* 50 پیکسل از بالای والد موقعیت‌دار */
 left: 100px;
}

/* fixed */
.fixed-box {
 position: fixed;
 top: 0;
 right: 0;
 width: 100px;
 height: 50px;
 background-color: red;
}

/* sticky */
.sticky-box {
 position: sticky;
 top: 0;  /* وقتی به بالای صفحه رسید، ثابت می‌شود */
 background-color: yellow;
}

نکته مهم:

برای اینکه absolute درست کار کنه، باید یک عنصر والد داشته باشی که position اون چیزی جز static باشه، معمولاً relative می‌ذارند

text-shadow و text-align

ویژگی text-shadow برای ایجاد سایه برای متن استفاده می‌شود و می‌تواند جلوه های بصری جذابی به نوشته‌ها بدهد.

نحوه استفاده:

p {
  text-shadow: 2px 2px 5px gray;
}

مقدار اول (2px): فاصله سایه به سمت افق

مقدار دوم (2px): فاصله سایه به سمت عمود

مقدار سوم (5px): مقدار بلوری یا محو شدن سایه

مقدار چهارم (gray): رنگ سایه

با این ویژگی می‌توان عمق و برجستگی برای متن ایجاد کرد و ظاهر آن را جذاب‌تر کرد.

ویژگی text-align

ویژگی text-align برای تراز کردن متن داخل یک عنصر استفاده می‌شود.

مقدارهای رایج آن:

left: تراز متن به سمت چپ

right: تراز متن به سمت راست

center: متن در وسط عنصر قرار می‌گیرد

justify: متن به طور مساوی در طول سطر کشیده می‌شود

p {
  text-align: center;
}

در این مثال، متن داخل پاراگراف وسط‌چین می‌شود.

text-align: justify

ویژگی text-align: justify برای تراز کردن متن به صورت کامل استفاده می‌شود. وقتی از این مقدار استفاده می‌کنیم:

• متن در تمام عرض عنصر پخش می‌شود.
• فاصله بین کلمات به طور خودکار تنظیم می‌شود تا هر خط از لبه چپ تا لبه راست کشیده شود.
• این ویژگی به خصوص در متون طولانی و پاراگراف‌ها کاربرد دارد و ظاهر مرتب و منظم ایجاد می‌کند.

p {
  text-align: justify;
}

در این مثال، متن داخل پاراگراف به گونه‌ای تنظیم می‌شود که لبه چپ و راست کاملاً صاف و منظم دیده شود.

نکته درباره text-justify

ویژگی text-justify به تنهایی یک نوع تراز کردن متن نیست، بلکه برای تنظیم نحوه توزیع فاصله‌ها در متن justify شده استفاده می‌شود. وقتی متن با text-align: justify تنظیم می‌شود، text-justify مشخص می‌کند که فاصله‌ها چگونه بین کلمات یا حروف پخش شوند.

مقادیر رایج text-justify

auto

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

inter-word

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

inter-character

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

p {
 text-align: justify;
 text-justify: inter-word;
}

تگ یا ویژگی text-overflow

ویژگی text-overflow در CSS برای کنترل نحوه نمایش متن‌هایی که طولشان بیشتر از محدوده عنصر است استفاده می‌شود. وقتی متن طولانی‌تر از ظرف (container) باشد، با این ویژگی می‌توان تعیین کرد که چگونه متن کوتاه یا مخفی شود.

کاربرد معمول

وقتی متنی طولانی هست و نمی‌خوای که از جعبه یا باکس بیرون بزنه، می‌تونی با text-overflow رفتار نمایش اضافی متن رو کنترل کنی.

مقادیر مهم text-overflow:

clip (پیش‌فرض): متن اضافی که جا نمی‌شه، قطع میشه و دیده نمی‌شه (هیچ چیزی اضافه نمی‌شه).

ellipsis: متن اضافی به صورت سه نقطه ... نمایش داده میشه.

string: می‌تونی یه رشته دلخواه مثل >>> یا هر چیزی بنویسی که جایگزین متن اضافی بشه (کم‌تر استفاده میشه).

نکات مهم برای کار کردن صحیح text-overflow:

white-space باید روی nowrap یا چیزی که متن رو در یک خط نگه داره تنظیم شده باشه.

overflow باید روی hidden یا auto باشه تا متن اضافی مخفی بشه.

عرض (width) عنصر باید محدود شده باشه (مثلا مقدار مشخص یا درصد).

.box {
 width: 200px;
 white-space: nowrap;      /* متن را در یک خط نگه می‌دارد */
 overflow: hidden;         /* متن اضافی مخفی می‌شود */
 text-overflow: ellipsis;  /* متن اضافی به صورت ... نشان داده می‌شود */
 border: 1px solid #000;
}

اگر متن داخل .box بیشتر از ۲۰۰ پیکسل باشه، ادامه متن دیده نمیشه و به جای اون سه نقطه ... میاد.

ویژگی word-wrap و word-break

ویژگی word-wrap

ویژگی word-wrap برای کنترل نحوه شکست کلمات طولانی داخل یک عنصر استفاده می‌شود تا متن از عرض ظرف تجاوز نکند.

مقدار رایج: break-word

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

div {
 width: 150px;
 word-wrap: break-word;
}

در این مثال، اگر کلمه‌ای طولانی‌تر از ۱۵۰ پیکسل باشد، در همان محدوده ظرف شکسته می‌شود و باعث می‌شود ظاهر صفحه مرتب بماند.

 ویژگی word-wrap

ویژگی word-wrap برای کنترل نحوه شکستن کلمات طولانی در داخل یک عنصر استفاده می‌شود تا متن از عرض ظرف (container) تجاوز نکند و ظاهر صفحه مرتب باقی بماند.

مقدار رایج

break-word: وقتی کلمه طولانی‌تر از عرض عنصر باشد، به صورت خودکار در عرض عنصر شکسته شده و ادامه آن به خط بعدی می‌رود.

div {
 width: 150px;
 word-wrap: break-word;
}

در این مثال، اگر کلمه‌ای طولانی‌تر از ۱۵۰ پیکسل باشد، به خط بعدی منتقل می‌شود و از ظرف خارج نمی‌شود.

نکات مهم

• این ویژگی به خصوص برای جعبه‌های کوچک، ستون‌های متن و طراحی واکنش‌گرا کاربرد دارد.
• کمک می‌کند متن طولانی یا بدون فاصله به صورت مرتب نمایش داده شود و باعث بهم‌ریختگی ظاهر صفحه نشود.

ویژگی overflow-wrap

ویژگی overflow-wrap برای کنترل نحوه شکستن کلمات طولانی داخل یک عنصر استفاده می‌شود تا متن از محدوده ظرف (container) تجاوز نکند.

این ویژگی عملاً همان کاری را می‌کند که word-wrap انجام می‌دهد و در نسخه‌های جدید CSS ترجیح داده می‌شود از overflow-wrap استفاده شود.

مقدار رایج

break-word: وقتی کلمه طولانی‌تر از عرض عنصر باشد، به صورت خودکار در عرض عنصر شکسته و ادامه آن به خط بعدی می‌رود.

div {
  width: 150px;
  overflow-wrap: break-word;
}

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

نکات مهم

• این ویژگی به خصوص برای جعبه‌های کوچک، ستون‌های متن و طراحی واکنش‌گرا کاربرد دارد.
• کمک می‌کند متن طولانی یا بدون فاصله به صورت مرتب نمایش داده شود و ظاهر صفحه بهم نریزد.
• overflow-wrap و word-wrap در عمل مشابه هستند، ولی overflow-wrap استاندارد جدیدتری است و توصیه می‌شود از آن استفاده شود.

ویژگی word-break

ویژگی word-break در CSS برای کنترل نحوه شکستن کلمات و خطوط داخل یک عنصر استفاده می‌شود و مشخص می‌کند که کلمات چگونه و در چه نقاطی شکسته شوند تا متن از محدوده ظرف تجاوز نکند.

مقادیر مهم:

normal: رفتار پیش‌فرض مرورگر؛ کلمات فقط در نقاط مجاز شکسته می‌شوند.

break-all: حتی اگر کلمه در وسط خود باشد، می‌تواند شکسته شود تا متن در عرض ظرف بماند.

keep-all: معمولاً در زبان‌هایی مثل چینی و ژاپنی استفاده می‌شود و کلمات بدون فاصله بین آنها شکسته نمی‌شوند.

 مثال word-break

div {
  width: 150px;
  word-break: break-all;
}

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

تفاوت word-break و word-wrap

word-wrap (یا استاندارد جدید آن overflow-wrap) برای شکستن کلمات طولانی فقط زمانی که از عرض ظرف تجاوز می‌کنند استفاده می‌شود و بیشتر روی کلمات طولانی بدون فاصله تمرکز دارد.

word-break تعیین می‌کند کلمات در چه نقاطی می‌توانند شکسته شوند و کنترل بیشتری روی تمام کلمات و خطوط دارد، حتی در وسط کلمه.

به طور خلاصه:

اگر می‌خواهید متن طولانی در ظرف بماند و فقط در صورت نیاز شکسته شود، از word-wrap / overflow-wrap استفاده کنید.

اگر می‌خواهید همه کلمات حتی در وسطشان شکسته شوند تا متن کاملاً در ظرف بماند، از word-break استفاده کنید.

چه زمانی از کدام استفاده کنیم؟

ویژگی های overflow-wrap و word-break در CSS برای کنترل نحوه نمایش متن طولانی درون عناصر استفاده می شوند تا متن از محدوده ظرف خارج نشود و ظاهر صفحه مرتب باقی بماند.

ویژگی overflow-wrap باعث می شود کلمات طولانی که بدون فاصله هستند یا از عرض ظرف بیشترند به صورت خودکار شکسته شوند و به خط بعدی منتقل شوند. این روش کمک می کند متن همیشه در محدوده جعبه باقی بماند و ظاهر خوانا داشته باشد.

ویژگی word-break نحوه شکستن کلمات را دقیق تر کنترل می کند و حتی امکان دارد کلمات در وسط خود شکسته شوند تا متن کاملا در عرض ظرف جای بگیرد. این روش برای متن های طولانی و بدون فاصله کاربرد دارد اما ممکن است کمی خوانایی متن را کاهش دهد.

در طراحی صفحات وب معمولا از overflow-wrap استفاده می شود تا کلمات طولانی به صورت طبیعی شکسته شوند و ظاهر متن مرتب باقی بماند. word-break زمانی استفاده می شود که نیاز باشد حتی وسط کلمات شکسته شود تا متن از جعبه خارج نشود. ویژگی word-wrap نسخه قدیمی است و بیشتر برای سازگاری با مرورگرهای قدیمی کاربرد دارد اما عملکرد آن شبیه overflow-wrap است.

پیشنهاد مطالعه: مراحل اجرای یک پروژه طراحی سایت حرفه‌ای با برنامه نویسی لاراول

Transition property (ترانزیشن)

ویژگی Transition در CSS برای ایجاد تغییرات نرم و انیمیشنی بین حالت های مختلف یک عنصر استفاده می شود. به جای اینکه تغییرات به صورت ناگهانی اتفاق بیفتند، با استفاده از ترانزیشن، تغییرات مثل رنگ، اندازه، مکان یا شفافیت به آرامی و با زمان مشخص رخ می دهند و ظاهر صفحه جذاب تر و حرفه ای تر می شود.

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

ویژگی‌های مهم transition:

ویژگی Transition در CSS شامل چند بخش مهم است که نحوه و سرعت تغییرات را مشخص می کنند.

اولین ویژگی مهم transition-property است که تعیین می کند کدام ویژگی های CSS قرار است تغییر کنند. این ویژگی می تواند یک یا چند ویژگی مثل رنگ، اندازه یا موقعیت را مشخص کند.

ویژگی بعدی transition-duration است که مدت زمان تغییر را مشخص می کند. با تعیین این مقدار می توان تغییرات را سریع یا آهسته کرد و واحد آن معمولا ثانیه یا میلی ثانیه است.

ویژگی transition-timing-function سرعت تغییر را در طول زمان کنترل می کند. با این ویژگی می توان مشخص کرد تغییرات به صورت خطی، سریع در ابتدا و آهسته در انتها یا بالعکس اتفاق بیفتند.

ویژگی transition-delay زمان انتظار قبل از شروع تغییر را تعیین می کند. این ویژگی برای ایجاد افکت های متوالی یا هماهنگی با سایر انیمیشن ها کاربرد دارد.

مثال:

.button {
 background-color: blue;
 transition-property: background-color;
 transition-duration: 1s;
 transition-timing-function: ease-in-out;
}

.button:hover {
 background-color: red;
}

وقتی موس روی دکمه میره، رنگ به آرامی و نرم تغییر می‌کنه.

@keyframes (کلید فریم‌ها)

ویژگی @keyframes در CSS برای تعریف انیمیشن های سفارشی روی عناصر استفاده می شود. با استفاده از کلید فریم ها می توان مشخص کرد یک عنصر در طول زمان چگونه تغییر کند، مثلاً حرکت کند، رنگش تغییر کند یا اندازه اش بزرگ و کوچک شود.

در @keyframes شما مراحل مختلف انیمیشن را با درصد یا نام های from و to مشخص می کنید. درصدها نشان دهنده موقعیت عنصر در طول مدت انیمیشن هستند. مثلاً 0 درصد شروع و 100 درصد پایان انیمیشن را نشان می دهد.

با این روش می توان تغییرات پیوسته و نرم بین حالت های مختلف یک عنصر ایجاد کرد و کنترل دقیقی روی ظاهر و رفتار انیمیشن داشت. @keyframes اساس انیمیشن های CSS است و به همراه ویژگی animation برای اجرا شدن استفاده می شود.

ساختار:

@keyframes نام-انیمیشن {
 0% {
   /* حالت شروع */
 }
 50% {
   /* حالت وسط */
 }
 100% {
   /* حالت پایان */
 }
}

می‌توانید درصدها را با کلمات from (0%) و to (100%) هم بنویسید.

@keyframes moveRight {
 from { transform: translateX(0); }
 to { transform: translateX(200px); }
}

ویژگی‌های animation

animation در CSS شامل چند بخش مهم است که کنترل کامل روی انیمیشن های عناصر را فراهم می کند و باعث می شود حرکت ها و تغییرات بصری به صورت منظم و جذاب اجرا شوند.

animation-name: مشخص می کند کدام انیمیشن تعریف شده با @keyframes روی عنصر اعمال شود. این نام باید با نامی که در @keyframes تعریف شده مطابقت داشته باشد.

animation-duration: مدت زمان اجرای انیمیشن را تعیین می کند. با این ویژگی می توان مشخص کرد انیمیشن در چند ثانیه یا میلی ثانیه کامل شود.

animation-timing-function: نحوه سرعت تغییرات انیمیشن را کنترل می کند. این ویژگی مشخص می کند انیمیشن به صورت خطی، سریع در ابتدا و آهسته در انتها یا بالعکس اجرا شود.

animation-delay: زمان انتظار قبل از شروع انیمیشن را مشخص می کند. این ویژگی برای هماهنگی انیمیشن ها یا ایجاد افکت های متوالی کاربرد دارد.

animation-iteration-count: تعداد دفعات تکرار انیمیشن را تعیین می کند. می توان آن را محدود به چند بار یا نامحدود کرد تا به صورت مداوم اجرا شود.

animation-direction: جهت اجرای انیمیشن را مشخص می کند. با این ویژگی می توان انیمیشن را در جهت معمولی، معکوس یا رفت و برگشتی اجرا کرد.

animation-fill-mode: حالت عنصر بعد از اتمام انیمیشن را تعیین می کند و مشخص می کند که آیا عنصر به حالت اولیه بازگردد یا در حالت نهایی باقی بماند.

animation-play-state: وضعیت پخش انیمیشن را کنترل می کند و می توان انیمیشن را متوقف یا ادامه داد.

مسیر اجرای انیمیشن:

normal (پیش‌فرض): از ابتدا تا انتها همیشه یک‌طرفه اجرا می‌شود.

reverse: معکوس مسیر اجرا می‌شود (از انتها به ابتدا).

alternate: یک بار از ابتدا به انتها، دفعه بعد از انتها به ابتدا، و به همین ترتیب.

alternate-reverse: اولین بار معکوس، سپس نرمال، بعد دوباره معکوس و …

 animation-play-state: اجرای انیمیشن را فعال یا متوقف می کند.

وضعیت پخش انیمیشن:

running: انیمیشن در حال اجرا است.

paused: انیمیشن متوقف شده است.

 مثال کامل با همه ویژگی‌ها

@keyframes myframe {
 0% {
   transform: translateX(0);
   background-color: blue;
 }
 50% {
   transform: translateX(100px);
   background-color: red;
 }
 100% {
   transform: translateX(0);
   background-color: blue;
 }
}

.box {
 width: 100px;
 height: 100px;
 animation-name: myframe;
 animation-duration: 3s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-play-state: running;
}

در این مثال:

عنصر .box به صورت مداوم از نقطه‌ی 0 به 100 پیکسل حرکت می‌کند و رنگش بین آبی و قرمز تغییر می‌کند.

حرکت به صورت رفت و برگشت (alternate) انجام می‌شود.

انیمیشن تا بی‌نهایت تکرار می‌شود.

انیمیشن در حال اجراست.

تفاوت transition و animation

تفاوت اصلی بین transition و animation در CSS این است که ترانزیشن برای تغییرات ساده و کوتاه‌مدت هنگام رویدادها مثل هاور یا کلیک استفاده می شود، در حالی که انیمیشن برای حرکت‌ها و تغییرات پیچیده و پیوسته با چند مرحله و کنترل دقیق زمان، تکرار و جهت طراحی می شود.

به عبارت دیگر، ترانزیشن فقط وقتی فعال می شود که حالت عنصر تغییر کند و خودکار اجرا می شود، اما انیمیشن می تواند به صورت دائمی، رفت و برگشتی یا با تأخیر و تکرار مشخص اجرا شود بدون نیاز به تغییر حالت عنصر.

تگ Gradient (گرادینت)

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

انواع گرادینت

خطی (linear-gradient) که رنگ‌ها در یک جهت خطی از یک نقطه به نقطه دیگر تغییر می کنند

دایره‌ای (radial-gradient) که رنگ‌ها از مرکز به سمت بیرون به تدریج تغییر می کنند.

Box-sizing (باکس سایزینگ)

ویژگی box-sizing در CSS مشخص می کند که ابعاد یک عنصر چگونه محاسبه شوند و شامل محتوا، حاشیه و padding می شود یا خیر.

به طور پیش فرض مقدار آن content-box است، یعنی عرض و ارتفاع عنصر فقط شامل محتوای اصلی می شود و padding و border به آن اضافه می شوند.

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

استفاده از box-sizing: border-box باعث می شود طراحی صفحات دقیق تر و هماهنگ تر باشد و محاسبه اندازه عناصر ساده تر شود.

مثال:

box-sizing: border-box;

این باعث میشه اندازه کل باکس با padding و border همون اندازه‌ای باشه که تعیین کردی.

Flexbox (فلکس باکس)

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

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

مثلاً اگر یک div داری که می‌خوای آیتم‌هاش کنار هم یا عمودی بچینن، می‌تونی استفاده کنی:

display: flex;

ویژگی‌ها:

flex-direction: جهت قرارگیری: row, column

justify-content: چیدمان افقی: center, space-between و غیره

align-items: چیدمان عمودی: center, stretch و غیره

Display Box (دیسپلی باکس)

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

انواع مقادیر ویژگی Display و کاربرد هرکدام

block: عنصر به صورت بلوکی (مثل div)، یعنی در خط جدید شروع میشه و کل عرض رو می‌گیره.

inline: عنصر در خط با بقیه می‌مونه و اندازه‌اش فقط به محتواش محدود میشه (مثل span).

inline-block: مثل inline هست ولی می‌تونی اندازه مشخص بدی.

flex: عنصر به یک container فلکس تبدیل میشه.

grid: استفاده از شبکه‌بندی (CSS Grid).

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

پیشنهاد مطالعه: راهنمای کامل تگ‌های HTML

حالت‌های پنجگانه در ریسپانسیو (Responsive)

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

هدف از این حالت‌ها ایجاد تجربه کاربری یکنواخت و بهینه در تمام دستگاه‌ها و جلوگیری از بهم ریختگی یا نیاز به اسکرول افقی است.

اندازه‌های استاندارد صفحه نمایش در طراحی ریسپانسیو

xs (Extra small): موبایل‌های خیلی کوچک (معمولاً کمتر از 576px)

sm (Small): موبایل‌های معمولی (≥ 576px)

md (Medium): تبلت‌ها (≥ 768px)

lg (Large): دسکتاپ‌های کوچک (≥ 992px)

xl (Extra large): دسکتاپ‌های بزرگ (≥ 1200px)

مثال یک Media Query:

@media (max-width: 768px) {
 /* استایل برای صفحه‌های کوچکتر از 768 */
}

انتخابگرها (Selectors)

انتخابگرها در CSS ابزاری هستند که به کمک آن‌ها می توان مشخص کرد کدام عنصر یا گروهی از عناصر HTML باید تحت تاثیر قوانین و استایل‌های نوشته شده قرار بگیرند. در واقع انتخابگر مثل یک نشانه‌گذار عمل می کند که عنصر هدف را شناسایی می کند و سپس استایل تعریف شده روی آن اعمال می شود.

انواع انتخابگرهای پرکاربرد در CSS

tag → مثل p {} همه p ها رو انتخاب می‌کنه.

class → مثل .title {} برای انتخاب کلاس‌ها.

id → مثل #main {} برای انتخاب آی‌دی خاص.

div p → همه p های داخل div

div>p → فقط <p> هایی که مستقیماً داخل div هستند (نه توی لایه‌های داخلی‌تر).

div,p,h1 → انتخاب چندین تگ با هم.

* → انتخاب همه عناصر.

+ → انتخاب المان بعدی بلافاصله بعد از یک المان خاص.

~ → انتخاب همه المان‌های هم‌سطح بعدی.

 حالت‌ها و رفتارهای المان (Pseudo-classes)

:hover → وقتی موس روی المان میره.

:active → وقتی روی المان کلیک شده.

:visited → برای لینک‌هایی که قبلاً دیده شده‌اند.

:link → لینک‌هایی که هنوز دیده نشده‌اند.

:first-child → اولین فرزند یک المان.

:last-child → آخرین فرزند.

:nth-child(n) → فرزند شماره n.

:not(p) → همه المان‌ها به جز <p>.

:checked → برای چک‌باکس یا رادیویی که انتخاب شده.

:target → المانی که آدرس صفحه به id اون اشاره کرده (مثل anchor link).

:read-only / :optional / :required → وضعیت‌های مختلف فیلدهای فرم.

:valid / :invalid / :out-of-range / :empty → بر اساس اعتبار داده یا خالی بودن المان‌ها.

المنت‌های مجازی (Pseudo-elements)

::before → اضافه کردن محتوا قبل از یک المان.

::after → اضافه کردن محتوا بعد از یک المان.

::first-line → استایل‌دهی به خط اول متن.

::first-letter → استایل‌دهی به حرف اول.

::selection → استایل‌دهی به متن انتخاب‌شده توسط کاربر.

 ویژگی‌های خاص (Attribute selectors)

ویژگی‌های خاص یا همان Attribute selectors در CSS روشی برای انتخاب عناصر بر اساس ویژگی‌های آن‌ها در HTML هستند. به کمک این انتخابگرها می توان استایل خاصی را فقط روی عناصری اعمال کرد که دارای یک ویژگی مشخص یا یک مقدار خاص برای آن ویژگی باشند.

برای مثال می توان تمام لینک‌هایی که ویژگی href دارند را انتخاب کرد یا حتی لینک‌هایی که href آن‌ها با یک مقدار خاص شروع یا تمام می شود را هدف قرار داد. این امکان باعث می شود کنترل دقیق‌تری روی استایل عناصر داشته باشیم بدون اینکه نیاز به کلاس یا آیدی جداگانه تعریف کنیم.

به طور خلاصه، attribute selectors به طراح اجازه می دهند عناصر را بر اساس وجود یا مقدار ویژگی‌ها هدف قرار دهد و انعطاف بیشتری در طراحی ارائه می کنند.

نمونه‌هایی از Attribute Selector در CSS

input[type=text] → انتخاب ورودی‌هایی که نوعشون text هست.

q:lang(ho) → انتخاب المان q با زبان خاص.