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

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

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

رنگ متون

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: blue;
}

h1 {
  color: green;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p>

</body>
</html>

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
</style>
</head>
<body>

<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: justify;
}
  
  div.notJustify {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: left;
}
</style>
</head>
<body>

<h1>Example text-align: justify;</h1>

<p>The text-align: justify;</p>

<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>
  
  <br>
  <br>
  <br>
  
  <p>The text-align: left;</p>

<div class="notJustify">
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>

</body>
</html>

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
a {
  text-decoration: none;
}
  
#underline {
  text-decoration: underline;
}
  

</style>
</head>
<body>

<p>A link with no underline: <a href="https://www.Roxo.ir">Roxo.ir</a></p>
  
<p>A link with underline: <a id='underline' href="https://www.Roxo.ir">Roxo.ir</a></p>


</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}
</style>
</head>
<body>

<h1>تیتر اول ما که بالای خود خطی دارد</h1>
<h2>تیتر دوم ما که روی خود خطی دارد</h2>
<h3>تیتر سوم ما که زیر خود خطی دارد</h3>

</body>
</html>

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
</style>
</head>
<body>

<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

</body>
</html>

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

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

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

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

فرورفتگی متن

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-indent: 50px;
}
</style>
</head>
<body>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

</body>
</html>

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
p.small {
  line-height: 0.7;
}

p.big {
  line-height: 1.8;
}
</style>
</head>
<body>

<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>

<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

</body>
</html>

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  direction: rtl;
}
</style>
</head>
<body>

<p>This is the default text direction.</p>
<p class="ex1"><bdo dir="rtl">This is right-to-left text direction.</bdo></p>

</body>
</html>

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

</body>
</html>

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

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

سایه ی حروف

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

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

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 3px 2px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.</p>

</body>
</html>

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

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