دورة في CSS

 تنسيق النصوص في تقنية التصميم و التنسيق CSS


نقاط مهمة قبل البدء:

  1. يجب ان تكون انجزت دورة ترميز النصوص للبدء في هذه الدورة لفهم اساسيات صفحة الويب
  2. التركيز على التعريفات فوق كل كود جديد عليك, اذا كان لديك سؤال عن نقطة ما, جميع قنوات التواصل متاحة للجميع لطرح اي استفسار
  3. بعد انتهاء الدورة أختبر قدرات لعمل نفس التصميم دون الرجوع للدورة للمحافظة على المعلومات التي حصلت عليها
  4. الرجاء الاطلاع على مربع التطبيق بالاسفل, لقد تمت اضافة المحتويات النصية فقط دون التصميم. سوف تقوم باضافة تقنية التصميم و التنسيق بنفسك

مقدمة عن CSS

تعتبر التقنية الاساسية لتصميم وتنسيق اغلب المواقع يمكن اعتبارها اداة الرسم لتصميم الموقع في هذا القسم سوف تتعلم الكثير من التعريفات عنها

وعلى غرار المواقع الجميلة التي زرتها عبر الإنترنت والتي اعجبك تصميمها, السؤال هل تتوقع انك سوف تصمصم موقع بتسعة خطوات؟

تعريف التاق التاق
 يحدد المحاذاة بين السطور داخل حاوية مرنة عندما لا تستخدم العناصر كل المساحة المتاحة align-content
 يحدد محاذاة العناصر داخل حاوية مرنة align-items
 لتحديد محاذاة العناصر المحددة داخل حاوية مرنة align-self
إعادة تعيين كافة الخصائص إكسيبت ونيكود-بيدي والاتجاه all
 خاصية الاختزال لجميع خصائص الرسوم المتحركة animation
 لتحديد تأخير لبدء الرسوم المتحركة animation-delay
 يحدد ما إذا كان يجب تشغيل الرسوم المتحركة إلى الأمام أو للخلف أو في دورات بديلة animation-direction
 لتحديد المدة التي يجب أن تستغرقها الرسوم المتحركة لإكمال دورة واحدة animation-duration
 وضع لتحديد نمط للعنصر عند عدم تشغيل الرسم المتحرك (قبل أن يبدأ، أو بعد انتهاءه، أو كليهما) animation-fill-mode
 لتحديد عدد مرات تشغيل الرسوم المتحركة animation-iteration
  keyframes لتحديد اسم للرسوم المتحركة  animation-name
 لتحديد ما إذا كانت الرسوم المتحركة قيد التشغيل أم متوقفة مؤقتا animation-play-state
لتحديد منحنى السرعة للرسوم المتحركة

animation-timing-function


التطبيق

  • قراءة الملاحظات التي داخل مربع "الاكواد و الملاحظات" فوق كل تاق لمعرفة على ماذا يحتوي التاق
  • حاول ان تحفظ اكبر قدر ممكن من الكلمات وتعرف خاصية كل نوع
  • قم بنسخ الكودالى صندوق التطبيق تحت ملاحظة: "ضع الكود تحت هذا السطر"

الاكواد و الملاحظات

* {
box-sizing: border-box;
}
/*لتحديد اتجاهات هيئة الصفحة ونوعية الخط والمسافات*/
body {
padding-top: 0px;
margin: 0;
font-family:tahoma;
}
/*لتحديد حجم الخط للعناوين*/
h1, h2, h3, h4 {
font-size: 18px;
}
/*تحديد حجم الخط بالفقرات النصية*/ font-size: 14px;
}

بعد نهاية الدورة سوف تكون قادر على تصميم موقع بهذا الشكل





اتصل بنا


حفر الباطن, المملكة العربية السعودية

majidacademy@gmail.com

+1(801)369-4595


التواصل الاجتماعي