خانه / آموزش CSS / بخش دوازدهم- آموزش CSS Text یا آموزش متن در CSS

راه اندازی سایت فروشگاهی دیجی کالا و بامیلو

مهندس فاطمه درخشان

تاریخ بروزرسانی: ۲۲ بهمن ۱۳۹۷ تعداد بازدید : 14 بازدید بدون دیدگاه

بخش دوازدهم- آموزش CSS Text یا آموزش متن در CSS

قدم قبلی >

< قدم بعدی

CSS Text

در این درس به بررسی خصوصیات متن در CSS می پردازم. این خصوصیات عبارتند از:

رنگ متن
تراز متن
دکوراسیون متن
تبدیل متن
تلنگر متن
فاصله بین حروف
ارتفاع متن
جهت متن
فاصله کلمات
سایه متن

Text Color(رنگ متن)

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

color name(نام رنگ) – مانند: “قرمز”
HEX value(یک مقدار HEX) مانند: “# ff0000”
RGB value (یک مقدار RGB) مانند: “rgb (255،۰،۰)”

رنگ متن پیش فرض برای یک صفحه در انتخاب بدن تعریف شده است.

مثال:

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

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

<h1>This is heading 1</h1>
<p>این یک پاراگراف معمولی است. توجه داشته باشید که این متن آبی است. رنگ متن پیش فرض برای یک صفحه در انتخاب بدنه تعریف شده است.
</p>

</body>
</html>

<html>

<head>

<style>

body {

color: blue;

}

h1 {

color: green;

}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<p>این یک پاراگراف معمولی است. توجه داشته باشید که این متن آبی است. رنگ متن پیش فرض برای یک صفحه در انتخاب بدنه تعریف شده است.

</p>

</body>

</html>

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

توجه: برای CSS سازگار با W3C: اگر ویژگی رنگ را تعریف کنید، باید رنگ پس زمینه را نیز تعریف کنید.

Text Alignment(تراز متن)

خصوصیت text-align برای تنظیم تراز افقی یک متن در CSS استفاده می شود. متن را می توان left aligned (چپ تراز) یا right aligned(راست تراز)،centered(متمرکز)یا justified کرد.

مثال زیر متن های راست تراز و چپ تراز و متمرکز را نشان می دهد(اگر جهت متن از چپ به راست باشد به طور پیش فرض تراز left aligned می شود، و اگر جهت متن راست به چپ باشد به طور پیش فرض تراز متن right aligned می شود:

مثال:

<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>سه تیتر بالا یکی در مرکز قرار گرفته و یکی  چپ تراز شده و دیگری راست تراز است.</p>

</body>
</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>سه تیتر بالا یکی در مرکز قرار گرفته و یکی چپ تراز شده و دیگری راست تراز است.</p>

</body>

</html>

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

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

مثال:

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

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

<p>The text-align: justify;</p>
<p> هر خط کشیده می شود به طوری که هر خط برابر با عرض و حاشیه چپ و راست (مانند مجلات و روزنامه ها) باش:.</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>

</body>
</html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 10px;

width: 200px;

height: 200px;

text-align: justify;

}

</style>

</head>

<body>

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

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

<p> هر خط کشیده می شود به طوری که هر خط برابر با عرض و حاشیه چپ و راست (مانند مجلات و روزنامه ها) باش:.</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>

</body>

</html>

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

Text Decoration(دکوراسیون متن)

خصوصیت دکوراسیون متن برای تنظیم یا حذف دکوراسیون از متن در CSS استفاده می شود.

مقدار دکوراسیون برابر هیچ یعنی: text-decoration: none؛ اغلب برای حذف زیر خطوط (underlines) از لینک استفاده می شود:

مثال:

<html>
<head>
<style>
a {
  text-decoration: none;
}
</style>
</head>
<body>

<p> لینک بدون خط زیر:
 <a href="https://tiktheme.com/">tiktheme.com</a></p>

</body>
</html>

<html>

<head>

<style>

a {

text-decoration: none;

}

</style>

</head>

<body>

<p> لینک بدون خط زیر:

<a href="https://tiktheme.com/">tiktheme.com</a></p>

</body>

</html>

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

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

مثال:

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

h2 {
  text-decoration: line-through;
}

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

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

</body>
</html>

<html>

<head>

<style>

h1 {

text-decoration: overline;

}

h2 {

text-decoration: line-through;

}

h3 {

text-decoration: underline;

}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

</body>

</html>

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

نکته: توصیه نمی شود که زیر متنی که لینک نیست خط (underlines) قرار دهید، زیرا اغلب خواننده را گیج می کند.

Text Transformation(تبدیل متن)

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

این خصوصیت می تواند برای تغییر حروف کوچک به بزرگ یا برعکس مورد استفاده قرار گیرد یا حرف اول هر کلمه را بنا به خواست شما بزرگ کند :

مثال:

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

<html>

<head>

<style>

p.uppercase {

text-transform: uppercase;

}

p.lowercase {

text-transform: lowercase;

}

p.capitalize {

text-transform: capitalize;

}

</style>

</head>

<body>

</body>

</html>

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

Text Indentation(تنظیم تو رفتگی متن)

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

مثال:

<html>
<head>
<style>
p {
  text-indent: 50px;
}
</style>
</head>
<body>
<p>:به تو رفتگی در متن زیر دقت کنید</p>

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

<html>

<head>

<style>

p {

text-indent: 50px;

}

</style>

</head>

<body>

<p>:به تو رفتگی در متن زیر دقت کنید</p>

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

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

Letter Spacing(فاصله بین حروف)

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

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

مثال:

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

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

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

Line Height(ارتفاع خط)

خصوصیت Line Height یا خط ارتفاع برای تعیین فضای بین خطوط متن در CSS استفاده می شود:

مثال:

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

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

This is a paragraph with a smaller line-height.<br>

</p>

This is a paragraph with a bigger line-height.<br>

</p>

</body>

</html>

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

Text Direction(جهت متن)

خصوصیت direction برای تغییر جهت یک عنصر متن در CSS استفاده می شود.

مثال:

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

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

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

Word Spacing(فاصله کلمات)

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

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

مثال:

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

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

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

Text Shadow(سایه متن)

خصوصیت Text Shadow سایه را به متن در CSS می افزاید.

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

مثال:

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