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

در این بخش از آموزش طراحی سایت به آموزش استایل دهی متن و کار با Text در CSS می پردازیم.

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

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

آموزش طراحی سایت

رنگ متن در CSS

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

  • یک نام رنگ معتبر - مانند "Red"
  • یک مقدار Hex - مانند "ff0000 #"
  • یک مقدار rgb -  مانند ("rgb255,0,0")
آموزش استایل دهی متن در CSS

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

آموزش کار با متن در CSS

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

آموزش CSS

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

آموزش طراحی سایت

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

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

آموزش کار با متن در CSS

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

آموزش کار با متن در CSS

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

آموزش کار با متن در CSS

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

آموزش طراحی سایت

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 معمولا برای حذف کردن زیر خطی که بصورت پیش فرض در لینک ها وجود دارد به کار می رود:

آموزش CSS

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

آموزش طراحی سایت

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

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

آموزش کار با متن در CSS

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

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

آموزش طراحی سایت

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

آموزش CSS

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

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

آموزش طراحی سایت

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

آموزش طراحی سایت

Letter Spacing در CSS

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

آموزش CSS

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

آموزش طراحی سایت

Line Height در CSS

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

آموزش طراحی سایت

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


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

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

آموزش کار با متن در CSS

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

آموزش طراحی سایت


White Space در CSS

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

آموزش CSS

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

آموزش طراحی سایت


Text Shadow در CSS

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

آموزش طراحی سایت

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

آموزش CSS

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

آموزش استایل دهی متن در CSS

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

آموزش طراحی سایت

سپس یک افکت بلور 5 پیکسل به سایه اضافه کنید: آموزش کار با متن در CSS

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

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

آموزش طراحی سایت

آموزش طراحی سایت آموزش CSS آموزش استایل دهی متن در CSS آموزش کار با متن در CSS آموزش HTML