این بخش به توضیحاتی در مورد استایل دهی به متن با استفاده از خصوصیت‌های CSS می‌پردازد. استایل دادن به متن شامل تغییر ظاهر آن است تا جذابیت بصری بیشتری داشته باشد یا یک پیام خاص منتقل شود. در این بخش نحوه تغییر متن با استفاده از خصوصیت‌های CSS را نشان می‌دهد.
برای استایل دهی به متن، چندین روش وجود دارد. خصوصیت‌های زیر توسط CSS ارائه شده است و می‌توانند برای این منظور استفاده شوند:
- color: رنگ متن را مشخص می‌کند.
- text-align: تراز متن را تعیین می‌کند.
- text-align-last: تراز آخرین خط یک بلوک متن را تعیین می‌کند.
- direction: جهت متن عنصر را تعیین می‌کند.
- text-indent: تورفتگی اولین خط متن را تعیین می‌کند.
- letter-spacing: فاصله بین حروف یا کاراکترهای تشکیل دهنده یک کلمه یا متن را مشخص می‌کند.
- word-spacing: فاصله بین کلمات در متن را مشخص می‌کند.
- white-space: جریان فضای سفید درون متن در یک عنصر را کنترل می‌کند.
- text-decoration: خط زیر، خط رویه و خط خورده به یک قطعه متن اضافه می‌کند.
- text-decoration-skip: تعیین می‌کند کدام بخش از محتوای عنصر که خط زیر متن را تحت تأثیر قرار می‌دهد، باید از بین برود.
- text-decoration-skip-ink: مشخص می‌کند چگونه خطوط زیر و رویه متن را اطراف صعود کاراکترها و نزول‌ها می‌کشد.
- text-transform: متن را به حروف بزرگ یا کوچک تبدیل می‌کند.
- text-emphasis: علامت‌های تاکید را به متن اعمال می‌کند (به جز فضاها و کاراکترهای کنترلی).
- text-shadow: سایه را به متن اضافه می‌کند.
- line-break: کنترل می‌کند چگونه قانون یک شکست خط را تنظیم کند.
- word-break: کنترل می‌کند چگونه قانون یک شکست کلمه را تنظیم کند.
رنگ متن
تغییر رنگ متن می‌تواند جلب توجه بصری ایجاد کند یا با یک طرح خاص هماهنگ شود.
ویژگی color برای تعیین رنگ متن استفاده می‌شود. مقادیر ممکن برای این ویژگی به شرح زیر است:
نام رنگ: مثال = قرمز، آبی، سبز.
مقدار شش‌گانه دهدهی: مثال = #ff00ff.
مقدار RGB: مثال = rgb(125، 255، 0).
در اینجا یک مثال آمده است:
<html>
<head>
</head>
<body>
<h2>رنگ متن</h2>
<p style="color: blueviolet;">
نام رنگ
</p>
<p style="color: #ff00ff;">
مقدار شش‌گانه دهدهی
</p>
<p style="color: rgb(255، 124، 100);">
مقدار RGB
</p>
</body>
</html>
در این مثال، رنگ متن هر المان پاراگراف (<p>) با استفاده از مقادیر مختلف رنگ تنظیم شده است، که نشان می‌دهد انعطاف‌پذیری ویژگی color در CSS است.
تراز متن
موقعیت یا قرارگیری متن در یک صفحه، تراز آن نامیده می‌شود. متن بر اساس حاشیه‌های چپ و راست صفحه ترازبندی می‌شود.
ویژگی CSS که تراز متن را تعیین می‌کند، text-align است. این ویژگی ترازبندی افقی متن را تنظیم می‌کند.
مقادیر ممکن برای این ویژگی عبارتند از:
start: همانند چپ، اگر جهت LTR باشد و راست، اگر جهت RTL باشد.end: همانند راست، اگر جهت LTR باشد و چپ، اگر جهت RTL باشد.left: تراز با حاشیه چپ.right: تراز با حاشیه راست.center: تراز در مرکز صفحه.justify: تراز با هر دو حاشیه.justify-all: مانندjustify، که خط آخر را هم ترازبندی می‌کند.match-parent: مشابه inherit. مقادیر start و right از مقدار والدین گرفته می‌شوند و با left و right جایگزین می‌شوند.
هنگامی که جهت LTR باشد، تراز پیش‌فرض چپ است و هنگامی که جهت RTL باشد، تراز پیش‌فرض راست است.
در اینجا یک مثال آورده شده است:
<html>
<head>
</head>
<body>
<h2>تراز متن</h2>
<p style="text-align: left;">تراز چپ متن.</p>
<p style="text-align: right;">تراز راست متن.</p>
<p style="text-align: center;">تراز مرکزی متن.</p>
<p style="text-align: justify; border: 2px solid red; width: 200px; height: 100px;">
تراز متن با توجیه. این تراز متن را بر اساس هر دو حاشیه، چپ و راست، تنظیم می‌کند.
</p>
</body>
</html>
تراز عمودی
ویژگی vertical-align برای تراز کردن متن عمودی در یک المان شامل، العناصر شاملی، العناصر شامل-بلوک و سلول جدول استفاده می‌شود.
این ویژگی می‌تواند یکی از مقادیر زیر را داشته باشد:
-
baseline: الأساس المورد استفاده برای المان با الأساس المورد استفاده برای پدر الأساس مورد تطابق می‌شود. -
sub: الأساس المورد استفاده برای متن نشانه‌گذاری شده به زیر مورد تطابق می‌شود. -
super: الأساس المورد استفاده برای متن نشانه‌گذاری شده به بالا مورد تطابق می‌شود. -
top: بالاترین نقطه المربع المورد استفاده برای متن نشانه‌گذاری شده با نقطه بالاترین جعبه خط مطابقت دارد، در سیاق محتوای شامل‌خط یا با نقطه بالاترین خانه در سیاق جدول. -
text-top: بالاترین نقطه المربع المورد استفاده برای متن نشانه‌گذاری شده با بالاترین جعبه خط در خط مطابقت دارد. -
middle: الأساس المورد استفاده برای المتن تطابق داده شده با نقطه تعریف شده توسط الأساس پدر به علاوه نصف ارتفاع-x فونت پدر، در سیاق محتوای شامل‌خط. -
bottom: پایین‌ترین نقطه المربع المورد استفاده برای متن نشانه‌گذاری شده با پایین‌ترین جعبه خط مطابقت دارد. -
text-bottom: پایین‌ترین نقطه المربع المورد استفاده برای متن نشانه‌گذاری شده با پایین‌ترین جعبه خط در خط مطابقت دارد. -
percentage: الأساس المورد استفاده برای المتن به وسیله درصد داده شده از مقدار ویژگی ارتفاع-خط بالا یا پایین تغییر می‌کند. -
length: الأساس المورد استفاده برای متن به وسیله مقدار طول داده شده تغییر می‌کند. مقادیر طول منفی برای این ویژگی مجاز هستند. یک مقدار طولی از 0 برای این ویژگی تأثیری مشابه مقدار الأساس دارد.
در اینجا یک مثال آمده است:
<html>
<head>
<style>
table, td {height: 100px; width: 400px; border: 1px solid red;}
</style>
</head>
<body>
<table>
<tr>
<td style="vertical-align: baseline">baseline</td>
<td style="vertical-align: top">top</td>
<td style="vertical-align: middle">middle</td>
<td style="vertical-align: bottom">bottom</td>
<td>
<p>
بدون تراز عمودی
</p>
</td>
</tr>
</table>
<p>
top: <img style="vertical-align: top" src="images/smiley.png" alt="star"/>
middle: <img style="vertical-align: middle" src="images/smiley.png" alt="star"/>
bottom: <img style="vertical-align: bottom" src="images/smiley.png" alt="star"/>
super: <img style="vertical-align: super" src="images/smiley.png" alt="star"/>
sub: <img style="vertical-align: sub" src="images/smiley.png" alt="star"/>
</p>
<p>
text-top: <img style="vertical-align: text-top" src="images/smiley.png" alt="star"/>
text-bottom: <img style="vertical-align: text-bottom" src="images/smiley.png" alt="star"/>
0.2em: <img style="vertical-align: 0.3em" src="images/smiley.png" alt="star"/>
-1em: <img style="vertical-align: -2em" src="images/smiley.png" alt="star"/>
20%: <img style="vertical-align: 30%" src="images/smiley.png" alt="star"/>
-100%: <img style="vertical-align: -100%" src="images/smiley.png" alt="star"/>
</p>
</body>
</html>
جهت دهی
جهت متن به جهت گویش متن کاراکترهای داخل سند یا المان اشاره دارد. این تعیین می‌کند که متن باید از چپ به راست (LTR) یا از راست به چپ (RTL) نمایش داده شود بر اساس سیستم نوشتاری مورد استفاده.
در CSS، شما می‌توانید جهت متن را با استفاده از ویژگی direction تنظیم کنید. این ویژگی دو مقدار اصلی را قبول می‌کند:
-
LTR(از چپ به راست): مقدار پیش‌فرض، برای زبان‌هایی که از چپ به راست نوشته می‌شوند مانند انگلیسی استفاده می‌شود. شما نیازی به اشاره مستقیم به این مقدار ندارید مگر اینکه می‌خواهید یک جهت میراثی از راست به چپ را بازنویسی کنید. -
RTL(از راست به چپ): برای زبان‌هایی که از راست به چپ نوشته می‌شوند مانند عربی یا عبری استفاده می‌شود. هنگام استفاده از rtl، متن به طور پیش‌فرض به راست تراز شده است.
به علاوه، در CSS یک خاصیت مختصر، unicode-bidi، برای کنترل الگوریتم bidi وجود دارد که مشخص می‌کند چگونه کاراکترهایی با جهت‌های نوشتاری مختلف وقتی که در همان پاراگراف ظاهر می‌شوند نمایش داده شوند. مقدار متداول برای unicode-bidi normal است که به مرورگر اجازه می‌دهد جهت متن را به طور خودکار مدیریت کند.
در اینجا یک مثال آورده شده است:
<html>
<head>
</head>
<body>
<p style="direction: rtl;">
از راست به چپ
</p>
<p style="direction: ltr;">
از چپ به راست
</p>
</body>
</html>
unicode-bidi
<html>
<head>
<style>
p.example {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<h2>Text Direction</h2>
<p>Check for the text direction.</p>
<p class="example">Check for the text direction.</p>
</body>
</html>این قسمت از کد نمونه از استفاده از ویژگی unicode-bidi را نشان می‌دهد. این ویژگی به شما امکان می‌دهد که کنترل کنید که چگونه کاراکترهایی با جهت‌های نوشتاری مختلف در یک المان متنی نمایش داده شوند.
در این مثال، یک المان پاراگراف با کلاس “example” ایجاد شده است که جهت متن آن به صورت rtl (از راست به چپ) تنظیم شده است. همچنین، unicode-bidi با مقدار bidi-override تنظیم شده است. این مقدار به مرورگر اطلاع می‌دهد که اجازه دهد الگوریتم bidi را کنترل کند و جهت‌های متن را بیاید متعیین کند.
در نتیجه، متن در المان پاراگراف با کلاس “example” به جهت rtl (از راست به چپ) نمایش داده می‌شود، اما الگوریتم bidi به شما اجازه می‌دهد که نوشتار را دستی تنظیم کنید و در نتیجه نوشتار از چپ به راست نمایش داده می‌شود.
متن در المان پاراگراف بدون کلاس، به طور پیش‌فرض از چپ به راست نمایش داده می‌شود، بدون درنظر گرفتن ویژگی unicode-bidi.
ویژگی text-decoration
این بخش نحوه استفاده از ویژگی text-decoration را برای اضافه کردن تزئینات اضافی به متن، مانند اضافه کردن خط (خط زیرین، خط خورده، خط بالایی) و تنظیم رنگ، استایل و ضخامت به خط را نشان می‌دهد.
ویژگی text-decoration یک ویژگی کوتاه‌نویسی برای ویژگی‌های زیر است:
text-decoration-line: نوع خط زینت‌دهی را (خط زیرین، خط خورده یا خط بالایی) تنظیم می‌کند.text-decoration-color: رنگ زینت‌دهی متن را تعیین می‌کند.text-decoration-style: استایل زینت‌دهی متن را (نقطه‌ای، خط چین، پیوسته، موجی، دوتایی و غیره) تنظیم می‌کند.text-decoration-thickness: ضخامت زینت‌دهی متن را تنظیم می‌کند.
<html>
<head>
</head>
<body>
<h2>Text Decoration</h2>
<p style="text-decoration: overline solid red 5px;">Overline text decoration.</p>
<p style="text-decoration: line-through solid green 1px;">Line-through text decoration.</p>
<p style="text-decoration: underline dashed 2pt blue;">Underline text decoration.</p>
</body>
</html>در این مثال، سه پاراگراف با استفاده از ویژگی text-decoration طراحی شده‌اند تا انواع مختلفی از زینت‌دهی متن را نمایش دهند، از جمله خط بالایی (overline)، خط خورده (line-through) و خط زیرین (underline)، همراه با رنگ، استایل و ضخامت مختلف.
ویژگی text-decoration-skip
ویژگی text-decoration-skip مشخص می‌کند کدام قسمت از محتوای عنصر باید از تأثیر زینت‌دهی متن صرف نظر شود.
این ویژگی می‌تواند از مقادیر زیر استفاده کند:
none: هیچ چیز را نادیده نمی‌گیرد و زینت‌دهی متن برای تمام محتوای متن اعمال می‌شود.objects: کل جعبه حاشیه عنصر را نادیده می‌گیرد، مانند برای یک تصویر یا inline-block.spaces: همه فاصله‌ها را نادیده می‌گیرد.leading-spaces: همان‌طور که فضای شروعی نادیده می‌گیرد.trailing-spaces: همان‌طور که فضای پایانی نادیده می‌گیرد.edges: لبه‌هایی مانند شروع و پایان شکاف‌های متن را کمی نادیده می‌گیرد. زیرخط‌های جداگانه برای عناصر مجاور.box-decoration: زینت‌دهی متن را بر محدوده‌های حاشیه، حاشیه و اندازه‌گیری جعبه از یک جعبه نادیده می‌گیرد.initial: مقدارtext-decoration-skipرا به مقدار پیش‌فرض آن (none) تنظیم می‌کند.inherit: مقدارtext-decoration-skipرا از عنصر والدین به ارث می‌برد.unset: هرگونه مقدارtext-decoration-skipتنظیم شده قبلی را حذف می‌کند.
این ویژگی تا کنون تنها در Safari پشتیبانی می‌شود.
در مثال زیر، دو پاراگراف با استفاده از ویژگی text-decoration-skip طراحی شده‌اند تا نشان دهند کدام قسمت از متن از تأثیر زینت‌دهی متن صرف نظر می‌شود، از جمله حواف (edges) و فاصله‌ها (spaces).
<html>
<head>
</head>
<body>
<h2>Text Decoration Skip</h2>
<p style="font-size:3em; text-decoration: underline solid red 5px; text-decoration-skip: edges;">Observe the edges of the line.</p>
<p style="font-size:3em; text-decoration: underline solid green 5px; text-decoration-skip: spaces;">Its text decoration skip spaces.</p>
</body>
</html>ویژگی text-decoration-skip-ink
ویژگی text-decoration-skip-ink نحوه رسم خطوط زینت‌دهی متن بر روی اسناد و کاهنده‌های گلیف یا حروف را مشخص می‌کند.
این ویژگی می‌تواند از مقادیر زیر استفاده کند:
none: هیچ چیز را نادیده نمی‌گیرد و زینت‌دهی متن برای تمام محتوای متن اعمال می‌شود.auto: جعبه حاشیه عنصر را نادیده می‌گیرد، مانند برای یک تصویر یا inline-block.all: همه فاصله‌ها را نادیده می‌گیرد. (تنها در Firefox و Safari پشتیبانی می‌شود)
در مثال زیر، دو پاراگراف با استفاده از ویژگی text-decoration-skip-ink طراحی شده‌اند تا نشان دهند که چگونه کاهنده‌های حروف (p، g) و افزاینده (h) با این ویژگی تحت تأثیر قرار می‌گیرند.
<html>
<head>
</head>
<body>
<h2>Text Decoration Skip Ink</h2>
<p style="font-size:3em; text-decoration: underline solid red 5px; text-decoration-skip-ink: auto;">paragraph.</p>
<p style="font-size:3em; text-decoration: underline solid green 5px; text-decoration-skip-ink: none;">paragraph.</p>
</body>
</html>ویژگی text-transform
ویژگی text-transform برای تغییر ظاهر متن با تبدیل آن به روش‌های مختلف استفاده می‌شود. می‌توان از آن برای تبدیل متن به حروف بزرگ، حروف کوچک، بزرگ کردن اولین حرف هر کلمه، یا حتی بزرگ کردن تمام حروف استفاده کرد.
ویژگی text-transform می‌تواند یکی از مقادیر زیر را داشته باشد:
lowercase: تمام متن را به حروف کوچک تبدیل می‌کند.uppercase: تمام متن را به حروف بزرگ تبدیل می‌کند.capitalize: اولین حرف هر کلمه را بزرگ می‌کند.none: هیچ تغییری در متن اعمال نمی‌شود.full-width: تمام حروف را به نسخه با عرض کامل خود تبدیل می‌کند.full-size-kana: تمام حروف کوچک Kana را به حروف Kana با اندازه کامل تبدیل می‌کند. این به طور خاص برای متن حاشیه‌نویسی<ruby>استفاده می‌شود.
مهم است که توجه داشته باشید که text-transform بر روی نمایش بصری متن تأثیر می‌گذارد بدون این که محتوای HTML واقعی را تغییر دهد.
در ادامه یک مثال آورده شده است:
<html>
<head>
<style>
div {border:2px solid red; padding: 5px; margin: 2px; width: 300px;}
span {text-transform: full-width;}
strong {width: 100%;}
</style>
</head>
<body>
<h2>Text Transform</h2>
<div>
<p style="text-: capitalize;">Text transformed.</p>
</div>
<div>
<p style="text-transform: lowercase;">Text transformed.</p>
</div>
<div>
<p style="text-transform: uppercase;">Text transformed.</p>
</div>
<div>
<p style="text-transform: none;">Text transformed.</p>
</div>
<div>
<strong>
<span>TRANSFORMATION OF TEXT AS FULL-WIDTH.</span>
</strong>
</div>
</body>
</html>ویژگی text-emphasis
ویژگی text-emphasis در CSS به طریقی برای اعمال نشانه‌های تأکید بر یک بلاک متن استفاده می‌شود. این نشانه‌ها معمولاً برای برجسته کردن محتوای خاص یا نشان دادن تلفظ یا تاکید در برخی زبان‌ها استفاده می‌شوند.
این ویژگی به طراح اجازه می‌دهد تا تأکید را بر روی حروف یا عبارت‌های خاص داخل یک بلاک متن اعمال کند.
این ویژگی اختصاری برای text-emphasis-style و text-emphasis-color است.
ویژگی text-emphasis می‌تواند یکی از مقادیر زیر را داشته باشد:
none: هیچ نشانه تأکیدی اعمال نمی‌شود.filled: بلاک را با رنگ جامد پر می‌کند. مقدار پیش‌فرض.open: شکل را به صورت تهی تنظیم می‌کند.dot: نشانه‌ها به صورت دایره‌های کوچک نمایش داده می‌شوند، باشکل پر یا تهی.circle: نشانه‌ها به صورت دایره‌های بزرگ نمایش داده می‌شوند، با شکل پر یا تهی. شکل پیش‌فرض در نوشتن افقی.double-circle: نشانه‌ها به صورت دایره‌های دوگانه نمایش داده می‌شوند، باشکل پر یا تهی.triangle: نشانه‌ها به صورت مثلث‌ها نمایش داده می‌شوند، باشکل پر یا تهی.sesame: نشانه‌ها به صورت سسام‌ها (~) نمایش داده می‌شوند، با شکل پیش‌فرض در نوشتن عمودی.<string>: نشانه‌ها به عنوان مقدار رشته‌ای منتقل می‌شوند.<color>: رنگ نشانه را تنظیم می‌کند.
در زیر یک مثال آورده شده است:
<html>
<head>
</head>
<body>
<h2>Text Emphasis</h2>
<p style="text-emphasis: dot;">The emphasis is a dot.</p>
<p style="text-emphasis: circle red;">The emphasis is a circle.</p>
<p style="text-emphasis: triangle;">The emphasis is a triangle.</p>
<p style="text-emphasis: none;">No emphasis to the text.</p>
<p style="text-emphasis: double-circle green;">The emphasis is a double-circle.</p>
<p style="text-emphasis: open;">The emphasis is open.</p>
<p style="text-emphasis: sesame;">The emphasis is a sesame.</p>
<p style="text-emphasis: 'u' #00ff00;">The emphasis is a string.</p>
</body>
</html>ویژگی text-indent
ویژگی text-indent تورفتگی فضایی بین حاشیه و اولین خط متن است. تورفتگی مناسب خوانایی و روشنایی متن در یک صفحه را افزایش می‌دهد.
CSS همچنین یک ویژگی برای تنظیم تورفتگی متن ارائه می‌دهد و آن text-indent است. مقادیر زیر می‌توانند به این ویژگی منتقل شوند:
- length: هر طول خاص {پیکسل (px)، نقطه (pt)، em ها (em)، و غیره}. مقدار پیش‌فرض 0 است.
- percentage (%): مقدار منتقل شده به نسبت به درصد عرض عنصر والد است.
- each-line: بر روی خط اول یک بلاک متن و هر خط پس از یک شکست خط اجباری تأثیر می‌گذارد.
- hanging: تورفتگی معکوس می‌شود، به جز برای خط اول.
- initial: text-indent را به مقدار پیش‌فرض آن تنظیم می‌کند.
- inherit: اجازه می‌دهد که مقدار text-indent از عنصر والد به ارث برده شود.
توجه: تا کنون، مقادیر each-line و hanging توسط هیچ یک از مرورگرها پشتیبانی نمی‌شوند.
در زیر یک مثال آورده شده است:
<html>
<head>
</head>
<body>
<h2>Text indentation</h2>
<p style="text-indent: 2cm;">Text indentation at 2 cm.</p>
<p style="text-indent: 2in;">Text indentation at 2 inches.</p>
<p style="text-indent: 20%;">Text indentation at 20%.</p>
</body>
</html>ویژگی letter-spacing
تنظیم فاصله بین حروف در یک متن، تأثیر بسزایی بر خوانایی و زیبایی کلی صفحه وب دارد.
ویژگی letter-spacing برای تنظیم فاصله بین حروف متن استفاده می‌شود. فضای بین حروف می‌تواند یا افزایش یابد یا کاهش یابد.
مقادیر ممکن برای این ویژگی عبارتند از:
- normal: مقدار پیش‌فرض و نمایانگر مقدار معمولی فاصله بین حروف است.
- length: هر طول خاص {پیکسل (px)، نقطه (pt)، em ها (em)، یا درصدها (%)}.
- initial: letter-spacing را به مقدار پیش‌فرض آن تنظیم می‌کند.
- inherit: اجازه می‌دهد که مقدار letter-spacing از عنصر والد به ارث برده شود.
توجه: فاصله واقعی بین حروف ممکن است به توجه به فونت استفاده شده متغیر باشد.
در زیر یک مثال آورده شده است:
<html>
<head>
</head>
<body>
<h2>Letter spacing</h2>
<p style="letter-spacing: normal;">Letter spacing normal.</p>
<p style="letter-spacing: 5px;">Letter spacing increased.</p>
<p style="letter-spacing: -1px;">Letter spacing decreased.</p>
</body>
</html>ویژگی word-spacing
ویژگی word-spacing در CSS برای تنظیم فاصله بین کلمات در یک قطعه متن، مانند ویژگی letter-spacing استفاده می‌شود. این ویژگی word-spacing مقادیر زیر را می‌پذیرد:
- normal: مقدار پیش‌فرض و نمایانگر مقدار معمولی فاصله بین کلمات است.
- length: هر طول خاص {پیکسل (px)، نقطه (pt)، em ها (em)، یا درصدها (%)}.
- initial: word-spacing را به مقدار پیش‌فرض آن تنظیم می‌کند.
- inherit: اجازه می‌دهد که مقدار word-spacing از عنصر والد به ارث برده شود.
در زیر یک مثال آورده شده است:
<html>
<head>
</head>
<body>
<h2>Word spacing</h2>
<p style="word-spacing: normal;">Word spacing normal.</p>
<p style="word-spacing: 15pt;">Word spacing increased.</p>
<p style="word-spacing: -1px;">Word spacing decreased.</p>
</body>
</html>white space
در CSS، white space به هر فضای خالی یا نویسه‌ای اشاره دارد که نماد قابل مشاهده ای ندارد یا هیچ تأثیری بر معنای متن ندارد. در زیر مواردی که ممکن است با white space روبه‌رو شوید را مشاهده می‌کنید:
-
فاصله‌های سربرگ: این‌ها فاصله‌هایی هستند که قبل از اولین نویسه قابل رویت یک خط ظاهر می‌شوند، در حالی که فاصله‌های سرانجامی پس از آخرین نویسه قابل رویت ظاهر می‌شوند.
-
فضای سفید، معمولاً به شکل شکست‌های خط یا پاراگراف: فضای سفید اغلب برای اهداف تورفتگی استفاده می‌شود، به ویژه در زبان‌های برنامه‌نویسی یا هنگام نوشتن متن‌های ساختاری.
-
نویسه‌های فضای غیرقابل شکست، مانند موجودیت HTML nbsp ( ): این نویسه‌ها فضای خالی را نشان می‌دهند که نمی‌توانند توسط مرورگرها شکسته شوند.
-
فضای سفید متوالی: در متن، فضاهای سفید متوالی به عنوان یک فضای خالی تلقی می‌شوند. به عنوان مثال، فشردن کلید فضای خالی چند بار.
مقادیر مختلف برای white-space عبارتند از:
-
normal: مقدار پیش‌فرض، جایی که دنباله‌هایی از فضای سفید جمع می‌شوند و متن هنگام رسیدن به عرض در دسترس به خط بعدی منتقل می‌شود.
-
nowrap: فضای سفید جمع شده، و متن به خط بعدی منتقل نمی‌شود. ادامه خط در همان خط است، بیش از عرض موجود.
-
pre: فضای سفید را دقیقاً به شکلی که در کد HTML وجود دارد حفظ می‌کند. شکست خط و فضاهای سفید چندگانه به همان شکل نمایش داده می‌شود.
-
pre-wrap: شکست خط و فضای سفید را به همان شکل که در کد HTML وجود دارد حفظ می‌کند.
-
pre-line: فضای سفید را جمع می‌کند، اما شکست خط‌ها را حفظ می‌کند. متن هنگام رسیدن به عرض در دسترس به خط بعدی منتقل می‌شود.
-
break-spaces: دنباله‌های فضای سفید را جمع می‌کند، اما شکست خط‌ها و فرصت‌های شکست را حفظ می‌کند. این یک مقدار آزمایشی است و ممکن است توسط همه مرورگرها پشتیبانی نشود.
مقادیر فوق می‌توانند با ویژگی‌های CSS دیگری مانند overflow و text-overflow ترکیب شوند تا رفتار فضای سفید را کنترل کنند.
در زیر یک مثال آورده شده است:
<html>
<head>
<style>
div {border:2px solid red; padding: 5px; margin: 2px; width: 300px; height: 100px;}
</style>
</head>
<body>
<h2>White Space</h2>
<h4>normal</h4>
<div>
<p style="white-space: normal;">white space refers to any empty space or characters that do not display
a visible symbol or have any effect on the text's meaning</p>
</div>
<h4>pre</h4>
<div>
<p style="white-space: pre;">white space refers to any empty space or characters that do not display
a visible symbol or have any effect on the text's meaning</p>
</div>
<h4>nowrap</h4>
<div>
<p style="white-space: nowrap;">white space refers to any empty space or characters that do not display
a visible symbol or have any effect on the text's meaning</p>
</div>
<h4>pre-wrap</h4>
<div>
<p style="white-space: pre-wrap;">white space refers to any empty space or characters that do not display
a visible symbol or have any effect on the text's meaning</p>
</div>
<h4>pre-line</h4>
<div>
<p style="white-space: pre-line;">white space refers to any empty space or characters that do not display
a visible symbol or have any effect on the text's meaning</p>
</div>
<h4>break-spaces</h4>
<div>
<p style="white-space: break-spaces;">white space refers to any empty space or characters that do not display
a visible symbol or have any effect on the text's meaning</p>
</div>
</body>
</html>ترکیب فضای سفید (White Space Collapse)
خصوصیت white-space-collapse بررسی می‌کند که چگونه فضای سفید داخل یک عنصر خورده می‌شود.
ویژگی white-space یک کلمه‌نویسی برای ویژگی‌های white-space-collapse و text-wrap است.
مقادیر مختلف برای white-space-collapse به شرح زیر است:
-
collapse: دنباله‌های فضای سفید کاهش می‌یابند.
-
preserve: دنباله‌های فضای سفید و نویسه‌های شکست بخش حفظ می‌شوند.
-
preserve-breaks: دنباله‌های فضای سفید کاهش می‌یابند و نویسه‌های شکست بخش حفظ می‌شوند.
-
preserve-spaces: دنباله‌های فضای سفید حفظ می‌شوند و نویسه‌های شکست بخش و تب‌ها به فضای خالی تبدیل می‌شوند.
-
break-spaces: مشابه ‘حفظ’. فضاهای متوالی، تب‌ها و شکست‌های خط به یک فضای خالی تبدیل می‌شوند، اما یک فضای خالی به شکل خود باقی می‌ماند.
خصوصیت white-space-collapse در حال حاضر توسط مرورگرها به طور جزئی پشتیبانی می‌شود، زیرا هنوز در حال آزمایش است.
سایه‌ها
ویژگی text-shadow برای افزودن اثر سایه به متن استفاده می‌شود. این ویژگی به شما امکان می‌دهد تا رنگ، آفست، شعاع ماتی و شعاع گسترش سایه را مشخص کنید.
با استفاده از این ویژگی، می‌توانید اثرات متنوعی مانند ایجاد ظاهر سه‌بعدی یا پرنور، یا افزودن تاکید و عمق به متن را ایجاد کنید.
این ویژگی ترکیبی از آفست‌های X و Y، شعاع ماتی و شعاع گسترش را مشخص می‌کند. هیچ ترتیب ثابتی برای مقادیر تعیین نشده است. این به عنوان یک لیست مقادیر سایه‌های جداگانه با کاما جدا شده است.
ویژگی text-shadow مقادیر زیر را قبول می‌کند:
-
<color>: رنگ سایه را مشخص می‌کند. این اختیاری است و می‌توانید قبل یا بعد از مقادیر آفست را مشخص کنید. هر رنگی مانند نام، مقدار HEX یا RGB می‌تواند مشخص شود.
-
<offset-x><offset-y>: هر مقدار طولی که مقادیر x و y را مشخص می‌کند. مقدار x فاصله افقی سایه از متن را نشان می‌دهد و مقدار y فاصله عمودی سایه از متن را نشان می‌دهد. اگر مقادیر x و y برابر 0 باشند، سایه پشت متن ظاهر می‌شود.
-
<blur-radius>: هر مقدار طولی که مقدار شعاع ماتی را مشخص می‌کند. این اختیاری است. برای بزرگتر دیده شدن اثر ماتی، باید مقدار بیشتری را فراهم کنید. اگر هیچ مقداری ارائه نشود، به عنوان 0 در نظر گرفته می‌شود.
در ادامه یک مثال آورده شده است:
<html>
<head>
</head>
<body>
<h2>Text Shadow</h2>
<p style="text-shadow: 2px 5px yellow;"> Simple Text shadow </p>
<p style="text-shadow: 5px 5px 2px #ff00ff;">Text shadow with blur radius</p>
<p style="text-shadow: 1px 1px 2px green, 0 0 1em yellow, 0 0 0.2em red;">Multiple shadows</p>
<p style="text-shadow: 0px 0px 10px rgb(26, 69, 105); ">Text shadow with RGB colors</p>
</body>
</html>
این مثال چندین نمونه از افزودن سایه به متن را نشان می‌دهد، از جمله یک سایه ساده، یک سایه با شعاع ماتی، چندین سایه و یک سایه با رنگ RGB.
ویژگی line-break
ویژگی line-break در CSS برای تعیین نحوه شکستن خطوط در یک بلاک متن مفید است.
مقادیری که این ویژگی می‌تواند داشته باشد به شرح زیر است:
-
auto: قانون پیش‌فرض شکست خط اعمال می‌شود.
-
loose: کمترین قانون شکست خط اعمال می‌شود.
-
normal: رایج‌ترین قانون شکست خط اعمال می‌شود.
-
strict: سخت‌ترین قانون شکست خط اعمال می‌شود.
-
anywhere: به مرورگر اجازه داده می‌شود تا هر جایی، در هر کاراکتری قانون شکست خط را اعمال کند.
-
initial: مقدار اولیه تنظیم می‌شود.
-
inherit: مقدار المان والد را ارث‌بری می‌کند.
در ادامه، یک مثال آورده شده است:
<html>
<head>
<style>
p {
border: 2px solid blue;
width: 200px;
}
.normal {
line-break: normal;
}
.loose {
line-break: loose;
}
.strict {
line-break: strict;
}
.auto {
line-break: auto;
}
.anywhere {
line-break: anywhere;
}
</style>
</head>
<body>
<h2>Line Break</h2>
<p class="normal">Normal - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text.</p>
<p class="loose">Loose - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
<p class="strict">Strict - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
<p class="auto">Auto - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
<p class="anywhere">Anywhere - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
</body>
</html>
این مثال نحوه تعیین نحوه شکستن خطوط در یک بلاک متن را نشان می‌دهد با استفاده از مقادیر مختلف line-break.
ویژگی word-break
ویژگی word-break در CSS برای تعیین اینکه کلمات باید چگونه شکسته یا در صورت عبور از عرض موجود عنصر شکسته شوند، استفاده می‌شود. این ویژگی تعیین می‌کند که مرورگر آیا باید به کلمات اجازه دهد که در هر نقطه شکسته شوند یا آیا آنها را با هم نگه دارد.
مقادیر زیر را می‌تواند این ویژگی داشته باشد:
-
normal: از قانون استاندارد شکست خط استفاده می‌کند.
-
break-all: شکست کلمه بین هر دو نویسه، به منظور جلوگیری از سرریز شدن، اعمال می‌شود.
-
keep-all: شکست کلمه برای متون چینی، ژاپنی و کره‌ای (CJK) استفاده نمی‌شود؛ و برای زبان‌های دیگر یا متون غیر-CJK، رفتار مانند استاندارد است.
-
break-word: این رفتار مانند overflow-wrap: anywhere است، یعنی شکست کلمه در هر کلمه‌ای اعمال می‌شود. اما این مقدار قدیمی شده است.
در ادامه، یک مثال آورده شده است:
<html>
<head>
<style>
p {
border: 2px solid green;
width: 200px;
}
.normal {
word-break: normal;
}
.all {
word-break: break-all;
}
.keep {
word-break: keep-all;
}
.wordbreak {
word-break: break-word;
}
</style>
</head>
<body>
<h2>Word Break</h2>
<p class="normal">normal - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
<p class="all">break-all - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
<p class="keep">keep-all - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
<p class="wordbreak">break-word - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
</body>
</html>
در این مثال، مختلف مقادیر word-break به کار گرفته شده‌اند تا نحوه شکستن کلمات در بلاکی از متن نمایش داده شود.
خلاصه
این فهرستی از ویژگی‌های CSS برای استایل دهی به متن است:
- color: این ویژگی رنگ متن را تعیین می‌کند.
- text-align: ترتیب متن را تنظیم می‌کند.
- text-align-last: ترتیب آخرین خط یک بلاک متن را تعیین می‌کند.
- vertical-align: تنظیم عمودی متن را تعیین می‌کند.
- direction: جهت متن را تنظیم می‌کند.
- text-indent: تنظیم تورفتگی اولین خط متن را تعیین می‌کند.
- letter-spacing: فاصله بین حروف یک کلمه را مشخص می‌کند.
- word-spacing: فاصله بین کلمات در یک بلاک متن را مشخص می‌کند.
- white-space: جریان فضای سفید درون متن در یک المان را کنترل می‌کند.
- text-decoration: یک ویژگی اختصاری برای تنظیم زینت متن است.
- text-transform: متن را به حروف بزرگ، کوچک یا با حروف اول بزرگ تغییر می‌دهد.
- text-emphasis: نشانه‌های تاکید به متن اعمال می‌کند.
- text-shadow: سایه به متن اضافه می‌کند.
- line-break: کنترل می‌کند چگونه قانون شکست خط را تعیین کنید.
- word-break: کنترل می‌کند چگونه قانون شکست کلمه را تعیین کنید.
- text-effects: افکت‌های ویژه بصری را به متن اضافه می‌کند.
- text-combine-upright: واحدهای نویسه‌ای تایپوگرافیک را ترکیب می‌کند.
- text-orientation: جهت نویسه‌های متن را در یک خط تعیین می‌کند.
- text-underline-offset: افکت‌های ویژه بصری را به متن اضافه می‌کند.
- text-overflow: کنترل می‌کند چگونه محتوای مخفی بازیافت مخفی به کاربران نمایش داده شود.
هر یک از این ویژگی‌ها برای استایل دهی به متن‌ها در CSS مورد استفاده قرار می‌گیرند و برای تغییر ظاهر و نمایش متن‌ها در صفحات وب بسیار مفید هستند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام