استایل دهی متن در CSS

در بحث آموزش طراحی سایت، ما ارتباط وسیعی با متن و محتوای نوشتاری داریم به همین خاطر، اینکه قادر باشیم متون را به شکل ها و استایل های مختلفی در بیاوریم اهمیت بسیار زیادی دارد. با استفاده از زبان کاربردی CSS ما می توانیم روی متون کنترل کامل داشته باشیم و متون را زیباتر و کاربردی تر کنیم. در تصویر زیر مشاهده می کنید که ما با استفاده از استایل های CSS متون را در سایز های دلخواه و رنگ های گوناگون آراسته ایم. حال می خواهیم این تکنیک را بصورت عملی در طراحی سایت آموزش ببینیم.

رنگ متن در CSS

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

• یک نام رنگ معتبر - مانند "Red"
• یک مقدار Hex - مانند "ff0000 #"
• یک مقدار rgb -  مانند ("rgb255,0,0")

در این مثال به تمام کدهای موجود در عنصر body رنگ آبی (blue) داده شده است. سپس به تمام عناصر h1 رنگ سبز (green) اختصاص داده شده است. این کار توسط ویژگی color انجام می شود. نتیجه کد بالا را می توانید در زیر مشاهده کنید:

تغییر رنگ متن و رنگ پس زمینه متن در CSS

شما می توانید با استفاده از ویژگی background-color رنگ پس زمینه متن را به رنگ دلخواه تغییر دهید. همچنین، همانطور که در بالا ذکر شد، می توانید با استفاده از ویژگی color رنگ خود متن را تغییر دهید. نتیجه کد بالا به شکل زیر است:

Text Alignment (تنظیم جایگاه متن) در CSS

Text-align یکی از ویژگی های مهم و کاربردی در طراحی سایت و طراحی صفحات وب است. مشخصه text-align به منظور تنظیم کردن افقی جایگاه یک متن به کار می رود. یک متن می تواند وسط چین، راست چین و یا چپ چین باشد. به مثال زیر توجه کنید:

در این مثال، برای عناصر h1 از text-align=center استفاده شده است. بنابراین این عنصر و متن درون آن در صفحه html در وسط صفحه نمایش داده خواهند شد. اتفاق مشابه برای تگ های h2 و h3 رخ می دهد با این تفاوت که آنها به تربیت چپ چین و راست چین خواهند بود. در زیر می توانید نتیجه کد بالا را مشاهده کنید:

در طراحی سایت، وقتی مشخصه text-align روی "justify" تنظیم شده باشد، هر خط از پاراگراف، آنقدر کش می آید تا تمام خط های پارگراف عرض یکسان داشته باشند(مانند روزنامه ها و مجله ها).

در نتیجه کد بالا که در زیر آمده است مشخص شده که متن موجود در باکس، کاملا مرتب شده است:

Text Direction (مسیر متن) در CSS

مشخصه های direction و unicode-bidi می توانند برای تغییر دادن مسیر متن استفاده شوند. چپ به راست (ltr) و راست به چپ (rtl) که بیشتر برای زبان فارسی و عربی به کار می رود.

در این مثال، عنصر p که کلاس ex1 را به خود اختصاص داده با استفاده از direction=rtl راست چین شده و سپس با استفاده از Unicode-bidi=bidi-override کلمات آن برعکس شده اند. در زیر می توانید نتیجه کد بالا را مشاهده کنید:

در طراحی سایت و طراحی صفحات وب، ویژگی Unicode-bidi کاربرد زیادی ندارد، اما از direction برای طراحی سایت های فارسی و عربی به شدت استفاده می شود.

تنظیم عمودی متن در CSS

مشخصه vertical-align شکل عمودی یک عنصر را تعیین می کند. برای نمونه مثال زیر تنظیم عمودی یک تصویر را نشان می دهد.

همانطور که در این مثال مشخص است، شما می توانید مکان قرارگیری عمودی عناصر را با استفاده از ویژگی vertical-align تغییر دهید.

Text Decoration در CSS

در طراحی سایت، مشخصه text-decoration برای اضافه کردن یا حذف کردن تزئینات متن می باشد. مقدار ;text-decoration: none معمولا برای حذف کردن زیر خطی که بصورت پیش فرض در لینک ها وجود دارد به کار می رود:

نتیجه کد بالا به شکل زیر است:

بقیه مقادیر text-decoration هم برای تزئینات دیگر روی متن می باشند:

همانطور که مشاهده می کنید از مقادیر مختلف text-decoration برای تزیین کردن متون استفاده می شود. به عنوان مثال از مقدار line-through برای خط زدن متن استفاده می شود. نتیجه کد بالا را می توانید در زیر مشاهده کنید:

انتقال متن در CSS

مشخصه text-transform برای مشخص کردن اینکه حروف در یک متن بزرگ یا کوچک باشند استفاده می شود. در این بخش مقدار Capitalize در ویژگی text-transform به این معنا است که حرف اول کلمه بزرگ باشد. uppercase تمام حروف یک متن را بزرگ می کند و lowercase تمام حروف را کوچک می کند.

نتیجه کد بالا به شکل زیر است:

دندانه گذاری متن در CSS

مشخصه text-indent به منظور دندانه گذاری برای اولین خط یک متن به کار می رود:

همانطور که در زیر مشاهده می کنید، با استفاده از ویژگی text-indent خط اول پاراگراف به میزان 50px جلو آمده است:

Letter Spacing در CSS

مشخصه letter-spacing به منظور فاصله گذاری بین کاراکترها در یک متن است. مثال زیر نشان می دهد چگونه فاصله بین کاراکترها را کم و زیاد کنید:

همانطور که در نتیجه پیداست، با استفاده از ویژگی letter-spacing می توانیم فاطله بین حروف را کم و زیاد کنیم:

Line Height در CSS

مشخصه Line-Height یکی از پرکاربردترین ویژگی های css در طراحی سایت است که برای مشخص کردن فاصله بین خطوط در یک پاراگراف به کار می رود:

همانطور که مشخص است، با استفاده از ویژگی line-height می توانیم فاصله بین خطوط یک پاراگراف را کم و زیاد کنیم:

فاصله بین کلمات در CSS

مشخصه word-spacing به منظور مشخص کردن فاصله بین کلمات در متن به کار می رود. مثال زیر نشان می دهد که چگونه فاصله بین کلمات را افزایش یا کاهش دهیم.

در این مثال ابتدا فاصله بین کلمات را زیاد و سپس کم کرده ایم. نتیجه کد بالا به شکل زیر است:

White Space در CSS

مشخصه white-space، تعیین می کند که فضای خالی در یک خط چگونه مدیریت شود. (یعنی اینکه آیا خط بصورت نامحدود ادامه پیدا کند و یا اینکه بشکند و به خط بعدی برود)

نتیجه کد بالا به شکل زیر است:

Text Shadow در CSS

مشخصه text-shadow یکی دیگر از ابزار های بسیار کاربردی طراحان سایت برای زیباتر کردن متون موجود در صفحه است. این ویژگی به متن سایه اضافه می کند. در ساده ترین شکل شما می توانید از سایه افقی و سایه ی عمودی 2 پیکسل استفاده کنید:

افزودن سایه به متن به شکل زیر امکان پذیر است:

سپس یک رنگ قرمز به سایه اضافه کنید:

برا افزودن رنگ کافی است رنگ مورد نظر را به انتهای text-shadow اضافه کنید:

سپس یک افکت بلور 5 پیکسل به سایه اضافه کنید:

سومین مقدار text-shadow میزان بلور شدن سایه متن را مشخص می کند:

به طور کلی در طراحی سایت و صفحات وب، ویژگی های متن از اهمیت بالایی برخوردار هستند و باعث افزایش خوانایی متن ها و زیباتر شدن جلوه بصری سایت می شوند. به عنوان جمع بندی این مقاله، تمام مشخصه های متن در CSS به طور خلاصه در جدول زیر آمده است: