جلسه‌ی پنجاه و هشتم: خصوصیت Text-indent در CSS

خصوصیت Text-indent در CSS

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

خصوصیت Text-indent در CSS

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

حالات خصوصیت Text-indent در CSS

شاید برایتان جالب باشد که بدانید این خصوصیت دارای حالت خاصی نمی‌باشد و در صورتی که بخواهیم نوشته‌ی خود را به حالت نرمال برگردانیم باید این خصوصیت را پاک کنیم یا مقدار آن را بر روی ۰px قرار دهیم. به مثال زیر توجه کنید:

کد HTML:

<div class="box">
  <p>
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. 
  </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;
  text-align: right;
  }
.box p {
  text-indent: 0px;
}

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

خصوصیت Text-indent در CSS

همانطور که می‌بینید در کد بالا ما مقدار خصوصیت Text-indent در CSS برابر ۰px قرار داده شده است. حال ما می‌توانیم برای عنصر خود یک فرآیند Hover در نظر بگیریم و آن را در مدت ۱ ثانیه به انجام برسانیم. در این صورت متن ما می‌تواند انیمیشن زیبایی داشته باشد. به نمونه کد زیر توجه کنید.

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;
  text-align: right;
  }
.box p {
  text-indent: 0px;

}
.box:hover p {
  text-indent: 80px;
  transition: 1s
}

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

خصوصیت Text-indent در CSS

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

خلاصه مطلب:

  1. به وسیله‌ی خصوصیت Text-indent شما می‌توانید برای خط اول در یک بند فاصله‌ی بیشتری نسبت به بقیه از دیواره کناری ایجاد کنید.
  2. این خصوصیت دارای حالت خاصی نمی‌باشد و در صورتی که بخواهیم نوشته‌ی خود را به حالت نرمال برگردانیم باید این خصوصیت را پاک کنیم یا مقدار آن را بر روی ۰px قرار دهیم.
  3. از ترکیب خصوصیت Text-indent با خصوصیت هاور می توانبم انیمیشن های زیبایی تولید کنیم
ابوالفضل کلهری

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

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها