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

CSS Text Styles

0 71

استایل دهی به متون

توصیه می کنیم این مطالب را هم بخوانید
1 از 3

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

رنگ متون

خصوصیت color وظیفه ی تغییر رنگ متون را بر عهده دارد.

مانند اکثر خصوصیات CSS که با رنگ عناصر سر و کار دارند، می توانید از قالب های زیر استفاده کنید:

  • با استفاده از نام های از پیش تعریف شده در CSS مانند orange یا blue یا red و …
  • در قالب Hex
  • در قالب RGB

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

مشاهده ی خروجی در JSBin

نکته: اگر می خواهید کدهایتان با استانداردهای W3C هماهنگ باشد، پس از تعریف خصوصیت color باید خصوصیت background-color را نیز تعریف کنید.

تراز راست یا چپ در متون

برای تعیین ترازبندی افقی در متون خود می توانید از خصوصیت text-align استفاده کنید. این خصوصیت به شما اجازه می دهد که به متون بگویید در سمت چپ یا راست صفحه قرار بگیرند.

مقادیر مجاز برای این خصوصیت از این قرار اند:

  • right به معنی «راست»
  • left به معنی «چپ»
  • centered به معنی «وسط»
  • justified به معنی «تعدیل شده» (خط ها کاملا تا انتهای صفحه کشیده شوند تا متن مرتب تر نمایش داده شود)

نکته: چپ چین (LTR) یا راست چین (RTL) بودن زبان، مقدار پیش فرض را برای این خصوصیت تعیین می کند. زبان هایی مانند فارسی راست چین هستند، یعنی از راست به چپ نوشته می شوند اما زبان های مانند انگلیسی چپ چین هستند و از سمت چپ به راست نوشته می شوند. اگر زبانی LTR باشد مقدار اولیه یا پیش فرض خصوصیت text-align برابر با left خواهد بود و همچنین بالعکس.

به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

اما اگر مقدار خصوصیت text-align را روی justify تنظیم کنیم، خط های نوشته ی ما کشیده می شوند تا تمام خطوط، عرض یکسانی داشته باشند و دقیقا در یک جا شروع شده و یک جا پایان پیدا بیابند.

به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

در مثال بالا دو مربع به همراه متن برایتان آورده ایم؛ به یکی از آن ها Justify اختصاص و برای دیگری left داده ایم. شما می توانید تفاوت آن ها را به سادگی مشاهده کنید.

خاصیت text-decoration (دکور متن)

خاصیت text-decoration برای اضافه یا حذف کردن تزئینات مختلف استفاده می شود.

به طور مثال از دستور ;text-decoration: none معمولا برای حذف خطی که زیر لینک های HTML می آید استفاده می شود:

مشاهده ی خروجی در JSBin

در این مثال هر دو نوع لینک را برایتان آورده ایم؛ در زبان HTML لینک ها به صورت پیش فرض دارای خطی هستند که زیرشان قرار می گیرند. ما با دستور بالا آن را از یکی از لینک ها حذف کرده ایم. البته text-decoration مقادیر دیگری نیز می گیرد تا شکل ظاهری متون را تغییر دهد. به طور مثال به کد زیر توجه کنید:

مشاهده ی خروجی در JSBin

نکته: پیشنهاد می شود متونی که لینک نیستند را underline نکنید چرا که باعث گیج شدن خواننده می شود.

بزرگی و کوچکی حروف

ما می توانیم با استفاده از خصوصیت text-transform تعیین کنیم که آیا حروف متون ما بزرگ باشد یا کوچک. البته این ویژگی تنها در زبان انگلیسی معنی می دهد چرا که ما در زبان فارسی حروف بزرگ و کوچک نداریم. بنابراین استفاده از این کد نیز تاثیری نخواهد داشت:

مشاهده ی خروجی در JSBin

توضیح موارد استفاده شده در کد زیر:

  • مقدار uppercase: این مقدار تمام حروف متن ما را به حروف بزرگ تبدیل می کند
  • مقدار lowercase: این مقدار تمام حروف متن ما را به حروف کوچک تبدیل می کند
  • مقدار capitalize: این مقدار تنها حرف اول هر کلمه از متن ما را بزرگ می کند

خروجی تک تک این دستورات را می توانید در کد بالا مشاهده کنید.

فرورفتگی متن

مبحث فرورفتگی متن یا Indentation در قواعد نوشتاری زبان فارسی جایگاهی ندارد و برای ما ایرانیان مفهومی کاملا بیگانه است اما در زبان انگلیسی از آن استفاده می شود و کاربرد اصلی آن زیبایی دادن به پاراگراف ها و خواناتر کردن آنان است. زمانی که برای یک پاراگراف text-indent تعیین کنید به آن می گویید که خط اول از پاراگراف را از کمی جلوتر شروع کند:

مشاهده ی خروجی در JSBin

اگر به خروجی کد بالا بروید می بینید که خط اول پارارگراف کمی تو رفتگی دارد که ما به آن indentation می گوییم.

فاصله گذاری بین حروف

خصوصیت letter-spacing کار تعیین فاصله بین حروف یک متن را بر عهده دارد.

برای درک بهتر آن باید به مثال زیر توجه کنید؛ در این مثال دو عبارت متفاوت آورده ایم که در یکی از آن ها مقدار spacing را کم و در دیگری زیاد کرده ایم:

مشاهده ی خروجی در JSBin

heading اول از هم جدا و وارفته است در حالی که حروف heading دوم کاملا در هم فرو رفته است.

فاصله گذاری بین خطوط

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

مشاهده ی خروجی در JSBin

در این مثال 3 جفت دو خطی را می بینید که هر کدام دارای line-height متفاوتی است؛ هر چقدر line-height بیشتر باشد فاصله ی خطوط در یک متن نیز بیشتر خواهد بود.

راست چین یا چپ چین؟

شما باید بدانید صفحات وب شما به چه زبانی هستند و گرنه نمیتوانید برایشان طرحی بزنید. به طور مثال صفحاتی که به زبان فارسی نوشته می شوند راست چین هستند و از سمت راست شروع می شوند بنابراین باید این مسئله را به مرورگر اعلام کنید. این کار را با دستور direction انجام می دهیم. مثال:

مشاهده ی خروجی در JSBin

زمانی که به خروجی نگاه می کنید متوجه می شوید متن ما انگلیسی است. در حالتی که آن را به اشتباه راست چین (RTL) تعریف کرده ایم متن کاملا برعکس شده و حتی نقطه ی پایانی جمله به ابتدای آن منتقل شده است.

تفاوت اصلی direction و text-align نیز در همین است. direction ماهیت نوشتاری زبان تشکیل دهنده ی صفحه ی وب شما را تعیین می کند در حالی که text-align می گوید آن متن در سمت راست یا چپ صفحه قرار بگیرد.

اگر در کد بالا مقدار text-align را اشتباها راست چین بگذاریم، متن کامل برعکس نشده و نقطه ی پایانی آن به ابتدایش منتقل نمی شود.

فاصله گذاری بین کلمات

خصوصیتی به نام word-spacing وجود دارد که کار آن تعیین مقدار فاصله بین کلمات در یک متن است.

برای درک بهتر به مثال زیر نگاه کنید:

مشاهده ی خروجی در JSBin

نکته: فاصله ی بین کلمات را با فاصله ی بین حروف یکی در نظر نگیرید! به مراجعه به مثال های هر کدام، متوجه تغییر آن ها خواهید شد.

سایه ی حروف

خصوصیت text-shadow به پشت متن های ما سایه اضافه می کند تا در مواقعی که ممکن است خواندن متن سخت شود، کار برای کاربر راحت تر شود.

در کد زیر مقدار سایه ی افقی 3 پیکسل و سایه ی عمودی 2 پیکسل تعیین شده است و در آخر رنگ سایه را نیز قرمز گذاشته ایم:

مشاهده ی خروجی در JSBin

امیدوارم از این قسمت لذت برده باشید و بتوانید با رعایت نکات آن متون زیباتری را تولید کنید.

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد CSS به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.