تنسيق النصوص في لغة CSS
توفر لغة CSS العديد من الخصائص التي تتيح لنا تحديد أنماط نصية مختلفة مثل اللون ، والمحاذاة ، والتباعد وما إلى ذلك بسهولة وفعالية.
خصائص النص الأكثر إستخداماً هي: text-align و text-decoration و text-transform و text-indent و line-height و letter-spacing و word-spacing والمزيد. تمنحنا هذه الخصائص تحكمًا دقيقًا في المظهر المرئي للرموز والحروف والكلمات والمسافات وما إلى ذلك.
دعنا نرى كيفية تحديد خصائص النص لعنصر بمزيد من التفاصيل.
Text Color
يتم تحديد لون النص من خلال الخاصية color.
في المثال التالي سيتم تحديد لون النص لصفحة الويب كاملة:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تحديد لون النص في لغة CSS</title>
<style>
h1 {
color: #ff0000;
}
p {
color: green;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a simple paragraph of text.</p>
</body>
</html>
المخرجات
على الرغم من أن الخاصية color تبدو على أنها جزء من نص في لغة CSS ، ولكنها في الواقع خاصية قائمة بذاتها في CSS. راجع درس الألوان Colors لمعرفة المزيد حول هذه الخاصية.
Text Alignment
تُستخدم الخاصية text-align لتحديد المحاذاة الأفقية للنص.
يمكن محاذاة النص بأربع طرق: إلى اليسار left أو اليمين right أو الوسط centre أو الضبط justified.
دعونا نلقي نظرة على المثال التالي لفهم كيفية عمل هذه الخاصية .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تحديد المحاذاة الأفقية للنص</title>
<style>
h1 {
text-align: center;
}
p {
width: 300px;
text-align: justify;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis.</p>
</body>
</html>
المخرجات
عند ضبط محاذاة النص بإستخدام القيمة justify ، يتم تمديد كل سطر بحيث يكون لكل سطر عرض متساوٍ (باستثناء السطر الأخير) ، وتكون الهوامش اليمنى واليسرى مستقيمتين. تستخدم هذه المحاذاة بشكل عام في المنشورات مثل المجلات والصحف.
Text Decoration
يتم استخدام الخاصية text-decoration لتحديد أو إزالة خطوط الزخرفة decorative lines من النص.
تقبل هذه الخاصية عادةً إحدى القيم التالية: underline و overline و line-through و none. يجب علينا تجنب استخدام القيمة underline لغير عنصر الرابط التشعبي ، لأن ذلك قد يربك الزائر.
دعنا نجرب المثال التالي لفهم كيفة عمل هذه الخاصية:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text Decoration</title>
<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>
المخرجات
إزالة التسطير الافتراضي من الروابط التشعبية
يتم استخدام الخاصية text-decoration لإزالة التسطير الافتراضي من الروابط التشعبية في صفحات الويب. يمكننا أيضًا اضافة بعض التنسيقات المميزة الأخرى لإبرازه عن النص العادي ، على سبيل المثال ، باستخدام الخاصية borderيمكننا اضافة حد اسفل العنصر بشكل خط منقط dotted border.
ولفهم كيفية القيام بذلك دعنا نلقي نظرة على المثال التالي :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>إزالة التسطير الافتراضي من الروابط التشعبية</title>
<style>
a {
text-decoration: none;
border-bottom: 1px dotted;
}
a:hover {
border-bottom: none;
}
</style>
</head>
<body>
<p>Place your mouse pointer <a href="#">over me!</a></p>
</body>
</html>
المخرجات
يحتوي كل متصفح ويب على ورقة أنماط مضمنة built-in style sheet لتطبيق انماط CSS الافتراضية على عناصر HTML.
عند إنشاء رابط تشعبي داخل صفحة الويب يقوم المتصفح بتطبيق قواعد النمط الافتراضية والتي بدورها تقوم بتسطيره تلقائيًا وتطبق لونًا أزرق ، بحيث يمكن للمستخدم رؤية النص القابل للنقر بوضوح.
Text Transformation
يتم استخدام الخاصية text-transform لتحديد حالة الأحرف التي سيتم عرض النص بها.
غالبًا ما تتم كتابة النص باللغة الانجليزية في حالة مختلطة من الاحرف الصغيرة والاحرف الكبيرة. ومع ذلك ، في حالات معينة قد ترغب في عرض النص الخاص بك في حالة مختلفة تمامًا. باستخدام هذه الخاصية ، يمكنك تغيير محتوى النص الخاص بالعنصر إلى أحرف كبيرة أو صغيرة ، أو تكبير الحرف الأول من كل كلمة دون تعديل النص الأصلي.
دعنا نجرب المثال التالي لفهم كيفة عمل هذه الخاصية:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text Transformation</title>
<style>
h1 {
text-transform: uppercase;
}
h2 {
text-transform: capitalize;
}
h3 {
text-transform: lowercase;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
المخرجات
Text Indentation
يتم استخدام الخاصية text-indent لتحديد المسافة البادئة للسطر الأول من النص الفقرة النصية. يتم ذلك عادةً عن طريق إدراج مسافة فارغة قبل السطر الأول من النص.
يمكن تحديد حجم المسافة البادئة باستخدام النسبة المئوية % وقيم المسافة بالبكسل و ems وما إلى ذلك.
في المثال التالي ستتم اضافة مسافة بادئة للسطر الأول من الفقرة بمقدار 100px .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text Indentation</title>
<style>
p {
text-indent: 100px;
}
</style>
</head>
<body>
<h1>CSS Text Indentation</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis.</p>
</body>
</html>
المخرجات
Letter Spacing
يتم استخدام الخاصية letter-spacing لإضافة تباعد إضافي بين أحرف النص.
يمكن أن تأخذ هذه الخاصية قيمة بالبكسل او ems إلخ. وقد تقبل أيضًا القيم السالبة. عند تحديد تباعد الأحرف ، تشير القيمة إلى التباعد بالإضافة إلى المسافة الافتراضية بين الأحرف.
دعنا نجرب المثال التالي لفهم كيفة عمل هذه الخاصية:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Letter Spacing</title>
<style>
h1 {
letter-spacing: -3px;
}
p {
letter-spacing: 10px;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a simple paragraph of text.</p>
</body>
</html>
المخرجات
Word Spacing
يتم استخدام الخاصية word-spacing لتحديد تباعد إضافي بين الكلمات.
يمكن لهذه الخاصية قبول القيمة بالبكسل او ems .... إلخ. يُسمح أيضًا بالقيم السالبة.
لنجرب المثال التالي لفهم كيفية عمل هذه الخاصية:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>word spacing</title>
<style>
p.one {
word-spacing: 20px;
}
p.two {
width: 150px;
word-spacing: 20px;
text-align: justify;
}
p.three {
word-spacing: 20px;
white-space: pre;
}
</style>
</head>
<body>
<p class="one">This is a normal paragraph.</p>
<hr>
<p class="two">Note that spacing between the words of this paragraph are varying in order to justify the text even if the value of word-spacing property is set to 20px.</p>
<hr>
<p class="three">Note that spacing between the words
of this paragraph are higher than the normal spacing
even if whitespace are preserved.</p>
</body>
</html>
المخرجات
يمكن أن يتأثر تباعد الكلمات بالقيمة justify للخاصية text-align أيضًا ، على الرغم من الحفاظ على المسافة البيضاء عند استخدام الخاصية white-space وإعطائها القيمة pre ، تتأثر المسافات بين الكلمات بخاصية word-spacing.
Line Height
يتم استخدام الخاصية line-height لتحديد ارتفاع سطر النص. وتستخدم هذه الخاصية بشكل كبير لتحديد المسافة بين أسطر النص.
يمكن أن تكون قيمة هذه الخاصية رقمًا أو نسبة مئوية % أو طولًا بالبكسل أو ems أو غير ذلك.
لنجرب المثال التالي لفهم كيفية عمل هذه الخاصية:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Line Height</title>
<style>
p {
line-height: 1.2;
border: 1px solid #00ff00;
}
div {
line-height: 200%;
border: 1px solid #ff0000;
}
</style>
</head>
<body>
<h1>Change the values to see how it works</h1>
<p>The <code>line-height</code> property sets the height between lines of text.<br> The line height of this paragraph is specified using number.</p>
<div>The <code>line-height</code> property sets the height between lines of text.<br> The line height of this paragraph is specified using percentage.</div>
</body>
</html>
المخرجات
عندما تكون القيمة رقمًا ، يتم حساب ارتفاع الخط عن طريق ضرب حجم خط العنصر في الرقم. بينما ، تكون النسبة المئوية مرتبطة بحجم خط العنصر.
إذا كانت قيمة الخاصية line-height أكبر من قيمة حجم الخط لعنصر ما ، فإن هذا الاختلاف يتم قطعه إلى النصف ويتم توزيعه بالتساوي على أعلى وأسفل مربع الخط.
لنلق نظرة على المثال التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Line Height</title>
<style>
p {
font-size: 14px;
line-height: 20px;
background-color: #f0e68c;
}
</style>
</head>
<body>
<h1>Change the values to see how it works.</h1>
<p>The <code>line-height</code> property sets the height between lines of text.<br> The line height of this paragraph is specified using pixels value.</p>
</body>
</html>
المخرجات
