جلسه‌ی پنجاه و هفتم: خصوصیت Line-Height در CSS

css, آموزش طراحی سایت ابوالفضل کلهری بدون نظر 11 آوریل 2019 469 بازدید
خصوصیت Line-Height در CSS

در جلسه‌ی پیش در مورد خصوصیت Caret-Color صحبت کرده‌ایم. (برای دیدن آموزش خصوصیت Caret-Color در CSS کلیک کنید) در این جلسه می‌خواهیم درباره‌ی خصوصیت Line-Height در CSS و نحوه‌ی استفاده از آن صحبت کنیم. (برای دیدن آموزش CSS به زبان ساده کلیک کنید)

خصوصیت Line-Height در CSS

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

حالات خصوصیت Line-Height در CSS

به طور کلی این خصوصیت دارای دو حالت کلی می‌باشد که ااین حالات عبارتند از:

  • Normal
  • height

حالت Normal

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

حالت Height

در حالت Height ما می توانیم مقدار عددی یا درصد ارتفاع مورد نظر خود را به خصوصیت Line-Height بیافزاییم. برای فهم بیشتر این مطلب به مثال زیر توجه کنید:

کد HTML:

<div class="box">
  <p>
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. 
  </p>
</div>

کد CSS:

.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;
  text-align: center;
  }

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

خصوصیت Line-Height در CSS

در مثال بالا فونت نوشته شده در کادر مورد نظر ۳۰px می‌باشد. فاصله‌ی بین خطوط در این فونت به طور نرمال ۳۳px است. حال ما این فاصله را بیشتر کرده و به ۶۰px افزایش می‌دهیم. خروجی ما به شکل پایین می‌باشد. به نمونه کد زیر توجه کنید:

کد CSS:

.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;
  text-align: center;
  }
.box p {
  line-height: 60px
}

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

خصوصیت Line-Height در CSS

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

خلاصه مطلب:

  1. از خصوصیت Line-Height برای ایجاد ارتفاع بین خط‌های نوشته‌ی ما استفاده می‌شود.
  2. به وسیله‌ی حالت نرمال شما می‌توانید تمام تغییرات ایجاد شده را به حالت اولیه بازگردانید. البته لازم به ذکر است که در تمامی مرورگرها به طور پیشفرض مقداری فاصله‌ی طولی برای هر خط در نظر گرفته شده است.
  3. در حالت Height ما می توانیم مقدار عددی یا درصد ارتفاع مورد نظر خود را به خصوصیت Line-Height اضافه کنیم.

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

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

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

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

ارسال دیدگاه

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

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