HTML - Styles CSS link طرق الربط
الربط بين HTML و CSS
CSS (Cascading Style Sheets) تُستخدم لتنسيق مظهر صفحات الويب المكتوبة بلغة HTML. يمكن استخدامها لتحديد الألوان، الخطوط، المساحات، الحدود، وغيرها من عناصر التصميم.
✅ طرق استخدام CSS مع HTML:
🔹 1. CSS داخلي (Internal CSS):
يُكتب داخل وسم <style> في وسم <head> داخل ملف HTML.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>مرحبًا بك في موقعي</h1>
</body>
</html>
🔹 2. CSS خارجي (External CSS):
يُكتب في ملف منفصل بامتداد .css ويتم ربطه داخل وسم <head>.
<link rel="stylesheet" href="styles.css">
/* محتوى ملف styles.css */
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
🔹 3. CSS داخلي في العنصر (Inline CSS):
يُكتب داخل وسم HTML باستخدام خاصية style.
<h1 style="color: blue; text-align: center;">مرحبًا بك</h1>
💡 ملاحظات:
- External CSS هو الأفضل للصيانة وإعادة الاستخدام.
- Inline CSS يُستخدم في حالات نادرة مثل تخصيص سريع لعناصر فردية.
- يمكن دمج الطرق الثلاثة في نفس الصفحة، لكن الأفضل استخدام طريقة واحدة لتجنب التعارض.
تعليقات
إرسال تعليق