خانه / آموزش CSS / بخش دوازدهم- آموزش CSS Text یا آموزش متن در CSS
پشتیبان وب سایت وردپرس
آموزش CSS Text"

تاریخ بروزرسانی: ۲۲ بهمن ۱۳۹۷ تعداد بازدید : 18 بازدید بدون دیدگاه

بخش دوازدهم- آموزش CSS Text یا آموزش متن در CSS

قدم قبلی >< قدم بعدی

 

آموزش CSS Text یا آموزش متن در CSS
آموزش متن در CSS

CSS Text

در این درس به بررسی خصوصیات متن در CSS می پردازم. این خصوصیات عبارتند از:

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

Text Color(رنگ متن)

خصوصیت رنگ برای تنظیم رنگ متن در CSS استفاده می شود. رنگ توسط:

  • color name(نام رنگ) – مانند: “قرمز”
  • HEX value(یک مقدار HEX)  مانند: “# ff0000”
  • RGB value (یک مقدار RGB)   مانند:  “rgb (255،۰،۰)”

رنگ متن پیش فرض برای یک صفحه در انتخاب بدن تعریف شده است.

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

 تنظیم رنگ متن در CSS

 

توجه: برای CSS سازگار با W3C: اگر ویژگی رنگ را تعریف کنید، باید رنگ پس زمینه را نیز تعریف کنید.

Text Alignment(تراز متن)

خصوصیت text-align برای تنظیم تراز افقی یک متن در CSS استفاده می شود. متن را می توان left aligned (چپ تراز) یا right aligned(راست تراز)،centered(متمرکز)یا justified کرد.

مثال زیر  متن های راست تراز و چپ تراز و متمرکز را نشان می دهد(اگر جهت متن از چپ به راست باشد به طور پیش فرض تراز left aligned می شود، و اگر جهت متن راست به چپ باشد به طور پیش فرض تراز متن right aligned می شود:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

تنظیم تراز افقی یک متن در CSS

 

 

هنگامی که مشخصه text-align روی “justify” تنظیم شده باشد، هر حرف کشیده می شود به طوری که هر خط برابر با عرض و حاشیه چپ و راست (مانند مجلات و روزنامه ها) باشد:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

تنظیم تراز افقی یک متن در CSS-justify

 

Text Decoration(دکوراسیون متن)

خصوصیت دکوراسیون متن برای تنظیم یا حذف دکوراسیون از متن در CSS استفاده می شود.

مقدار دکوراسیون برابر هیچ یعنی: text-decoration: none؛ اغلب برای حذف زیر خطوط (underlines) از لینک استفاده می شود:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

تنظیم یا حذف دکوراسیون از متن در CSS

 

مقادیر دیگر دکوراسیون متن برای تزئین متن استفاده می شود:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

 

تنظیم یا حذف دکوراسیون از متن در CSS 2

 

نکته: توصیه نمی شود که زیر متنی که لینک نیست خط (underlines) قرار دهید، زیرا اغلب خواننده را گیج می کند.

Text Transformation(تبدیل متن)

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

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

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

حروف بزرگ و کوچک در یک متن در CSS

 

Text Indentation(تنظیم تو رفتگی متن)

خصوصیت text-indent متن برای مشخص کردن فرورفتگی خط اول متن در CSS استفاده می شود:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

تو رفتگی در متن

 

Letter Spacing(فاصله بین حروف)

خصوصیت letter-spacing برای تعیین فضای بین کاراکترهای یک متن در CSS استفاده می شود.

مثال زیر نشان می دهد که چگونه فضای بین کاراکترها را افزایش یا کاهش دهد:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

تعیین فضای بین کاراکترها

 

 

Line Height(ارتفاع خط

خصوصیت Line Height یا خط ارتفاع برای تعیین فضای بین خطوط متن در CSS استفاده می شود:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

فضای بین خطوط متن در CSS

 

Text Direction(جهت متن

خصوصیت direction برای تغییر جهت یک عنصر متن در CSS استفاده می شود.

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

تغییر جهت یک عنصر متن در CSS

 

Word Spacing(فاصله کلمات

خصوصیت فاصلهکلمات برای تعیین فضای بین کلمات در یک متن در CSS استفاده می شود.

مثال زیر نشان می دهد که چگونه فضای بین کلمات را افزایش یا کاهش دهید:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

فضای بین کلمات در یک متن در CSS

 

Text Shadow(سایه متن)

خصوصیت Text Shadow سایه را به متن در CSS می افزاید.

مثال زیر موقعیت سایه افقی (۳ پیکسل)، موقعیت سایه عمودی (۲ پیکسل) و رنگ سایه (قرمز) را مشخص می کند:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

سایه را به متن در CSS می افزاید

 

 

 

گام قبلی >< گام بعدی
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=15356


کانال تلگرام تیک تم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *