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

جلسه هشتم آموزش 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> 

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

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

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

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

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

توضیحات کلی مجموعه: در این مجموعه آموزشی، با استفاده از جدیدترین تکنولوژی ها و ابزار های مایکروسافت (دات نت)، به یک پروژه جذاب مدیریت آگهی مشابه دیوار می پردازیم. این آموزش در دو بخش کلی و…
فصلِ: 4 , تعداد قسمت ها: 294 , سطح: صفر تا صد
موضوعات: آموزش CSS

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

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

  آموزش صفر تا صد CSS , CSS3         فصل ۱  توضیحات : مسیری که در این جا برای شما دوستان چندیم با دید شبکه ای و سیستمی چینده شده است . شما در این مسیر از نقطه صفر شروع می کنید و…
فصلِ: 1 , تعداد قسمت ها: 20 , سطح: متوسط

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

  Blazor فریمورک معرفی شده از سوی مایکروسافت برای ساخت صفحات SPA با استفاده از زبان سی شارپ میباشد!!!      بله درست شنیدید ساخت صفحات وب با استفاده از سی شارپ از این به بعد ممکن خواهد …
فصلِ: 2 , تعداد قسمت ها: 5 , سطح: صفر تا صد

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

اموزش کدنویسی html و css- اموزش تبدیل psd به html و css…

توضیحات کلی مجموعه: این دوره یک دوره تکمیلی برای کاربران فتوشاپ کلیک سایت می باشد که قصد دارن تا به دنیای وب نویسی وارد شوند. دوستانی که اکنون تسلط لازم به فتوشاپ را دارند میتوانند با اشنای…
فصلِ: 3 , تعداد قسمت ها: 25 , سطح: صفر تا صد

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

فصل سوم…

آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …
فصلِ: 5 , تعداد قسمت ها: 77 , سطح: متوسط

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

ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…

این مجموعه با تلفیقی از فریمورک bootstrap  و کد های html و css  ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ: 28 , تعداد قسمت ها: 253 , سطح: صفر تا صد

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

آشنایی با امکانات جدید لاراول ۷…

برخی از سرفصل های این پکیج آموزشی :   لاراول چیست و چرا ما لاراول استفاده میکنیم کامپوزر کارش چیه و نصب اون نصب لاراول آموزش نصب لاراول از طریق اینستالر آموزش نصب لاراول با استفاده ا…
فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد

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

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap  و به صورت تضمینی  و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ: 6 , تعداد قسمت ها: 41 , سطح: صفر تا صد

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

رفع اشکال و سخن پایانی…

بسم الله الرحمن الرحیم ابوالفضل قاسمی حصار دوره ویدیویی پروژه محور صفر تا صد طراحی قالب خبری وردپرس   آیا تا به حال به فکر ساخت وبسایت برای خود یا کسب و کار خود بوده اید؟ یا شاید هم برا…
فصلِ: 9 , تعداد قسمت ها: 215 , سطح: صفر تا صد

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

در اصل فصل در مورد performance صحبت خواهیم کرد :-React Performance-Lazy-Error Boundaries و سایت را بر روی هاست واقعی قرا…

با سلام خدمت کلیک سایتی های عزیز، به دوره ی صفر تا صد طراحی سایت با react js خوش آمدید. نکته:این دوره کاملا پروژه محور میباشد نکته:این دوره هیچ پیش نیازی ندارد ReactJS  چیست؟ ReactJS اس…
فصلِ: 11 , تعداد قسمت ها: 162 , سطح: صفر تا صد

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

در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…

در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ: 8 , تعداد قسمت ها: 77 , سطح: صفر تا صد

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

  پیشنهاد میکنیم دمو دوره رو حتما مشاهده کنید با سلام خدمت دوستان عزیز . ابتدا عرض کنم که این دوره برای دوستانی آماده شده که میخوان وب اپلیکیشن های مدرنی رو طراحی بکنن و وارد بازار کار ط…
فصلِ: 18 , تعداد قسمت ها: 52 , سطح: صفر تا صد

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

دوره ی حضوری react و react native (طراحی سایت و اپلیکیشن ios و android ) …
فصلِ: 2 , تعداد قسمت ها: 40 , سطح: صفر تا صد

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

در این فصل با زبان سمت سرور PHP آشنا می شویم و توابع و دستورات مهم این زبان برنامه نویسی را بررسی خواهیم کرد…

  بنام خدا     با سلام خدمت تمامی دوستان عزیز کلیک سایت. بسیار خرسندیم که با یک دوره پروژه محور دیگر در خدمت شما دوستان محترم هستیم که انشالله قرار است قدم بگذاریم به دنیای بسیار جذاب…
فصلِ: 5 , تعداد قسمت ها: 47 , سطح: صفر تا صد

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

آموزش ایجاد Child Theme برای قالب اصلی و ویرایش قالب و ترجمه و راست چین کردن قالب های خارجی…

آموزش صفر تا صد طراحی وبسایت خبری و فروشگاهی با وردپرس و ووکامرس   سرفصل های مجموعه طراحی سایت ۱. فصل اول ( طراحی UI/UX در فتوشاپ ) درباره وردپرس UI/UX چیست؟ آشنایی با سندها…
فصلِ: 5 , تعداد قسمت ها: 145 , سطح: صفر تا صد

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

ایجاد پروژه آژانس مسافرتی.....…

فصل اول: آشنایی با مبانی برنامه نویسی اندروید   آشنایی با معماری برنامه های اندرویدی ساخت شبیه ساز جهت تست پروژه اندروید آشنایی با دستور Toast و حلقه for در برنامه های اندروی…
فصلِ: 1 , تعداد قسمت ها: 2 , سطح: متوسط

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

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

  وبینار(سمینار آنلاین) آموزش تکنیک های ایمیل مارکتینگ   اگر تا انتها این متن را مطالعه کنید نظر شما در مورد ایمیل مارکتینگ 180 درجه عوض می شود!! بر هیچکس پوشیده نیست که از سال 1972 که ای…
فصلِ: 1 , تعداد قسمت ها: 15 , سطح: متوسط

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

رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…

 اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
فصلِ: 10 , تعداد قسمت ها: 38 , سطح: صفر تا صد

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

کار نیرو-کار کوپل-اصل کار مجازی و کاربرد-بازده مکانیکی-کار نیرو در جا به جایی محدود-انرژی پتانسیل-انرژی پتانسیل و حالت ت…

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

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09337316634 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به تلگرام کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید