شما اینجا هستید

استایلهایی که با css به متن داده میشود ظاهر و نحوه نمایش متن را تغییر میدهد.

با بهره گیری از استایلهایی که با css به متن داده میشود میتوان رنگ متن، چپ چین یا راست چین بودن متن، زیرخط دار بودن، فاصله بین حروف و بزرگ کردن یا کوچک کردن حروف متن را تغییر داد و به شکل دلخواه در آورد.

رنگ متن

ویژگی color برای تنظیم رنگ متن استفاده میگردد.

بیشتر مواقع با این سه روش رنگ متن را مشخص کرد:

  • مقدار HEX مانند 0000ff#
  • مقدار RGB مانند (rgb(0,0,255
  • نام رنگ مانند blue

رنگ پیشفرض برای کل صفحه در گزینشگر body تعریف میگردد.

<html>

<head>

<style>

body {

    color: red;

}


h1 {

    color: #00ff00;

}


p.ex {

    color: rgb(0,0,255);

}

</style>

</head>

<body>


<h1>This is heading 1</h1>

<p>این یک پاراگراف عادی است. توجه داشته باشید که رنگ متن قرمز است. رنگ متن پیشفرض در سلکتور body تعریف شده است</p>

<p class="ex">This is a paragraph with class="ex". This text is blue.</p>


</body>

</html>

 

تراز بندی متن

 

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

<html>

<head>

<style>

h1 {

    text-align: center;

}


p.date {

    text-align: right;

}


p.main {

    text-align: justify;

}

</style>

</head>

<body>


<h1>CSS text-align Example</h1>

<p class="date">May, 2009</p>

<p class="main">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>

<p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>


</body>

</html>

 

دکوراسیون متن – text decoration

 

ویژگی text-decoration برای تنظیم یا برداشتن تزئینات روی متن استفاده میشود. بیشترین کاربرد  ویژگی text-decoration برداشتن زیرخط از لینکها است:

a {
    text-decoration: none;
}

همچنینن میتوان از این ویژگی برای تزئین متن استفاده کرد:

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

توصیه میشود متنهایی که لینک نیستند را زیرخط دار نکنید چون در اغلب موارد کاربران را گمراه میکند.

مقدار none هیچ خطی را روی متن نمیکشد.

overline یک خط در بالای نوشته میکشد.

line-through یک خط بر روی متن میکشد.

underline یک خط در زیر متن میکشد.

دگرگونی متن – text transformation

ویژگی text-transform برای تبدیل متن به حروف کوچک یا بزرگ کاربرد دارد. با این ویژگی میتوان همه نوشته ها را تبدیل به حروف کوچ یا حروف بزرگ کرد. همچنین میتوان حرف اول از هر کلمه را بزرگ کرد.

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

uppercase حروف را تبدیل به حروف بزرگ میکند.

lowercase حروف را تبدیل به حروف کوچک میکند.

capitalize حرف اول کلمات را تبدیل به حروف بزرگ میکند.

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

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

p {
    text-indent: 50px;
}

 

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.