صفحه اصلی / Text Color(رنگ متن) / متن در CSS/بخش دوازدهم- آموزش CSS Text یا آموزش متن در CSS

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

 

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

CSS Text

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

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

Text Color(رنگ متن)

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

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

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

مثال:

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

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

 

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

Text Alignment(تراز متن)

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

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

مثال:

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

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

 

 

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

مثال:

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

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

 

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

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

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

مثال:

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

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

 

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

مثال:

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

 

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

 

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

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

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

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

مثال:

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

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

 

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

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

مثال:

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

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

 

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

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

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

مثال:

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

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

 

 

Line Height(ارتفاع خط

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

مثال:

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

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

 

Text Direction(جهت متن

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

مثال:

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

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

 

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

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

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

مثال:

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

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

 

Text Shadow(سایه متن)

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

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

مثال:

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

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

 

 

 

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

لطفا امتیاز بدهید



منبع مطلب

این مطالب را نیز ببینید!

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

CSS Layout – عرض و حداکثر عرض  استفاده از width, max-width and margin: auto همانطور …

پاسخی بگذارید

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