شنبه ۲۹ دي ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

آموزش CSS - متن

شما  می توانیددرcss ویژگی های متن را برای یک عنصر تنظیم کنید،در زیر با نحوه انجام این کار آشنا خواهید شد:

  • از ویژگی color برای تنظیم رنگ متن استفاده می شود.

مثال زیر نحوه تنظیم رنگ متن را نشان می دهد.

<html>
   <head>
   </head>

   <body>
      <p style = "color:red;">
        این متن با رنگ قرمز نوشته خواهد شد.
      </p>
   </body>
</html>
  •  از ویژگی direction برای تنظیم جهت متن استفاده می شود.

مثال زیر نحوه تنظیم جهت یک متن را نشان می دهد. مقادیر برای این صفت  ltr یا  rtl  می باشد

<html>
   <head>
   </head>

   <body>
      <p style = "direction:rtl;">
         This text will be rendered from right to left
      </p>
   </body>
</html>
  • از ویژگی letter-spacing  برای اضافه یا کم کردن فاصله بین حروف تشکیل دهنده یک کلمه استفاده می شود.

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

<html>
   <head>
   </head>

   <body>
      <p style = "letter-spacing:5px;">
         This text is having space between letters.
      </p>
   </body>
</html>
  • از ویژگی word-spacing برای اضافه یا کم کردن فاصله بین کلمات یک جمله استفاده می شود.

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

<html>
   <head>
   </head>

   <body>
      <p style = "word-spacing:5px;">
         This text is having space between words.
      </p>
   </body>
</html>
  • از ویژگی text-indent برای تورفتگی متن یک پاراگراف استفاده می شود.

مثال زیر نحوه تورفتگی خط اول پاراگراف را نشان می دهد. مقادیر ممکن % یا عددی است که فضای تورفتگی را مشخص می کند.

<html>
   <head>
   </head>

   <body>
      <p style = "text-indent:1cm;">
         This text will have first line indented by 1cm and this line will remain at 
         its actual position this is done by CSS text-indent property.
      </p>
   </body>
</html>
  • از ویژگی text-align برای تراز کردن متن یک سند استفاده می شود.

مثال زیر نحوه تراز کردن یک متن را نشان می دهد. مقادیر میتواند چپ، راست، وسط، باشند

<html>
   <head>
   </head>

   <body>
      <p style = "text-align:right;">
         This will be right aligned.
      </p>
      
      <p style = "text-align:center;">
         This will be center aligned.
      </p>
      
      <p style = "text-align:left;">
         This will be left aligned.
      </p>
   </body>
</html>
  • از ویژگی text-decoration برای استایل دهی خطوط بر متن   استفاده می شود.

مثال زیر نحوه استایل یک متن را نشان می دهد. مقادیر می توانند هیچ، زیر خط روی نوشته ، خط رو نوشته ،خط بالای نوشته ، و حالت blinking  باشند.

<html>
   <head>
   </head>

   <body>
      <p style = "text-decoration:underline;">
این زیر خط کشیده خواهد شد      </p>
      
      <p style = "text-decoration:line-through;">
این از طریق striked  خواهد شد.      </p>
      
      <p style = "text-decoration:overline;">
این یک خط بیش از حد خواهد داشت.      </p>
      
      <p style = "text-decoration:blink;">
این متن اثرblinking  خواهد داشت      </p>
   </body>
</html>
  • از ویژگی text-transform برای بزرگ کردن یا تبدیل متن به حروف بزرگ یا کوچک استفاده می شود.

مثال زیر نحوه تنظیم موارد برای یک متن را نشان می دهد.مقادیرمیتوانند هیچ، بزرگ، بزرگ، کوچک باشند.

<html>
   <head>
   </head>

   <body>
      <p style = "text-transform:capitalize;">
این با حروف بزرگ نوشته خواهد شد      </p>
      
      <p style = "text-transform:uppercase;">
این با حروف بزرگ خواهد بود      </p>
      
      <p style = "text-transform:lowercase;">
این با حروف کوچک خواهد بود      </p>
   </body>
</html>
  • از ویژگی  white-spaceبرای قالب بندی متن استفاده می شود.

مثال زیر نشان می دهد که چگونه فضای سفید درون یک عنصر مدیریت می شود. مقادیر میتوانندnormal، pre، nowrap باشند.

<html>
   <head>
   </head>

   <body>
      <p style = "white-space:pre;">
این متن دارای یک خط شکسته و پیش تنظیم فاصله سفید است      
به مرورگر می‌گوید که آن را درست مانند تگ پیشین HTML احترام کند.      </p>
   </body>
</html>
  • از ویژگی text-shadow برای تنظیم سایه متن در اطراف متن استفاده می شود.

مثال زیر نحوه تنظیم سایه دور یک متن را نشان می دهد. در نظر داشته باشیدکه ممکن هست توسط همه مرورگرها پشتیبانی نشود.

<html>
   <head>
   </head>

   <body>
      <p style = "text-shadow:4px 4px 8px blue;">
اگر مرورگر شما از ویژگی CSS text-shadow پشتیبانی می کند،    
این متن یک سایه آبی خواهد داشت.      </p>
   </body>
</html>
  فونت - درس قبلی
درس بعدی - تصاویر