CSS - How To طرق كتابة الكود
CSS - كيفية استخدام CSS في صفحات HTML
🔸 هناك ثلاث طرق رئيسية لإضافة CSS إلى صفحات HTML:
1️⃣ CSS داخلي (Internal CSS)
يتم إدراج CSS داخل صفحة HTML باستخدام وسم <style> داخل قسم <head>.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>مرحبًا بك!</h1>
<p>هذا مثال على CSS داخلي.</p>
</body>
</html>
2️⃣ CSS خارجي (External CSS)
تتم كتابة التنسيقات في ملف منفصل بامتداد .css، ثم يتم ربطه بالصفحة باستخدام وسم <link>.
<!-- داخل ملف HTML -->
<link href="styles.css" rel="stylesheet" />
/* ملف styles.css */
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
3️⃣ CSS مباشر (Inline CSS)
يتم إدراج CSS مباشرة داخل وسم HTML باستخدام خاصية style.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: blue; text-align: center;">هذا عنوان</h1>
<p style="color: red;">هذا نص داخل فقرة</p>
</body>
</html>
📌 ملاحظات مهمة
- يفضل استخدام CSS الخارجي لتنظيم الكود وفصل التصميم عن المحتوى.
- CSS الداخلي مناسب للصفحات الفردية.
- CSS المباشر مفيد فقط للتعديلات البسيطة، لكنه لا يُنصح به في المشاريع الكبيرة.
تعليقات
إرسال تعليق