CSS / النصوص
خصائص النصوص
توفر CSS العديد من الخصائص التي يمكنك استخدامها لتحسين طريقة ظهور النصوص و جعلها تظهر بالشكل الذي تريده بالضبط، فمثلاً يمكنك تغيير لون النص، تغيير إتجاه النص، عكس إتجاه الأحرف و غيرها من الأمور التي سنتعرف عليها في هذا الدرس.
TEXT FORMATTING
تحديد لون النص
لتلوين نص العنصر نستخدم الخاصية
في المثال التالي قمنا بجعل لون نص أي عنصر في الصفحة رمادي و جعلنا عنوانها يظهر بلون أزرق.
المثال الأول
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: gray;
}
h1 {
color: cadetblue;
}
</style>
</head>
<body>
<h1>CSS color</h1>
<p>color is used to set the color of the text.</p>
<p>Everything in the body have a gray color
but header have cadetblue color.</p>
</body>
</html>
في المثال التالي قمنا بتحديد لون نص العنصر بواسطة الخاصية
المثال الثاني
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #1e87f0;
background-color: #d8eafc;
padding: 10px;
}
</style>
</head>
<body>
<h1>CSS color and background-color</h1>
<p>color used to change text color.<br>
background-color used to change background color.</p>
</body>
</html>
تحديد إتجاه النص
لتحديد إتجاه النص أفقياً نستخدم الخاصية
| القيمة | معناها |
|---|---|
| لجعل النص يظهر من الجهة اليسرى. | |
| لجعل النص يظهر من الجهة اليمنى. | |
| لجعل النص يظهر في الوسط. | |
| إذا كان النص يتألف من أكثر من سطر فإنها تباعد بين الكلمات بشكل تلقائي لجعل الأسطر تظهر كأنها بنفس الطول. |
في المثال التالي قمنا ببناء كلاسات تستخدم لتحديد جهة ظهور النص.
المثال الأول
<!DOCTYPE html>
<html>
<head>
<style>
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<h1>CSS text-align</h1>
<p class="left">Aligned to left.</p>
<p class="center">Aligned to center.</p>
<p class="right">Aligned to right.</p>
</body>
</html>
في المثال التالي قمنا بجعل كلمات النص تتباعد بشكل تلقائي حتى تظهر على الأسطر الموضوعة فيه بنفس الطول.
المثال الثاني
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
border: 1px solid gray;
padding: 10px;
max-width: 200px;
}
</style>
</head>
<body>
<h1>CSS text-align: justify</h1>
<div>This example demonstrate how the justify property works.
As you notice, all lines except the last one are having the same long.</div>
</body>
</html>
تحديد إتجاه النص في آخر السطر
لجعل إتجاه النص في آخر السطر نستخدم الخاصية
في المثال التالي قمنا بجعل كلمات النص تتباعد بشكل تلقائي حتى تظهر على الأسطر الموضوعة فيه بنفس الطول بما فيها السطر الأخير.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-align-last: justify;
border: 1px solid gray;
padding: 10px;
max-width: 200px;
}
</style>
</head>
<body>
<h1>CSS text-align-last: justify</h1>
<div>This example demonstrate how the justify property works.
As you notice, all lines with the last one are having the same long.</div>
</body>
</html>
تحديد إتجاه الكتابة
تحديد إتجاه الكتابة أمر مهم جداً لجعل التنقيط و الترقيم أو مجرد النقاط، الفواصل، علامات الإستفهام تظهر بشكل مناسب مع إتجاه النص. فعلى سبيل المثال إن كنت ستعرض محتوى مكتوب باللغة العربية فيجب أن تحدد أن النص يجب أن يبدأ من يمين السطر و أن إتجاه الكتابة هو من اليمين إلى اليسار.
لتحديد إتجاه الكتابة نستخدم الخاصية
| القيمة | معناها |
|---|---|
| لتحديد أن إتجاه الكتابة هو من اليسار إلى اليمين. | |
| لتحديد أن إتجاه الكتابة هو من اليمين إلى اليسار. | |
| لجعل إتجاه الكتابة يعود لجهته الأساسية. | |
| لجعل إتجاه الكتابة يرث إتجاه كتابة الوسم الموجود فيه. |
في المثال التالي قمنا بتعريف كلاس يمكن استخدامه لجعل النص يظهر جهة اليمين و إتجاه الكتابة من اليمين إلى اليسار و قمنا بتجربته على نصوص عربية.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
.ar {
direction: rtl;
text-align: right;
}
</style>
</head>
<body>
<h1 class="ar">تغيير إتجاه النص في CSS</h1>
<p class="ar">أهلاً بك في موقع هرمش.</p>
<p class="ar">في موقع هرمش يمكنك تعلم التالي:</p>
<ul class="ar">
<li>اللغة الإنجليزية.</li>
<li>لغات البرمجة.</li>
<li>قواعد البيانات.</li>
<li>الخوارزميات و هياكل البيانات.</li>
</ul>
</body>
</html>
تحديد المسافات بين الأسطر و الكلمات
يمكنك تحديد المسافات بين أسطر النص، الكلمات الموجودة في كل سطر و المسافات بين الأحرف حتى تظهر بالشكل الذي تريده.
تحديد إرتفاع النص
لتحديد إرتفاع أسطر النص نستخدم الخاصية
في المثال التالي قمنا بجعل إرتفاع أسطر النص 30 بكسل.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
p {
line-height: 30px;
}
</style>
</head>
<body>
<h1>CSS line-height</h1>
<p>line-height property sets the height
of each line inside the element.<br>
Choosing the right line-height is very
important for user.</p>
</body>
</html>
توسيط النص عامودياً و أفقياً
في حال أردت عرض نص يـتألف من سطر واحد في الوسط تماماً أفقياً و عمودياً يمكنك استخدام الخاصية
في المثال التالي قمنا بتوسيط نص يـتألف من سطر واحد موضوع في صندوق له طول محدد.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
.centered {
height: 150px;
line-height: 150px;
text-align: center;
background: lightblue;
}
</style>
</head>
<body>
<h1>CSS center text horizonally and vertically</h1>
<p class="centered">Text in centered</p>
</body>
</html>
وضع مسافة في بداية النص
لوضع مسافة بمقدار محدد في بداية السطر الأول في النص نستخدم الخاصية
في المثال التالي قمنا بإضافة مسافة في بداية النص بمقدار 50 بكسل.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<h1>CSS text-indent</h1>
<p>First line start with indentation.<br>
Other lines have no indentation.</p>
</body>
</html>
تحديد المسافات بين الأحرف
لتحديد حجم المسافة بين أحرف النص نستخدم الخاصية
في حال وضعت لها قيمة أكبر من صفر فإن الأحرف سيتم إبعادها بالنسبة التي حددتها. أما إن وضعت قيمة أصغر من صفر فإنه سيتم تقريب الأحرف من بعضها بالنسبة التي حددتها.
في المثال التالي قمنا بتعريف كلاس يبعد أحرف النص عن بعضها بنسبة 5 بكسل و كلاس يقرّب أحرف النص من بعضها بنسبة 2 بكسل.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
.far-chars {
letter-spacing: 5px;
}
.close-chars {
letter-spacing: -2px;
}
</style>
</head>
<body>
<h1>CSS letter-spacing</h1>
<p class="far-chars">The characters are far from each other.</p>
<p class="close-chars">The characters are close to each other.</p>
</body>
</html>
تحديد المسافات بين الكلمات
لتحديد حجم المسافات بين كلمات النص نستخدم الخاصية
في حال وضعت لها قيمة أكبر من صفر فإن الكلمات سيتم إبعادها بالنسبة التي حددتها. أما إن وضعت قيمة أصغر من صفر فإنه سيتم تقريب الكلمات من بعضها بالنسبة التي حددتها.
في المثال التالي قمنا بتعريف كلاس يبعد كلمات النص عن بعضها بنسبة 8 بكسل و كلاس يقرّب كلمات النص من بعضها بنسبة 2 بكسل.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
.far-words {
word-spacing: 8px;
}
.close-words {
word-spacing: -2px;
}
</style>
</head>
<body>
<h1>CSS word-spacing</h1>
<p class="far-words">The characters are far from each other.</p>
<p class="close-words">The characters are close to each other.</p>
</body>
</html>
تحديد طريقة التعامل مع المسافات الفارغة
يمكنك تحديد طريقة عرض المسافات الفارغة الموجودة في النص باستخدام الخاصية
| القيمة | معناها |
|---|---|
| المسافات الفارغة الموضوعة وراء بعضها يتم دمجها كمسافة واحدة فقط، و هذه القيمة الإفتراضية. | |
| المسافات الفارغة الموضوعة وراء بعضها يتم دمجها كمسافة واحدة فقط، و تعرض المحتوى كله على سطر واحد و تنتقل لسطر آخر فقط في حال وجود الوسم |
|
| المسافات الفارغة يتم إبقاءها كما هي موضوعة بالضبط في النص كما هو الحال تماماً في الوسم |
|
| المسافات الفارغة الموضوعة وراء بعضها يتم دمجها كمسافة واحدة فقط، و النص يتم وضعه على أكثر من سطر إن تطلّب ذلك أو في حال استخدام الوسم |
|
| المسافات الفارغة يتم إبقاءها كما هي موضوعة بالضبط في النص، و النص يتم وضعه على أكثر من سطر إن تطلّب ذلك أو في حال استخدام الوسم |
|
| تعيد النص كما كان بالأساس. | |
| لجعل النص يرث طريقة ظهور الوسم الموضوع فيه. |
المثال التالي يوضح لك كيف يتعامل النص مع المسافات الفارغة بحسب القيمة التي نمررها للخاصية
مثال
<!DOCTYPE html>
<html>
<head>
<style>
p {
background: lightblue;
max-width: 200px;
padding: 10px;
}
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-line {
white-space: pre-line;
}
.pre-wrap {
white-space: pre-wrap;
}
</style>
</head>
<body>
<h1>CSS white-space</h1>
<h3>pre-normal</h3>
<p class="normal">Harmash is best website to learn programming</p>
<h3>nowrap</h3>
<p class="nowrap">Harmash is best website to learn programming</p>
<h3>pre</h3>
<p class="pre">Harmash is best website to learn programming</p>
<h3>pre-line</h3>
<p class="pre-line">Harmash is best website to learn programming</p>
<h3>pre-wrap</h3>
<p class="pre-wrap">Harmash is best website to learn programming</p>
</body>
</html>
تحديد محاذاة العناصر عمودياً
في حال كان النص يتضمن جزئيات بحاجة للظهور بشكل أعلى أو منخفض فهنا يمكنك تحديد محاذاة هذه الجزئيات باستخدام الخاصية
| القيمة | معناها |
|---|---|
| لجعل الوسم الموضوع في النص يظهر بمحاذاة أحرف السطر. | |
| لجعل الوسم الموضوع في النص يظهر بمحاذاة أحرف السطر من الأعلى. | |
| لجعل الوسم الموضوع في النص يظهر بمحاذاة أحرف السطر من الأسفل. | |
| لجعل الوسم الموضوع في النص يظهر بمحاذاة أدنى شيء موضوع في السطر. | |
| لجعل الوسم الموضوع في النص يظهر بمحاذاة أعلى شيء موضوع في السطر. | |
| لجعل الوسم الموضوع في النص يظهر عمودياً في منتصف السطر الموضوع فيه. | |
| لجعل الوسم الموضوع في النص يظهر بمحاذاة أدنى السطر الموضوع فيه. | |
| لجعل الوسم الموضوع في النص يظهر بمحاذاة أعلى السطر الموضوع فيه. | |
| لجعل الوسم الموضوع في النص يعود لمحاذاته الأساسية. | |
| لجعل الوسم الموضوع في النص يرث محاذاة الوسم الموجود فيه. | |
| نقصد بها وضع رقم بوحدة قياس محددة مثل |
|
| نقصد بها وضع رقم بالمئة يمثل مقدار محاذاة الوسم الموضوع في النص نسبةً لارتفاع النص الذي يتحدد بواسطة الخاصية |
في المثال التالي قمنا بوضع صورة نفسها عدة مرات بداخل النص و في كل مرة جعلناها تطبّق محاذاة مختلفة حتى تلاحظ الفرق.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
p {
background: lightgray;
font-size: 20px;
line-height: 40px;
}
.baseline {
vertical-align: baseline;
}
.text-top {
vertical-align: text-top;
}
.text-bottom {
vertical-align: text-bottom;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
.middle {
vertical-align: middle;
}
.sub {
vertical-align: sub;
}
.super {
vertical-align: super;
}
.length-positive {
vertical-align: 10px;
}
.length-negative {
vertical-align: -10px;
}
.percentage-positive {
vertical-align: 15%;
}
.percentage-negative {
vertical-align: -15%;
}
</style>
</head>
<body>
<h1>CSS vertical-align</h1>
<p><img class="baseline" src="/tutorials/css/text/square.png"/> baseline</p>
<p><img class="text-top" src="/tutorials/css/text/square.png"/> text-top</p>
<p><img class="text-bottom" src="/tutorials/css/text/square.png"/> text-bottom</p>
<p><img class="top" src="/tutorials/css/text/square.png"/> top</p>
<p><img class="bottom" src="/tutorials/css/text/square.png"/> bottom</p>
<p><img class="middle" src="/tutorials/css/text/square.png"/> middle</p>
<p><img class="super" src="/tutorials/css/text/square.png"/> super</p>
<p><img class="sub" src="/tutorials/css/text/square.png"/> sub</p>
<p><img class="length-positive" src="/tutorials/css/text/square.png"/> length-positive</p>
<p><img class="length-negative" src="/tutorials/css/text/square.png"/> length-negative</p>
<p><img class="percentage-positive" src="/tutorials/css/text/square.png"/> percentage-positive</p>
<p><img class="percentage-negative" src="/tutorials/css/text/square.png"/> percentage-negative</p>
</body>
</html>
تحويل أحرف النص
يمكنك تحويل أحرف النص الأجنبية لأحرف صغيرة، أحرف كبيرة، أو تحويل الأحرف الأولى من الكلمات فقط لأحرف كبيرة باستخدام الخاصية
| القيمة | معناها |
|---|---|
| تحول أحرف النص لأحرف كبيرة ( Capital Letters ). | |
| تحول أحرف النص لأحرف صغيرة ( Small Letters ). | |
| تحول الأحرف الأولى في الكلمات فقط لأحرف كبيرة. | |
| لا تفعل أي شيء للأحرف، و هذه القيمة الإفتراضية. |
المثال التالي يوضح لك كيف تتحول أحرف النص بحسب القيمة التي نمررها للخاصية
مثال
<!DOCTYPE html>
<html>
<head>
<style>
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>CSS text-transform</h1>
<p class="uppercase">This text is transformed to uppercase.</p>
<p class="lowercase">This text is transformed to LOWERCASE.</p>
<p class="capitalize">This text is transformed to capitalize.</p>
</body>
</html>
زخرفة النص
زخرفة النص يقصد بها إظهار خط تحت الكلام، فوق الكلام، أو على الكلام ليبدو كأنه محذوف، إظهار خط تحت الروابط الموضوعة في النص و غيرها من الأمور التي يمكنك فعلها.
إظهار خط
يمكنك إظهار خط تحت، فوق أو على النص باستخدام الخاصية
| القيمة | معناها |
|---|---|
| تظهر خط فوق النص. | |
| تظهر خط تحت النص. | |
| تظهر خط على النص. | |
| لإزالة أي خط موضع للنص. |
المثال التالي يوضح لك كيف تظهر خط فوق النص، خط تحت النص، خط على النص، بالإضافة إلى إظهار خط فوقه و تحته مع بعض.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
.overline {
text-decoration-line: overline;
}
.underline {
text-decoration-line: underline;
}
.line-through {
text-decoration-line: line-through;
}
.over-and-under-line {
text-decoration-line: overline underline;
}
</style>
</head>
<body>
<h1>CSS text-decoration-line</h1>
<p class="overline">line over text.</p>
<p class="underline">line under text.</p>
<p class="line-through">line through text.</p>
<p class="over-and-under-line">line over and under text.</p>
</body>
</html>
يفضّل عدم إظهار خط تحت الكلام إن لم يكن الكلام عبارة عن رابط.
تلوين الخط الموضوع في الكلام
يمكنك تلوين الخط سواء كان موضوع فوق، تحت أو على النص باستخدام الخاصية
في المثال التالي قمنا بتلوين جميع الخطوط التي أظهرناها في النص.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
.overline {
text-decoration-line: overline;
text-decoration-color: pruple;
}
.underline {
text-decoration-line: underline;
text-decoration-color: red;
}
.line-through {
text-decoration-line: line-through;
text-decoration-color: blue;
}
.over-and-under-line {
text-decoration-line: overline underline;
text-decoration-color: gray;
}
</style>
</head>
<body>
<h1>CSS text-decoration-color</h1>
<a class="overline">line over text.</a>
<p class="underline">line under text.</p>
<p class="line-through">line through text.</p>
<p class="over-and-under-line">line over and under text.</p>
</body>
</html>
تحديد شكل الخط
الخط الذي يمكن إظهاره في النص يمكن تحديد شكله باستخدام الخاصية
| القيمة | معناها |
|---|---|
| تظهر خط مستقيم. | |
| تظهر خط مزدوج. | |
| تظهر خط منقّط. | |
| تظهر خط متقطع. | |
| تظهر خط يشبه الموج. | |
| تعيد شكل الخط لشكله الأساسي. | |
| ترث شكل الخط من العنصر الموضوع فيه. |
المثال التالي يوضح لك كيف تظهر خط فوق النص، خط تحت النص، خط على النص، بالإضافة إلى إظهار خط فوقه و تحته مع بعض.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
.solid {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: blue;
}
.double {
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-color: blue;
}
.dotted {
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-color: gray;
}
.dashed {
text-decoration-line: underline;
text-decoration-style: dashed;
text-decoration-color: gray;
}
.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
</style>
</head>
<body>
<h1>CSS text-decoration-style</h1>
<p class="solid">solid line under the text.</p>
<p class="double">double line under the text.</p>
<p class="dotted">dotted line under the text.</p>
<p class="dashed">dashed line under the text.</p>
<p class="wavy">wavy line under the text.</p>
</body>
</html>
تحديد سمك الخط الموضوع في الكلام
يمكنك تحديد سمك الخط سواء كان موضوع فوق، تحت أو على النص باستخدام الخاصية
في المثال التالي قمنا بجعل الخط الموضوع تحت النص يظهر بسمك 5 بكسل.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-thickness: 5px;
}
</style>
</head>
<body>
<h1>CSS text-decoration-thickness</h1>
<h3>Subtitle with red underline</h3>
</body>
</html>
تحديد كل خصائص الخط بسطر واحد
لتحديد شكل، لون و سمك الخط الموضوع للنص بشكل مختصر أكتب
في المثال التالي قمنا بعرض خط أسفل النص، لونه أحمر، نوعه متموّج، و سمكه 0.8 بكسل.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
.wrong {
text-decoration: underline red wavy 0.8px;
}
</style>
</head>
<body>
<h1>CSS text-decoration</h1>
<p>I'm a web <span class="wrong">desinger</span></p>
</body>
</html>