تعلم كيفية تنسيق وتجميل صفحات الويب باستخدام CSS
معرفة دور CSS في تنسيق صفحات الويب
تغيير الألوان والخطوط والأحجام
10 دقيقة • مناقشة
مناقشة الصفحات التي أنشأناها الأسبوع الماضي
20 دقيقة • تطبيق عملي
تعلم كيفية إضافة CSS لتغيير الألوان
15 دقيقة • تطبيق عملي
تعلم تغيير أنواع وأحجام الخطوط
تحسين الصفحة الشخصية بإضافة CSS جميل
افتح صفحتك الشخصية من الأسبوع الماضي
غير لون العنوان الرئيسي
h1 {
color: #2E86AB;
font-size: 36px;
}نسق العنوان الفرعي
h2 {
color: #A23B72;
font-style: italic;
}حسن شكل الفقرات
p {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}نسق القوائم
ul {
background-color: #F18F01;
padding: 15px;
border-radius: 10px;
}حسن شكل الروابط
a {
color: #C73E1D;
text-decoration: none;
font-weight: bold;
}أضف خلفية للصفحة
body {
background-color: #F5F5F5;
margin: 20px;
}أضف حدود وظلال جميلة
body {
box-shadow: 0 0 20px rgba(0,0,0,0.1);
padding: 30px;
}body {
background-color: #F5F5F5;
margin: 20px;
padding: 30px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
h1 {
color: #2E86AB;
font-size: 36px;
}
h2 {
color: #A23B72;
font-style: italic;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
ul {
background-color: #F18F01;
padding: 15px;
border-radius: 10px;
}
a {
color: #C73E1D;
text-decoration: none;
font-weight: bold;
}هذا الكود يضيف ألوان وتنسيقات جميلة لجميع عناصر الصفحة
جرب المزيد من خصائص CSS
المدة المقترحة: 30 دقيقة
الأسبوع القادم سنتعلم JavaScript لجعل صفحاتنا تفاعلية!