جلسه‌ی پنجاه و چهارم: خصوصیت‌ letter-spacing در CSS

css, آموزش طراحی سایت ابوالفضل کلهری بدون نظر 4 آوریل 2019 137 بازدید
خصوصیت letter-spacing در CSS

در جلسه‌ی پیش در مورد خصوصیت White-space در CSS توضیح دادیم و گفتیم که از این خصوصیت برای ایجاد کنترل گر بر روی نحوه‌ی نوشتار ما استفاده می‌شود. در این جلسه می‌خواهیم به توضیح خصوصیت‌ letter-spacing در CSS بپردازیم. (برای دیدن آموزش CSS به زبان ساده کلیک کنید)

خصوصیت letter-spacing در CSS

به وسیله‌ی خصوصیت letter-spacing می‌توانیم فاصله‌ی بین حروف در کلمات را کنترل کنیم. این خصوصیت به طور کلی دارای دو حالت می‌باشد که عبارتند از:

  1. Normal
  2. height

حالت Normal

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

حالت Height

در این حالت ما می‌توانیم مقدار فاصله‌ی مورد نظر خود را در مقابل خصوصیت Letter-spacing در CSS بنویسیم. یادتان باشد که این خصوصیت فقط زبان خارجی نیست که در آن کلمات از یکدیگر جدا هستند و در زبان فارسی نیز می‌توان از آن استفاده نمود. به نمونه کد زیر توجه کنید:

کد HTML:

<div class="box">
 <p>
   فاصله ی بین این حروف ۱۰px می باشد.
 </p>
</div>

کد CSS:

body {
    background-color: #fff;
}

.box {
  width: 600px;
  height: 300px;
  font-size: 30px;
  color: #000;
  border: 3px solid #888;
  border-radius: 15px;
  margin: 0px auto;
  padding: 10px;
  background-color:#a3d29c;
  }
.box {
  letter-spacing: 10px;
}
.box:hover {
  letter-spacing: normal;
  transition: 1s
}

خروجی کد بالا:

خصوصیت letter-spacing در CSS

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

خصوصیت letter-spacing در CSS

نکته: این خصوصیت در تمامی مرورگرهای اصلی پشتیبانی می‌شود.

خلاصه مطلب:

  1. به وسیله‌ی خصوصیت letter-spacing می‌توانیم فاصله‌ی بین حروف در کلمات را کنترل کنیم.
  2. در حالت Normal اتفاق خاصی نمی‌افتد و تمامی کلمات در حالت نرمال قرار می‌گیرند.
  3. در این حالت ما می‌توانیم مقدار فاصله‌ی مورد نظر خود را در مقابل خصوصیت Letter-spacing در CSS بنویسیم.

احساس خود را درباره این مقاله بگویید 0 نظر

جلسه‌ی پنجاه و چهارم: خصوصیت‌ letter-spacing در CSS
0 0
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

مقالات پیشنهادی
دیدگاه شما در رابطه با این مقاله چیست!؟

ارسال دیدگاه

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

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