آموزش CSSآموزش طراحی سایت

جلسه ۲۷ – تبدیلات متن

انواع تبدیل در متون CSS

در این مقاله، یک سری از ویژگی های دیگه ی مربوط به متن هارو باهم یاد می‌گیریم.

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

خاصیت text-transform

این خاصیت، وظیفه بزرگ یا کوچک کردن حروف رو برعهده داره.

مقادیر مورد قبول این خاصیت عبارتند از:

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

برای درک تفاوت این مقدار ها، به مثال های زیر توجه کنین:

مقدار uppercase

این مقدار در دستور Text Transform باعث

کد CSS

p{
   text-transform: uppercase;
   color: green;
}

نتیجه:

مقدار uppercase
مقدار uppercase

مقدار lowercase

با استفاده از این مقدار از صفت Text Transform می‌توانیم تمامی حروف را به صورت حروف کوچک نمایش دهیم.

کد CSS

p{
   text-transform: lowercase;
   color: green;
}

نتیجه:

مقدار lowercase
مقدار lowercase

مقدار capitalize

با این مقدار از ویژگی Text Transform حروف اول هر کلمه به صورت کلمه بزرگ نمایش داده می‌شود.

کد CSS

p{
text-transform: capitalize;
color: green;
}

نتیجه:

مقدار capitalize
مقدار capitalize

خاصیت text-indent

این خاصیت، به اول متن موردنظر، فاصله می‌ده. به مثال زیر توجه کنین:

کد CSS:

div{
   text-indent: 60px;
   border:1px solid black;
   width:500px;
   height:100px;
}

نتیجه:

خاصیت text-indent
خاصیت text-indent

همونطور که مشاهده می‌کنید، خط اول با یه فاصله ۶۰ پیکسلی از حاشیه های عنصر، شروع شده.

خاصیت line-height

توسط ویژگی Line Height ، می‌تونیم فاصله بین خطوط یه متن رو تنظیم کنیم. مثال زیر رو ببینید:

کد CSS:

div{
   line-height: 40px;
   border:1px solid black;
   width:500px;
   height:100px;
}

نتیجه:

خاصیت line-height
خاصیت line-height

در اینجا باید به چند نکته توجه کنیم:

  • برای یادآوری ! همونطور که می‌بینید، متن از مرز خودش بیرون زده. دلیلش چیزی نیست جز مقدار ثابت ارتفاع که هرکاریشم بکنیم تغییری نمی‌کنه. چه اندازه صفحه رو تغییر بدیم چه محتوا رو بزرگ کوچیک کنیم.
  • خاصیت line-height، نمی‌تونه مقدار منفی بپذیره.
  • معمولا مقدار پیش فرض این خاصیت ( اگه فراخونیش نکنیم ) چیزی حدوذ ۲۰ پیکسل هست. یعنی خطوط در حالت کلی ۲۰ پیکسل از هم فاصله دارن.

خاصیت word-spacing

ویژگی Word Spacing ، این توانایی رو به ما می‌ده که بین کلمات فاصله بندازیم، از هم دورشون کنیم و یا به هم نزدیکشون کنیم!

مثال زیر رو مشاهده کنید:

کد CSS:

div{
   word-spacing: 20px;
   border:1px solid black;
   width:500px;
   height:100px;
}

نتیجه:

خاصیت word-spacing
خاصیت word-spacing

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

خاصیت letter spacing

با ویژگی letter spacing یا صفت letter spacing می‌تونیم ریز تر بشیم، و فاصله ی بین حروف در کلمات محتوا رو تغییر بدیم.

مسلما مثالش رو می‌تونید خودتون تصور کنید:

کد CSS:

div{
   letter-spacing: 5px;
   border:1px solid black;
   width:500px;
   height:100px;
}
خاصیت letter spacing
خاصیت letter spacing

خاصیت direction

این خاصیت، کمی با خاصیت های دیگه فرق می‌کنه و به فاصله بین خطوط، کلمات و حروف مربوط نیست.

این خاصیت،‌جهت شروع محتوا در صفحه رو مشخص می‌کنه. بسیار خاصیت ساده و در عین حال، مهمی هست که تاثیر بسیاری در خواص و دستورات دیگه داره.

مقادیر این خاصیت عبارتند از:

  • ltr: از چپ به راست
  • rtl: از راست به چپ ( برای متون فارسی به وفور استفاده می‌شه )

یه مثال بارز در استفاده از این خاصیت، در صفحات سایت فارسی هست که از کد CSS زیر در اول تمام کدها استفاده می‌کنیم:

*{
   direction: rtl;
}

که به این معناست: “تمام محتوای درون صفحه باید از سمت راست شروع شن و به چپ ادامه پیدا کنن”

نماد ” * “، یک انتخابگر مخصوصه که می‌تونه تمامی عناصر موجود در صفحه رو انتخاب کنه. در مورد اون می‌تونین تو مقاله انتخابگر صفات * و $ میزفا بیشتر مطالعه کنین 🙂

پایان ترم

سوال:

به نظرتون، چرا از خاصیت text-transform استفاده می‌کنیم؟ مگه ما نمی‌تونیم تمامی متن های وب سایت رو، خودمون با حروف بزرگ بنویسیم؟ علت اصلی وجود داشتن این خاصیت چیه؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

تو این مقاله از آموزش css به زبان ساده ، با خاصیت های دیگه ای برای استایل دادن به محتوای نوشتاریمون آشنا شدیم.

به خاطر اینکه یکم زیاد بودن، خاصیت های این مقاله رو همراه با خاصیت هایی که در دو مقاله قبل ذکر شد، به شکل زیر لیست می‌کنیم:

  • text-decoration: قرار دادن خط در متن
  • color: تغییر رنگ متن
  • text-align: تراز دهی متن
  • line-height: فاصله خطوط متن از هم دیگه
  • word-spacing: فاصله کلمات از هم دیگه
  • letter-spacing: فاصله حروف از هم دیگه
  • text-indent: فاصله متن از نقطه شروع خود
  • text-transform: تغییرات بر بزرگی و کوچکی حروف
  • direction: مشخص نمودن جهت شروع محتوا

 

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

نوشته های مشابه

دیدگاهتان را بنویسید

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


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

همچنین ببینید

بستن
دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر