آموزش CSS (بخش هشتم)

آموزش CSS (بخش هشتم)

خصوصیات متن در css

Text Color

خصوصیت Color برای تنظیم رنگ متن استفاده می شود. رنگ توسط:

  • – نام رنگ : مانند “blue”
  • – توسط مقدار HEX مانند “#۰۰۰۰ff”
  • – توسط مقدار RGB مانند “(rgb(0,0,255”

برای مشاهده لیست کامل مقادیر رنگ ممکن است به مقادیر CSS Color مراجعه کنید.

<h1 style="color: blue;">This is heading 1</h1>
<p style="color: green;">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>

This is heading 1

This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.

text-align

خصوصیت text-align برای تنظیم تراز افقی یک متن استفاده می شود.

برای خصوصیت text-align می توان چهار مقدار را تعریف کرد: left , right , center , justify.

h1 {
   text-align: center;
}
h2 {
   text-align: left;
}
h3 {
   text-align: right;
}
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>

خروجی :

Heading 1 (center)

Heading 2 (left)

Heading 3 (right)

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

div {
   border: 1px solid black;
   padding: 10px;
   width: 200px;
   height: 200px;
   text-align: justify;
}
<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>

خروجی :

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.’

text-decoration

text-decoration برای تنظیم یا حذف دکوراسیون از متن استفاده می شود.

مقدار ;text-decoration: none اغلب برای حذف خط از زیر لینک استفاده می شود.

مقادیر دیگر text-decoration برای تزئین متن مورد استفاده قرار می گیرند.

h1 {
   text-decoration: overline;
}
h2 {
   text-decoration: line-through;
}
h3 {
   text-decoration: underline;
}
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

خروجی :

This is heading 1

This is heading 2

This is heading 3

نکته: توصیه نمی شود که از مقدار underline برای متنی که یک لینک نیست استفاده کنید، زیرا اغلب خواننده را گمراه می کند.

text-transform

خصوصیت text-transform برای مشخص کردن حروف بزرگ و کوچک در یک متن استفاده می شود، که می تواند سه مقدار uppercase (تمام حروف به صورت بزرگ)، lowercase (تمام حروف به صورت کوچک)، capitalize (حرف اول کلمات به صورت بزرگ و مابقی کلمات به صورت کوچک)

p.uppercase {
   text-transform: uppercase;
}
p.lowercase {
   text-transform: lowercase;
}
p.capitalize {
   text-transform: capitalize;
}
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

خروجی :

آموزش CSS (بخش نهم)
شاید این مطلب را نیز بپسندید

This is some text.

This is some text.

This is some text.

text-indent

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

p {
   text-indent: 50px;
}
<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>

خروجی :

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.’

letter-spacing

خصوصیت letter-spacing برای تعیین فضای بین کاراکترهای یک متن استفاده می شود.

مثال زیر نشان می دهد که چگونه فضای بین کاراکترها را می توان افزایش یا کاهش داد:

h1 {
   letter-spacing: 3px;
}
h2 {
   letter-spacing: -3px;
}
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

خروجی :

This is heading 1

This is heading 2

line-height

خصوصیت line-height برای تعیین فاصله ی بین خطوط استفاده می شود.

p.small {
   line-height: 0.7;
}
p.big {
   line-height: 1.8;
}
<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>

خروجی :

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

This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.

This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.

Text Direction

خصوصیت direction برای تغییر مسیر متن یک عنصر مورد استفاده قرار می گیرد.

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

خروجی :

This is the default text direction.

This is right-to-left text direction.

word-spacing

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

h1 {
   word-spacing: 10px;
}
h2 {
   word-spacing: -5px;
}
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

خروجی :

This is heading 1

This is heading 2

text-shadow

خصوصیت text-shadow سایه را به متن اضافه می کند.

مثال زیر موقعیت سایه افقی (۳ پیکسل)، موقعیت سایه عمودی (۲ پیکسل) و رنگ سایه (قرمز) را مشخص می کند:

h1 {
   text-shadow: 3px 2px red;
}
<h1>Text-shadow effect</h1>

خروجی :

Text-shadow effect

پاسخ دهید

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

5 − سه =

    DESIGNESTAN
    0912-0292081