معرفی

CSS مخفف Cascading Style Sheets به معنای برگه های سبک آبشاری است. CSS یک زبان شیوه نامه استاندارد است که برای توصیف نمایش (یعنی طرح و قالب بندی) صفحات وب استفاده می شود.

قبل از ظهور CSS، تقریباً تمام ویژگی های نمایشی اسناد HTML در نشانه گذاری HTML (مخصوصاً در تگ های HTML) قرار می گرفتند؛ باید همه ویژگی ها رنگ قلم، سبک های پس زمینه، تراز عناصر، حاشیه ها و اندازه ها به وضوح در HTML توضیح داده می شد.

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

برای حل این مشکل، CSS در سال ۱۹۹۶ توسط کنسرسیوم شبکه جهانی وب (W3C) معرفی شد که استاندارد آن را نیز حفظ می کند. CSS برای امکان تفکیک بین نمایش و محتوا طراحی شده است. اکنون طراحان وب می توانند اطلاعات قالب بندی صفحات وب را به یک شیوه نامه جداگانه منتقل کنند که در نتیجه آن نشانه گذاری HTML به طور قابل توجهی ساده تر و قابلیت نگهداری بهتر می شود.

CSS3 جدیدترین نسخه از ویژگی های CSS است. CSS3 اصلاحات و ویژگی های جدیدی را برای بهبود قابلیت های نمایش وب اضافه کرده است.

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

با CSS چه کاری می توانید انجام دهید؟

• به راحتی می توانید قوانین سبک دهی مشابه را بر روی چندین عنصر اعمال کنید.
• می توانید نمایش چندین صفحه از یک وب سایت را با یک شیوه نامه کنترل کنید.
• می توانید یک صفحه را در دستگاه های مختلف به شیوه های متفاوت نمایش دهید.
• می توانید حالت های پویای عناصر مانند شناور بودن، تمرکز و … را سبک دهی کنید که با روش های دیگر امکان پذیر نیست.
• می توانید موقعیت یک عنصر را در صفحه وب تغییر دهید، بدون اینکه نشانه گذاری را تغییر دهید.
• می توانید نمایش عناصر HTML موجود را تغییر دهید.
• می توانید عناصر را در فضای ۲بعدی یا ۳بعدی تغییر شکل دهید؛ مانند تغییر اندازه، چرخش، کج کردن و ….
• می توانید انیمیشن و جلوه های حرکتی را بدون استفاده از جاوا اسکریپت ایجاد کنید.
• می توانید نسخه مناسب چاپ از صفحات وب خود بسازید.

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

مزایای استفاده از CSS

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

CSS زمان زیادی را صرفه جویی می کند: CSS انعطاف پذیری زیادی برای تنظیم ویژگی های سبک یک عنصر ایجاد می کند. می توانید یک بار CSS را بنویسید و سپس همان کد را بر روی مجموعه ای از عناصر HTML اعمال کنید، همچنین می توانید در چندین صفحه HTML به صورت تکراری استفاده کنید.

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

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

سبک های فوق العاده تر از (HTML): CSS دارای قابلیت های نمایش بسیار گسترده تری نسبت به HTML است و کنترل بسیار بهتری روی چیدمان صفحات وب ارائه می دهد. بنابراین در مقایسه با عناصر و ویژگی های نمایشی در HTML، می توانید توجه خیلی بیشتری به صفحات وب خود دریافت کنید.

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

دوره آموزش Css شامل:

این مجموعه آموزش CSS کلیه اصول CSS را شامل می شود، شامل ایده انتخاب گرها، روش های تنظیم رنگ ها و پس زمینه ها، نحوه قالب بندی قلم ها و متن، سبک دهی عناصر UI (واسط کاربری) مانند لینک های پیوندی، لیست ها، جدول ها و … و همچنین مفهوم مدل جعبه ای در CSS و … .

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

در نهایت، می توانید برخی از ویژگی های پیشرفته معرفی شده در ۳ CSS مانند رنگ های گرادیان، افکت سایه ای، تبدیل های دوبعدی و سه بعدی، شفافیت آلفا و همچنین شیوه تولید جلوه های حرکتی و انیمیشن، طرح بندی های فلکس، افکت فیلتر، مفهوم مدیا کوئری و موارد دیگر را بررسی کنید.

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

شروع کار

روش‌های اضافه کردن CSS به HTML

۱. سبک‌های خطی (Inline Styles):

• مستقیم در تگ HTML با صفت style.

<h1 style="color: red; font-size: 24px;">عنوان</h1>

• معایب: نگهداری سخت، اولویت بالا، بدون کلاس/شبه‌عناصر.

۲. سبک‌های داخلی (Internal/Embedded Styles):

• در <head> با تگ <style>.

<head>
<style>
body { background-color: yellow; }
p { color: white; }
</style>
</head>

• فقط روی همان صفحه اثر دارد. صفت type="text/css" اختیاری (HTML5).

۳. سبک‌های خارجی (External Stylesheets) - بهترین روش:

• فایل جداگانه style.css بسازید و با <link> لینک کنید.

/* style.css */
body {
  background: lightyellow;
  font: 18px Arial, sans-serif;
}
h1 { color: orange; }

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

• مزایا: تغییرات کلی سایت آسان، حداقل کد HTML.

اولویت سبک‌ها:

سبک‌های خطی (Inline Styles) بالاترین اولویت و سبک‌های خارجی (External Stylesheets) کمترین اولویت را دارند. این بدان معناست که اگر شما یک عنصر را در هر دو سبک‌های خارجی (External Stylesheets) و سبک‌ داخلی (Internal/Embedded Styles) استایل دهی کنید، قوانین سبک متناقض در سبک‌ داخلی (Internal/Embedded Styles) بر روی استایل بازنویسی می شوند.

اولویت: خطی > داخلی > خارجی

وارد کردن خارجی با import@ (کمتر توصیه میشود):

قانون import@ روش دیگری برای بارگیری یک css خارجی است. جمله import@ به مرورگر دستور می دهد تا یک css را بارگیری و از استایل های آن استفاده کند.

@import url("style.css"); /* در ابتدا فایل */

body {
  background: lightyellow;
  font: 18px Arial, sans-serif;
}
h1 { color: orange; }

سینتکس (ساختار)

درک ساختار CSS

یک فایل CSS شامل مجموعه ای از قوانینی است که توسط مرورگر وب تفسیر می شود و سپس در عناصر مربوطه مانند پاراگراف ها، سرتیترها و …. در html اعمال می شوند.

ساختار کلی قانون CSS

یک قانون CSS دو بخش اصلی دارد:

• انتخابگر (Selector): مشخص می‌کند کدام عنصر(ها) تحت تأثیر قرار گیرند (مثل h1, p).
• تعریف‌ها (Declarations): شامل ویژگی‌ها و مقادیر، داخل {} قرار می‌گیرند.

h1 /*انتخابگر*/ {
    color:blue; /*تعریف*/
    text-align:center; /*تعریف*/
}

• h1: انتخابگر
• color: blue;: تعریف (ویژگی color با مقدار blue)
• text-align: center;: تعریف دوم

نکته: هر تعریف با ; پایان می‌یابد و گروه تعریف‌ها با {} احاطه می‌شود.

خوانایی بهتر کد

برای وضوح بیشتر، هر تعریف را در خط جداگانه بنویسید:

h1 {
  color: blue;
  text-align: center;
}

کامنت‌گذاری (Comments)

• برای توضیح کد استفاده می‌شود (مرورگر نادیده می‌گیرد).
• شروع: /* ، پایان: */

/* این یک کامنت تک‌خطی است */
h1 {
  color: blue;
  text-align: center;
}

/* کامنت چندخطی
   برای توضیحات طولانی */
p {
  font-size: 18px;
  text-transform: uppercase;
}

کاربرد: اشکال‌زدایی (کامنت کردن موقت کد):

h1 { color: blue; }
/* p { font-size: 18px; } */  /* غیرفعال موقت */

حساسیت به حروف کوچک/بزرگ (Case Sensitivity)

• نام ویژگی‌ها و مقادیر: حساس نیستند (مثل Color: Blue کار می‌کند).
• انتخابگرها: معمولاً حساس‌اند (مثل .mainContent ≠ .maincontent). توصیه: همه را کوچک بنویسید تا ایمن باشد.

برچسب‌ها: CSS, سینتکس, ساختار.

انتخابگرها

انتخابگر چیست؟

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

انواع انتخابگرها

۱. انتخابگر عمومی (Universal Selector)

• نماد: *
• همه عناصر صفحه را انتخاب می‌کند.

* {
  margin: 0;
  padding: 0;
}

هشدار: فشار زیاد به مرورگر، توصیه نمی‌شود.

۲. انتخابگر نوع عنصر (Type Selector)

• نام عنصر (مثل p, h1).

p {
  color: blue;
}

همه تگ‌های <p> را انتخاب می‌کند.

۳. انتخابگر ID (ID Selector)

• نماد: # + نام ID.
• فقط یک عنصر منحصربه‌فرد.

#error {
  color: red;
}

برای <div id="error"> اعمال می‌شود.

۴. انتخابگر کلاس (Class Selector)

• نماد: . + نام کلاس.
• همه عناصر با کلاس مشابه.

.blue {
  color: blue;
}
p.blue {
  color: blue;  /* فقط پاراگراف‌های کلاس blue */
}

۵. انتخابگرهای نسل (Descendant Selector)

• فضا ( ) بین انتخابگرها.
• همه فرزندان (مستقیم/غیرمستقیم).

ul.menu li a {
  text-decoration: none;
}
h1 em {
  color: green;
}

۶. انتخابگر فرزند (Child Selector)

• نماد: >
• فقط فرزندان مستقیم.

ul > li {
  list-style: square;
}

۷. انتخابگر هم‌نوع مجاور (Adjacent Sibling Selector)

• نماد: +
• عنصر مجاور بلافاصله بعد.

h1 + p {
  color: blue;
  font-size: 18px;
}

انتخابگر h1+p در مثال بالا عناصر <p> را تنها در صورتی انتخاب می کند که هر دو عناصر <h1> و <p> والدین یکسانی در درخت سند داشته باشند و <h1> بدون فاصله قبل از عنصر <p> باشد.

۸. انتخابگر هم‌نوع عمومی (General Sibling Selector)

• نماد: ~
• همه هم‌نوع‌ها بعد از عنصر.

h1 ~ p {
  color: blue;
}
ul.task ~ p {
  color: #f0f;
  text-indent: 30px;
}

انتخابگر h1 ∼ p در مثال بالا، تمام عناصر <p> را انتخاب می کند که بعد از عنصر <h1> آمده اند، در حالیکه والدین همه عناصر در درخت سند یکی است.

انتخابگرهای گروهی (Grouped Selectors)

• کاما (,) برای گروه‌بندی و جلوگیری از تکرار.

h1, h2, h3 {
  font-weight: normal;
}
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }

برچسب‌ها: CSS, انتخابگرها, Selector.

رنگ‌ها

ویژگی color

رنگ متن را تعیین می‌کند. مقادیر:

p { color: blue; }

روش‌های تعریف رنگ

۱. نام‌های رنگی (Color Names)

• ۱۶ رنگ اصلی HTML + ۱۴۰+ رنگ گسترده.

p { color: red; }
h1 { color: DarkBlue; }

۲. مقادیر RGB

• RGB: مقادیر ۰-۲۵۵ برای قرمز، سبز، آبی.

p { color: rgb(255,0,0); }      /* قرمز */
p { color: rgb(0,255,0); }      /* سبز */
p { color: rgb(0,0,255); }      /* آبی */

• RGBA: + شفافیت (Alpha ۰.۰ تا ۱.۰).

p { color: rgba(255,0,0,0.5); } /* قرمز نیمه‌شفاف */

۳. مقادیر HSL

• HSL: Hue (رنگ ۰-۳۶۰°), Saturation (غلظت ۰-۱۰۰%), Lightness (روشنایی ۰-۱۰۰%).

p { color: hsl(0,100%,50%); }   /* قرمز */
p { color: hsl(120,100%,40%); } /* سبز */

• HSLA: + شفافیت.

p { color: hsla(120,100%,40%,0.5); }

۴. کد هگزادسیمال (Hexadecimal)

• #RRGGBB یا #RGB (کوتاه).

p { color: #ff0000; }    /* قرمز کامل */
p { color: #f00; }       /* قرمز کوتاه */
p { color: #00ff00; }    /* سبز */
p { color: #090; }       /* سبز کوتاه */

ویژگی background-color

رنگ پس‌زمینه عنصر.

div { background-color: yellow; }

همه روش‌های بالا قابل استفاده.

مثال کامل

<!DOCTYPE html>
<html>
<head>
<style>
.red { color: #f00; background-color: #ff0; }
.green { color: rgb(0,255,0); }
.blue { color: hsl(240,100%,50%); }
</style>
</head>
<body>
<p class="red">قرمز</p>
<p class="green">سبز</p>
<p class="blue">آبی</p>
</body>
</html>

نکات

• شفافیت: فقط RGBA/HSLA.
• ابزارها: Adobe Color, Coolors.co برای انتخاب رنگ.

برچسب‌ها: CSS, رنگ, Color, RGB, HSL, Hex.

پس‌زمینه

ویژگی‌های پس‌زمینه

۱. background-color

رنگ پس‌زمینه (همه روش‌های رنگ قبلی).

div {
  background-color: #ff0;     /* زرد */
  background-color: rgb(255,0,255); /* بنفش */
}

۲. background-image

تصویر پس‌زمینه با URL.

div {
  background-image: url(images/bg.gif);
  background-image: url("https://example.com/bg.jpg");
}

نکته: " و ' اختیاری.

۳. background-repeat

تکرار تصویر:

• repeat (پیش‌فرض): افقی+عمودی
• repeat-x: فقط افقی
• repeat-y: فقط عمودی
• no-repeat: بدون تکرار

div {
  background-image: url(images/bg.gif);
  background-repeat: no-repeat;
}

۴. background-position

موقعیت تصویر:

div {
  background-image: url(images/logo.png);
  background-repeat: no-repeat;
  background-position: right top;  /* گوشه راست بالا */
  background-position: center center;
  background-position: 50% 50%;   /* مرکز */
}

مقادیر: top, center, bottom, left, right, px, %.

۵. background-attachment

ثابت ماندن تصویر هنگام اسکرول:

• scroll (پیش‌فرض): با محتوا اسکرول
• fixed: نسبت به viewport ثابت

body {
  background-image: url(images/bg.jpg);
  background-attachment: fixed;
}

ویژگی ترکیبی background (CSS3)

همه ویژگی‌ها را یکجا:

div {
  background: #ff0 url(images/bg.gif) no-repeat right top fixed;
}

ترتیب: color image repeat attachment position

اگر هنگام استفاده از ویژگیbackground یک مقدار فراموش شود و یا مشخص نشده باشد، از مقدار پیش فرض آن ویژگی، در صورت وجود، استفاده می شود.

توجه: ویژگی های پس زمینه ارثی نیست، اما به طور پیش فرض، مقدار اولیه برای ویژگی پس زمینه در CSS، transparent تنظیم شده است، به همین دلیل پس زمینه عنصر والد نمایش داده می شود.

ویژگی background-size (CSS3)

اندازه تصویر:

div {
  background-image: url(images/photo.jpg);
  background-size: 100px 200px;  /* عرض ارتفاع */
  background-size: cover;        /* کل مساحت (برش) */
  background-size: contain;      /* کامل نمایش (فاصله) */
}

مثال کامل

.hero {
  background: #369 url('hero-bg.jpg') no-repeat center/cover fixed;
  height: 500px;
  color: white;
}

برچسب‌ها: CSS, پس‌زمینه, Background, تصویر.

فونت‌ها

ویژگی‌های فونت (قلم) در CSS امکان کنترل کامل ظاهر متن را می‌دهد: خانواده فونت، اندازه، ضخامت، حالت مورب و...

ویژگی‌های اصلی:

• font-family | font-style | font-variant | font-weight | font-size

۱. font-family (خانواده فونت)

انتخاب نوع فونت از لیست اولویت‌دار. چند فونت مشخص کنید (با , جدا کنید).

قوانین:

• فونت‌های دلخواه اول لیست
• خانواده عام آخر لیست: serif | sans-serif | monospace | cursive | fantasy
• نام چندکلمه‌ای در "دابل کوتیشن"

مثال:

body {
  font-family: "Vazir", Tahoma, Arial, sans-serif;
}

p.special {
  font-family: "Courier New", monospace;
}

نتیجه:

 اگر Vazir موجود نبود → Tahoma → Arial → sans-serif سیستم

۲. font-style (حالت فونت)

سبک ظاهری متن: معمولی، مورب، کج.

مقادیر:

مثال:

p.normal  { font-style: normal; }
p.italic  { font-style: italic; }
p.oblique { font-style: oblique; }

۳. font-size (اندازه فونت)

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

کلمات کلیدی (Keyword)

مطلق: xx-small | x-small | small | medium | large | x-large | xx-large نسبی: smaller | larger

مثال:

body    { font-size: large;    }  /* پایه */
h1      { font-size: x-large;  }
p.small { font-size: smaller;  }

پیکسل (px) - دقیق اما محدود

h1 { font-size: 36px; }
p  { font-size: 16px; }

مشکل: کاربر نمی‌تواند از مرورگر بزرگ/کوچک کند (دسترسی‌پذیری ضعیف).

Em - نسبی به والد (پیشنهادی)

۱em = اندازه فونت والد

• اگر body { font-size: 16px; } → 1em=16px | 2em=32px

مثال:

body { font-size: 16px; }
h1   { font-size: 2em;   }  /* 32px */
p    { font-size: 1em;   }  /* 16px */

ترکیب % + Em (بهترین روش)

برای به دست آوردن نتیجه مشابه در همه مرورگرها، اندازه قلم به طور پیش فرض روی درصد برای عنصر body تنظیم می شود. تنظیم اندازه قلم برابر با ٪۶۲٫۵، یک روش محبوب برای تنظیم اندازه قلم برای عنصر body است (یعنی ۶۲٫۵ درصد از px16 پیش فرض)، که برابر با ۱۰px یا ۰٫۶۲۵em است.

اکنون می توانید ویژگیfont-size را برای هر عنصر با استفاده از واحد em تنظیم کنید، با یک تبدیل، با تقسیم مقدار px بر ۱۰٫ این روش ۱۰px = ۱em, ۱۲px = ۱٫۲em, ۱۴px = ۱٫۴em, ۱۶px = ۱٫۶em, و … . مثال زیر را مشاهده کنید:

body { font-size: 62.5%; }  /* 62.5% از 16px = 10px → 1em=10px */
h1   { font-size: 2.4em; }  /* 24px */
p    { font-size: 1.4em; }  /* 14px */

مزیت: مقیاس‌پذیر در همه مرورگرها.

نکته: کنسرسیوم شبکه جهانی وب (W3C) توصیه می کند، برای ایجاد طرح های قوی تر و مقیاس پذیرتر، از مقادیر em یا درصد (٪) استفاده کنید.

۴. font-weight (ضخامت/توپری فونت)

درجه ضخامت متن.

مقادیر:

مثال:

p.normal { font-weight: normal;  }  /* 400 */
p.bold   { font-weight: bold;    }  /* 700 */
p.thin   { font-weight: 300;     }
p.heavy  { font-weight: 900;     }

نکته: همه فونت‌ها همه وزن‌ها را ندارند → نزدیک‌ترین انتخاب می‌شود.

۵. font-variant (نوع حروف)

تبدیل حروف کوچک به کوچک‌شده بزرگ (Small-caps).

مقادیر:

مثال:

h2 {
  font-variant: small-caps;
}

شورت‌کد font (ترکیبی)

همه ویژگی‌ها یکجا:

p {
  font: italic bold 16px/1.6 "Vazir", sans-serif;
}
/* ترتیب: style weight size/line-height family */

قالب‌بندی متن

ویژگی‌های متن CSS کنترل کامل ظاهر متن را می‌دهد: رنگ، تراز، تزیین، تبدیل حروف، فاصله‌ها و...

مزایا:

• دقت بالا در فاصله کلمات/حروف/خطوط
• سازگاری RTL (فارسی/عربی)
• بهبود خوانایی متن

۱. color (رنگ متن)

تنظیم رنگ کاراکترها (نه پس‌زمینه).

روش‌ها: نام | Hex | RGB | HSL

h1 { color: #ff0000; }     /* قرمز */
p  { color: green; }       /* سبز */

نکته: مستقل از background-color → ترکیب کنید!

۲. text-align (تراز افقی)

چینش متن در خط.

مثال:

h1 { text-align: center; }
p  { text-align: justify; }

justify در عمل: کلمات کشیده می‌شوند تا لبه‌ها صاف بماند.

۳. text-decoration (تزیین متن)

خط‌کشی روی/زیر/وسط متن.

مثال:

h1 { text-decoration: overline; }
h2 { text-decoration: line-through; }

حذف خط زیر لینک‌ها (بهترین روش)

a {
  text-decoration: none;
  border-bottom: 1px dotted #369;  /* نقطه‌چین زیبا */
}

چرا؟ خط صاف → گیج‌کننده | نقطه‌چین → واضح + زیبا

هشدار: blink در بیشتر مرورگرها پشتیبانی نمی‌شود ❌

۴. text-transform (تبدیل حروف)

تغییر خودکار حروف.

مثال:

.up    { text-transform: uppercase; }
.cap   { text-transform: capitalize; }
.low   { text-transform: lowercase; }

۵. text-indent (تورفتگی خط اول)

فاصله خط اول پاراگراف (مثل کتاب).

مقادیر: px | % | em

p {
  text-indent: 2em;   /* 2 برابر اندازه فونت */
  /* یا: 50px | 5% */
}

نکته RTL: در فارسی از راست تورفتگی می‌گیرد.

۶. word-spacing (فاصله کلمات)

فاصله اضافی بین کلمات.

مقادیر: normal | px | em

p.wide { word-spacing: 8px; }

ترکیب با:

p.justify-wide {
  word-spacing: 6px;
  text-align: justify;  /* کشش + فاصله */
}

۷. letter-spacing (فاصله حروف)

**فاصله اضافی بین هر حرف.

مقادیر: normal | px (منفی=فشرده)

h1.tight { letter-spacing: -1px; }  /* فشرده */
p.wide   { letter-spacing: 4px;  }  /* باز */

۸. line-height (ارتفاع خط)

فاصله عمودی خطوط (خوانایی ↑).

مقادیر:

• عدد: 1.6 × font-size
• px | em | %

مثال:

p {
  font-size: 16px;
  line-height: 1.6;  /* 25.6px ارتفاع */
}

محاسبه:

اختلاف = line-height - font-size
نصف‌فاصله = اختلاف ÷ 2  (بالا + پایین)

مثال بصری:

p.demo {
  font-size: 14px;
  line-height: 24px;
  background: #f0e68c;  /* پس‌زمینه برای نمایش */
}
/* نصف‌فاصله: (24-14)/2 = 5px بالا + 5px پایین */

برچسب‌ها: CSS, text-align, text-decoration, line-height, word-spacing

سبک‌دهی لینک‌ها

هر لینک ۴ حالت دارد که متفاوت استایل می‌شوند:

ترتیب حیاتی: LVHA (:link → :visited → :hover → :active)

شبه‌کدها (Pseudo-classes) به زبان ساده

a:link    { color: #FF0000; }  /* قرمز - عادی */
a:visited { color: #00FF00; }  /* سبز - بازدیدشده */
a:hover   { color: #FF00FF; }  /* بنفش - ماوس روی آن */
a:active  { color: #0000FF; }  /* آبی - کلیک */

چرا ترتیب LVHA؟

بدون ترتیب درست: hover ممکنه روی active اثر نذاره!

لینک‌های پیش‌فرض مرورگرها

مشکل: نامنظم + خط زیر مزاحم!

۱. تنظیم رنگ لینک (رایج‌ترین)

a:link    { color: #369; }      /* آبی تیره */
a:visited { color: #666; }      /* خاکستری */
a:hover   { color: #e74c3c; }   /* قرمز زنده */
a:active  { color: #c0392b; }   /* قرمز تیره */

۲. حذف/کنترل خط زیر (text-decoration)

بهترین روش: none + جایگزین بصری.

a:link, a:visited {
  text-decoration: none;
  border-bottom: 1px dotted #369;  /* نقطه‌چین ظریف */
}

a:hover, a:active {
  border-bottom: 2px solid #e74c3c;  /* خط ضخیم رنگی */
  color: #e74c3c;
}

چرا نقطه‌چین؟

• واضح = قابل کلیک
• زیبا = بدون مزاحمت
• حرفه‌ای = UX عالی

برچسب‌ها: CSS, لینک, :hover, :active, pseudo-class, لینک responsive

لیست‌ها

مقدمه: ۳ نوع لیست HTML

هدف CSS: کنترل بالت، تصویر، موقعیت، فاصله.

۱. list-style-type (نوع بالت/شماره)

تغییر شکل پیش‌فرض بالت/شماره.

لیست غیرترتیبی <ul>

لیست ترتیبی <ol>

مثال:

ul {
  list-style-type: square;     /* ■ */
}
ol {
  list-style-type: upper-roman; /* I II III */
}

۲. list-style-position (موقعیت بالت)

بالت داخل یا خارج کادر متن؟

مثال:

ul.inside li { list-style-position: inside; }
ul.outside li { list-style-position: outside; }

۳. list-style-image (تصویر بالت) ❌ مشکل‌دار

ul li {
  list-style-image: url('arrow.png');
}

مشکلات مرورگر:

• Chrome/Safari/Firefox: درست
• IE/Opera: بالاتر از متن
• اندازه: نامنظم

۴. راه‌حل کامل: background-image + none

بهترین روش - سازگار همه مرورگرها ✅

ul {
  list-style-type: none;  /* حذف بالت پیش‌فرض */
  padding-left: 0;        /* صفر کردن padding */
}

ul li {
  background-image: url('arrow.png');
  background-repeat: no-repeat;
  background-position: 0 0.4em;  /* X Y (از بالا-چپ) */
  padding-left: 25px;            /* فضای بالت + متن */
  line-height: 1.6;
}

مزایا:

• کنترل کامل اندازه/موقعیت
• سازگار IE6+
• قابل انیمیشن

۵. list-style (شورت‌کد - همه‌چیز یکجا)

ترتیب: type position image

ol {
  list-style: upper-latin inside;  /* حروف A B C داخل */
}

ul.custom {
  list-style: square outside url('star.png');
}

انعطاف: مقادیر هرترتیب OK اگر کامل نباشد.

برچسب‌ها: CSS, لیست, ul, ol, list-style, lists

جدول‌ها

مقدمه: چرا جدول CSS مهم است؟

جدول HTML خام = بدون حاشیه + فشرده ❌
جدول CSS = زیبا + قابل خواندن + Responsive ✅

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

۱. اضافه کردن حاشیه (border)

بهترین روش: border روی table, th, td

table, th, td {
  border: 1px solid #333;
}

مشکل: حاشیه‌های دوتایی بین سلول‌ها (فاصله + جداگانه).

۲. border-collapse (یکی کردن حاشیه‌ها) ✅ حیاتی

حل: حاشیه‌ها چسبیده به هم.

table {
  border-collapse: collapse;  /* یکی می‌کند */
}
table, th, td {
  border: 1px solid #333;
}

توجه: اگر <!DOCTYPE> در سند HTML مشخص نشده باشد، ویژگیborder-collapse در CSS نتایج غیر منتظره ای ایجاد خواهد کرد.

۳. padding (فضای داخلی سلول)

خوانایی ↑ - محتوا از حاشیه دور.

th, td {
  padding: 12px 16px;  /* بالا-راست پایین چپ */
}

۴. border-spacing (فاصله بین حاشیه‌ها)

فقط با border-collapse: separate.

table {
  border-collapse: separate;
  border-spacing: 8px 4px;  /* افقی عمودی */
}

کاربرد: طراحی خاص (نه رایج).

۵. table-layout (کنترل عرض ستون)

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

مشکل: جدول صبر می‌کند تا محتوای طولانی لود شود ❌

table {
  width: 100%;
  table-layout: fixed;  /* ستون‌ها ثابت */
}
th:nth-child(1) { width: 30%; }
th:nth-child(2) { width: 70%; }

مزیت fixed:

• نمایش ردیف‌به‌ردیف (سریع)
• عرض ستون کنترل‌شده

۶. empty-cells (سلول خالی)

فقط border-collapse: separate.

table {
  border-collapse: separate;
  empty-cells: hide;
}

۷. caption-side (موقعیت عنوان)

عنوان جدول بالا/پایین.

caption {
  caption-side: bottom;  /* یا top */
}

برچسب‌ها: CSS, table, border-collapse, responsive table, table