EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

أنماط HTML

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

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

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

مثال

HTML 
<p style="color: blue; font-size: 18px;">
هذه فقرة بنص أزرق كبير.
</p>
<div style="background: #f0f0f0; padding: 20px; border-radius: 8px;">
هذه بطاقة رمادية بزوايا دائرية.
</div>
▶ جرّب الكود
💡 متى تستخدمها: الأنماط المضمنة لها أعلى أولوية وهي رائعة للاختبار السريع أو السيناريوهات التي يعدل فيها JavaScript الأنماط ديناميكيًا. ومع ذلك، تجنبها في الإنتاج لأنها صعبة الصيانة.

ورقة الأنماط الداخلية (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>

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

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

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

<!-- محتويات ملف style.css: -->
<!-- h1 { color: navy; } -->
<!-- .highlight { background: yellow; } -->
📌 أولوية الطرق الثلاث: الأنماط المضمنة > ورقة الأنماط الداخلية > ورقة الأنماط الخارجية > أنماط المتصفح الافتراضية. عندما يتم تنسيق نفس العنصر بعدة طرق، فإن الطريقة ذات الأولوية الأعلى تسري.

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

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

❓ أسئلة شائعة

س ما الفرق بين الأنماط المضمنة والداخلية والخارجية؟
ج ثلاث مناهج: 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> بشكل ضعيف). لغير ذلك، استخدم أوراق الأنماط الداخلية أو الخارجية. سلبيات الأنماط المضمنة: صعبة الصيانة، غير قابلة لإعادة الاستخدام، أولوية عالية جدًا تجعل التجاوزصعبًا.

📖 ملخص