أسئلة وأجوبة في CSS
لماذا نستخدم صفحات الأنماط الانسيابية CSS ؟
اولا
لأنها معيار أساسي ومدعومة من كل متصفحات الويب
ثانيا متوافقة مع مختلف الاجهزة وتدعم تعدد العرض حسب اختلاف نوع الجهاز وحجم الشاشة
ثالثاً : فصل المحتوي عن التصميم،
وهذا يؤدي إلى تبسيط عملية إدارة الموقع،
لأن التصميم يمكن التحكم به من ملف واحد، فيمكن إضافة و تعديل بعض العناصر في تصميم الموقع دون الحاجة إلى تعديل كل ملفات الموقع .
رابعاً : جعل ملفات الموقع أصغر حجماً،
مما يؤدي إلى خفض تكاليف التشغيل ، كما يساعد زائر موقعك بغض النظر عن سرعة اتصاله
ماهي الصيغة العامة لأوامر css ؟
" الصيغة العامة " او التركيبة البنائية للكود في css تتكون من ثلاثة أجزاء selector
المحدد ( وفيه يتم تعريف اسم الكائن)
و property
الخاصية التي نود التحكم بها
و value
القيمة لتلك الخاصية
كما يلي .
selector {property: value}
اسم المحدد في HTML { القيمة : المتغير}
هل يمكن وضع اكثر من محدد دفعة واحدة ؟
نعم
يمكن إنشاء مجموعات في css لها نفس القيمة فعلى سبيل المثال إذا اردت أن تجعل جميع العناوين تظهر باللون الأحمر يمكن تطبيق ذلك
h1,h2,h3,h4,h5,h6
{
color: red
}
تكلمنا بالمثال السابق عن المحدد واننا نستطيع عمل مجموعات لكن ماذا لو اردنا العكس ؟
اي ان نشير في ملف html لمحدد معين في css
الجواب يمكن ذلك عبر استخدام
الفئات " Classes "
مثال
لو اردنا ان نعمل كلاس يجعل اي كائن يشير إليه يكون محاذاته نحو الوسط
نعمل الآتي
1- داخل ملف html نشير للكلاس في css بالطريقة التالية
<p class="center"> نص محاذاته نحو الوسط . </p>
2- نكتب في ملف css الكلاس وخصائصه
.center {text-align: center}
س : ماهي أهم الأوامر في css ؟
في الملف التالي تجد أهم وأغلب أوامر css
س : ماهي Animations في صفحات الويب css ؟
ال Animations هو تحريك الكائنات في صفحات الويب المبرمجة ب HTML باستخدام CSS
س : هل كل المتصفحات تدعم الحركة ؟
نعم أغلب المتصفحات تدعم الحركة في CSS لكن المتصفحات القديمة لاتدعم ذلك
مثلا الإصدارات القديمة من Internet Explorer قبل الاصدار 10
س : ماهي الخطوات التي تتم فيها الحركة في css ؟
هناك خطوتين لإنشاء animation :
1 : إعدادات الحركة. بداية الحركة ونهايتها ومدتها ...الخ.
2 : تحديد الحركة عبر مجموعة من الاستايلات و في فترات مختلفة من زمن.
ثم نحدد بدايتها ونهايتها باستخدام معرف للحركة
keyframes@
مثلا :
keyframes@ اسم الحركة { from { background: red;} to {background:blue;}}
نضع إعدادات الحركة ومدتها مثلا
animation: اسم الحركة - 5s
في المثال التالي نحرك المربع الأحمر نحو اليمين
<html>
<head>
<style>
@keyframes MyBox {
from {left: 0px;}
to {left: 250px;}
}
div {
width: 250px;
position: relative;
height: 250px;
left: 0px;
background-color: red;
animation-name: MyBox;
animation-duration: 4s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div></div>
</body>
</html>