في المثال التالي تم استخدام خصائص CSS الأساسية المرتبطة بتنسيق النص~؟
إجابة الطالب المختصرة من خلال موقع بوابة الإجابات هي
لون الخط حجم الخط
بالتأكيد! لإعطائك مثالًا مفيدًا، سأقدم لك نموذج HTML مع بعض نصوص منسقة باستخدام خصائص CSS الشائعة لتنسيق النصوص. سأشرح أيضًا كل خاصية مستخدمة:
**HTML (index.html):**
```html
<!DOCTYPE html>
تنسيق النصوص باستخدام CSS
عنوان رئيسي بتنسيق خاص
هذه فقرة نصية. سنقوم بتنسيقها باستخدام CSS لتغيير الخط واللون والحجم.
رابط بسيط داخل الفقرة.
هذه فقرة أخرى بتنسيق مختلف. نركز هنا على التحكم في المسافات بين الأسطر والأحرف.
هذا النص مميز بخلفية ملونة وخط عريض.
هذا نص عربي بتنسيق خاص للغة العربية. سنقوم بتغيير نوع الخط واتجاه النص.
```
**CSS (style.css):**
```css
body {
font-family: Arial, sans-serif; /* خط افتراضي للصفحة */
line-height: 1.6; /* تباعد الأسطر الافتراضي */
}
h1 {
color: #336699; /* لون العنوان */
font-family: "Helvetica Neue", sans-serif; /* نوع خط مختلف للعنوان */
text-align: center; /* توسيط النص */
text-transform: uppercase; /* تحويل النص إلى حروف كبيرة */
letter-spacing: 2px; /* مسافة بين الأحرف */
}
.paragraph1 {
font-size: 16px; /* حجم الخط */
color: #555; /* لون النص */
font-weight: normal; /* سماكة الخط (عادي) */
text-indent: 20px; /* مسافة بادئة للسطر الأول */
word-spacing: 3px; /* مسافة بين الكلمات */
}
.paragraph1 a {
color: darkblue; /* لون الرابط */
text-decoration: none; /* إزالة الخط السفلي للرابط */
}
.paragraph1 a:hover {
text-decoration: underline; /* إضافة خط سفلي عند المرور بالماوس */
}
.paragraph2 {
font-size: 14px;
color: #777;
line-height: 1.8; /* تباعد أسطر أكبر */
letter-spacing: 1px; /* مسافة بين الأحرف */
}
.highlight {
background-color: #FFFFE0; /* لون الخلفية */
font-weight: bold; /* خط عريض */
padding: 10px; /* مساحة داخلية حول النص */
border: 1px solid #CCC; /* إضافة حد */
}
.arabic-text {
font-family: Arial, sans-serif; /* خط مناسب للعربية */
direction: rtl; /* اتجاه النص من اليمين إلى اليسار */
text-align: right; /* محاذاة النص إلى اليمين */
font-size: 18px;
}
```
**شرح الخصائص المستخدمة:**
* **`font-family`**: يحدد نوع الخط (Arial, Helvetica Neue, sans-serif هي أمثلة). يتم تحديد عدة خطوط كبدائل في حالة عدم توفر الخط الأول.
* **`font-size`**: يحدد حجم الخط بالبكسل (px) أو وحدات أخرى (em, rem, pt).
* **`color`**: يحدد لون النص (يمكن استخدام أسماء الألوان، رموز Hex، أو قيم RGB/RGBA/HSL/HSLA).
* **`font-weight`**: يحدد سماكة الخط (normal, bold, bolder, lighter, أو قيم رقمية مثل 100-900).
* **`text-align`**: يحدد محاذاة النص (left, right, center, justify).
* **`text-decoration`**: يضيف تأثيرات زخرفية للنص (underline, overline, line-through, none). شائع لإزالة الخط السفلي من الروابط.
* **`text-transform`**: يغير حالة الأحرف (uppercase, lowercase, capitalize).
* **`text-indent`**: يضيف مسافة بادئة للسطر الأول من الفقرة.
* **`letter-spacing`**: يضيف مسافة بين الأحرف.
* **`word-spacing`**: يضيف مسافة بين الكلمات.
* **`line-height`**: يحدد تباعد الأسطر (يمكن أن يكون رقمًا، أو قيمة بالبكسل، أو نسبة مئوية).
* **`background-color`**: يحدد لون خلفية العنصر.
* **`padding`**: يحدد المساحة الداخلية بين النص وحدود العنصر.
* **`border`**: يضيف حدًا حول العنصر.
* **`direction`**: يحدد اتجاه النص (ltr = من اليسار إلى اليمين، rtl = من اليمين إلى اليسار).
**كيفية استخدام هذا المثال:**
1. احفظ الكود HTML في ملف باسم `index.html`.
2. احفظ الكود CSS في ملف باسم `style.css` في نفس المجلد.
3. افتح ملف `index.html` في متصفح الويب الخاص بك.
سترى نتيجة تنسيق النصوص المختلفة بناءً على الخصائص CSS المطبقة. يمكنك تعديل قيم CSS في ملف `style.css` لرؤية تأثيرها على الفور في المتصفح (غالبًا ما تحتاج إلى تحديث الصفحة في المتصفح).
**نقاط إضافية:**
* **Selectors (المحددات):** لاحظ أننا نستخدم محددات مختلفة في CSS لاستهداف عناصر معينة:
* `h1`: يستهدف جميع عناصر `
