خصائص CSS المتعلقة بالنص
توضح هذه المقالة خصائص CSS المتعلقة بالنصوص۔
يمكنك التعرف على كيفية استخدام وكتابة خصائص text-align وtext-decoration وtext-transform۔
YouTube Video
إنشاء HTML للمعاينة
css-text.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Text-Related CSS Properties</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-text.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>Text-Related CSS Properties</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Typography (Text-Related)</h2>
20 </header>
21 <article>
22 <h3>text-align</h3>
23 <section>
24 <header><h4>text-align: left</h4></header>
25 <section class="sample-view">
26 <p class="text-align-left">This is left-aligned text.</p>
27 </section>
28 <header><h4>text-align: center</h4></header>
29 <section class="sample-view">
30 <p class="text-align-center">This is center-aligned text.</p>
31 </section>
32 <header><h4>text-align: right</h4></header>
33 <section class="sample-view">
34 <p class="text-align-right">This is right-aligned text.</p>
35 </section>
36 <header><h4>text-align: justify</h4></header>
37 <section class="sample-view">
38 <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39 </section>
40 </section>
41 </article>
42 <article>
43 <h3>text-decoration</h3>
44 <section>
45 <header><h4>text-decoration: underline</h4></header>
46 <section class="sample-view">
47 <p class="text-decoration-underline">This text has an underline.</p>
48 </section>
49 <header><h4>text-decoration: overline</h4></header>
50 <section class="sample-view">
51 <p class="text-decoration-overline">This text has an overline.</p>
52 </section>
53 <header><h4>text-decoration: line-through</h4></header>
54 <section class="sample-view">
55 <p class="text-decoration-line-through">This text has a line-through.</p>
56 </section>
57 <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58 <section class="sample-view">
59 <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60 </section>
61 </section>
62 </article>
63 <article>
64 <h3>text-transform</h3>
65 <section>
66 <header><h4>text-transform: none</h4></header>
67 <section class="sample-view">
68 <p class="text-transform-none">This is no transformation applied.</p>
69 </section>
70 <header><h4>text-transform: capitalize</h4></header>
71 <section class="sample-view">
72 <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73 </section>
74 <header><h4>text-transform: uppercase</h4></header>
75 <section class="sample-view">
76 <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77 </section>
78 <header><h4>text-transform: lowercase</h4></header>
79 <section class="sample-view">
80 <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81 </section>
82 </section>
83 </article>
84 </main>
85</body>
86</html>الطباعة (متعلق بالنص)
خاصية text-align
1/* Text align examples */
2.text-align-left {
3 text-align: left; /* Align text to the left */
4}
5
6.text-align-center {
7 text-align: center; /* Center align text */
8}
9
10.text-align-right {
11 text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15 text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}text-align هي خاصية في CSS تُستخدم لتحديد المحاذاة الأفقية للنص والعناصر المضمنة۔ تُستخدم عادةً لمحاذاة النصوص أو العناوين إلى اليسار أو اليمين أو في المنتصف۔ تلعب دورًا مهمًا في تنسيق النصوص وتخطيط صفحات الويب۔
القيم الرئيسية لخاصية text-align
left (محاذاة لليسار)
1p {
2 text-align: left;
3}leftيحاذي النص إلى اليسار (وهذا هو أسلوب المحاذاة الافتراضي للعديد من اللغات)۔
right (محاذاة لليمين)
1p {
2 text-align: right;
3}rightيحاذي النص إلى اليمين۔ يكون فعالًا بشكل خاص للغات المكتوبة من اليمين إلى اليسار، مثل العربية والعبرية۔
center (محاذاة للوسط)
1p {
2 text-align: center;
3}centerيحاذي النص إلى المنتصف۔ يُستخدم بشكل متكرر للعناوين الرئيسية والعناوين الفرعية۔
justify (التسوية)
1p {
2 text-align: justify;
3}justifyيقوم بمحاذاة الحواف اليمنى واليسرى للأسطر بشكل متساوٍ، مما يعطي انطباعًا مرتبًا۔ يُستخدم في التخطيطات مثل الصحف والمجلات۔
start (محاذاة للبداية)
1p {
2 text-align: start;
3}startيحاذي النص بناءً على موضع البداية۔ بالنسبة للغات المكتوبة من اليسار إلى اليمين، يتصرف بنفس طريقة المحاذاة إلى اليسار۔
end (محاذاة للنهاية)
1p {
2 text-align: end;
3}endيحاذي النص بناءً على موضع النهاية۔ بالنسبة للغات المكتوبة من اليسار إلى اليمين، يتصرف بنفس طريقة المحاذاة إلى اليمين۔
استخدامات text-align والأمثلة
عنوان باستخدام المحاذاة للوسط
- تُستخدم المحاذاة الوسطى غالبًا لعناوين صفحات الويب والمستندات۔ يبدو جيدًا ويوفر تصميمًا متوازنًا بصريًا۔
محاذاة الفقرات إلى اليسار أو اليمين
- عادةً ما تكون الفقرات النصية محاذية لليسار افتراضيًا، ولكن يمكن استخدام المحاذاة إلى اليمين أو الوسط لتصاميم معينة۔
تسوية النص بالتساوي
- عند استخدام
justify، يتم محاذاة كل سطر من النص بالتساوي مع الحواف اليسرى واليمنى۔ يكون مفيدًا لتخطيطات النمط الشبيه بالصحف أو المجلات۔
الملخص
text-alignهي خاصية CSS تُستخدم لمحاذاة النص أو العناصر المضمنة أفقيًا۔- يمكنها التعامل مع تخطيطات متنوعة مثل المحاذاة إلى اليسار، المحاذاة إلى اليمين، المحاذاة في المنتصف، والمحاذاة المبررة۔
- اختيار المحاذاة المناسبة بناءً على التخطيط وأهداف التصميم هو المفتاح لتحقيق تصميم قابل للقراءة وجميل۔
لنستخدم محاذاة النص بفعالية كجزء من تصميمك باستخدام text-align۔
خاصية text-decoration
1/* Text decoration examples */
2.text-decoration-underline {
3 text-decoration: underline;
4}
5
6.text-decoration-overline {
7 text-decoration: overline;
8}
9
10.text-decoration-line-through {
11 text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15 text-decoration: underline;
16 text-decoration-color: red;
17 text-decoration-style: wavy;
18 text-decoration-thickness: 2px;
19}خاصية CSS text-decoration تُستخدم لتطبيق خطوط تحت النصوص، أو فوقها، أو خطوط مشطوبة، أو خطوط بزخارف مخصصة.۔ باستخدام هذه الخاصية، يمكنك جعل تنسيق النصوص أكثر زخرفةً أو إبرازًا بصريًا.۔
توضيح:
- الفئة
text-decoration-underlineتعرض خطًا تحت النص.۔ - الفئة
text-decoration-overlineترسم خطًا فوق النص.۔ - الفئة
text-decoration-line-throughتُطبِق خطًا مشطوبًا على النص.۔ - الفئة
text-decoration-custom-underlineهي مثال على تخصيص اللون، النمط، وسمك الخط السفلي.۔
القيم الأساسية لـ text-decoration
none
1p {
2 text-decoration: none;
3}- تحديد
noneسيزيل أي زخارف من النص.۔ يُستخدم عندما ترغب في إزالة الخط الذي يظهر أسفل الروابط، على سبيل المثال.۔
underline
1p {
2 text-decoration: underline;
3}- تحديد
underlineسيُرسم خطًا تحت النص.۔ يمكن استخدامه للروابط أو الأجزاء التي ترغب في إبرازها.۔
overline
1p {
2 text-decoration: overline;
3}- تحديد
overlineسيُرسم خطًا فوق النص.۔ يُستخدم لتغيير المظهر أو للزخرفة الخاصة.۔
line-through
1p {
2 text-decoration: line-through;
3}- تحديد
line-throughسيرسم خطًا مشطوبًا عبر النص.۔ يُستخدم للإشارة إلى التصحيحات.۔
blink（点滅）
blinkهي قيمة تتسبب في ظهور النص بشكل يومض، لكنها لم تعد تُستخدم بسبب عدم دعم معظم المتصفحات لهذه الخاصية.۔
الإعدادات المتقدمة لـ text-decoration
يسمح text-decoration بإعدادات تفصيلية كما يلي:
text-decoration-color
1p {
2 text-decoration: underline;
3 text-decoration-color: red;
4}- خاصية
text-decoration-colorتتيح لك تحديد لون الخطوط السفلية أو المشطوبة.۔ بشكل افتراضي، يتطابق اللون مع لون النص، ولكن يمكنك إضافة لمسة بصرية باختيار لون مختلف.۔
text-decoration-style
1p.dshed {
2 text-decoration: underline;
3 text-decoration-style: solid;
4}
5p.double {
6 text-decoration: underline;
7 text-decoration-style: double;
8}
9p.dotted {
10 text-decoration: underline;
11 text-decoration-style: dotted;
12}
13p.dashed {
14 text-decoration: underline;
15 text-decoration-style: dashed;
16}
17p.wavy {
18 text-decoration: underline;
19 text-decoration-style: wavy;
20}- خاصية
text-decoration-styleتتيح لك تحديد نمط الخطوط الزخرفية.۔ القيم تشمل ما يلي:۔solid(افتراضي، خط صلب)double(خط مزدوج)dotted(خط منقط)dashed(خط متقطع)wavy(خط متموج)
**text-decoration-thickness
1p {
2 text-decoration: underline;
3 text-decoration-thickness: 2px;
4}- خاصية
text-decoration-thicknessتتيح لك تحديد سمك الخطوط الزخرفية.۔ يمكنك تعديله باستخدام وحدات مثل2pxأو0.1em، على سبيل المثال.۔
ملخص:
text-decorationهي خاصية تُستخدم لإضافة خطوط زخرفية إلى النص، مثل الخطوط السفلية أو المشطوبة.۔- مع
text-decoration-color،text-decoration-style، وtext-decoration-thickness، يمكن تحقيق تخصيص أكثر تفصيلًا.۔ - تُستخدم هذه الخاصية بشكل شائع لتأكيد الروابط أو النصوص الهامة، أو كعنصر تصميمي.۔
باستخدام text-decoration، يمكنك إضافة تلميحات دقيقة أو إبراز النص.۔
خاصية text-transform
1/* Text transform examples */
2.text-transform-none {
3 text-transform: none;
4}
5
6.text-transform-capitalize {
7 text-transform: capitalize;
8}
9
10.text-transform-uppercase {
11 text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15 text-transform: lowercase;
16}text-transform هي خاصية CSS تُستخدم لتحويل حالة النص.۔ تتيح لك هذه الخاصية التحكم في تنسيق عرض النص المحدد في HTML، عن طريق تحويل حالة النص المدخل بواسطة المستخدم أو النص الموجود تلقائيًا.۔
توضيح:
- تعرض فئة
text-transform-noneالنص بدون تغييره من حالته الأصلية.۔ - تحول فئة
text-transform-capitalizeالحرف الأول من كل كلمة إلى حرف كبير.۔ - تحول فئة
text-transform-uppercaseالنص بالكامل إلى أحرف كبيرة.۔ - تحول فئة
text-transform-lowercaseالنص بالكامل إلى أحرف صغيرة.۔
القيم الرئيسية لخاصية text-transform
none
1p {
2 text-transform: none;
3}- تحديد
noneيترك النص بدون تغيير.۔
capitalize
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3 text-transform: capitalize;
4}- تحديد
capitalizeيحول الحرف الأول من كل كلمة إلى حرف كبير.۔ يتم التعرف على الحدود بين الكلمات من خلال الفراغات أو علامات الترقيم.۔
uppercase
1/* "hello world" -> "HELLO WORLD" */
2p {
3 text-transform: uppercase;
4}- تحديد
uppercaseيحول النص بالكامل إلى أحرف كبيرة.۔
lowercase
1/* "HELLO WORLD" -> "hello world" */
2p {
3 text-transform: lowercase;
4}- تحديد
lowercaseيحول النص بالكامل إلى أحرف صغيرة.۔
full-width
- تحديد
full-widthيحول النص إلى أحرف العرض الكامل.۔ يستخدم هذا عادةً كتنسيق خاص عند التعامل مع الكانجي أو الكانا، لكن عددًا قليلاً من المتصفحات يدعمه.۔
ملخص:
text-transformهي خاصية CSS مريحة لتغيير حالة النص.۔- غالبًا ما تستخدم لإيجاد تناسق بصري للعناوين وقوائم التنقل ونصوص النماذج.۔
- هي مفيدة عندما تريد عرض النص بأسلوب معين بغض النظر عن إدخال المستخدم.۔
باستخدام هذه الخاصية، يمكنك بسهولة تعديل النصوص مع الحفاظ على التناسق البصري.۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔