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

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

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

خاصیت text-transform

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

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

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

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

مقدار uppercase

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

کد CSS

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

نتیجه:

مقدار lowercase

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

کد CSS

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

نتیجه:

مقدار capitalize

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

کد CSS

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

نتیجه:

خاصیت text-indent

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

کد CSS:

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

نتیجه:

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

خاصیت line-height

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

کد CSS:

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

نتیجه:

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

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

خاصیت word-spacing

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

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

کد CSS:

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

نتیجه:

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

خاصیت letter spacing

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

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

کد CSS:

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

خاصیت 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: مشخص نمودن جهت شروع محتوا

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

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