فروردین, ۱۳۹۸ بدون نظر CSS, طراحی سایت

مبحث text در CSS

در جلسه اول property در css ،جلسه قبل بک گراند  را مورد بررسی قرار دادیم در این جلسه ادامه properties را مورد برسی قرار میدهیم.

text یا همان متون شامل تنظیمات متن،ارتفاع متن، موقعیت متن و… می باشد.

text-align :

بااین خاصیت موقعیت متن تگ را در صفحه مشخص می نماییم.

  • right : با استفاده از این مقدار متن به طرف راست انتقال پیدا می کند.
  • left : با استفاده از این مقدار متن به طرف چپ انتقال پیدا می کند.
  • center : با استفاده از این مقدار متن در وسط صفحه قرار میگیرد.

 

قاعده دستوری خاصیت بالا به شکل زیر است
text-align : right;
text-align : center ;
text-align : left ;

text-decoration :

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

  • blink :این مقدار موجب می شود متن به صورت چشمک زن در بیاید.
  • line-though : با این مقدار خطی بالای متن ایجاد میگردد.
  • none : این مقدار پیش فرض متن میباشدکه برای متن هیچ افکتی را تعریف نمیکند.
  • overline : این مقدار خطی بالای متن تگ ایجاد میکند.
  • underline : این مقدار برای متن زیر خطی ایجاد می کند.
text-indent :

با این خاصیت میزان تو رفتگی اولین خط یک متن را مشخص می کند.

text-transform :

نحوه نمایش حروف (بزرگ و کوچک) را کنترل می کند.

این خاصیت شامل موارد زیر است:

  • capitalize : تمام حروف اول کلمات متن را به حروف بزرگ تبدیل می کند.
  • lowercase : تمام حروف متن به حروف کوچک تبدیل میگردد.
  • uppercase : تمام حروف متن را به حروف بزرگ تبدیل میکند.
text-shadow :

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

  #h1{
  text-shadow:5px*5px*5px#ff0000;
  }

 

vertical-align :

با این خاصیت می توانید میزان عمودی محتویات داخل تگ ها یا میزان عمودی خانه های جدول را مشخص کنید که دارای مقادیر زیر است.

  • baseline : این مقدار عبارت از خط فرضی می باشد که حروف بر روی ان نوشته می شود.
  • bottom :این مقدار عناصرتان را در قسمت پایین قرار می دهد.
  • sub : این مقدار تگ فرزند را کمی پایین تر از امتداد متن تگ پدر قرار می دهد.
  • super : این مقدار تگ فرزند را کمی بالاتر از امتداد متن تگ پدر قرار می دهد.
  • text-bottom : این مقدار متون تگ پدر را در امتداد زیرین تگ فرزند قرار میدهد.
  • text-top : این مقدار متونه تگ پدر را در امتداد بالای تگ فرزند قرار می دهد.
  • top : این مقدار عناصرتان را در قسمت بالا قرار می دهد.
witch-space :

با این خاصیت می توانید تعیین کنید وقتی متنی را در باکسی می نویسید و ان باکس از اندازه خطوط متن کوچکتر باشد،متن به صورت اتوماتیک قطع شود یا متن ادامه داشته باشد.

خاصیت witch-space دارای مقادیر زیر است :

  • nowarp : با این مقدار متن در باکس نمی شکند و ادامه پیدا میکند.
  • pre : در صورت استفاده از این مقدار مرورگر تشخیص می دهد که آیا در کد HTML از دستورات line-break استفاده کردید یا خیر در صورت استفاده از همان دستورات به منظور قطع نمودن خط استفاده می کند.
  • pre-line : با استفاده از این مقدار در صورتی که از line-break استفاده نمودهاید آن اعمال می شود.
  • pre-wrap : این مقدار همانند مقدار قبلی است اما فقط با این فرق در صورتی که متن شما از اندازه باکس بزرگتر شود در آن صورت متن به صورت اتوماتیک خط قطع می گردد.

قاعده دستوری این خاصیت به شکل زیر است:

  p {
  with-space :nowrap |pre-line| pre-wrap;
  }

 

 

برچسب ها

ارسال نظر شما

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