الدرس 8
طرق إضافة تنسيق CSS للصفحة
تقدر تضيف تنسيق CSS للصفحة بثلاث طرق
هنخلي نفس الفقرة باللون الأحمر في كل طريقة علشان تركز على مكان كتابة الكود
1- ملف خارجي External CSS
بنكتب التنسيق في ملف منفصل بامتداد css وبنربطه بصفحة HTML باستخدام عنصر link داخل head
في المثال ده ملف index.html جنبه مجلد css وجواه ملف master.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External CSS</title>
<link rel="stylesheet" href="css/master.css">
</head>
<body>
<p>Learn CSS With Elzero</p>
</body>
</html>محتوى ملف
p {
color: red;
}ال p بتختار الفقرة النصية يعني كدة بختار أي عنصر نوعه p في الصفحة
وال color بتحدد لون النص
وال red معناها أحمر ودة اسم اللون ممكن تغيره لأي لون تاني
تقدر تربط نفس ملف التنسيق بأكتر من صفحة وتعدل شكلهم من مكان واحد
يعني لو عندك صفحة تاني اسمها about.html ضيف ليها نفس ال Link الخاص بال CSS
وبكدة تقدر تتحكم في تنسيق الصفحات دي كلها من مكان واحد
2- داخل عنصر style ودي إسمها Internal CSS
في الطريقة دي بنكتب التنسيق جوه عنصر style داخل head
في نفس ملف HTML ومش محتاجين ملف CSS منفصل للتجربة
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal CSS</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Learn CSS With Elzero</p>
</body>
</html>النتيجة نفس اللون الأحمر لكن التنسيق هنا مكتوب داخل الصفحة نفسها وبيخص العناصر الموجودة فيها
يعني التنسيقات دي بتبقى خاصة بالصفحة اللي موجود فيها الكود بس
وملهاش تأثير على أي صفحة تاني
3- داخل خاصية style جوة العنصر نفسه ودي بتسمى Inline CSS
بنكتب التنسيق على العنصر مباشرة باستخدام خاصية style
<p style="color: red;">Learn CSS With Elzero</p>هنا مش محتاجين نكتب p كمحدد ولا نفتح أقواس لأن التنسيق موجود على العنصر نفسه
ولو ضفت فقرة تانية من غير style مش هتاخد اللون ده من الفقرة الأولى لان الكود خاص بالعنصر الأول فقط
جرب الطرق بنفسك
جرب كل طريقة لوحدها وغير red إلى blue واحفظ الملف وحدث الصفحة
هتشوف النص باللون الأزرق في الطرق التلاتة الفرق هو مكان كتابة التنسيق