ما هو CSS؟ (اوراق النمط المتعاقب)

CSS (أوراق الأنماط المتتالية) هي لغة ورقة أنماط تُستخدم لوصف تقديم مستند مكتوب بلغة ترميزية. يتم استخدامه للتحكم في التخطيط والخطوط والألوان والجوانب المرئية الأخرى لصفحات الويب.

ما هو CSS؟ (اوراق النمط المتعاقب)

CSS ، أو Cascading Style Sheets ، هي لغة ترميز تستخدم لتصميم صفحات الويب وتنسيقها. يسمح لمصممي الويب بالتحكم في مظهر النص والصور والعناصر الأخرى على موقع الويب ، بما في ذلك حجمها ولونها وموضعها على الصفحة. بعبارات أبسط ، تجعل CSS مواقع الويب تبدو جميلة ومنظمة.

CSS ، أو Cascading Style Sheets ، هي لغة برمجة تستخدم لوصف تقديم مستند مكتوب بلغة HTML أو XML. تُستخدم CSS لتحديد نمط موقع الويب مع HTML وهي لغة قائمة على القواعد تسمح لك بتحديد القواعد من خلال تحديد مجموعات الأنماط التي يجب تطبيقها على عناصر معينة أو مجموعات من العناصر على صفحة الويب الخاصة بك.

CSS هي أداة قوية يمكنها التحكم في تخطيط العديد من صفحات الويب دفعة واحدة ، مما يوفر الكثير من العمل. يمكنه معالجة ألوان النص والمربعات والعناصر الأخرى لإنشاء مواقع ويب جميلة وعملية. يصف CSS كيفية عرض العناصر على الشاشة أو على الورق أو في الكلام أو على وسائط أخرى ، مما يجعلها جزءًا أساسيًا من تطوير الويب.

سواء كنت مبتدئًا أو مطور ويب متمرسًا ، فإن فهم CSS أمر بالغ الأهمية لإنشاء موقع ويب جذاب وسهل الاستخدام. في هذه المقالة ، سوف نتعمق أكثر في ماهية CSS وكيف تعمل وأنواع CSS المختلفة. سنستكشف أيضًا بعضًا من أفضل الممارسات لاستخدام CSS لإنشاء مواقع ويب مذهلة وظيفية وجذابة بصريًا.

ما هو CSS؟

CSS أو Cascading Style Sheets هي لغة برمجة تستخدم لوصف تقديم مستند مكتوب بلغة HTML أو XML. يتم استخدامه لتصميم عناصر HTML والتحكم في تخطيط صفحات الويب المتعددة في وقت واحد.

تعريف

CSS هي لغة قائمة على القواعد تحدد القواعد الخاصة بكيفية عرض العناصر على الشاشة أو الورق أو الكلام أو على وسائط أخرى. يسمح للمطورين بفصل عرض صفحة الويب عن محتواها ، مما يسهل صيانة وتحديث موقع الويب.

تاريخنا

تم تقديم CSS لأول مرة في عام 1996 وخضع منذ ذلك الحين للعديد من التحديثات والمراجعات. تم تطويره لمعالجة قيود HTML من حيث التصميم والتخطيط. قبل CSS ، تم استخدام HTML لتحديد بنية صفحة الويب وعرضها. ومع ذلك ، فقد جعل ذلك من الصعب إجراء تغييرات على تخطيط أو تصميم موقع ويب.

أهمية

تلعب CSS دورًا مهمًا في تطوير الويب لأنها تتيح للمطورين إنشاء مواقع ويب جذابة ومتجاوبة بصريًا. يسمح بتحكم أكبر في عرض موقع الويب ويمكّن المطورين من إنشاء شكل وأسلوب متسقين عبر صفحات ويب متعددة.

في الختام ، تعد CSS أداة أساسية لمطوري الويب لإنشاء مواقع ويب جذابة ومتجاوبة بصريًا. إنه يفصل عرض موقع الويب عن محتواه ويمكّن المطورين من إنشاء شكل وأسلوب متسقين عبر صفحات ويب متعددة.

أساسيات CSS

CSS هي لغة تصميم قوية يمكن استخدامها لتنسيق تخطيط صفحة الويب. في هذا القسم ، سنغطي بعض المفاهيم الأساسية لـ CSS ، بما في ذلك بناء الجملة والمحددات والخصائص والقيم.

بناء الجملة

CSS هي لغة قائمة على القواعد تستخدم مجموعة من القواعد لتحديد كيفية عرض عناصر HTML على صفحة ويب. تتكون قاعدة CSS من محدد وكتلة إعلان. يشير المحدد إلى عنصر HTML إلى النمط ، بينما تحتوي كتلة الإعلان على تعريف واحد أو أكثر مفصولة بفواصل منقوطة. يتضمن كل إعلان اسم خاصية CSS وقيمة مفصولة بنقطتين.

المحددات

تُستخدم المحددات لاستهداف عناصر HTML محددة على صفحة ويب. هناك عدة أنواع من المحددات ، بما في ذلك محددات العناصر ومحددات الفئة ومحددات المعرف ومحددات السمات. تستهدف محددات العناصر عناصر HTML محددة ، بينما تستهدف محددات الفئة عناصر ذات سمة فئة معينة. تستهدف محددات المعرف العناصر بسمة معرف معينة ، بينما تستهدف محددات السمات عناصر بسمة معينة.

عقارات

تُستخدم خصائص CSS للتحكم في المظهر المرئي لعناصر HTML على صفحة ويب. تتوفر العديد من خصائص CSS ، بما في ذلك اللون وحجم الخط ولون الخلفية والهامش وغيرها. يمكن تعيين خصائص CSS على قيم محددة ، مثل اللون أو حجم الخط ، للتحكم في كيفية عرض العنصر.

القيم

تُستخدم القيم لتعيين القيم المحددة لخصائص CSS. على سبيل المثال ، يمكن تعيين خاصية اللون إلى قيمة لون معينة ، مثل الأحمر أو الأخضر أو ​​الأزرق. يمكن تعيين الخصائص الأخرى ، مثل حجم الخط ، على قيم محددة ، مثل 12 بكسل أو 16 بكسل.

القواعد والأسبقية

تُستخدم قواعد CSS لتعيين التصميم لعناصر HTML محددة على صفحة ويب. عندما يتم تطبيق قواعد متعددة على نفس العنصر ، فإن الأولوية للقاعدة ذات أعلى مستوى من التحديد وآخر تطبيق تم تطبيقه. في بعض الحالات ، قد يكون من الضروري استخدام! كلمة أساسية مهمة لتجاوز القواعد الأخرى والتأكد من تطبيق نمط معين.

في الختام ، CSS هي لغة تصميم قوية يمكن استخدامها لتنسيق تخطيط صفحة الويب. من خلال فهم أساسيات بناء جملة CSS والمحددات والخصائص والقيم ، يمكنك إنشاء صفحات ويب جميلة وسريعة الاستجابة يسهل التنقل فيها وجذابة بصريًا.

إصدارات CSS

تطورت CSS على مر السنين ، مع تقديم إصدارات جديدة لتلبية الاحتياجات المتغيرة لمطوري الويب. يوجد حاليًا أربعة إصدارات رئيسية من CSS: CSS1 و CSS2.1 و CSS3 و CSS4.

CSS1

كان CSS1 هو الإصدار الأول من CSS ، والذي تم إصداره في عام 1996. وقد وفر خيارات التصميم الأساسية مثل لون الخط وحجمه ونمطه. كما يسمح بإنشاء تخطيطات بسيطة عن طريق تحديد موضع العناصر على الصفحة. كان CSS1 بمثابة تحسن كبير مقارنة بالطرق السابقة لتصميم صفحات الويب ، والتي تضمنت استخدام علامات HTML لتحديد مظهر العناصر.

CSS2.1

تم إصدار CSS2.1 في عام 1998 وأضاف العديد من الميزات الجديدة ، بما في ذلك دعم أنواع الوسائط ، مثل الطباعة والشاشة ، والقدرة على تحديد الترتيب الذي يجب عرض العناصر به. كما قدم مفهوم المحددات ، والذي سمح للمطورين باستهداف عناصر محددة على الصفحة وتطبيق الأنماط عليها.

CSS3

تم تقديم CSS3 في عام 1999 وهو أحدث إصدار من CSS. أضافت مجموعة واسعة من الميزات الجديدة ، بما في ذلك دعم الحركات والانتقالات والتدرجات. قدم CSS3 أيضًا خيارات تخطيط جديدة مثل flexbox والشبكة ، والتي تسمح بإنشاء تخطيطات أكثر تعقيدًا باستخدام رمز أقل. لا يزال CSS3 مستخدمًا على نطاق واسع اليوم وأصبح معيارًا لتطوير الويب الحديث.

CSS4

CSS4 قيد التطوير حاليًا ومن المتوقع إصداره في المستقبل القريب. سيقدم العديد من الميزات الجديدة ، بما في ذلك دعم المتغيرات ، والتي ستسمح للمطورين بتحديد وإعادة استخدام القيم في جميع أنحاء أوراق الأنماط الخاصة بهم. سيتضمن CSS4 أيضًا خيارات تخطيط جديدة ، مثل استعلامات الحاوية ، والتي ستسمح للمطورين بإنشاء تصميمات سريعة الاستجابة تتكيف مع حجم الحاوية التي يتم وضعها فيها.

في الختام ، قطعت CSS شوطًا طويلاً منذ إنشائها ، مع تقديم إصدارات جديدة لتلبية الاحتياجات المتغيرة لمطوري الويب. أضاف كل إصدار ميزات وإمكانيات جديدة ، مما يسهل إنشاء تخطيطات وأنماط معقدة. مع إصدار CSS4 في الأفق ، يبدو مستقبل تطوير الويب مشرقًا ، مع توفر أدوات وخيارات أكثر قوة للمطورين.

CSS و HTML

CSS و HTML لغتان منفصلتان تستخدمان لإنشاء صفحات الويب. HTML هي لغة ترميز تُستخدم لهيكلة المحتوى على صفحة ويب ، بينما يتم استخدام CSS لتصميم المحتوى وتنسيقه. في هذا القسم ، سوف نستكشف كيفية عمل CSS و HTML معًا لإنشاء صفحات ويب جذابة بصريًا.

عناصر HTML

عناصر HTML هي اللبنات الأساسية لصفحة الويب. إنها العلامات التي تحدد هيكل ومحتوى صفحة الويب. يمكن استخدام عناصر HTML لإنشاء العناوين والفقرات والقوائم والصور والمزيد. يحتوي كل عنصر HTML على مجموعة الخصائص الخاصة به التي يمكن تصميمها باستخدام CSS.

لغة توصيف النص

HTML هي لغة ترميزية تستخدم علامات لتحديد بنية صفحة الويب. تُستخدم العلامات لإحاطة المحتوى وإعطائه معنى. على سبيل المثال ، ملف <h1> يتم استخدام العلامة لتحديد عنوان المستوى الأعلى ، بينما يتم استخدام ملف <p> العلامة لتعريف فقرة. HTML هي لغة قوية يمكن استخدامها لإنشاء صفحات ويب معقدة.

روابط

الروابط هي جزء أساسي من أي صفحة ويب. أنها تسمح للمستخدمين بالتنقل بين الصفحات والوصول إلى الموارد الخارجية. يتم إنشاء الروابط باستخدام امتداد <a> علامة ويمكن تنسيقها باستخدام CSS. يمكن أيضًا استخدام الروابط لإنشاء إشارات مرجعية داخل صفحة ويب ، مما يتيح للمستخدمين الانتقال بسرعة إلى أقسام معينة من الصفحة.

بشكل عام ، يعمل CSS و HTML معًا لإنشاء صفحات ويب جذابة بصريًا. تحدد HTML بنية صفحة الويب ومحتواها ، بينما تستخدم CSS لتصميم هذا المحتوى وتنسيقه. باستخدام HTML و CSS معًا ، يمكن لمطوري الويب إنشاء مواقع ويب جميلة وعملية يسهل استخدامها والتنقل فيها.

CSS وتصميم الويب

تلعب CSS دورًا مهمًا في تصميم الويب. تمكن المطورين من التحكم في المظهر المرئي لصفحات الويب وضمان الاتساق عبر صفحات متعددة. في هذا القسم ، سوف نستكشف كيف تؤثر CSS على الجوانب المختلفة لتصميم الويب ، بما في ذلك التخطيط والطباعة واللون والصور.

تصميم

يسمح CSS لمطوري الويب بالتحكم في تخطيط صفحات الويب. باستخدام CSS ، يمكن للمطورين وضع عناصر مختلفة على صفحة الويب والتحكم في حجم هذه العناصر والتأكد من عرضها بشكل متسق عبر أجهزة مختلفة. تمكّن CSS المطورين أيضًا من إنشاء تصميمات سريعة الاستجابة تتكيف مع أحجام الشاشات المختلفة ، مما يضمن إمكانية الوصول إلى صفحات الويب على جميع الأجهزة.

طباعة

يوفر CSS للمطورين مجموعة واسعة من الخيارات للتحكم في طباعة صفحات الويب. باستخدام CSS ، يمكن للمطورين التحكم في عائلة الخط وحجم الخط وارتفاع السطر وتباعد الأحرف في النص على صفحة الويب. يمكنهم أيضًا التحكم في محاذاة النص والتباعد بين العناصر المختلفة على صفحة الويب.

لون

يتيح CSS للمطورين التحكم في الألوان المستخدمة في صفحة الويب. باستخدام CSS ، يمكن للمطورين تعيين لون خلفية صفحة الويب وتغيير لون النص والتحكم في لون العناصر المختلفة على صفحة الويب. يوفر CSS أيضًا للمطورين القدرة على إنشاء تدرجات وتأثيرات لونية معقدة أخرى.

الصور

يتيح CSS للمطورين التحكم في عرض الصور على صفحة الويب. باستخدام CSS ، يمكن للمطورين التحكم في حجم الصور وتعيين موضع الصور على صفحة الويب والتحكم في عتامة الصور. يوفر CSS أيضًا للمطورين القدرة على إنشاء تأثيرات صور معقدة ، مثل الظلال والحدود.

في الختام ، تعد CSS أداة أساسية لتصميم الويب. إنه يمكّن المطورين من التحكم في التخطيط والطباعة واللون والصور المستخدمة على صفحة الويب ، مما يضمن أن صفحات الويب جذابة بصريًا ويمكن الوصول إليها على جميع الأجهزة.

CSS وتطوير الويب

CSS ، أو Cascading Style Sheets ، هي أداة أساسية لمطوري الويب. يسمح لهم بالتحكم في عرض مستندات HTML و XML ، بما في ذلك التخطيط والألوان والخطوط والمزيد.

CSS خارجي

CSS الخارجي هو ملف منفصل يحتوي على جميع الأنماط التي يستخدمها موقع الويب. هذا الملف مرتبط بمستند HTML باستخدام امتداد بطاقة شعار. تعد CSS الخارجية طريقة رائعة للحفاظ على العرض التقديمي منفصلاً عن المحتوى ، مما يسهل صيانة موقع الويب وتحديثه. كما أنه يسمح بالاتساق عبر صفحات متعددة على موقع الويب.

CSS داخلي

يتم تعريف CSS الداخلي في مستند HTML باستخدام الامتداد tag. It is useful when you want to apply styles to a single page or a specific section of a website. However, it can make the HTML document cluttered and harder to read.

مضمنة CSS

يتم تعريف CSS المضمن داخل عنصر HTML باستخدام سمة النمط. يكون مفيدًا عندما تريد تطبيق أنماط على عنصر معين. ومع ذلك ، يمكن أن يجعل مستند HTML مشوشًا ويصعب قراءته. لا يوصى باستخدام CSS المضمن للتصميم على نطاق واسع.

تساؤلات الإعلام

تُستخدم استعلامات الوسائط لتطبيق أنماط مختلفة بناءً على حجم شاشة الجهاز. يسمح ذلك لموقع الويب بالاستجابة والتكيف مع الأجهزة المختلفة ، مثل الهواتف والأجهزة اللوحية وأجهزة الكمبيوتر المكتبية. يمكن تحديد استعلامات الوسائط في ملف CSS الخارجي أو داخل مستند HTML.

في الختام ، تعد CSS أداة أساسية لمطوري الويب. يسمح بفصل العرض التقديمي والمحتوى ، مما يسهل صيانة وتحديث موقع الويب. يوصى باستخدام CSS الخارجي للتصميم على نطاق واسع ، في حين أن CSS الداخلية والمضمنة مفيدة للتصميم على نطاق أصغر. تسمح استعلامات الوسائط لموقع الويب بالاستجابة والتكيف مع الأجهزة المختلفة.

مزايا CSS

CSS هي أداة قوية تمكن مطوري الويب من إنشاء صفحات ويب متسقة وجذابة بصريًا. فيما يلي بعض مزايا استخدام CSS:

سرعة

إحدى المزايا الرئيسية لـ CSS هي سرعتها. يسمح CSS للمطورين بفصل تصميم وتخطيط صفحة الويب عن محتواها. يمكن أن يؤدي هذا الفصل إلى تقليل وقت تحميل صفحة الويب بشكل كبير ، حيث لا يتعين على المتصفح تنزيل أوراق أنماط متعددة لكل صفحة. بدلاً من ذلك ، يقوم المتصفح بتخزين ورقة الأنماط مؤقتًا ، والتي يمكن استخدامها عبر صفحات متعددة ، مما يؤدي إلى أوقات تحميل أسرع للصفحة.

اتساق

تساعد CSS المطورين على إنشاء تصميمات متسقة عبر صفحات ويب متعددة. باستخدام ورقة أنماط واحدة ، يمكن للمطورين التأكد من أن جميع الصفحات على موقع الويب لها شكل ومضمون متسقان. يمكن أن يساعد هذا الاتساق في تحسين تجربة المستخدم ، حيث سيتمكن المستخدمون من التنقل في موقع الويب بسهولة أكبر والعثور على المعلومات التي يحتاجون إليها بسرعة.

الصيانة

تسهل CSS صيانة وتحديث موقع الويب. من خلال فصل تصميم وتخطيط موقع الويب عن محتواه ، يمكن للمطورين إجراء تغييرات على التصميم دون التأثير على المحتوى. هذا يعني أنه في حالة الحاجة إلى إجراء تغيير على تصميم موقع ويب ، فيمكن إجراؤه بسرعة وسهولة دون الحاجة إلى إعادة كتابة موقع الويب بالكامل.

تسهل CSS أيضًا إجراء تغييرات على تخطيط موقع الويب. باستخدام CSS ، يمكن للمطورين إنشاء أنماط قابلة لإعادة الاستخدام يمكن تطبيقها على عناصر متعددة على صفحة الويب. هذا يعني أنه في حالة الحاجة إلى إجراء تغيير على تخطيط صفحة الويب ، فيمكن إجراؤه بسرعة وسهولة عن طريق تحديث ورقة أنماط CSS.

في الختام ، تعد CSS أداة قوية تقدم العديد من المزايا لمطوري الويب. باستخدام CSS ، يمكن للمطورين إنشاء صفحات ويب جذابة ومتناسقة يتم تحميلها بسرعة ويسهل صيانتها وتحديثها.

مراجع CSS

عند العمل باستخدام CSS ، من الضروري أن يكون لديك مرجع موثوق للاستشارة عندما تواجه خصائص أو بناء جملة غير مألوف. لحسن الحظ ، هناك الكثير من الموارد المتاحة لمساعدتك على فهم واستخدام CSS بشكل فعال.

W3C

اتحاد شبكة الويب العالمية (W3C) هو المنظمة الأساسية المسؤولة عن تطوير معايير الويب والحفاظ عليها ، بما في ذلك CSS. يقدم موقع الويب الخاص بهم مرجعًا شاملاً لـ CSS يغطي جميع جوانب اللغة ، من البنية الأساسية إلى تقنيات التخطيط المتقدمة. يتم تنظيم المرجع حسب الخاصية ويتضمن أمثلة على كيفية استخدام كل منها.

بالإضافة إلى المرجع ، يوفر موقع W3C أيضًا ثروة من الموارد الأخرى لتعلم واستخدام CSS ، بما في ذلك البرامج التعليمية والمواصفات وأفضل الممارسات. إذا كنت جادًا في إتقان CSS ، فإن موقع W3C هو مورد أساسي.

الوحدات

CSS هي لغة معيارية ، مما يعني أنها تتكون من وحدات منفصلة يمكن دمجها لإنشاء ورقة أنماط كاملة. تركز كل وحدة على منطقة معينة من CSS ، مثل التخطيط أو الطباعة أو اللون. من خلال تقسيم CSS إلى وحدات ، يكون من السهل فهمها واستخدامها بفعالية.

يوفر موقع W3C قائمة بجميع وحدات CSS ، إلى جانب روابط لمواصفاتها. تتضمن بعض أهم الوحدات ما يلي:

  • محددات CSS: تحدد بناء الجملة لتحديد العناصر في المستند.
  • نموذج مربع CSS: يصف كيفية تخطيط العناصر في الصفحة.
  • تخطيط شبكة CSS: يوفر نظامًا قويًا لإنشاء تخطيطات معقدة.
  • تحويلات CSS: يسمح لك بتحويل شكل العناصر وحجمها وموضعها.
  • الرسوم المتحركة لـ CSS: تتيح لك إنشاء رسوم متحركة وانتقالات باستخدام CSS.

من خلال التعرف على وحدات CSS المختلفة ، يمكنك أن تصبح مطور CSS أكثر كفاءة وإنشاء تصميمات أكثر تقدمًا وتطورًا.

في الختام ، يعد وجود مرجع CSS موثوق أمرًا بالغ الأهمية لأي مطور يعمل مع CSS. يوفر موقع W3C مرجعًا شاملاً ، إلى جانب العديد من الموارد الأخرى ، لمساعدتك على إتقان CSS. بالإضافة إلى ذلك ، يمكن أن يساعدك فهم وحدات CSS المختلفة في إنشاء تصميمات أكثر تقدمًا وتعقيدًا.

الرسوم المتحركة CSS

الرسوم المتحركة CSS هي أداة قوية تسمح للمطورين بإنشاء تجارب مستخدم ديناميكية وجذابة على مواقعهم على الويب. يمكن استخدام الرسوم المتحركة للفت الانتباه إلى عناصر محددة على الصفحة ، أو تقديم ملاحظات للمستخدمين ، أو ببساطة إضافة اهتمام بصري.

لإنشاء رسم متحرك CSS ، تحتاج أولاً إلى تحديد العنصر الذي تريد تحريكه ثم تحديد الرسم المتحرك باستخدام خصائص CSS. ال animation تُستخدم الخاصية لتحديد الرسوم المتحركة ، ولها العديد من الخصائص الفرعية التي تسمح لك بالتحكم في التوقيت والمدة والتفاصيل الأخرى للرسوم المتحركة.

أحد الأشياء المهمة التي يجب ملاحظتها هو أن الرسوم المتحركة يمكن أن تكون كثيفة الاستخدام للموارد ، لذلك من المهم استخدامها باعتدال وبعناية. يجب أن تعمل الرسوم المتحركة على تحسين تجربة المستخدم ، وليس الانتقاص منها ، لذلك من المهم اختبارها بدقة والنظر في كيفية تأثيرها على الأداء العام لموقع الويب الخاص بك.

فيما يلي بعض خصائص CSS الأساسية التي يمكنك استخدامها لإنشاء رسوم متحركة:

اسم الرسوم المتحركة

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

مدة الرسوم المتحركة

تحدد هذه الخاصية المدة الزمنية التي سيستغرقها الرسم المتحرك حتى يكتمل. يمكنك تحديد المدة بالثواني أو بالمللي ثانية.

وظيفة توقيت الرسوم المتحركة

تحدد هذه الخاصية وظيفة التوقيت التي سيتم استخدامها للتحكم في سرعة الحركة. هناك العديد من وظائف التوقيت المحددة مسبقًا التي يمكنك استخدامها ، مثل linear, ease-inو ease-out، أو يمكنك إنشاء وظائف التوقيت المخصصة الخاصة بك.

تأخير الرسوم المتحركة

تحدد هذه الخاصية مقدار الوقت الذي سينقضي قبل بدء الرسم المتحرك. يمكن أن يكون هذا مفيدًا إذا كنت تريد ترتيب توقيت الحركات المتعددة على الصفحة.

الرسوم المتحركة-التكرار-العد

تحدد هذه الخاصية عدد مرات تكرار الرسم المتحرك. يمكنك تحديد عدد معين من التكرارات ، أو يمكنك استخدام القيمة infinite لإنشاء رسم متحرك يتكرر إلى أجل غير مسمى.

اتجاه الرسوم المتحركة

تحدد هذه الخاصية الاتجاه الذي سيتم تشغيل الرسم المتحرك فيه. يمكنك تحديده normal للرسوم المتحركة إلى الأمام ، reverse للرسوم المتحركة إلى الوراء ، أو alternate للتبديل بين الرسوم المتحركة للأمام والخلف.

وضع تعبئة الرسوم المتحركة

تحدد هذه الخاصية كيف يجب تصميم العنصر الذي يتم تحريكه قبل الرسم المتحرك وبعده. يمكنك تحديد none لترك نمط العنصر دون تغيير ، forwards للاحتفاظ بنمط العنصر في نهاية الرسم المتحرك ، أو backwards لتطبيق نمط العنصر في بداية الرسم المتحرك.

حالة تشغيل الرسوم المتحركة

تحدد هذه الخاصية ما إذا كانت الرسوم المتحركة قيد التشغيل أو متوقفة مؤقتًا. يمكنك استخدام القيمة paused لإيقاف الرسم المتحرك مؤقتًا ، أو running لبدء أو استئنافه.

في الختام ، تعد CSS Animations أداة قوية يمكن استخدامها لإنشاء تجارب مستخدم ديناميكية وجذابة على موقع الويب الخاص بك. ومع ذلك ، من المهم استخدامها باعتدال وبعناية ، حيث يمكن أن تكون كثيفة الاستخدام للموارد وتؤثر على الأداء العام لموقع الويب الخاص بك. من خلال فهم خصائص CSS الرئيسية المستخدمة في إنشاء الرسوم المتحركة ، يمكنك إنشاء رسوم متحركة تعزز تجربة المستخدم وتضيف اهتمامًا مرئيًا إلى موقع الويب الخاص بك.

أكثر قراءة

CSS (أوراق الأنماط المتتالية) هي لغة تستخدم لوصف عرض لغات الترميز مثل HTML و XML. يتم استخدامه لتصميم صفحات الويب وتخطيطها عن طريق تغيير الخط واللون والحجم والتباعد بين المحتوى أو تقسيمه إلى أعمدة متعددة أو إضافة رسوم متحركة وميزات زخرفية أخرى. يوفر CSS الكثير من العمل ويمكنه التحكم في تخطيط صفحات الويب المتعددة في وقت واحد. (مصدر: مستندات ويب MDN, W3Schools)

شروط تطوير المواقع ذات الصلة

الصفحة الرئيسية » بناء الموقع » قاموس المصطلحات » ما هو CSS؟ (اوراق النمط المتعاقب)

البقاء على علم! اشترك في صحيفتنا الإخبارية
اشترك الآن واحصل على وصول مجاني إلى أدلة وأدوات وموارد المشتركين فقط.
يمكنك إلغاء الاشتراك في أي وقت. بياناتك آمنة.
البقاء على علم! اشترك في صحيفتنا الإخبارية
اشترك الآن واحصل على وصول مجاني إلى أدلة وأدوات وموارد المشتركين فقط.
يمكنك إلغاء الاشتراك في أي وقت. بياناتك آمنة.
مشاركة على ...