آموزش CSS - قسمت 2

سلام به همه دوستان عزیز! خیلی خوشحالم که دوباره در خدمتتون هستم. در این قسمت از دوره آموزش CSS، قصد داریم با مباحث پیشرفته‌تری آشنا بشیم که به شما کمک می‌کنه تا صفحات وب‌تون رو به سطح بعدی ببرید. توی این بخش، با هم نگاهی به خصوصیات مختلفی مثل padding و چگونگی ایجاد فاصله داخلی بین عناصر، height و width برای تعیین ابعاد عناصر و box model که یکی از اصولی‌ترین مفاهیم در CSS هست، می‌اندازیم.

همچنین، می‌خوایم با outline و تفاوتش با border آشنا بشیم، نحوه استایل‌دهی به متن‌ها و فونت‌ها رو یاد بگیریم و ببینیم چطور می‌تونیم آیکون‌ها رو به صفحات وب اضافه کنیم. در ادامه، ویژگی‌های مربوط به لینک‌ها، لیست‌ها و جداول رو بررسی می‌کنیم و یاد می‌گیریم چطور می‌تونیم این عناصر رو زیباتر و کاربردی‌تر کنیم. آماده باشید تا با این مباحث جذاب و کاربردی، مهارت‌های CSS خودتون رو ارتقا بدید و پروژه‌های وب‌تون رو حرفه‌ای‌تر کنید.

خصوصیت Padding

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

تصویر ساده از مدل جعبه‌ای و نقش padding:

-----------------------------------------
|               padding                 |
|   -------------------------------     |
|   |           content           |     |
|   -------------------------------     |
-----------------------------------------

تنظیم Padding 

شما می‌تونید padding رو با استفاده از واحدهای مختلفی مثل پیکسل (px)، درصد (%)، ام (em) و حتی واحدهای نسبی تنظیم کنید.

مثال: تنظیم Padding با استفاده از پیکسل

<div class="box">This is a box with padding</div>

.box {
    padding: 20px; /* 20px inner spacing */
    border: 2px solid black; /* 2 pixel border */
}

در این مثال، به عنصر div یک padding 20 پیکسلی اعمال شده که باعث می‌شه محتوا 20 پیکسل از حاشیه فاصله داشته باشه.

تنظیم Padding برای هر سمت به صورت جداگانه

شما می‌تونید padding رو برای هر چهار جهت (بالا، پایین، چپ و راست) به صورت جداگانه تنظیم کنید.

مثال: تنظیم Padding برای هر جهت به صورت جداگانه

<div class="box">This is a box with separate padding</div>

.box {
    padding-top: 10px; /* Internal distance from top */
    padding-right: 20px; /* Inner distance from the right */
    padding-bottom: 30px; /* Inner distance from the bottom */
    padding-left: 40px; /* Internal distance from the left */
    border: 2px solid black;
}

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

استفاده از ویژگی Shorthand برای Padding

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

مثال: استفاده از ویژگی Shorthand برای تعریف Padding

<div class="box">This is a box with shorthand padding</div>

.box {
    padding: 10px 20px 30px 40px; /* Up, right, down, left */
    border: 2px solid black;
}

در این مثال، با استفاده از ویژگی shorthand، padding به ترتیب برای چهار جهت (بالا، راست، پایین، چپ) تعیین شده که باعث می‌شه کدها خواناتر و ساده‌تر بشه.

استفاده از مقادیر درصدی برای Padding

شما می‌تونید padding رو به صورت درصدی تعریف کنید که نسبت به عرض عنصر محاسبه می‌شه.

مثال: تنظیم Padding با استفاده از درصد

<div class="box">This is a box with percentage padding</div>

.box {
    padding: 5%; /* Internal distance of 5% on each side */
    border: 2px solid black;
}

در این مثال، padding به صورت 5 درصدی برای هر چهار جهت تعیین شده که نسبت به عرض عنصر محاسبه می‌شه.

استفاده از padding-left، padding-right، padding-top، padding-bottom

این خاصیت‌ها به شما اجازه می‌دهند تا padding رو برای هر سمت به صورت جداگانه تنظیم کنید.

مثال: تنظیم Padding به صورت جداگانه

<div class="box">This is a box with separate padding</div>

.box {
    padding-left: 15px;
    padding-right: 25px;
    padding-top: 35px;
    padding-bottom: 45px;
    border: 2px solid black;
}

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

حذف Padding با مقدار صفر

برخی از عناصر HTML به طور پیش‌فرض دارای padding هستند که می‌تونید اونا رو با استفاده از مقدار صفر حذف کنید.

مثال: حذف Padding‌های پیش‌فرض از یک عنصر HTML

<p>This is a paragraph without padding.</p>

p {
    padding: 0;
    border: 2px solid black;
}

در این مثال، تمام فاصله‌های داخلی پیش‌فرض از عنصر p حذف شده تا کنترل بیشتری روی فضای داخلی داشته باشیم.

تفاوت Padding و Margin

خیلی مهمه که تفاوت بین padding و margin رو بدونید. padding فضای داخلی بین محتوا و حاشیه‌ی عنصر رو تنظیم می‌کنه، در حالی که margin فضای خارجی بین عناصر مختلف رو تعیین می‌کنه.

مثال: تفاوت Padding و Margin

<div class="container">
    <div class="box1">Box 1 with padding</div>
    <div class="box2">Box 2 with margin</div>
</div>

.container {
    border: 2px solid black;
    padding: 10px; /*Internal distance for the entire container*/
}

.box1 {
    padding: 20px; /* Internal distance */
    background-color: lightblue;
}

.box2 {
    margin: 20px; /* External distance */
    background-color: lightgreen;
}

در اینجا، padding فاصله داخلی بین محتوا و حاشیه‌ی box1 رو تعیین کرده و margin فاصله خارجی بین box2 و عناصر مجاورش رو مشخص کرده.

خصوصیت Height و Width

ویژگی‌های height و width برای تنظیم ارتفاع و عرض عناصر HTML استفاده می‌شن. این خصوصیت‌ها به شما اجازه می‌دن که کنترل دقیقی روی ابعاد عناصر داشته باشید. به کمک این ویژگی‌ها می‌تونید المان‌های مختلف رو به اندازه‌های دلخواه‌تون تغییر بدید و طراحی‌های ریسپانسیو و متناسب با نیازهای پروژه‌تون ایجاد کنید.

• خصوصیت width عرض یک عنصر رو تنظیم می‌کنه. شما می‌تونید عرض یک عنصر رو به صورت ثابت یا درصدی تنظیم کنید. برای این کار می‌تونید از واحدهای مختلف مثل پیکسل، درصد، ام و غیره استفاده کنید.
• خصوصیت height ارتفاع یک عنصر رو تنظیم می‌کنه. شما می‌تونید ارتفاع یک عنصر رو به صورت ثابت یا درصدی تنظیم کنید.

استفاده از واحدهای مختلف

شما می‌تونید از واحدهای مختلف برای تعیین height و width استفاده کنید. رایج‌ترین واحدها شامل پیکسل (px)، درصد (%)، ام (em) و ویوپورت (vw و vh) هستند.

مثال: استفاده از واحدهای مختلف

<div class="box1">px</div>
<div class="box2">%</div>
<div class="box3">em</div>
<div class="box4">vw</div>

.box1 {
    width: 100px; /* pixel */
    height: 100px;
    border: 2px solid black;
}

.box2 {
    width: 50%; /* Percent */
    height: 50%;
    border: 2px solid blue;
}

.box3 {
    width: 10em; /* Em */
    height: 10em;
    border: 2px solid green;
}

.box4 {
    width: 20vw; /* Viewport */
    height: 20vh;
    border: 2px solid red;
}

این کد نمونه‌ای از استفاده از واحدهای مختلف برای تنظیم عرض و ارتفاع است.

• px: پیکسل که واحد ثابتی است.
• %: درصد که نسبت به والد محاسبه می‌شه.
• em: که نسبت به اندازه فونت محاسبه می‌شه.
• vw و vh: که نسبت به عرض و ارتفاع ویوپورت محاسبه می‌شن.

استفاده از Max-width و Min-width

برای جلوگیری از کوچک شدن یا بزرگ شدن بیش از حد یک عنصر، می‌تونید از max-width و min-width استفاده کنید.

مثال: استفاده از Max-width و Min-width

<div class="box">This box has a width limit</div>

.box {
    width: 100%;
    max-width: 400px; /* Maximum width */
    min-width: 200px; /* Minimum width */
    border: 2px solid purple;
    padding: 10px;
}

در این مثال، عرض جعبه بین 200 تا 400 پیکسل تنظیم شده و از این محدوده بیشتر یا کمتر نخواهد شد.

استفاده از Max-height و Min-height

برای کنترل ارتفاع، می‌تونید از max-height و min-height استفاده کنید.

مثال: استفاده از Max-height و Min-height

<div class="box">This box has a height limit</div>

.box {
    height: 100%;
    max-height: 300px; /* Maximum height */
    min-height: 150px; /* Minimum height */
    border: 2px solid orange;
    padding: 10px;
}

در این مثال، ارتفاع جعبه بین 150 تا 300 پیکسل تنظیم شده و از این محدوده بیشتر یا کمتر نخواهد شد.

تنظیم خودکار ارتفاع و عرض (auto)

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

مثال: تنظیم خودکار ارتفاع و عرض

<div class="box">This box is automatically sized</div>

.box {
    width: auto;
    height: auto;
    border: 2px solid teal;
    padding: 10px;
}

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

تأثیر Padding و Border بر Width و Height

یادتون باشه که padding و border روی اندازه کلی یک عنصر تأثیر می‌ذارن. بنابراین، برای کنترل دقیق‌تر، باید این موارد رو هم در نظر بگیرید.

مثال: تأثیر Padding و Border بر اندازه

<div class="box">This box has padding and border</div>

.box {
    width: 200px;
    height: 100px;
    padding: 10px; /* Add padding */
    border: 5px solid navy; /* Add border */
    background-color: lightyellow;
}

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

Box Model در CSS

Box Model یک چارچوب است که تمام عناصر HTML را به صورت یک جعبه (یا همان باکس) در نظر می‌گیرد. فهمیدن Box Model بسیار مهم است چرا که به شما کمک می‌کند تا نحوه قرارگیری و نمایش عناصر را در صفحات وب به خوبی مدیریت کنید. این مدل شامل چهار بخش اصلی: محتوا (Content)، پدینگ (Padding)، بوردر (Border) و مارجین (Margin) می‌شود. بیایید با هم نگاهی دقیق‌تر به هر کدام از این بخش‌ها بیاندازیم و با کد و مثال‌های کاربردی آشنا شویم.

مفهوم Box Model در CSS

Box Model به شما اجازه می‌دهد تا ابعاد و حاشیه‌های یک عنصر HTML را تنظیم کنید. این مدل شامل چهار بخش اصلی است که به ترتیب از داخل به خارج شامل موارد زیر است:

1. محتوا (Content): جایی که متن و تصاویر قرار می‌گیرند.
2. پدینگ (Padding): فضای داخلی بین محتوا و حاشیه.
3. بوردر (Border): حاشیه‌ای که اطراف محتوا و پدینگ قرار دارد.
4. مارجین (Margin): فضای خارجی که بین عنصر و عناصر مجاورش قرار دارد.

تصویر کلی از Box Model:

+-----------------------------+
|         Margin              |
| +-------------------------+ |
| |       Border            | |
| | +---------------------+ | |
| | |     Padding         | | |
| | | +-----------------+ | | |
| | | |   Content       | | | |
| | | +-----------------+ | | |
| | +---------------------+ | |
| +-------------------------+ |
+-----------------------------+

محتوا (Content)

محتوا در مرکز Box Model قرار دارد. اینجا همان جایی است که متن، تصاویر و دیگر عناصر HTML قرار می‌گیرند. اندازه‌ی محتوا با استفاده از خصوصیات width و height تعیین می‌شود.

مثال: تنظیم محتوا

<div class="box">This is a box with text content</div>

.box {
    width: 200px;
    height: 100px;
    background-color: lightgray;
    border: 2px solid black;
}

در این مثال، عرض و ارتفاع جعبه محتوا به ترتیب 200 و 100 پیکسل تنظیم شده است.

پدینگ (Padding)

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

مثال: تنظیم پدینگ

<div class="box">This is a box with padding</div>

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    background-color: lightblue;
    border: 2px solid black;
}

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

بوردر (Border)

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

مثال: تنظیم بوردر

<div class="box">This is a box with a border</div>

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid red;
    background-color: lightyellow;
}

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

مارجین (Margin)

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

مثال: تنظیم مارجین

<div class="box">This is a box with a margin</div>

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid green;
    margin: 30px;
    background-color: lightpink;
}

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

استفاده از ویژگی‌های Shorthand برای Box Model

CSS ویژگی‌های shorthand را فراهم می‌کند تا تنظیمات Box Model را به صورت مختصر انجام دهید.

مثال: استفاده از ویژگی‌های Shorthand

<div class="box">This is a box with shorthand features</div>

.box {
    width: 200px;
    height: 100px;
    padding: 20px 10px; /* Padding up and down, left and right */
    border: 5px solid blue; /* Border with specific thickness and color */
    margin: 30px 15px; /* Top and bottom, left and right margins */
    background-color: lightgreen;
}

در اینجا، از ویژگی‌های shorthand برای تنظیم پدینگ و مارجین استفاده شده تا کدها ساده‌تر و خواناتر باشند.

استفاده از Box-sizing

ویژگی box-sizing تعیین می‌کند که آیا padding و border در محاسبه‌ی عرض و ارتفاع نهایی عنصر گنجانده شوند یا خیر.

مثال: استفاده از Box-sizing

<div class="box">This is a box with box-sizing</div>

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid purple;
    box-sizing: border-box; /* Including padding and border */
    background-color: lightcoral;
}

در این مثال، با استفاده از box-sizing: border-box، padding و border در محاسبه‌ی عرض و ارتفاع نهایی جعبه گنجانده می‌شوند.

کنترل کامل بر Box Model

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

مثال: کنترل کامل بر Box Model

<div class="box">This is a box with full control</div>

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid darkblue;
    margin: 30px;
    background-color: lightgoldenrodyellow;
}

در این مثال، تمامی ویژگی‌های Box Model به طور همزمان اعمال شده‌اند تا کنترل کاملی بر ابعاد و فاصله‌های داخلی و خارجی جعبه داشته باشیم.

خصوصیت Outline در CSS

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

مفهوم Outline

خصوصیت outline در CSS شبیه به border عمل می‌کند، اما با یک تفاوت اصلی: outline همیشه خارج از جعبه‌ی عنصر قرار می‌گیرد و هیچ فضایی را اشغال نمی‌کند. این ویژگی معمولاً برای جلب توجه به یک عنصر خاص یا نشان دادن فوکوس روی یک عنصر استفاده می‌شود.

مثال ساده:

<button class="outline-example">click!</button>

.outline-example {
    padding: 10px 20px;
    outline: 2px solid red; /* Simple outline */
}

در این مثال، دکمه دارای یک خط بیرونی قرمز با ضخامت 2 پیکسل است.

تفاوت بین Border و Outline

همانطور که گفتیم، تفاوت اصلی بین border و outline در این است که border فضای اطراف محتوا را اشغال می‌کند، در حالی که outline اینگونه نیست.

مثال تفاوت Border و Outline:

<div class="border-example">with Border</div>
<div class="outline-example">with Outline</div>

.border-example {
    padding: 10px;
    border: 2px solid blue; /* Border */
}

.outline-example {
    padding: 10px;
    outline: 2px solid green; /* Outline */
}

در اینجا، دو جعبه داریم که یکی با border و دیگری با outline تنظیم شده است. با نگاه به این مثال می‌توانید ببینید که border فضای بیشتری اشغال می‌کند.

نحوه استفاده از Outline

خصوصیت outline شامل چندین زیرخصوصیت است که می‌توانید به صورت جداگانه یا به صورت shorthand از آنها استفاده کنید. این زیرخصوصیت‌ها شامل موارد زیر هستند:

• outline-width: عرض خط بیرونی.
• outline-style: سبک خط بیرونی.
• outline-color: رنگ خط بیرونی.
• outline-offset: فاصله خط بیرونی از عنصر.

مثال استفاده از Outline با زیرخصوصیت‌ها:

<button class="outline-complete">click!</button>

.outline-complete {
    padding: 10px 20px;
    outline-width: 3px;
    outline-style: dashed;
    outline-color: orange;
}

در این مثال، دکمه دارای خط بیرونی نارنجی با سبک dashed و عرض 3 پیکسل است.

Outline Shorthand

می‌توانید از ویژگی shorthand برای تنظیم outline به صورت مختصر استفاده کنید.

مثال استفاده از Outline Shorthand:

<button class="outline-shorthand">click!</button>

.outline-shorthand {
    padding: 10px 20px;
    outline: 2px dotted purple; /* Outline shorthand */
}

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

Outline Offset

خصوصیت outline-offset فاصله خط بیرونی از لبه‌ی عنصر را تنظیم می‌کند.

مثال استفاده از Outline Offset:

<button class="outline-offset">click!</button>

.outline-offset {
    padding: 10px 20px;
    outline: 2px solid blue;
    outline-offset: 5px; /* 5 pixel spacing */
}

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

استفاده از Outline برای نمایش فوکوس

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

مثال نمایش فوکوس با Outline:

<input type="text" class="input-focus" placeholder="Enter your name">

.input-focus:focus {
    outline: 2px solid green; /* Show focus with green line */
}

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

خصوصیت‌ Text

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

رنگ متن (color)

خصوصیت color برای تغییر رنگ متن استفاده می‌شود. شما می‌توانید رنگ متن را با استفاده از نام رنگ‌ها، کدهای هگزادسیمال، RGB و HSL تنظیم کنید.

مثال: تنظیم رنگ متن

<p class="text-color">This is a color text.</p>

.text-color {
    color: blue; /* Use the color name */
}

در این مثال، رنگ متن به آبی تغییر کرده است.

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

خصوصیت text-align برای ترازبندی متن استفاده می‌شود. می‌توانید متن را به چپ (left)، راست (right)، وسط (center) و یا توجیه (justify) ترازبندی کنید.

مثال: ترازبندی متن

<p class="text-align">This text is aligned in the middle.</p>

.text-align {
    text-align: center; /* center alignment */
}

در این مثال، متن در وسط ترازبندی شده است.

Text-align-last

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

مثال: استفاده از Text-align-last

<div class="text-align-last-example">
    <p>
         This text is used to demonstrate the use of the text-align-last property in CSS. This property determines how the last line of a paragraph should be aligned.
    </p>
</div>

.text-align-last-example p {
    text-align: justify;
    text-align-last: center; /* Align the last line to the center */
}

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

Unicode-bidi

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

مثال: استفاده از Unicode-bidi

<p class="unicode-bidi-example">
    Persian text is mixed with English text.
</p>

.unicode-bidi-example {
    direction: rtl;
    unicode-bidi: bidi-override;
}

در این مثال، جهت نمایش متن فارسی با متن انگلیسی به درستی تنظیم شده است.

دکوراسیون متن (text-decoration)

خصوصیت text-decoration برای افزودن جلوه‌هایی مانند خط زیر (underline)، خط رو (overline)، خط میانی (line-through) و یا حذف این جلوه‌ها (none) استفاده می‌شود.

مثال: دکوراسیون متن

<p class="text-decoration">This text is underlined.</p>

.text-decoration {
    text-decoration: underline; /* Add the following line */
}

در این مثال، به متن خط زیر اضافه شده است.

Text-decoration-color

این خصوصیت رنگ دکوراسیون متن مثل خط زیر، خط رو و خط میانی را تعیین می‌کند.

مثال: استفاده از Text-decoration-color

<p class="text-decoration-color-example">
    This text has a colored underline.
</p>

.text-decoration-color-example {
    text-decoration: underline;
    text-decoration-color: red; /* This text has a colored underline. */
}

در این مثال، متن دارای خط زیر قرمز است.

Text-decoration-style

این خصوصیت سبک دکوراسیون متن را مشخص می‌کند. می‌تواند solid, double, dotted, dashed یا wavy باشد.

مثال: استفاده از Text-decoration-style

<p class="text-decoration-style-example">
    This text is underlined.
</p>

.text-decoration-style-example {
    text-decoration: underline;
    text-decoration-style: wavy; /* The underline style is wavy */
}

در این مثال، متن دارای خط زیر موجی است.

Text-decoration-line

این خصوصیت تعیین می‌کند که کدام خط دکوراسیون متن اعمال شود: underline, overline, line-through.

مثال: استفاده از Text-decoration-line

<p class="text-decoration-line-example">
    This text has an underline and an overline.
</p>

.text-decoration-line-example {
    text-decoration-line: underline overline; /* underline and overline */
}

در این مثال، متن دارای خط زیر و خط رو است.

Text-decoration-thickness

این خصوصیت ضخامت دکوراسیون متن را تعیین می‌کند.

مثال: استفاده از Text-decoration-thickness

<p class="text-decoration-thickness-example">
    This text is underlined.
</p>

.text-decoration-thickness-example {
    text-decoration: underline;
    text-decoration-thickness: 4px; /* Line thickness 4 pixels */
}

در این مثال، متن دارای خط زیر با ضخامت 4 پیکسل است.

تغییر حروف (text-transform)

خصوصیت text-transform برای تغییر حروف متن استفاده می‌شود. می‌توانید متن را به حروف بزرگ (uppercase)، حروف کوچک (lowercase) و یا حروف اولیه بزرگ (capitalize) تبدیل کنید.

مثال: تغییر حروف متن

<p class="text-transform">This text is in capital letters.</p>

.text-transform {
    text-transform: uppercase; /* Convert to uppercase letters */
}

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

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

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

مثال: فاصله بین خطوط متن

<p class="line-height">This text is more spaced between lines.</p>

.line-height {
    line-height: 1.5; /* 1.5 times the distance between the lines */
}

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

جهت متن (direction)

خصوصیت direction برای تنظیم جهت متن استفاده می‌شود. می‌توانید جهت متن را به چپ به راست (ltr) یا راست به چپ (rtl) تنظیم کنید.

مثال: جهت متن

<p class="text-direction">This text is right-to-left.</p>

.text-direction {
    direction: rtl; /* Right to left direction */
}

در این مثال، جهت متن به راست به چپ تنظیم شده است.

Text-indent

این خصوصیت فرورفتگی خط اول یک پاراگراف را تعیین می‌کند.

مثال: استفاده از Text-indent

<p class="text-indent-example">
    This text has an indentation in the first line. The indentation of the first line can make long texts more readable and give a better effect to the text.
</p>

.text-indent-example {
    text-indent: 50px; /* First line indentation 50 pixels */
}

در این مثال، خط اول پاراگراف دارای فرورفتگی 50 پیکسل است.

Text-shadow

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

مثال: استفاده از Text-shadow

<p class="text-shadow-example">
    This text is shaded.
</p>

.text-shadow-example {
    text-shadow: 2px 2px 5px gray; /* Shadow with 2px offset and 5px radius */
}

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

Letter-spacing

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

مثال: استفاده از Letter-spacing

<p class="letter-spacing-example">
    This text has more space between letters.
</p>

.letter-spacing-example {
    letter-spacing: 2px; /* Spacing between letters is 2 pixels */
}

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

Word-spacing

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

مثال: استفاده از Word-spacing

<p class="word-spacing-example">
    This text has more space between words.
</p>

.word-spacing-example {
    word-spacing: 10px; /* Spacing between words is 10 pixels */
}

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

White-space

این خصوصیت نحوه نمایش فاصله‌های خالی در متن را تعیین می‌کند. مقادیر متداول شامل normal, nowrap, pre, pre-wrap و pre-line هستند.

مثال: استفاده از White-space

<p class="white-space-example">
    This     text     is     extra      spaced.
</p>

.white-space-example {
    white-space: pre; /* Keep all extra spaces */
}

در این مثال، تمام فاصله‌های اضافی در متن حفظ شده است.

خصوصیت Font 

فونت‌ها نقش بسیار مهمی در زیبایی و خوانایی وب‌سایت‌ها دارند. با استفاده از CSS، می‌توانیم ظاهر متن‌ها را به شکلی دلخواه تغییر دهیم و تجربه کاربری بهتری ایجاد کنیم. در این قسمت، به بررسی خصوصیت‌های font-family, font-style, font-size, font-variant, font-weight, و استفاده از فونت‌های گوگل می‌پردازیم. همچنین با مثال‌های کدنویسی، نحوه استفاده از این خصوصیت‌ها را نشان خواهیم داد.

Font-family

خصوصیت font-family مشخص می‌کند که از چه فونتی برای نمایش متن استفاده شود. می‌توانید چندین فونت به عنوان گزینه‌های جایگزین تعیین کنید.

مثال: استفاده از Font-family

<p class="font-family-example">
    This text is displayed in different fonts.
</p>

.font-family-example {
    font-family: "Arial", "Helvetica", sans-serif; /* Choose alternative fonts */
}

در این مثال، اگر فونت "Arial" در سیستم کاربر موجود نباشد، فونت "Helvetica" و اگر آن هم موجود نباشد، فونت پیش‌فرض sans-serif استفاده می‌شود.

Font-style

خصوصیت font-style سبک فونت را مشخص می‌کند. مقادیر معمول شامل normal, italic, و oblique هستند.

مثال: استفاده از Font-style

<p class="font-style-example">
    This text is displayed in italics.
</p>

.font-style-example {
    font-style: italic; /* Text in italics */
}

در این مثال، متن داخل p به صورت ایتالیک نمایش داده می‌شود.

Font-size

خصوصیت font-size اندازه فونت را تعیین می‌کند. می‌توانید از واحدهای مختلفی مانند px, em, rem, %, و غیره استفاده کنید.

مثال: استفاده از Font-size

<p class="font-size-example">
    This text is displayed with a different font size.
</p>

.font-size-example {
    font-size: 20px; /* Font size 20 pixels */
}

در این مثال، اندازه فونت متن داخل p برابر با 20 پیکسل است.

Font-variant

خصوصیت font-variant برای ایجاد حالت‌های خاصی از متن مانند small-caps استفاده می‌شود.

مثال: استفاده از Font-variant

<p class="font-variant-example">
    This text is displayed in small-caps.
</p>

.font-variant-example {
    font-variant: small-caps; /* Text in small-caps */
}

در این مثال، متن داخل p به صورت حروف کوچک با حروف بزرگ (small-caps) نمایش داده می‌شود.

Font-weight

خصوصیت font-weight ضخامت فونت را تعیین می‌کند. مقادیر معمول شامل normal, bold, bolder, lighter, و اعداد 100 تا 900 هستند.

مثال: استفاده از Font-weight

<p class="font-weight-example">
    This text is displayed with bold font weight.
</p>

.font-weight-example {
    font-weight: bold; /* Text with bold font weight */
}

در این مثال، وزن فونت متن داخل p به صورت بولد تنظیم شده است.

استفاده از فونت‌های گوگل

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

مثال: استفاده از فونت‌های گوگل

ابتدا لینک فونت را در بخش <head> سند HTML اضافه کنید:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using Google Fonts</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
    <style>
        .google-font-example {
            font-family: 'Roboto', sans-serif; /* Using Google Fonts */
        }
    </style>
</head>
<body>
    <p class="google-font-example">
        This text is displayed using the "Roboto" font from Google Fonts.
    </p>
</body>
</html>

در این مثال، فونت "Roboto" از فونت‌های گوگل در وب‌سایت استفاده شده است. با اضافه کردن لینک به head و تنظیم font-family در CSS، می‌توانیم از این فونت بهره ببریم.

خصوصیت icon

برای اضافه کردن آیکون‌ها به صفحات وب، می‌توان از روش‌های مختلفی استفاده کرد. یکی از محبوب‌ترین روش‌ها، استفاده از فونت آیکون‌ها مانند Font Awesome است. این روش به شما امکان می‌دهد تا با استفاده از CSS، آیکون‌های مختلف را به عناصر HTML خود اضافه کنید و استایل دهید.

استفاده از Font Awesome

افزودن Font Awesome به پروژه

ابتدا باید کتابخانه Font Awesome را به پروژه خود اضافه کنید. این کار را می‌توانید با اضافه کردن لینک زیر به بخش <head> سند HTML خود انجام دهید:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Use icons</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .icon-example {
            font-size: 24px;
            color: #007bff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <i class="fas fa-home icon-example"></i>
    <i class="fas fa-envelope icon-example"></i>
    <i class="fas fa-phone icon-example"></i>
</body>
</html>

در این مثال، با افزودن لینک به Font Awesome، می‌توانید از کلاس‌های fas fa-home, fas fa-envelope, و fas fa-phone برای نمایش آیکون‌های مختلف استفاده کنید.

استفاده از آیکون‌های SVG

روش دیگر برای استفاده از آیکون‌ها، استفاده از فایل‌های SVG است. SVGها به دلیل مقیاس‌پذیری و کیفیت بالا بسیار محبوب هستند.

مثال: استفاده از آیکون‌های SVG

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Use SVG icons</title>
    <style>
        .icon-svg {
            width: 24px;
            height: 24px;
            fill: #007bff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <svg class="icon-svg" viewBox="0 0 24 24">
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
    </svg>
    <svg class="icon-svg" viewBox="0 0 24 24">
        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
    </svg>
    <svg class="icon-svg" viewBox="0 0 24 24">
        <path d="M21 8V7l-3 2-2-2V7l-2 1-2-2V4h8v3z"/>
    </svg>
</body>
</html>

در این مثال، از آیکون‌های SVG با استفاده از تگ <svg> و استایل‌دهی با CSS برای تنظیم رنگ و اندازه استفاده شده است.

استفاده از تصاویر آیکون

یکی دیگر از روش‌های ساده برای اضافه کردن آیکون‌ها به وب‌سایت استفاده از تصاویر آیکون است.

مثال: استفاده از تصاویر آیکون

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Use icon images</title>
    <style>
        .icon-img {
            width: 24px;
            height: 24px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <img src="icon-home.png" alt="Home" class="icon-img">
    <img src="icon-email.png" alt="Email" class="icon-img">
    <img src="icon-phone.png" alt="Phone" class="icon-img">
</body>
</html>

در این مثال، از تگ <img> برای اضافه کردن تصاویر آیکون استفاده شده و با CSS، اندازه تصاویر تنظیم شده است.

خصوصیت لینک

لینک‌ها در حالت‌های مختلفی ظاهر می‌شوند: حالت عادی (normal), حالت وقتی که موس روی لینک قرار می‌گیرد (hover), حالت وقتی لینک کلیک شده (visited), و حالت وقتی که لینک فعال است (active). برای هر یک از این حالت‌ها می‌توان استایل‌های مختلفی تعریف کرد.

استایل‌دهی به لینک عادی (normal)

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

مثال: استایل‌دهی به لینک عادی

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styling links</title>
    <style>
        a {
            color: blue;
            text-decoration: none; /* Remove the line below the link */
        }
    </style>
</head>
<body>
    <a href="#">This is a link</a>
</body>
</html>

در این مثال، لینک‌ها با رنگ آبی و بدون خط زیر آن‌ها نمایش داده می‌شوند.

استایل‌دهی به لینک‌ها در حالت hover

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

مثال: استایل‌دهی به لینک در حالت hover

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styling links</title>
    <style>
        a {
            color: blue;
            text-decoration: none;
        }
        a:hover {
            color: red;
            text-decoration: underline; /* Add a line below the link */
        }
    </style>
</head>
<body>
    <a href="#">This is a link</a>
</body>
</html>

در این مثال، وقتی موس روی لینک قرار می‌گیرد، رنگ آن به قرمز تغییر می‌کند و خط زیر لینک اضافه می‌شود.

استایل‌دهی به لینک‌ها در حالت visited

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

مثال: استایل‌دهی به لینک در حالت visited

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styling links</title>
    <style>
        a {
            color: blue;
            text-decoration: none;
        }
        a:hover {
            color: red;
            text-decoration: underline;
        }
        a:visited {
            color: purple; /* Link color after visit */
        }
    </style>
</head>
<body>
    <a href="#">This is a link</a>
</body>
</html>

در این مثال، بعد از کلیک کردن و بازدید لینک، رنگ آن به بنفش تغییر می‌کند.

استایل‌دهی به لینک‌ها در حالت active

لینک‌ها در حالت کلیک (active) نیز می‌توانند استایل‌دهی شوند. این حالت زمانی رخ می‌دهد که کاربر لینک را کلیک کرده و هنوز موس را رها نکرده است.

مثال: استایل‌دهی به لینک در حالت active

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styling links</title>
    <style>
        a {
            color: blue;
            text-decoration: none;
        }
        a:hover {
            color: red;
            text-decoration: underline;
        }
        a:visited {
            color: purple;
        }
        a:active {
            color: green; /* Link color in active mode */
        }
    </style>
</head>
<body>
    <a href="#">This is a link</a>
</body>
</html>

در این مثال، وقتی لینک در حالت active قرار می‌گیرد، رنگ آن به سبز تغییر می‌کند.

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

گاهی اوقات می‌خواهید یک آیکون را در کنار لینک قرار دهید تا به کاربران کمک کنید که راحت‌تر متوجه منظور لینک شوند.

مثال: اضافه کردن آیکون به لینک

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link with icon</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        a {
            color: blue;
            text-decoration: none;
        }
        a:hover {
            color: red;
            text-decoration: underline;
        }
        a:visited {
            color: purple;
        }
        a:active {
            color: green;
        }
        .icon-link {
            display: inline-flex;
            align-items: center;
        }
        .icon-link i {
            margin-left: 8px; /* The distance between the icon and the text */
        }
    </style>
</head>
<body>
    <a href="#" class="icon-link"><i class="fas fa-external-link-alt"></i>This is a link with an icon</a>
</body>
</html>

در این مثال، یک آیکون به لینک اضافه شده و با استفاده از کلاس‌های Font Awesome، آیکون به صورت مناسب نمایش داده می‌شود.

لیست‌ها در CSS

در HTML دو نوع لیست اصلی داریم:

1. لیست‌های نامرتب (Unordered Lists)
2. لیست‌های مرتب (Ordered Lists)

لیست‌های نامرتب (Unordered Lists)

لیست‌های نامرتب به وسیله تگ <ul> تعریف می‌شوند و آیتم‌های آن با تگ <li> مشخص می‌شوند. پیش‌فرض این نوع لیست‌ها با نقطه (bullet) نمایش داده می‌شوند.

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

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unordered lists</title>
    <style>
        ul {
            list-style-type: disc; /* The type of list points */
        }
        ul.custom-bullet li {
            list-style-type: square; /* Change the point type to square */
        }
    </style>
</head>
<body>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>

    <ul class="custom-bullet">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</body>
</html>

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

لیست‌های مرتب (Ordered Lists)

لیست‌های مرتب به وسیله تگ <ol> تعریف می‌شوند و آیتم‌های آن با تگ <li> مشخص می‌شوند. پیش‌فرض این نوع لیست‌ها با اعداد نمایش داده می‌شوند.

مثال: لیست مرتب ساده

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ordered Lists</title>
    <style>
        ol {
            list-style-type: decimal; /* Default numbering type */
        }
        ol.custom-roman {
            list-style-type: upper-roman; /* Changing the type of numbering to Roman numerals */
        }
    </style>
</head>
<body>
    <ol>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>

    <ol class="custom-roman">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>
</body>
</html>

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

استایل‌دهی به لیست‌ها با CSS

با استفاده از CSS می‌توانیم استایل‌های مختلفی به لیست‌ها و آیتم‌های آن‌ها بدهیم، مانند تغییر نوع نقطه‌ها، فاصله‌ها، و ظاهر کلی.

تغییر نوع نقطه‌ها (List Style Type)

می‌توانیم نوع نقطه‌ها یا شماره‌های لیست را با استفاده از خصوصیت list-style-type تغییر دهیم.

مثال: تغییر نوع نقطه‌ها

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change the type of points</title>
    <style>
        ul.circle {
            list-style-type: circle; /* Change the point type to circle */
        }
        ol.lower-alpha {
            list-style-type: lower-alpha; /* Changing the type of numbering to English lowercase letters */
        }
    </style>
</head>
<body>
    <ul class="circle">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>

    <ol class="lower-alpha">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>
</body>
</html>

در این مثال، نوع نقطه‌ها در لیست نامرتب به دایره و نوع شماره‌گذاری در لیست مرتب به حروف کوچک انگلیسی تغییر داده شده است.

تغییر فاصله‌ها (Padding and Margin)

می‌توانیم فاصله‌های داخلی و خارجی لیست‌ها و آیتم‌های آن‌ها را با استفاده از خصوصیت‌های padding و margin تغییر دهیم.

مثال: تغییر فاصله‌ها

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Changing distances</title>
    <style>
        ul {
            padding: 20px; /* The internal spacing of the list */
            margin: 20px; /* outer space of the list */
        }
        li {
            margin-bottom: 10px; /* Spacing between items */
        }
    </style>
</head>
<body>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</body>
</html>

در این مثال، فاصله‌های داخلی و خارجی لیست و فاصله بین آیتم‌ها تنظیم شده است.

تغییر ظاهر لیست‌ها (Custom List Style)

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

مثال: تغییر ظاهر لیست با استفاده از آیکون

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List with custom icon</title>
    <style>
        ul.custom-icon {
            list-style-type: none; /* Delete points */
            padding: 0;
        }
        ul.custom-icon li {
            background: url('icon.png') no-repeat left center;
            padding-left: 30px; /* The distance between the icon and the text */
            margin-bottom: 10px; /* Spacing between items */
        }
    </style>
</head>
<body>
    <ul class="custom-icon">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</body>
</html>

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

استایل‌دهی به جداول با CSS

اضافه کردن حاشیه به جداول

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

مثال: اضافه کردن حاشیه به جدول

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin to tables</title>
    <style>
        table {
            border-collapse: collapse; /* Merge margins */
            width: 100%;
        }
        th, td {
            border: 1px solid black; /* Border for cells */
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2; /* Background color for headers */
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>column 1</th>
                <th>column 2</th>
                <th>column 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1، column 1</td>
                <td>Row 1، column 2</td>
                <td>Row 1، column 3</td>
            </tr>
            <tr>
                <td>Row 2، column 1</td>
                <td>Row 2، column 2</td>
                <td>Row 2، column 3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

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

استایل‌دهی به خطوط جدول (Zebra Stripes)

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

مثال: استفاده از خطوط متناوب رنگی

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored alternating lines</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9; /* Background color for even rows */
        }
        tr:nth-child(odd) {
            background-color: #ffffff; /* Background color for odd rows */
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>column 1</th>
                <th>column 2</th>
                <th>column 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1، column 1</td>
                <td>Row 1، column 2</td>
                <td>Row 1، column 3</td>
            </tr>
            <tr>
                <td>Row 2، column 1</td>
                <td>Row 2، column 2</td>
                <td>Row 2، column 3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

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

استایل‌دهی به متن داخل جداول

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

مثال: استایل‌دهی به متن داخل سلول‌ها

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styling text inside cells</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center; /* Center the text */
            font-family: Arial, sans-serif; /* Change font */
            color: #333; /* Change text color */
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold; /* Bolding the text of the headers */
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>column 1</th>
                <th>column 2</th>
                <th>column 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1، column 1</td>
                <td>Row 1، column 2</td>
                <td>Row 1، column 3</td>
            </tr>
            <tr>
                <td>Row 2، column 1</td>
                <td>Row 2، column 2</td>
                <td>Row 2، column 3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

در این مثال، متن داخل سلول‌ها مرکزچین شده، فونت آن‌ها به Arial تغییر داده شده، و رنگ متن به خاکستری تیره تغییر کرده است.

استایل‌دهی به جدول کامل

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

مثال: استایل‌دهی کامل به جدول

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled table</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
            font-family: Arial, sans-serif;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>column 1</th>
                <th>column 2</th>
                <th>column 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1، column 1</td>
                <td>Row 1، column 2</td>
                <td>Row 1، column 3</td>
            </tr>
            <tr>
                <td>Row 2، column 1</td>
                <td>Row 2، column 2</td>
                <td>Row 2، column 3</td>
            </tr>
            <tr>
                <td>Row 3، column 1</td>
                <td>Row 3، column 2</td>
                <td>Row 3، column 3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

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

خب دوستان، تا اینجای کار با هم کلی مباحث جالب و کاربردی درباره‌ی CSS رو یاد گرفتیم. در این بخش دوم آموزش، یاد گرفتیم که چطور از خصوصیت‌های مختلف مثل padding، height، width و outline استفاده کنیم تا عناصر وب‌سایتمون رو به شکل بهتری نمایش بدیم. همچنین با مفهوم box model آشنا شدیم که یکی از مهم‌ترین مفاهیم در طراحی وب هست و درک درستش خیلی به ما کمک می‌کنه.

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