cssطراحی سایت

جلسه ۴۲: تراز بندی متن + اندازه در CSS

دستکاری بیشتر متن صفحه وب شما موارد زیر را بیان خواهیم کرد
  • تراز متن
  • اندازه متن
  • واحدهای EM و Rem
  • فاصله متن

تراز متن

به طور پیش فرض ، عناصر متن در سمت راست ظرف خود تراز می شوند. برای تغییر ترازبندی متن درون یک عنصر از ویژگیtext-align استفاده کنید. text-align چهار مقدار متفاوت دارد:
  1. center: متن را در مرکز قرار دهید
  2. left: متن را در سمت چپ ظرف آن تراز کنید
  3. right: متن را در سمت راست ظرف آن تراز کنید
  4. justify: متن برای پر کردن عرض کامل ظرف خود گسترش می یابد

.centered {
  text-align: center;
}

.leftAlign {
  text-align: left;
}

.rightAlign {
  text-align: right;
}

.justify {
  text-align: justify;
}

<html>

 <head>

   <title>Aligning Text</title>

 </head>

 <body>

   <h1 class=”centered”>A centered heading.</h1>

   <p class=”leftAlign”>

     Lorem ipsum dolor sit amet, ligula sed. A magna vel, sapien tincidunt tristique praesent. Aliquam leo tellus aliquam nibh bibendum, dolor varius sed interdum metus natoque dui, est neque parturient, aenean molestie facilisi ultrices arcu mollis nulla, faucibus eros vel asperiores pharetra a. Posuere arcu, egestas justo eu etiam ac, vestibulum mauris habitasse a, morbi nulla nostrud consequat at aenean et, augue a adipiscing. Eu proin velit ligula.

   </p>

   <p class=”rightAlign”>

     Lorem ipsum dolor sit amet, ligula sed. A magna vel, sapien tincidunt tristique praesent. Aliquam leo tellus aliquam nibh bibendum, dolor varius sed interdum metus natoque dui, est neque parturient, aenean molestie facilisi ultrices arcu mollis nulla, faucibus eros vel asperiores pharetra a. Posuere arcu, egestas justo eu etiam ac, vestibulum mauris habitasse a, morbi nulla nostrud consequat at aenean et, augue a adipiscing. Eu proin velit ligula.

   </p>

   <p class=”justify”>

     Lorem ipsum dolor sit amet, ligula sed. A magna vel, sapien tincidunt tristique praesent. Aliquam leo tellus aliquam nibh bibendum, dolor varius sed

sed interdum metus natoque dui, est neque parturient, aenean molestie facilisi ultrices arcu mollis nulla, faucibus eros vel asperiores pharetra a. Posuere arcu, egestas justo eu etiam ac, vestibulum mauris habitasse a, morbi nulla nostrud consequat at aenean et, augue a adipiscing. Eu proin velit ligula.

   </p>

 </body>

</html>

اندازه متن

موارد بسیاری وجود دارد که می خواهید اندازه پیش فرض عناصر متن را تغییر دهید. اندازه متن شما با استفاده از ویژگی font-size قابل تغییر است. اندازه قلم مقادیر مطلق و نسبی را می گیرد. متداولترین مقدار مطلق px است و متداولترین مقادیر نسبی ،ems وrems هستند.

واحدهای EM و Rem

واحدهای em و rem هر دو مقادیر اندازه گیری نسبی هستند که شبیه به درصد عمل می کنند ، زیرا آنها به عنوان یک ضرب در ارجاع به واحد اندازه گیری دیگر عمل می کنند. در مورد اندازه فونت: ۱ em برابر است با اندازه قلم والد عنصر ۱ rem برابر است با اندازه قلم عنصر ریشه کل سند HTML.

<html>

 <head>

   <title>Text Sizing with ems</title>

 </head>

 <body>

   <p class=”small”>Small Text</p>

   <p class=”normal”>Normal Text</p>

   <p class=”big”>Big Text</p>

   <div>

    <p class=”small”>Small Text</p>

    <p class=”normal”>Normal Text</p>

    <p class=”big”>Big Text</p>

   </div>

 </body>

</html>

div {
  font-size: 200%;
}

.small {
  font-size: 0.5em;
}

.normal {
  font-size: 1em;
}

.big {
  font-size: 3em;
}
از آنجا که انتخابگرهای کلاس بالا از واحدهای em استفاده می کنند ، اندازه قلم توسط مقدار اندازه قلم والدین آن تعیین می شود. بنابراین عناصر <p> داخل <div> دو برابر عناصر <p> خارج از <div> هستند.

<html>

 <head>

   <title>Text Sizing with rems</title>

 </head>

 <body>

   <p class=”small”>Small Text</p>

   <p class=”normal”>Normal Text</p>

   <p class=”big”>Big Text</p>

   <div>

    <p class=”small”>Small Text</p>

    <p class=”normal”>Normal Text</p>

    <p class=”big”>Big Text</p>

   </div>

 </body>

</html>

div {
  font-size: 200%;
}

.small {
  font-size: 0.5rem;
}

.normal {
  font-size: 1rem;
}

.big {
  font-size: 3rem;
}
همانطور که در بالا نشان داده شده است ، هنگامی که از واحدهای rem استفاده می شود ، نقطه مرجع به عنصر ریشه است. به طور کلی ، استفاده از واحدهای rem آسان تر است زیرا شما به یک مقدار واحد اشاره می کنید. هنگام استفاده از سیستم های الکترونیکی ، به ویژه در مورد عناصر بسیار تودرتو ، نقطه مرجع شما متفاوت است و پیگیری آن دشوارتر است. اکنون که با CSS آشنا شدید ، بیایید در فصل بعدی با اصول Javascript آشنا شویم.

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

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

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

دکمه بازگشت به بالا