آموزش سبک دهی به متن با css (اندازه متن)

آموزش سبک دهی به متن با css (اندازه متن)

آموزش سبک دهی به متن با css (اندازه متن)

با وجود css، بهتر و عاقلانه‌تر است که برای سبک دهی و تنظیم اندازه متن از  css استفاده کنید. برای مثال اگر بخواهید از font برای تغییر رنگ پارگراف‌های متن‌تان استفاده کنید، شما باید در هر کجای کد html خود که تگ p را دارید، دستورات زیر را به طور جداگانه بنویسید.

<p>

<“font color=”#888000>

<p/>

اما اگر  از css استفاده کنید، فقط کافی است خصوصیت رنگ تگ p را به صورت زیر یکبار تعریف کنید.

p

}

;color:#888000

{

علاوه براین اگر نیاز به تغییر سبک داشته باشید، فقط کافی است به کد css رفته و آن را تغییر دهید و دیگر نیازی نیست که در هر جایی که تگ p دارید، آن را تغییر دهید. پس برای سبک دهی متن حتما از css استفاده کنید.

اندازه متن

برای مشخص کردن اندازه متن ‌می‌توانید از خصوصت font-size استفاده کنید.

مثال: می‌خواهیم اندازه متن پارگراف‌ها برابر با 12px باشد. دستور را به صورت زیر می‌نویسیم.

p

}

;font-size: 12px

{

واحدهای تعیین کننده اندازه متن

در مثال بالا از px استفاده کردیم. واحدهای دیگری که شما می‌توانید استفاده کنید عبارتند از:

  • point و pica: این واحدها برای سبک دهی متن برای چاپ استفاده می‌شود. نباید از این دو واحد برای سبک دهی متن برای نمایش در صفحات وب استفاده کرد. یک point برابر است با یک هفتاد و دوم اینچ و یک pica برابر است با یک ششم اینچ.

  • pixel: بیشتر طراحان مایلند از این واحد استفاده کنند، چون که در تمام مرورگرها به یک اندازه نمایش داده می‌شود (بر خلاف دو واحد بالا). البته یک مشکلی در استفاده از این واحد می‌باشد. اگر کاربری به طور مثال برای خوانایی قصد بزرگ کردن متن را داشته باشد، نمی‌تواند آن را تغییر دهد و آن ثابت خواهد بود. همچنین اگر قرار است متن شما چاپ شود، چون که برای دستگاه‌های چاپ معنایی ندارد، دستگاه‌ها سعی می‌کنند مقدار این واحد را تخمین بزنند که باعث برهم خوردن متن می‌شود.

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

والد و فرزند: در html گاهی برچسبی داخل برچسب دیگر قرار می‌گیرد. مثلا برچسب <p> همیشه داخل برچسب <body> قرار می‌گیرد. در اینجا body والد و p فرزند می‌شود.

  • ex: یک واحد نسبی است. به ندرت استفاده می‌شود. چون که مرورگرها باید محاسباتی را برای تخمین مقدار آن انجام دهند که ممکن است تخمینی غیر واقعی بزنند.

  • درصدی: اگر از % استفاده کنید مانند em و ex یک واحد نسبی خواهد بود. به این معنی که کاربر می‌تواند آن را تغییر دهد و در صورتی که 100% باشد، برابر مقداری خواهد بود که کاربر تنظیم کرده است و در صورتی که درصد کمتر باشد، متن هم کوچکتر از مقداری که کاربر تنطیم کرده،می‌شود.

کلمات کلیدی

برای اندازه متن می‌توانید از کلمات دقیق یا نسبی استفاده کنید.

  • کلمات دقیق: هفت کلمه XX-small, x-smal,small,medium,large,x-large,xx-large برای سایز دهی به متن استفاده می‌شود. این کلمات به ترتیبی که مشخص است سایز بندی می‌شوند. مثلا medium بزرگتر از small است. در هر مرورگر تعریفی برای آن مشخص شده. در یک مرورگر ممکن است medium را به عنوان متن معمولی در نظر بگیرد و بقیه کلمات را با توجه به آن کوچک و بزرگ کند و در مرورگر دیگر ممکن است small را به عنوان متن معمولی در نظر بگیرد. این که این کلمات اندازه خود را از والد نمی‌گیرند خوب است. اما ممکن است در یک مرورگر small خیلی کوچک و ناخوانا باشد و در یک مرورگر دیگر کاملا خوانا.

  • کلمات نسبی: این کلمات (مانند larger یا smaller) اندازه خود را از جز والد خود می‌گیرند. و فقط مشخص میکنند که مثلا تگ a که داخل تگ p است، متنش کوچکتر یا بزرگتر از متن p باشد.

بازدید: 4

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

مطالب مرتبط

نظر بدهید

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