HTML: أنماط HTML

Q: ما الفرق بين الأنماط المضمنة والداخلية والخارجية؟

ثلاث مناهج: 1) الأنماط المضمنة (سمة style ) تؤثر فقط على العنصر الحالي، مكتوبة داخل وسوم HTML；2) الأنماط الداخلية (وسم <style> ) تؤثر على الصفحة الحالية، مكتوبة في <head> ；3) الأنماط الخارجية (ملف .css عبر <link> ) تؤثر على جميع الصفحات التي تشير إليها. الأولوية: مضمنة > داخلية > خارجية. في الممارسة العملية، استخدم أوراق الأنماط الخارجية في 95% من الحالات.

Q: كيف تُحسب أولوية الأنماط؟

الأولوية من الأعلى إلى الأدنى: 1) !important (استخدم بحذر — يخلط الأولوية)；2) الأنماط المضمنة (سمة style )；3) محددات المعرف ( #id )；4) محددات الفئة ( .class )، محددات السمة، pseudo-classes；5) محددات العنصر ( p ، div )، pseudo-elements；6) المحدد الشامل ( * )، الأنماط الموروثة. نفس الأولوية: القواعد اللاحقة تتجاوز السابقة. لا تسيء استخدام !important ؛ استخدمspecificity المحدد للتحكم في الأولوية.

يتولى HTML مسؤولية هيكل صفحة الويب، بينما تتولى CSS (أوراق الأنماط المتتالية) مسؤولية مظهرها. يمكنك كتابة الأنماط في HTML بثلاث طرق: الأنماط المضمنة، وأوراق الأنماط الداخلية، وأوراق الأنماط الخارجية.

1. الأنماط المضمنة (Inline Styles)

اكتب CSS مباشرة في سمة style للعنصر — تؤثر فقط على ذلك العنصر المحدد:

▶ مثال

HTML

<p style="color: blue; font-size: 18px;">
هذه فقرة بنص أزرق كبير.
</p>
<div style="background: #f0f0f0; padding: 20px; border-radius: 8px;">
هذه بطاقة رمادية بزوايا دائرية.
</div>

▶ جرّب الكود

💡 متى تستخدمها: الأنماط المضمنة لها أعلى أولوية وهي رائعة للاختبار السريع أو السيناريوهات التي يعدل فيها JavaScript الأنماط ديناميكيًا. ومع ذلك، تجنبها في الإنتاج لأنها صعبة الصيانة.

2. ورقة الأنماط الداخلية (Internal Style Sheet)

عرف الأنماط داخل <head> باستخدام الوسم <style> — يمكن لجميع عناصر الصفحة الرجوع إليها:

HTML

### ▶ مثال
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
h1 { color: #333; text-align: center; }
.card {
background: #fff;
border: 1px solid #ddd;
padding: 16px;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>صفحتي</h1>
<div class="card">هذه بطاقة</div>
</body>
</html>

3. ورقة الأنماط الخارجية (External Style Sheet)

اكتب CSS في ملف .css منفصل وضمّنه باستخدام <link>. هذه هي الطريقة الأكثر توصية — ملف CSS واحد يمكنه التحكم في نمط موقع ويب بأكمله:

HTML

<head>
### ▶ مثال
<link rel="stylesheet" href="style.css">
</head>

<!-- محتويات ملف style.css: -->
<!-- h1 { color: navy; } -->
<!-- .highlight { background: yellow; } -->

📌 أولوية الطرق الثلاث: الأنماط المضمنة > ورقة الأنماط الداخلية > ورقة الأنماط الخارجية > أنماط المتصفح الافتراضية. عندما يتم تنسيق نفس العنصر بعدة طرق، فإن الطريقة ذات الأولوية الأعلى تسري.

4. نظرة سريعة على خصائص CSS الشائعة

فيما يلي بعض خصائص CSS الأكثر استخدامًا في HTML — أتقنها ويمكنك إنشاء صفحات ذات مظهر لائق:

color — لون النص
background-color — لون الخلفية
font-size — حجم الخط
font-weight — وزن الخط (عريض = ثخين)
text-align — محاذاة النص (يسار/وسط/يمين)
padding — التباعد الداخلي (المسافة بين المحتوى والحدود)
margin — التباعد الخارجي (المسافة بين العناصر)
border — الحدود
width / height — العرض والارتفاع
display — وضع العرض (block/inline/flex/none)

❓ أسئلة شائعة

س ما الفرق بين الأنماط المضمنة والداخلية والخارجية؟

ج ثلاث مناهج: 1) الأنماط المضمنة (سمة style) تؤثر فقط على العنصر الحالي، مكتوبة داخل وسوم HTML；2) الأنماط الداخلية (وسم <style>) تؤثر على الصفحة الحالية، مكتوبة في <head>；3) الأنماط الخارجية (ملف .css عبر <link>) تؤثر على جميع الصفحات التي تشير إليها. الأولوية: مضمنة > داخلية > خارجية. في الممارسة العملية، استخدم أوراق الأنماط الخارجية في 95% من الحالات.

س لماذا يُوصى بأوراق الأنماط الخارجية؟

ج أوراق الأنماط الخارجية لها أربع مزايا رئيسية: 1) إعادة الاستخدام — تشترك عدة صفحات في ملف CSS واحد، غيّر مرة واحدة، حدّث الكل；2) التخزين المؤقت — تخزن المتصفحات ملفات CSS في ذاكرة التخزين المؤقت، مما يجعل تحميل الصفحات اللاحقة أسرع；3) الفصل — HTML يتولى الهيكل، CSS يتولى الأنماط، مسؤوليات واضحة، صيانة أسهل；4) التعاون — يمكن لمطوري الواجهة الأمامية العمل بالتوازي دون تعارض. الأنماط المضمنة فقط للتصحيح وحالات خاصة.

س كيف تُحسب أولوية الأنماط؟

ج الأولوية من الأعلى إلى الأدنى: 1) !important (استخدم بحذر — يخلط الأولوية)；2) الأنماط المضمنة (سمة style)；3) محددات المعرف (#id)；4) محددات الفئة (.class)، محددات السمة، pseudo-classes；5) محددات العنصر (p، div)، pseudo-elements；6) المحدد الشامل (*)، الأنماط الموروثة. نفس الأولوية: القواعد اللاحقة تتجاوز السابقة. لا تسيء استخدام !important؛ استخدمspecificity المحدد للتحكم في الأولوية.

س متى يجب استخدام الأنماط المضمنة؟

ج الأنماط المضمنة لها حالات استخدام محدودة جدًا: 1) JavaScript يعدل الأنماط ديناميكيًا (element.style.color = 'red')；2) تصحيح سريع (معاينة مؤقتة)；3) قوالب البريد الإلكتروني (عملاء البريد الإلكتروني يدعمون <style> بشكل ضعيف). لغير ذلك، استخدم أوراق الأنماط الداخلية أو الخارجية. سلبيات الأنماط المضمنة: صعبة الصيانة، غير قابلة لإعادة الاستخدام، أولوية عالية جدًا تجعل التجاوزصعبًا.

📖 ملخص

ثلاث طرق لكتابة الأنماط: مضمنة (سمة style)، داخلية (وسم <style>)، خارجية (ربط <link> بملف .css)
أوراق الأنماط الخارجية هي أفضل ممارسة — قابلة لإعادة الاستخدام، قابلة للتخزين المؤقت، وتفصل الهيكل عن التقديم
أولوية الأنماط: مضمنة > داخلية > خارجية > افتراضية للمتصفح
خصائص CSS تتكون من أزواج "اسم-الخاصية: قيمة"، مفصولة بفواصل منقوطة

📝 تمارين

تمرين الأنماط: أنشئ صفحة HTML واستخدم طرق التنسيق الثلاث على عناصر مختلفة. لاحظ تأثير الأولوية.
تصميم بطاقة: استخدم الأنماط المضمنة لإنشاء مكون بطاقة بعنوان ووصف صورة وزر.
الأنماط الخارجية: أنشئ ملف style.css، ضمّنه باستخدام <link>، وطبق الأنماط على عناصر متعددة في الصفحة.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن