جلسه 6 آموزش CSS: کار با متن ها (Texts) در CSS

سلام رفقا! 👋 توی این جلسه از آموزش CSS، قراره بریم سراغ کار با متن‌ها و کلی چیز خفن یاد بگیریم! 😍
متن‌ها یکی از مهم‌ترین بخش‌های هر سایت هستن، چون محتوا رو به کاربر نشون میدن. اگه درست استایل داده بشن، هم قشنگ‌تر دیده میشن و هم خوانایی‌شون بهتر میشه. پس بریم که ببینیم چطور می‌تونیم با CSS به متن‌ها استایل بدیم! 🙃

در ادامه با مجموعه‌ای از ویژگی‌های قدرتمند CSS آشنا می‌شیم که به ما امکان می‌دن به راحتی به متن‌های سایت، استایل‌های جذاب و حرفه‌ای بدیم:

• font-family: انتخاب فونت متن
• font-size: تنظیم اندازه فونت متن
• font-weight: تنظیم ضخامت (پررنگی) متن
• font-style: تعیین سبک متن (مانند ایتالیک)
• color: تعیین رنگ متن
• text-align: تنظیم تراز بندی متن
• text-decoration: افزودن خط زیر یا دیگر دکوراسیون‌ها به متن
• text-transform: تغییر قالب و حروف متن (مانند تبدیل به حروف بزرگ)
• letter-spacing: تنظیم فاصله بین حروف
• line-height: تنظیم فاصله بین خطوط متن
• direction: تنظیم جهت نمایش متن
• word-spacing: تنظیم فاصله بین کلمات
• text-shadow: افزودن سایه به متن
• text-indent: تنظیم میزان تورفتگی خط اول متن
• white-space: جلوگیری از شکستن خط و انتقال به سطر بعدی

آموزش کار با ویژگی font-family در CSS (انتخاب فونت متن)

ویژگی font-family در CSS برای تعیین نوع فونت متن استفاده می‌شه. این ویژگی بهت اجازه می‌ده که فونت‌های مختلفی رو برای متن‌های سایتت انتخاب کنی تا ظاهری جذاب‌تر و خواناتر داشته باشن.

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

🖋️ نحوه استفاده از font-family

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در این مثال مشخص کردیم که فونت متن داخل <p> از نوع Arial باشه و اگه این فونت در دسترس نبود، یک فونت جایگزین از دسته sans-serif استفاده بشه.
• نام فونت رو بین دو علامت ” ” قرار بده.

🖋️ مثال کاربردی برای تعیین فونت اصلی و جایگزین

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• بعضی فونت‌ها روی همه سیستم‌ها نصب نیستن، بنابراین همیشه بهتره یک یا چند فونت جایگزین مشخص کنیم. در کد بالا، ابتدا فونت “Iran Sans” تعیین شده، اما اگه به هر دلیلی لود نشه یا روی دستگاه کاربر موجود نباشه، مرورگر به ترتیب از Tahoma و در نهایت از یک فونت sans-serif استفاده می‌کنه تا متن همچنان خوانا و مرتب نمایش داده بشه.

آموزش کار با ویژگی font-size در CSS (تنظیم اندازه متن)

ویژگی font-size در CSS برای تعیین اندازه فونت متن استفاده می‌شه. با این ویژگی می‌تونی متن‌های سایتت رو کوچیک‌تر یا بزرگ‌تر کنی تا خوانایی و طراحی بهتری داشته باشن.

🖋️ نحوه استفاده از font-size

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• این کد باعث می‌شه که اندازه فونت تمام متن‌های داخل <p> برابر ۱۸ پیکسل باشه.

👇 روش‌های مختلف تعیین اندازه فونت

font-size رو می‌تونی با واحدهای مختلفی نظیر (px, em, rem) مشخص کنی:

1️⃣ استفاده از پیکسل (px) – اندازه ثابت

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• مقدار px (پیکسل) یک اندازه ثابت به متن می‌ده، یعنی روی همه دستگاه‌ها دقیقا همون سایز نمایش داده می‌شه.

2️⃣ استفاده از em – اندازه وابسته به والد

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• مقدار 1.5em یعنی ۱.۵ برابر اندازه فونت المنت والد. اگه اندازه فونت body برابر ۱۶ پیکسل باشه، متن داخل <p> برابر با ۲۴ پیکسل (۱۶ × ۱.۵) می‌شه.

3️⃣ استفاده از rem – اندازه وابسته به ریشه (root)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• مقدار 2rem یعنی ۲ برابر اندازه فونت ریشه (html). اگه html روی ۱۶px تنظیم شده باشه، اندازه h2 برابر ۳۲px می‌شه. (rem مقیاس‌پذیرتر از em هست!)

⚡ نکات مهم درباره font-size

✅ برای طراحی واکنش‌گرا (Responsive) بهتره از rem یا em به جای px استفاده کنی.
✅ px برای اندازه‌های دقیق و ثابت مناسبه، اما مقیاس‌پذیری نداره.
✅ rem همیشه از html تبعیت می‌کنه، پس قابل کنترل‌تره.
✅ em به والد خودش وابسته‌ست و ممکنه باعث تغییرات غیرمنتظره بشه.

آموزش کار با ویژگی font-weight در CSS (تنظیم ضخامت متن)

ویژگی font-weight در CSS برای تنظیم ضخامت یا وزن فونت استفاده می‌شه. با این ویژگی می‌تونی متن‌ها رو نازک تر و ضخیم تر کنی تا تأثیرگذاری و جذابیت بیشتری داشته باشن.

🖋️ نحوه استفاده از font-weight

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در این کد، متن داخل تگ <p> به صورت پررنگ (bold) نمایش داده می‌شه.

👇 روش‌های مختلف تنظیم ضخامت متن

1️⃣ استفاده از کلمات کلیدی

• normal: ضخامت معمولی (معمولاً برابر با ۴۰۰)
• bold: ضخامت پررنگ (معمولاً برابر با ۷۰۰)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

2️⃣ استفاده از اعداد (100 تا 900)

بیشتر فونت‌ها از مقادیر عددی برای تنظیم ضخامت استفاده می‌کنن، جایی که عدد ۴۰۰ معادل normal و ۷۰۰ معادل bold است. می‌تونی مقدار عددی رو به دلخواه تنظیم کنی.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در اینجا 600 یک ضخامت متوسط است و 400 ضخامت معمولی فونت رو مشخص می‌کنه.

⚡ نکات مهم درباره font-weight

✅ مقدار font-weight می‌تونه به صورت عددی (از ۱۰۰ تا ۹۰۰) یا کلمه‌ای (مثل normal, bold) تنظیم بشه.
✅ برای متن‌ها یا عناوین مهم، استفاده از font-weight: bold می‌تونه باعث بشه که توجه کاربر بیشتر جلب بشه و اهمیت اون بخش بیشتر نمایان بشه.

آموزش کار با ویژگی font-style در CSS (تعیین سبک متن)

ویژگی font-style در CSS برای تنظیم سبک متن به کار می‌ره. با استفاده از این ویژگی می‌تونی متن‌ها رو به حالت ایتالیک دربیاری و در بعضی موارد، از سبک‌های خاص استفاده کنی. این ویژگی بیشتر برای تأکید بر روی بخش‌هایی از متن یا برای طراحی ظاهری متفاوت استفاده می‌شه.

🖋️ نحوه استفاده از font-style

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در این کد، متن داخل تگ <p> به حالت ایتالیک نمایش داده می‌شه.

آموزش کار با ویژگی color در CSS (تعیین رنگ متن)

مشخصه color در CSS برای تعیین رنگ متن استفاده می‌شه. با این ویژگی می‌تونی رنگ دلخواهی برای متن‌ها انتخاب کنی و طراحی سایتت رو جذاب‌تر و متناسب با برند یا سلیقه خودت بسازی. 🌈

🖋️ نحوه استفاده از color

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در این مثال، تمام متن‌های داخل تگ <p> با رنگ آبی نمایش داده می‌شن.

👇 روش‌های مختلف تعیین رنگ متن

1️⃣ استفاده از نام رنگ‌ها

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در اینجا متن داخل تگ <h1> به رنگ قرمز نمایش داده می‌شه. CSS از نام‌های رنگی معروف (مثل red, blue, green, yellow و …) پشتیبانی می‌کنه.

2️⃣ استفاده از کد هگز (Hex)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از کد هگز (مثل #ff6347)، می‌تونی دقیقاً رنگ مورد نظر رو انتخاب کنی. این کدها بیشتر برای رنگ‌های خاص و دقیق استفاده می‌شن.

3️⃣ استفاده از RGB

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در اینجا از RGB برای تعیین رنگ استفاده شده که سه مقدار قرمز, سبز, و آبی رو ترکیب می‌کنه تا رنگ دلخواه ساخته بشه.

⚡ نکات مهم درباره color

✅ اگر از رنگ‌های hex استفاده کنی، می‌تونی رنگ‌های خیلی خاص و دقیق رو بسازی.
✅ برای انتخاب رنگ‌ها، می‌تونی از ابزارهای آنلاین مثل Adobe Color یا Colorzilla استفاده کنی.

آموزش کار با ویژگی text-align در CSS (ترازبندی متن)

ویژگی text-align در CSS برای تراز کردن متن درون یک عنصر استفاده می‌شه. این ویژگی بهت کمک می‌کنه که متن‌ها رو به صورت تراز چپ، راست و وسط نمایش بدی✨

🖋️ نحوه استفاده از text-align

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در این کد، متن داخل تگ <p> به مرکز (center) صفحه تراز می‌شه.

👇 حالت های مختلف ترازبندی متن

1️⃣ تراز چپ (left)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از left، متن به سمت چپ تراز میشه. این گزینه معمولاً پیش‌فرض بیشتر زبان‌های نوشتاری از جمله فارسی و انگلیسیه.

2️⃣ تراز راست (right)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از right، متن به سمت راست تراز می‌شه. این گزینه بیشتر برای زبان‌هایی مثل عربی یا فارسی کاربرد داره.

3️⃣ تراز وسط (center)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با center، متن در مرکز عنصر قرار می‌گیره. این روش برای عنوان‌ها و بخش‌های برجسته خیلی مفیده.

4️⃣ متن رو میکشه تا بتونه تمام فضای باکس رو پُر کنه (justify)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• justify باعث می‌شه که متن در تمام عرض عنصر گسترش پیدا کنه تا تمام فضای باکس رو پوشش بده. این روش بیشتر برای پاراگراف‌ها و متن‌های طولانی استفاده می‌شه.

⚡ نکات مهم درباره text-align

✅ text-align فقط روی متن‌های داخل یک عنصر تأثیر داره. برای مثال، اگه روی یک <div> اعمال بشه، فقط متن‌های داخل <div> تغییر می‌کنن.
✅ برای تراز کردن متن‌ها در داخل المان‌هایی مثل جدول‌ها یا فرم‌ها، از text-align استفاده کن.
✅ برای تراز عمودی (بالا، وسط، پایین)، از ویژگی‌های دیگه مثل vertical-align یا Flexbox استفاده کن.

آموزش کار با ویژگی text-decoration در CSS (تزئین متن و زیرخط دار کردن)

ویژگی text-decoration در CSS برای دکوراسیون دادن به متن (تزئین متن) و زیرخط دار کردن اون استفاده می‌شه. با این ویژگی می‌تونی ظاهر متن رو تغییر بدی و جلوه‌های خاصی بهش بدی مثل خط کشیدن زیر متن یا حتی تغییر رنگ خط زیر.

🖋️ نحوه استفاده از text-decoration

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در این کد، متن داخل تگ <p> با خط زیر یا آندرلاین (underline) نمایش داده می‌شه.

👇 حالت‌های مختلف text-decoration

1️⃣ زیرخط دار کردن (underline)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با underline می‌تونی متن رو زیرخط دار کنی. این معمولاً برای تأکید روی بخش‌های خاصی از متن به کار می‌ره.

2️⃣ خط خورده (line-through)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• line-through باعث می‌شه که متن خط خورده باشه. این معمولاً برای نشون دادن تغییرات یا حذف‌های انجام شده به کار می‌ره.

3️⃣ بی‌خط کردن (none)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از none، می‌تونی خط‌های اضافی مثل زیرخط لینک‌ها رو حذف کنی. این گزینه زمانی به کار میاد که نمی‌خواهی متن خط‌دار نشون داده بشه.

4️⃣ خط بالای متن (overline)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از overline، خطی در بالای متن ایجاد می‌شه که معمولاً برای تأکید یا نشان دادن بخش‌های خاصی از متن استفاده می‌شه.

5️⃣ تغییر رنگ خط (color)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از text-decoration-color می‌تونی رنگ خط زیر متن رو تغییر بدی. در این مثال، رنگ خط به قرمز تغییر می‌کنه.

6️⃣ استفاده از text-decoration-style

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• می‌تونی نوع خط زیر متن رو هم تغییر بدی. از گزینه‌هایی مثل solid (خط صاف)، dotted (خط نقطه‌ای) و dashed (خط شکسته) استفاده کن.

⚡ نکات مهم درباره text-decoration

✅ text-decoration به‌طور پیش‌فرض روی لینک‌ها اعمال می‌شه و بیشتر برای زیرخط دار کردن لینک‌ها استفاده میشه.
✅ با استفاده از text-decoration می‌تونی جلوه‌های مختلفی مثل خط‌زدن و زیرخط‌دار کردن رو به متن‌ها اضافه کنی.
✅ text-decoration-color و text-decoration-style برای داشتن کنترل دقیق‌تر روی ظاهر خط‌های زیر متن به کار می‌رن.

آموزش کار با ویژگی text-transform در CSS (تبدیل حروف متن)

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

🖋️ نحوه استفاده از text-transform

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در این کد، تمام متن داخل تگ <p> به حروف بزرگ تبدیل می‌شه.

👇 حالت‌های مختلف text-transform

1️⃣ تبدیل به حروف بزرگ (uppercase)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از uppercase، تمام حروف متن به حروف بزرگ تبدیل می‌شن. این گزینه معمولاً برای عناوین یا بخش‌های مهم استفاده می‌شه.

2️⃣ تبدیل به حروف کوچک (lowercase)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با lowercase، تمام حروف متن به حروف کوچک تغییر می‌کنن. این حالت برای زمانی که بخوای متن رو به طور یکنواخت و کوچک نشون بدی، به کار میاد.

3️⃣ حالت (capitalize)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از capitalize، فقط اولین حرف هر کلمه به حروف بزرگ تبدیل می‌شه. این ویژگی معمولاً برای عناوین یا نام‌ها استفاده می‌شه.

⚡ نکات مهم درباره text-transform

✅ text-transform به طور مستقیم فقط روی حروف تأثیر می‌ذاره و می‌تونه ظاهر متن رو تغییر بده.
✅ این ویژگی با حالت‌های فونت یا اندازه فونت تداخل نداره، بلکه فقط شکل حروف رو تغییر می‌ده.
✅ از text-transform می‌تونی برای یکسان کردن یا زیبا کردن متن‌ها در سایت استفاده کنی، مخصوصاً در عناوین و لیست‌ها.

آموزش کار با ویژگی letter-spacing در CSS (تنظیم فاصله بین حروف)

ویژگی letter-spacing در CSS برای تنظیم فاصله بین حروف استفاده می‌شه. با این ویژگی می‌تونی فاصله بین حروف متن رو بیشتر یا کمتر کنی.

🖋️ نحوه استفاده از letter-spacing

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در این مثال، فاصله بین حروف متن داخل تگ <p> به ۲ پیکسل افزایش پیدا می‌کنه.

👇 روش‌های مختلف استفاده از letter-spacing

1️⃣ افزایش فاصله بین حروف

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از 5px، فاصله بین حروف متن داخل تگ <h1> به ۵ پیکسل افزایش می‌یابد. این حالت برای زمانی که بخوای متن رو خواناتر یا طراحی خاص‌تری داشته باشه مفیده.

2️⃣ کاهش فاصله بین حروف

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از مقدار منفی -1px، فاصله بین حروف متن داخل تگ <p> کاهش می‌یابد. این گزینه زمانی که بخوای متن فشرده‌تر به نظر برسه کاربرد داره.

⚡ نکات مهم درباره letter-spacing

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

آموزش کار با ویژگی line-height در CSS (تنظیم فاصله بین سطرها)

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

🖋️ نحوه استفاده از line-height

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در این مثال، فاصله بین خطوط متن داخل تگ <p> به 1.5 برابر ارتفاع فونت تنظیم می‌شه. این مقدار فاصله معمولاً برای خوانایی بهتر مناسبه.

👇 روش‌های مختلف استفاده از line-height

1️⃣ تنظیم فاصله خط به نسبت ارتفاع فونت

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از 1.8، فاصله بین خطوط متن بیشتر میشه. این کار کمک می‌کنه تا متن‌ها بهتر خونده بشن و شلوغ نباشن.

2️⃣ تنظیم فاصله با پیکسل

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از 24px، فاصله بین خطوط متن به طور ثابت به 10 پیکسل تنظیم میشه. این کار زمانی مفیده که بخواهی فاصله دقیقی بین سطرها داشته باشی.

3️⃣ تنظیم فاصله به طور خودکار

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

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

⚡ نکات مهم درباره line-height

✅ استفاده از line-height به خوانایی متن کمک می‌کنه، به خصوص برای پاراگراف‌های طولانی و متن‌های کوچک.
✅ فاصله بیشتر بین خطوط باعث می‌شه که متن راحت‌تر خونده بشه و چشمای کاربر اذیت نشه.
✅ بهتره از مقادیر نسبی مثل 1.5 یا normal استفاده کنی تا فاصله بین سطرها نسبت به اندازه فونت تغییر کنه، مگر اینکه نیاز به فاصله دقیق داشته باشی.

آموزش کار با ویژگی direction در CSS (تنظیم جهت نمایش متن)

ویژگی direction در CSS برای تنظیم جهت نمایش متن استفاده می‌شه. این ویژگی بهت کمک می‌کنه که تعیین کنی متن از راست به چپ نمایش داده بشه یا از چپ به راست. این ویژگی مخصوصاً برای زبان‌هایی که جهت نوشتار متفاوتی دارن (مثل زبان فارسی یا عربی) مفیده.

🖋️ نحوه استفاده از direction

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در این مثال، جهت نمایش متن داخل تگ <p> به راست به چپ (rtl) تغییر می‌کنه، که برای زبان‌هایی مثل فارسی و عربی کاربرد داره.

👇 حالت‌های مختلف direction

1️⃣ راست به چپ (rtl)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از rtl (right-to-left)، متن از سمت راست به چپ نمایش داده می‌شه. این گزینه برای زبان‌هایی مثل فارسی، عربی که جهت نوشتار از راست به چپ هست، استفاده می‌شه.

2️⃣ چپ به راست (ltr)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از ltr (left-to-right)، متن از سمت چپ به راست نمایش داده می‌شه. این گزینه برای زبان‌هایی مثل انگلیسی که جهت نوشتار از چپ به راست هست، به کار میره.

⚡ نکات مهم درباره direction

✅ direction به طور خاص برای زبان‌های راست به چپ (مثل فارسی و عربی) یا چپ به راست (مثل انگلیسی) تنظیم میشه.
✅ این ویژگی می‌تونه روی سایر المان‌ها مثل لیست‌ها، جعبه‌ها یا حتی لینک‌ها تأثیر بذاره.
✅ تنظیم درست جهت نمایش متن برای تجربه کاربری بهتر در زبان‌های مختلف بسیار مهمه.

آموزش کار با ویژگی word-spacing در CSS (تنظیم فاصله بین کلمات)

مشخصه word-spacing در CSS برای تنظیم فاصله بین کلمات استفاده می‌شه. این ویژگی بهت کمک می‌کنه که فاصله بین کلمات متن رو بیشتر یا کمتر کنی. این کار باعث می‌شه متن‌ها به شکل بهتری نمایش داده بشن و خوانایی بالاتری داشته باشن.

🖋️ نحوه استفاده از word-spacing

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در این مثال، فاصله بین کلمات داخل تگ <p> به ۱۰ پیکسل افزایش پیدا می‌کنه. این گزینه به متن کمک می‌کنه که خواناتر و واضح‌تر بشه.

👇 روش‌های مختلف استفاده از word-spacing

1️⃣ افزایش فاصله بین کلمات

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از 15px، فاصله بین کلمات در داخل تگ <h1> افزایش می‌یابد. این حالت به خوانایی بهتر متن کمک می‌کنه و زمانی که بخوای کلمات از هم جدا و واضح دیده بشن مفیده.

2️⃣ کاهش فاصله بین کلمات

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از مقدار منفی -5px، فاصله بین کلمات کاهش می‌یابد. این گزینه زمانی مفیده که بخوای متن فشرده‌تر باشه یا در طراحی خاصی نیاز به فاصله کمتر داشته باشی.

⚡ نکات مهم درباره word-spacing

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

آموزش کار با ویژگی text-shadow در CSS (افزودن سایه به متن)

ویژگی text-shadow در CSS برای افزودن سایه به متن استفاده می‌شه. این ویژگی بهت کمک می‌کنه تا جلوه‌ای جذاب و سه‌بعدی به متن بدی و اون رو از پس‌زمینه جدا کنی. می‌تونی سایه‌ها رو با رنگ، اندازه و جهت دلخواه تنظیم کنی تا متن‌ها جذاب‌تر و برجسته‌تر بشن. ✨

🖋️ نحوه استفاده از text-shadow

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در این مثال، سایه‌ای با فاصله ۲ پیکسل از افقی، ۲ پیکسل از عمودی و ۵ پیکسل تاری به متن داخل تگ <h1> افزوده میشه. رنگ سایه هم سیاه با شفافیت ۳۰ درصده.

آموزش کار با ویژگی text-indent در CSS (تنظیم میزان تورفتگی اولین خط پاراگراف)

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

🖋️ نحوه استفاده از text-indent

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• در این مثال، اولین خط متن داخل تگ <p> به اندازه ۳۰ پیکسل به سمت راست تورفتگی پیدا می‌کنه.

👇 روش‌های مختلف استفاده از text-indent

1️⃣ افزایش تورفتگی

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از 40px، اولین خط پاراگراف ۴۰ پیکسل به داخل میره و یه فاصله مشخص در ابتدای پاراگراف ایجاد میشه.

2️⃣ استفاده از مقدار منفی برای تورفتگی معکوس

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• با استفاده از -20px، اولین خط پاراگراف به بیرون حرکت می‌کنه. این حالت برای ایجاد طراحی خاص یا برای مواقعی که می‌خوای پاراگراف به بیرون از مرز خود کشیده بشه استفاده می‌شه.

3️⃣ تعیین میزان تورفتگی با درصد

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• اینجا با استفاده از 5%، اولین خط از پاراگراف به اندازه ۵ درصد از عرض کادر خودش به داخل میره. این روش بیشتر در طراحی‌های واکنشگرا کاربرد داره.

⚡ نکات مهم درباره text-indent

✅ این ویژگی بیشتر برای پاراگراف‌ها یا متن‌های طولانی استفاده می‌شه تا شکل ظاهری بهتری به متن بدی.
✅ تورفتگی منفی می‌تونه باعث بشه که اولین خط از پاراگراف بیرون از مرز قرار بگیره، که در طراحی‌های خاص کاربرد داره.
✅ از text-indent می‌تونی برای ساختاردهی به متن‌ها و نمایش آن‌ها به صورت مرتب و سازماندهی شده استفاده کنی.

آموزش کار با ویژگی white-space در CSS (جلوگیری از شکستن خط و رفتن به سطر بعدی)

ویژگی white-space در CSS بهت این امکان رو می‌ده که نحوه‌ی نمایش فضای خالی (مثل فاصله‌ها، تب‌ها یا خط‌های جدید) در متن رو کنترل کنی. این ویژگی برای جلوگیری از شکستن خطوط یا حفظ فواصل مهمه. برای مثال، می‌تونی ازش برای جلوگیری از شکستن خودکار خط‌ها استفاده کنی.

👇 نحوه استفاده از white-space

1️⃣ normal (حالت پیش‌فرض)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

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

2️⃣ nowrap (جلوگیری از شکستن خط)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

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

🎯 سخن پایانی

دیدی چقدر راحت می‌تونیم با CSS به متن‌ها استایل بدیم؟ 😎 مرسی که تا پایان این جلسه از آموزش CSS با من همراه بودی و منو با نگاه قشنگت همراهی کردی کدهایی که تو آموزش قرار میدم رو همیشه خودت تست کن و تمرین فراموش نشه!

در ضمن سوالی داشتی بپرس تا راهنمایی ات کنم! 😉💬