مشاوره رایگان

دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان

جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

جلسه هشتم آموزش CSS:بررسی کامل استایل دهی متن ها

در این قسمت ما به شما آموزش می دهیم که چطور با استفاده از CSS متون را استایل دهی کنید. شما می توانید ویژگی های زیر را برای تگ های HTML به کار ببرید:

ویژگی color برای تنظیم رنگ متن
ویژگی direction برای تعیین جهت متن
ویژگی letter-spacing برای تعیین تنظیم فاصله بین حروف
ویژگی word-spacing برای تنظیم فاصله بین کلمات
ویژگی text-indent برای تنظیم تورفتگی سطر اول پاراگراف ها
ویژگی text-align برای تراز بندی متون
ویژگی text-decoration برای کشیدن خط روی، زیر یا بالای نوشته
ویژگی text-transform برای تنظیم نحوه نوشتن حروف کلمات با حروف کوچک یا بزرگ
ویژگی white-space برای اداره کردن فضاهای خالی متن
ویژگی text-shadow برای ایجاد سایه اطراف متن.

1. تنظیم رنگ متن

مثالی که در ادامه می آید به شما نشان می دهد که چگونه رنگ متن را تنظیم کنید:

<html>
   <head>
   </head>
   <body>
      <p style="color:red;">
      This text will be written in red.
      </p>
   </body>
</html>

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

2. تنظیم جهت متن

مثال زیر نحوه تنظیم جهت متن در css را به شما نشان می دهد:
مقادیر ممکن برای ویژگی direction عبارتند از ltr و rtl .

<html>
   <head>
   </head>
   <body>
      <p style="direction:rtl;">
      This text will be renedered from right to left
      </p>
   </body>
</html>

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

3. تنظیم فاصله بین حروف

در مثال زیر نحوه تنظیم فاصله بین حروف را به شما آموزش می دهیم. مقادیر ویژگی letter-spacing عبارتند از: normal و فاصله عددی که شما وارد می کنید.

<html>
   <head>
   </head>
   <body>
      <p style="letter-spacing:5px;">
      This text is having space between letters.
      </p>
   </body>
</html>

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

4. تنظیم فاصله بین کلمات

در مثال بعد نشان می دهیم که چگونه فاصله بین کلمات را تنظیم کنید. مقادیر برای ویژگی word-spacing می تواند normal یا یک مقدار عددی باشد.

<html>
   <head>
   </head>
   <body>
      <p style="word-spacing:5px;">
      This text is having space between words.
      </p>
   </body>
</html>

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

5. تنظیم تورفتگی متن

در مثال پایین شما می آموزید که تورفتگی متن سطر اول یک پاراگراف را چگونه تنظیم می کنند. مقادیر ممکن برای ویژگی 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>

نتیجه کدهای بالا را مشاهده کنید:

6. تنظیم ترازبندی متون

مثال بعد به شما نشان می دهد که چگونه متن را ترازبندی کنید. مقادیر ممکن برای ویژگی text-align عبارتند از: left ، right ، center و justify .

<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>

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

7. دکوربندی متن

مثالی که در ادامه داده شده به شما یاد می دهد که چطور یک متن را دکوربندی کنید. مقادیر ممکن برای ویژگی text-decoration عبارتند از : none ، underline ، overline ، line-through و blink .

<html>
   <head>
   </head>
   <body>
      <p style="text-decoration:underline;">
      This will be underlined
      </p>      
      <p style="text-decoration:line-through;">
      This will be striked through.
      </p>      
      <p style="text-decoration:overline;">
      This will have a over line.
      </p>      
      <p style="text-decoration:blink;">
      This text will have blinking effect
      </p>
   </body>
</html>

نتیجه کدهای بالا در ادامه قابل مشاهده است:

8. تنظیم نوشتن کلمات با حروف بزرگ یا کوچک

در مثال زیر نحوه استفاده از ویژگی text-transform را مشاهده می کنید. مقادیر موجود برای این ویژگی عبارتند از none ، capitalize ، uppercase و lowercase .

<html>
   <head>
   </head>
   <body>
      <p style="text-transform:capitalize;">
      This will be capitalized
      </p>
      
      <p style="text-transform:uppercase;">
      This will be in uppercase
      </p>
      
      <p style="text-transform:lowercase;">
      This will be in lowercase
      </p>
      </body>
</html>

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

9. تنظیم فضای خالی بین متون

مثال بعد به شما نشان می دهد که چگونه با استفاده از ویژگی white-space فضای خالی بین نوشته ها را در یک تگ مدیریت کنید. مقادیر ممکن برای این ویژگی عبارتند از: normal ، pre و nowrap .

html>
   <head>
   </head>
   <body>
      <p style="white-space:pre;">
      This text has a line break and the white-space pre setting tells the browser to honor 
      it just like the HTML pre tag.</p> 
   </body>
</html>

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

10. تنظیم سایه متون

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

<html>
   <head>
   </head>
   <body>
      <p style="text-shadow:4px 4px 8px blue;">
      If your browser supports the CSS text-shadow property, this text will have a blue shadow.
      </p>
   </body>
</html>

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

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

جلسه هشتم آموزش CSS:بررسی کامل استایل دهی متن ها

1. تنظیم رنگ متن

2. تنظیم جهت متن

3. تنظیم فاصله بین حروف

4. تنظیم فاصله بین کلمات

5. تنظیم تورفتگی متن

6. تنظیم ترازبندی متون

7. دکوربندی متن

8. تنظیم نوشتن کلمات با حروف بزرگ یا کوچک

9. تنظیم فضای خالی بین متون

10. تنظیم سایه متون

آیا نیاز به مدرک هم دارید؟