CSS من الأعلى إلى الأسفل – بما في ذلك CSS3

إفشاء: يساعدك دعمك في الحفاظ على تشغيل الموقع! نحصل على رسوم إحالة لبعض الخدمات التي نوصي بها في هذه الصفحة.


Cascading Style Sheets ، أو CSS ، هي اللغة التي تجعل الويب جميلًا. إلى جانب HTML و JavaScript ، إنها واحدة من التقنيات التي يجب على كل مطور أمامي إتقانها.

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

في دليل الموارد هذا ، نقدم مقدمة أساسية لماهية CSS ، وما هو قادر عليه ، بالإضافة إلى الميزات التي تم طرحها في أحدث إصدار: CSS3.

الشروع في استخدام CSS

إذا كنت مستعدًا للانطلاق ، فإليك ما يغطي هذا الدليل:

  • مقدمة في CSS: إذا كنت جديدًا في CSS ، فهذا هو المكان المناسب للبدء. يقدم هذا القسم نظرة عامة أساسية على CSS ، ويوجهك نحو موارد رائعة أخرى.
  • ما الجديد في CSS3: إذا كنت ترغب في البحث عن الوحدات التي تم طرحها في CSS3 ، توجه إلى هذا الموضوع حيث ستتعرف على استعلامات الوسائط ، وتحجيم الصناديق ، والتحويلات ثلاثية الأبعاد ، والرسوم المتحركة ، وتخطيطات الأعمدة المتعددة ، والمزيد.
  • إنشاء مواقع مستجيبة باستخدام CSS: يجب أن يتم عرض مواقع الويب اليوم بشكل جميل على جهاز من أي حجم ، و CSS هي اللغة التي تجعل ذلك يحدث.
  • كيفية عمل أزرار انزلاق الباب: تمهيدي لدمج jQuery مع CSS لإنشاء تأثيرات رائعة حقًا.
  • كل شيء عن ألوان CSS: استيقظ واستمر بألوان CSS. يتضمن هذا القسم مرجعًا رائعًا للألوان.
  • كتابة CSS فعالة:: أصبح الحصول على صفحات التحميل السريع أكثر أهمية من أي وقت مضى. سيوضح لك هذا كيفية كتابة CSS التي يمكن أن تقلل أوقات التحميل بشكل ملحوظ.
  • ماجستير CSS أون لاين: توفر هذه الموارد مسارًا لإتقان CSS. إذا كنت تفضل أسلوب التعليم عن طريق العمل ، فهذا القسم مناسب لك.
  • أعمال CSS المذهلة: تبحث عن الإلهام؟ هنا قمنا بجمع بعض من أروع إبداعات CSS على الويب.
  • الكلمة الرسمية على CSS3: الآن بعد أن تعرفت على بعض CSS ، وتعرفت على الوحدات التي تم طرحها في CSS3 ، من الجيد أن تتعرف على W3C ، المؤسسة التي تقود تطوير CSS.
  • اقتراحات للقراءة: إذا كنت تفضل التعلم بمساعدة كتاب إلكتروني أو كتاب ورقي ، فراجع قائمة الكتب الموصى بها لدينا ، حيث من المؤكد أنك ستجد عنوانًا يثير اهتمامك.

مقدمة في CSS

Contents

مقدمة في CSS

CSS ، أو أوراق الأنماط المتتالية ، هي اللغة المستخدمة لتحديد نمط ومظهر موقع ويب.

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

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

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

ثلاثة أماكن لكتابة قواعد CSS

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

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

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

يمكن ربط ورقة أنماط خارجية بأي عدد من مستندات HTML مما يتيح لك التحكم في مظهر موقع ويب بأكمله من ملف CSS واحد.

ربط قواعد CSS بعناصر HTML محددة

تتكون قواعد CSS من جزأين: محدد وإعلان. يتكون كل إعلان أيضًا من جزأين: خاصية وقيمة.

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

المحددات والخصوصية

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

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

خلاف ذلك ، ستخضع قائمة التنقل والقائمة في نص الصفحة لقواعد CSS نفسها.

إن فهم كيفية عمل محددات CSS هو مفتاح كتابة القواعد التي تؤثر على عناصر HTML الصحيحة.

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

الاستخدامات الشائعة لـ CSS

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

خط التصميم

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

من خلال تطبيق مبادئ التحديد ، يمكن تطبيق نمط خط مختلف على كل عنصر HTML على الصفحة.

نموذج الصندوق

من الأفضل فهم المساحة حول كل عنصر HTML من خلال التفكير في ما يشار إليه باسم نموذج الصندوق:

رسم تخطيطي لنموذج الصندوق

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

خذ بعين الاعتبار عنصر فقرة HTML التالي:

فقرة من النص.

ماذا سيكون تأثير كتابة قاعدة CSS التالية?

ص {
الحشو: 10 بكسل ؛
الحد: صلب 1 بكسل ؛
الهامش: 10 بكسل ؛
}}

ستظهر الفقرة محاطة بـ:

  • أولاً ، 10 بكسل من المساحة المتروكة (مساحة فارغة) على جميع جوانب نص الفقرة,
  • ثانيًا ، حدود صلبة عريضة 1 بكسل حول الفقرة وحشو,
  • ثالثًا ، 10 بكسل من الهامش (مسافة فارغة) بين الحد وأي عنصر مجاور.

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

باستخدام العوامات

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

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

من الأسهل فهم العوامات في سياق مستند معالج النصوص. ضع في اعتبارك صورة في مستند نصي.

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

الخاصية العائمة لها أربع قيم مقبولة: اليسار ، اليمين ، لا شيء ، والوراثة. في حالة المثال أعلاه:

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

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

على سبيل المثال ، قد تبدو قائمة التنقل النموذجية كما يلي في HTML:

  • الصفحة الرئيسية

  • متجرنا

  • معلومات عنا

  • اتصل بنا.

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

لي {
تعويم: اليسار؛
}}

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

امسح الطفو

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

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

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

استخدام خاصية الموقع

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

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

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

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

الميزات الجديدة في CSS3

ما الجديد في CSS3

بينما كان CSS2 مواصفة واحدة ، فقد تم تقسيم CSS3 إلى أكثر من خمسين وحدة مختلفة ، كل منها في مرحلة مختلفة من التطوير والقبول.

تتم إدارة العمل الجاري على CSS3 بواسطة اتحاد شبكة الويب العالمية ، أو W3C ، ويقدمون موقعًا مركزيًا حيث يمكنك تتبع جميع أعمال التقييس الجارية في CSS3.

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

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

إنشاء مواقع مستجيبة باستخدام CSS

إنشاء مواقع مستجيبة باستخدام CSS

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

اليوم ، يجب أن يكون موقعك الإلكتروني قابلاً للعرض على الشاشات الكبيرة والأجهزة الصغيرة وكل حجم إطار عرض بينهما.

للقيام بذلك ، يجب أن يتوافق CSS لموقع الويب الخاص بك مع مبادئ القيادة الثلاثة لتصميم الويب سريع الاستجابة.

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

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

تقدم التقنية الأولى للجوال فائدتين جديرة بالذكر:

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

تعلم التصميم المستجيب

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

مع تزايد شعبية تخطيطات أنماط الأعمدة ، ظهر تحد جديد لمصممي المواقع: التحدي المتمثل في تكييف تخطيطات الأعمدة مع الأجهزة من جميع الأحجام.

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

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

كيفية جعل أزرار انزلاق الباب

كيفية جعل أزرار انزلاق الباب

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

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

اضغط على الصورة لتبديل الرسوم المتحركة.

مثال على أزرار الأبواب المنزلقة

إنشاء صورك

التقنية التي سنستخدمها لإنشاء هذه الأزرار تسمى CSS “sliding-door”. لإعداد هذه الأزرار ، نحتاج إلى صورتين لكل إصدار من الزر – في حالتنا ، صورتان زر أسود وصورتان زر أزرق ، أربع صور في المجموع.

لإنشاء هذه الصور ، نبدأ بصور زر صلبة.

الزر الأزرق
الزر الأسود

ما علينا القيام به هو تقسيم كل زر إلى صورتين:

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

فيما يلي الصور التي سننتهي بها بعد قطعها إلى الأحجام المناسبة:

الزر الأزرق الأيسرالزر الأزرق لليمينالزر الأزرق لليمين
الزر الأسود الأيسرالزر الأسود لليمينالزر الأسود لليمين

بمجرد الانتهاء من إنشاء جميع الصور الأربع ، تكون جاهزًا لبدء الترميز.

زر HTML

سيتكون زر HTML الخاص بنا من ثلاثة مكونات: غلاف div خارجي ، وعنصر ربط ، وعنصر امتداد.

زر كتابة

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

ومع ذلك ، في الممارسة العملية ، قد ترغب في الاحتفاظ بها كلها مضمنة ، خاصة إذا كنت تستخدم نظام إدارة المحتوى (CMS) مثل WordPress الذي سيدرج علامات الفقرات بعد كل فاصل سطر.

مضيفا صور الزر

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

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

.الزر المنزلق {
عرض: كتلة مضمنة ؛
العرض: تلقائي
الهامش: 20 بكسل ؛
}}

سيضيف هذا الجزء من التعليمات البرمجية بعض المساحة حول الزر ببساطة ، ويجبر div المتضمن على تقليص حجم الارتباط والنص. نحن الآن على استعداد لإضافة صور الأزرار.

.انزلاق الارتباط {
صورة الخلفية: url (‘blue-button-right.png’) ؛
حجم الخلفية: تلقائي 100٪ ؛
موضع الخلفية: يمين
تكرار الخلفية: لا تكرار ؛
}}
.انزلاق النص {
صورة الخلفية: url (‘blue-button-left.png’) ؛
حجم الخلفية: تلقائي 100٪ ؛
موضع الخلفية: اليسار.
تكرار الخلفية: لا تكرار ؛
}}

لقد أضفنا الآن صورة الزر. لسوء الحظ ، ليس هناك الكثير للنظر إليه حتى الآن. أيضًا ، في حالة التكبير / التصغير والنظر عن كثب ، ستلاحظ أن الصورة الموجودة على الجانب الأيسر موجودة بالفعل في أعلى الصورة اليمنى. ليس التأثير الذي نحن بصدده.

زر تالف

تصميم الزر

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

.انزلاق الارتباط {
عرض: كتلة مضمنة ؛
}}
.انزلاق النص {
الحشو: 20 بكسل ؛
عرض: كتلة مضمنة ؛
}}

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

.انزلاق الارتباط {
الهامش الأيسر: 17 بكسل ؛
}}
.انزلاق النص {
الهامش الأيسر: -17 بكسل ؛
}}

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

قبل المضي قدمًا ، دعنا نمضي قدمًا وإضافة بعض الأنماط إلى نص الزر.

.انزلاق النص {
اللون: #fff ؛
حجم الخط: 14pt ؛
عائلة الخطوط: “Open-Sans” ، Arial ، sans-serif ؛
تحويل النص: أحرف كبيرة ؛
وزن الخط: غامق ؛
محاذاة النص: مركز ؛
}}

عند هذه النقطة ، يبدو الزر في الواقع بمثابة زر!

زر جيد

تأثير زر تحويم

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

.انزلاق النص: hover ، .sliding-text: active {
box-shadow: inset 0 0 0 1000px rgba (255،255،255، .2) ؛
}}

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

يمكننا إصلاح كلتا هاتين المشكلتين بإضافة بضعة أسطر من التعليمات البرمجية إلى عنصر الامتداد.

.انزلاق النص {
-خاصية انتقال مجموعة الويب: box-shadow؛ / * سفاري * /
-مدة انتقال مجموعة الويب: .2s ؛ / * سفاري * /
خاصية الانتقال: box-shadow ؛
مدة الانتقال: .2s ؛
نصف قطر الحد: 12 بكسل ؛
}}

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

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

تبديل صور الزر

في الوقت الحالي ، يمكننا إضافة عنوان URL إلى سمة href لعنصر الارتساء ، وستعمل أزرارنا بشكل رائع كروابط. ومع ذلك ، في الجزء العلوي من هذا المنشور ، كان هناك ملف gif أظهر تأثير تبديل غير صورة الزر. لنستعرض الآن عملية إنشاء أزرار التبديل الآن.

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

لنبدأ بـ CSS.

.الزر الحالي. الارتباط المنزلق {
صورة الخلفية: url (‘black-button-right.png’) ؛
}}
.الزر الحالي. انزلاق النص {
صورة الخلفية: url (‘black-button-left.png’) ؛
}}

في الوقت الحالي ، لا يعمل تأثير التبديل. ومع ذلك ، إذا أضفت يدويًا الزر الحالي للفئة إلى قسم حاوية الزر ، فسترى الإصدار الثاني من الزر.

للتبديل بين نسختين من الزر عند النقر ، ستحتاج إلى استخدام jQuery لتبديل فئة الزر الحالي وإيقاف تشغيل الزر.

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

لذلك ، لتعيين أي زر كزر تبديل ، سنضيف فقط تلك الفئة إلى غلاف div الخارجي:

الآن ، يمكننا استخدام jQuery لتبديل فئة الزر الحالي وإيقاف تشغيلها لهذا الزر.

$ (‘. toggle-button’). انقر (الوظيفة () {
$ (this) .toggleClass (“الزر الحالي”) ؛
عودة كاذبة؛
}) ؛

هناك بعض الأشياء التي تحدث في هذا الرمز. دعنا نسير من خلاله.

أولاً ، نقوم بتحميل jQuery من Google Hosted Libraries. إذا كان موقع الويب الخاص بك يستخدم jQuery بالفعل ، فيمكنك حذف العنصر النصي الأول.

يحتوي عنصر البرنامج النصي الثاني على وظيفة jQuery بسيطة.

تراقب الوظيفة أي عنصر باستخدام زر تبديل الفئة. عند النقر على أي عنصر في هذه الفئة ، يتم تشغيل وظيفة لتبديل زر الفصل الحالي أو إيقاف تشغيله للعنصر الذي تم النقر عليه.

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

مع إضافة أجزاء التعليمات البرمجية هذه ، يمكننا تبديل زرنا إلى محتوى قلوبنا.

اضغط على الصورة لتبديل الرسوم المتحركة.

مثال على زر انزلاق الباب 2

كود المصدر الكامل

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

أزرار أبواب منزلقة

.الزر المنزلق {
عرض: كتلة مضمنة ؛
العرض: تلقائي
الهامش: 20 بكسل ؛
}}
.انزلاق الارتباط {
صورة الخلفية: url (‘blue-button-right.png’) ؛
حجم الخلفية: تلقائي 100٪ ؛
موضع الخلفية: يمين ؛
تكرار الخلفية: لا تكرار ؛
عرض: كتلة مضمنة ؛
الهامش الأيسر: 17 بكسل ؛
}}
.انزلاق النص {
صورة الخلفية: url (‘blue-button-left.png’) ؛
حجم الخلفية: تلقائي 100٪ ؛
موضع الخلفية: اليسار.
تكرار الخلفية: لا تكرار ؛
عرض: كتلة مضمنة ؛
الحشو: 20 بكسل ؛
الهامش الأيسر: -17 بكسل ؛
اللون: #fff ؛
حجم الخط: 14pt ؛
عائلة الخطوط: “Open-Sans” ، Arial ، sans-serif ؛
تحويل النص: أحرف كبيرة ؛
وزن الخط: غامق ؛
محاذاة النص: مركز ؛
-خاصية انتقال مجموعة الويب: box-shadow؛ / * سفاري * /
-مدة انتقال مجموعة الويب: .2s ؛ / * سفاري * /
خاصية الانتقال: box-shadow ؛
مدة الانتقال: .2s ؛
نصف قطر الحد: 12 بكسل ؛
}}
.انزلاق النص: hover ، .sliding-text: active {
box-shadow: inset 0 0 0 1000px rgba (255،255،255، .2) ؛
}}
.الزر الحالي. الارتباط المنزلق {
صورة الخلفية: url (‘black-button-right.png’) ؛
}}
.الزر الحالي. انزلاق النص {
صورة الخلفية: url (‘black-button-left.png’) ؛
}}


زر التبديل

زر الارتباط

$ (‘. toggle-button’). انقر (الوظيفة () {
$ (this) .toggleClass (“الزر الحالي”) ؛
عودة كاذبة؛
}) ؛

وضع الزر الخاص بك للاستخدام الجيد

آخر جزء في اللغز هو استخدام الأزرار الجديدة بشكل جيد. إليك بضعة أفكار لمساعدتك على البدأ:

  • أضف عنوان URL إلى سمة href لعنصر الارتساء واستخدم الزر للربط بأي صفحة ويب. لاحظ أنه للقيام بذلك ، ستحتاج إلى حذف فئة زر التبديل من مجمّع div div.
  • استخدم jQuery أو JavaScript إضافية لعرض معلومات إضافية أو إخفائها عند تبديل الزر.
  • إذا كنت تشعر حقًا بالطموح ، فاستخدم الأزرار للتنقل في الموقع ، واستخدم jQuery لتحديد ما إذا كانت الصفحة الحالية تتطابق مع عنوان URL للزر وتبديل فئة الزر الحالي إذا كان التطابقان.

كل شيء عن ألوان CSS

كل شيء عن ألوان CSS

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

خصائص ألوان CSS

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

عادة ما يتم التحكم في لون العنصر نفسه (المربع) بلون الخلفية أو لون الحدود أو الخلفية المختصرة وخصائص الحدود ، والتي تتضمن معلومات اللون. يمكنك أيضًا تعيين اللون على ظل الصندوق.

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

إعلانات اللون

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

/ * كل هذه الثلاثة ستكون بنفس اللون. * /

.أحمر- rgb {
لون الخلفية: RGB (255 ، 0 ، 0) ؛
}}

.رد هيكس {
لون الخلفية: # ff0000 ؛
}}

.الاسم الأحمر {
لون الخلفية: أحمر ؛
}}

الثاني (القيمة السداسية) هو الأكثر شيوعًا ، لكننا سنبدأ بـ RGB لأن القيم السداسية لا معنى لها إلا إذا فهمت كيفية عمل RGB.

قيم RGB

تحتوي شاشات الكمبيوتر وشاشات التليفزيون وشاشات العرض الأخرى المماثلة على وحدات بكسل. في الشاشات الملونة ، يتم تقسيم كل بكسل إلى ثلاث وحدات بكسل فرعية: الأحمر والأخضر والأزرق.

هذه هي “الألوان الأساسية للضوء”. يمكن استخدام مزيج من هذه الألوان الثلاثة بكثافة متفاوتة لإنشاء أي لون يمكن للعين البشرية رؤيته. يُعرف هذا باسم “خلط الألوان المضافة”.

(من الجدير بالذكر أن هذا له علاقة بالعين البشرية وليس بالضوء نفسه).

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

كمعيار ، تستخدم أجهزة الكمبيوتر نطاقًا من صفر (0 – بعيدًا تمامًا) إلى 255 (طوال الطريق) لكل بكسل فرعي (على سبيل المثال ، 128 في منتصف الطريق). هذه 256 كثافة محتملة لكل بكسل فرعي ، مما يعني أنه يمكن تخزين قيمة كل بكسل فرعي بايت 8 بت (2 8 = 256).

نظرًا لوجود ثلاثة ألوان ، يتم تمثيل كل منها بـ 8 بت ، فإن إجمالي عدد الألوان التي يمكن تمثيلها بهذه الطريقة يزيد عن 16 مليونًا (256 3 = 167777216).

يمكن تمثيل هذا النطاق من الألوان بمجرد ملاحظة قيمة كل بكسل فرعي ، مثل هذا:

RGB (0 ، 128 ، 255)

في هذا المثال ، تكون البكسل الفرعي الأحمر بعيدًا تمامًا ، والبكسل الفرعي الأخضر في منتصف الطريق ، والبكسل الفرعي الأزرق على طول الطريق. يبدو هذا اللون مثل هذا:

في هذا النظام ، يكون اللون الأبيض (كل الألوان متوفرة) هو rgb (255 ، 255 ، 255) والأسود (كل الألوان متوقفة) هو rgb (0 ، 0 ، 0).

يمكن أيضًا تحديد ألوان RGB كنسب مئوية ، باستخدام العلامة العشرية وليس برقم زائدة واحد:

رغب (0.0 ، 50.0 ، 100.0)

هذا الاستخدام ليس شائعًا جدًا.

قيم سداسية

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

# 0080ff

يمثل الزوج الأول القيمة الحمراء ، ويمثل الزوج الثاني القيمة الخضراء ، ويمثل الزوج الثالث القيمة الزرقاء. في هذا المثال ، يعني 00 عدم وجود أحمر على الإطلاق ، و 80 تعني أخضر في منتصف الطريق ، و ff يعني الأزرق على طول الطريق. لذلك هذا هو نفس لون RGB (0 ، 128 ، 255).

قد يبدو هذا مربكًا بعض الشيء إذا كنت لا تستخدم الأرقام السداسية العشرية. في نظامنا العشري العادي ، يمكن أن يحتوي كل رقم على 10 قيم (0-9). في الترقيم الست عشري ، يحتوي كل رقم على 16 قيمة محتملة (0-9 ، أ-و).

هذا يجعل من الممكن تمثيل جميع القيم من 0-255 في رقمين ، 0-ff. انظر هذا البرنامج التعليمي الست عشري لمزيد من المعلومات.

في هذا النظام ، الأبيض هو #ffffff والأسود هو # 000000.

تعد قيم ألوان Hex الطريقة الأكثر شيوعًا لتحديد الألوان في CSS.

أسماء ألوان CSS

الطريقة الأخيرة لتحديد لون معين هي استخدام أحد أسماء الألوان المحددة مسبقًا. يحتفظ W3C بقائمة بأسماء الألوان الرسمية التي يمكن استخدامها بدلاً من رموز الألوان المرقمة ، وتقوم بتحديثها في بعض الأحيان. على سبيل المثال ، يمكن استخدام الأسود بدلاً من # 000000.

في الأيام الأولى للويب ، ساعدت هذه الألوان المسماة في تحديد مجموعة صغيرة وغير رسمية من “الألوان الآمنة للويب” والتي كانت مدعومة جيدًا عبر غالبية المتصفحات وشاشات العرض.

اليوم ، أكبر ميزة لامتلاك أسماء اللون هي أنها أسهل للتذكر. على سبيل المثال ، الضوء الأزرق أسهل في التذكر (والكتابة بشكل صحيح) من مكافئاته ، # add8e6 أو rgb (173 ، 216 ، 230).

قائمة أسماء ألوان CSS

اسم اللون
قيم سداسية
مثال اللون
أليس الأزرق# f0f8ff
الأبيض العتيقة# faebd7
أكوا# 00ffff
زبرجد# 7fffd4
اللازوردية# f0ffff
اللون البيج# f5f5dc
حساء دسم# ffe4c4
أسود# 000000
blanchedalmond# ffe4c4
أزرق# 0000ff
بنفسجي مزرق# 8a2be2
بنى# a52a2a
خشب قوي البنية# deb887
طالبا الأزرق# 5f9ea0
مصيدة# 7fff00
شوكولاتة# d2691e
مرجاني# ff7f50
ردة الذرة الأزرق# 6495ed
حرير الذرة# fff8dc
قرمزي# dc143c
أزرق غامق# 00008b
darkcyan# 008b8b
darkgoldenrod# b8860b
الرمادي الداكن# a9a9a9
أخضر غامق# 006400
رمادي غامق# a9a9a9
darkkhaki# bdb76b
darkmagenta# 8b008b
darkolivegreen# 556b2f
برتقالي قاتم# ff8c00
داركورشيد# 9932cc
احمر غامق# 8b0000
سلمون داكن# e9967a
أسود داكن# 8fbc8f
darkslateblue# 483d8b
تصنيف الظلام# 2f4f4f
تصنيف الظلام# 2f4f4f
أزرق داكن# 00ced1
بنفسجي غامق# 9400d3
زهري غامق# صص 1493
deepskyblue# 00bfff
dimgray# 696969
dimgrey# 696969
المراوغ الأزرق# 1e90ff
طوب النار# b22222
زهري# fffaf0
فورست جرين# 228b22
ضارب الى الحمرة# ff00ff
غرينزبورو#dcdcdc
شبح# f8f8ff
ذهب# ffd700
goldenrod# daa520
اللون الرمادي# 808080
أخضر# 008000
دفيئة# adff2f
اللون الرمادي# 808080
المن# f0fff0
وردي فاقع# ff69b4
أحمر هندي# cd5c5c
النيلي# 4b0082
عاج# fffff0
الكاكي# f0e68c
خزامى# e6e6fa
لافندربلوش# fff0f5
العشب الأخضر# 7cfc00
الليمون#fffacd
أزرق فاتح# add8e6
ضوء كورال# f08080
ضوء سماوي# e0ffff
lightgoldenrodyellow# fafad2
رمادي فاتح# d3d3d3
اخضر فاتح# 90ee90
رمادي فاتح# d3d3d3
وردي فاتح# ffb6c1
ضوء السلمون# ffa07a
ضوء النجوم# 20b2aa
أزرق فاتح# 87cefa
تصنيفات# 778899
تصنيفات# 778899
أزرق فاتح# b0c4de
أصفر فاتح# ffffe0
جير# 00ff00
ليمون اخضر# 32cd32
الكتان# faf0e6
كستنائي# 800000
المتوسطة# 66cdaa
ازرق متوسط# 0000cd
متوسطة الحجم# ba55d3
متوسط# 9370db
شاشة متوسطة# 3cb371
mediumslateblue# 7b68ee
النابض المتوسط# 00fa9a
تركوازي متوسط# 48d1cc
متوسطة اللون# c71585
منتصف الليل الأزرق# 191970
النعناع# f5fffa
ارتفع ضبابي# ffe4e1
حذاء بدون كعب# ffe4b5
نافاجوهيت#ffdead
القوات البحرية# 000080
قديم# fdf5e6
زيتون# 808000
زيتون# 6b8e23
البرتقالي# ffa500
أحمر برتقالي# صص 4500
زهرة الأوركيد# da70d6
palegoldenrod# eee8aa
أخضر باهت# 98fb98
الفيروز#afeeee
palevioletred# db7093
البابايا# ffefd5
الخوخ# ffdab9
بيرو# cd853f
زهري# ffc0cb
وظيفة محترمة# dda0dd
مسحوق أزرق# b0e0e6
أرجواني# 800080
rebeccapurple# 663399
أحمر# ff0000
وردية اللون# bc8f8f
الأزرق الملكي# 4169e1
السرج البني# 8b4513
سمك السالمون# fa8072
بني رملي# f4a460
سيغرين# 2e8b57
صدف# fff5ee
سيينا# a0522d
فضة# c0c0c0
السماء الزرقاء# 87ceeb
لائحة الأزرق# 6a5acd
الرمادي الداكن# 708090
الرمادي الداكن# 708090
ثلج#fffafa
ربيع اخضر# 00ff7f
الأزرق الصلب# 4682b4
تان# d2b48c
بط نهري صغير# 008080
الشوك# d8bfd8
طماطم# ff6347
الفيروز# 40e0d0
البنفسجي# ee82ee
قمح# f5deb3
أبيض#ffffff
دخان ابيض# f5f5f5
الأصفر# ffff00
الأخضر الأصفر# 9acd32

موارد ألوان CSS الأخرى

  • دروس CSS الملونة من W3Schools هي نظرة عامة سريعة على الموضوع ، مع أمثلة إضافية.
  • CSS Color Converter هي أداة عبر الإنترنت تأخذ أي تنسيق للون وتحولها إلى جميع الأشكال الأخرى ، بالإضافة إلى توفير خيارات لوحة الألوان الممكنة.
  • يعد CSS Color Reference من Mozilla Developer Network أحد أفضل الأماكن للحصول على معلومات حول معايير ومواصفات الألوان المختلفة.
  • الألوان والخلفيات والتدرجات: إضافة الفردية مع CSS (2015) ، بقلم Eric A Meyer ، هو كتاب رائع يغطي ألوان CSS بالتفصيل.

كتابة CSS فعالة

كتابة CSS فعالة

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

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

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

لماذا تعد كفاءة CSS مهمة

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

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

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

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

ولكن ، وضع المستخدمين في الاعتبار عند كتابة الرمز دائمًا فكرة جيدة.

المحددات هي الأكثر أهمية

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

يبدأ بتحديد المفتاح وينتقل إلى اليسار للبحث عن الأسلاف في محدد القاعدة. ثم ، تستمر في التحرك يسارًا حتى تكتمل القاعدة ، أو ينتج عنها عدم تطابق.

لذا ، إذا كان رمزك يقرأ ul > li img ، أول ما يجب تفسيره هو img.

محدد المفتاح هو الجزء الأخير الذي خصصناه لنهاية المحدد.

أربعة أنواع من محددات CSS

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

محدد الهوية

يشير محدد المعرف إلى عنصر HTML محدد باستخدام سمة المعرف ، ويبدو كما يلي:

#الملاحة الرئيسية

في HTML ، سيتم استخدام هذا على النحو التالي:

محدد الفصل

سيحدد محدد الفصل عناصر داخل سمة معينة للفصل ، ويبدو كما يلي:

.مركز

في HTML ، سيتم استخدام هذا على النحو التالي:

محدد العلامات

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

ul

في HTML ، سيتم ببساطة تصميم العلامة وفقًا لما تمليه CSS كلما تم استخدام العلامة (ul في هذه الحالة).

محدد عالمي

يمكن تطبيق المحدد العالمي على أي عنصر داخل المستند. لكتابة CSS فعالة ، يجب تجنب استخدام المحدد العام كلما أمكن ذلك. يتم تحديد المحدد العالمي من خلال ما يلي:

*

قواعد CSS فعالة يجب وضعها في الاعتبار

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

لا تستخدم محددات السليل

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

بعض الأمثلة على محددات السليل التي لا يجب أن تستخدمها ، تشمل:

العنوان h3

تذييل ص

.قسم الجسم

لا تحدد معرفات التأهل

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

li # التنقل الأيسر

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

# التنقل الأيسر

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

استخدم وراثة CSS قدر الإمكان

ميراث الملكية شيء مهم لإتقان. تعرف على الخصائص التي ستنتقل من عنصر إلى عنصر ، ودعهم يقومون بعملهم.

على سبيل المثال ، يتم تحجيم حجم الخط. لذا إذا قمت بتعيينه لجسم المستند ، فليس من الضروري تعيينه لعلامتي p و li.

تحديد القواعد الخاصة بك

ستؤدي إضافة الكثير من القواعد إلى علاماتك إلى إبطاء شفرة CSS ، وتعقيد عملية المطابقة إلى حد كبير.

فمثلا

body .widget-left #widget

هذا رمز ضعيف. هناك الكثير مما يحدث. من ناحية أخرى:

#widget

.القطعة اليسرى

هذه أكثر كفاءة.

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

أدوات لتحسين CSS الخاص بك

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

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

  • اختبار ضغط CSS: هذا رائع لأنه يقوم بإجراء تعديلات صغيرة على موقعك ، مثل التمرير ، والتكبير ، والتغيير ، والمزيد. بالإضافة إلى ذلك ، فإنه يفعل كل هذا في أقل من 30 ثانية. ثم يرسل لك تقريرًا حول فعالية CSS الخاصة بك.
  • تحديد معرفات CSS: أداة تحميل CSS لحزمة الويب أداة مفيدة جدًا. يمكن أن يساعد في تحديد الفئات والمعرفات ، ويمكنه أيضًا القيام ببعض تحسين CSS من أجلك.
  • تقليل محددات CSS الخاصة بك: يعرض هذا جميع محددات CSS الموجودة حاليًا جنبًا إلى جنب مع العناصر التي يستخدمها محددات. يسمح لك ذلك بتقليل عدد المحددات التي تستخدمها ، بحيث يمكنك تقليل حمل الذاكرة الكلي. باستخدام هذه الأداة ، يمكنك توصيل أي عنوان URL ، حتى تتمكن أيضًا من دراسة مواقع أخرى.
  • تقليص كود CSS الخاص بك: تقليص كود CSS الحالي الخاص بك. كلما قل الرمز عليك تجميعه بشكل أفضل. يوفر لقطة شاشة “قبل” و “بعد” ، حتى تتمكن من رؤية التغييرات التي أجرتها هذه الأداة.
  • ضغط ملفات CSS الخاصة بك: سيساعد الضغط على ملفات CSS الخاصة بك في تنظيفها. وبالتالي ، يمكن أن يساعد في تقليل الحجم الكلي لاستجابة HTTP وبالتالي وقت استجابة الخادم.

كتابة CSS فعالة هي فكرة جيدة

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

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

ماجستير CSS أون لاين

ماجستير CSS أون لاين

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

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

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

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

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

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

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

إذا كنت تريد أساسًا متينًا يمكنك من خلاله التطور إلى مطور CSS كامل ، يمكنك أن تفعل أسوأ بكثير من البرنامج التعليمي MDN CSS.

أخيرًا ، لن تكتمل قائمة الموارد بدون ذكر المنظمة التي تقود تطوير CSS.

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

إلهام التصميم

أعمال مذهلة من CSS

إذا كنت تبحث عن إلهام التصميم ، أو ترغب في الحصول على فكرة أفضل عما يمكن أن تفعله CSS ، فإليك بعض الأماكن للتحقق من الأعمال المعروضة لـ CSS.

  • جمعت Creative Bloq هذه القائمة المنسقة التي تضم اثنين وعشرين رسمًا متحركًا مثيرًا لـ CSS. أثناء استعراضك لها ، ضع في اعتبارك أن العديد من هذه الرسوم المتحركة تستخدم أيضًا JavaScript بالإضافة إلى CSS.
  • أنشأت جوائز تصميم CSS هذه القائمة من عشرة رسوم متحركة كاملة مع عروض توضيحية وبرامج تعليمية بحيث يمكنك تطبيق المفاهيم على مشاريعك الخاصة.
  • MDN DemoStudio هو مكان يمكنك فيه عرض المئات من عروض CSS المصنفة إما حسب الشعبية أو عدد المشاهدات أو حالة الاتجاه أو عن طريق عرض أحدث العروض التوضيحية أولاً.
  • يتم استضافة العديد من الرسوم المتحركة المحددة للقوائم السابقة في Code Pen ، وسيتيح لك التوجه مباشرة إلى الأقلام الوصول إلى عدد كبير من الرسوم المتحركة الرائعة التي تم إنشاؤها باستخدام HTML و CSS و JavaScript.
  • إذا كنت قد شاهدت جميع الرسوم المتحركة الرائعة التي تهتم برؤيتها ، وبدلاً من ذلك تريد أن ترى كيف يمكن استخدام CSS لتغيير موقع ويب بالكامل تمامًا دون إجراء تغيير واحد إلى HTML ، فراجع تصميمات مواقع الويب الأنيقة التي تؤكد على قوة CSS.

الكلمة الرسمية على CSS3

الكلمة الرسمية على CSS3

W3C هي المنظمة التي تقود تطوير معايير الويب ، بما في ذلك وحدات CSS3. عندما تتعلم CSS وترفع مستوى مهاراتك ، يجب أن تتعرف على W3C والوثائق التقنية التي يقدمونها.

الصفحة الرئيسية لـ W3C CSS هي نقطة الانطلاق لجميع الأشياء CSS في W3C. من هذه الصفحة يمكنك العثور على معلومات حول أعمال التطوير القياسية الجارية.

اقتراحات للقراءة

اقتراحات للقراءة

تتمثل إحدى الطرق الأكثر فاعلية لتطوير فهم وخبرة أعمق باستخدام CSS3 في استخدام مصادر وطرق تدريس متعددة.

إذا كنت قد جربت برنامجًا تعليميًا أو اثنين وتريد تجربة طريقة إضافية ، أو إذا كنت تفضل العمل من نص مكتوب ، فإليك بعضًا من أفضل نصوص CSS في السوق:

  • CSS3 لمصممي الويب (2010) ، بقلم دان سيدارهولم: مع مقدمة بقلم جيفري زيلدمان ، مؤسس A List Apart ، وتأييد من كريس كويير من CSS-Tricks ، وإريك ماير ، مؤلف العديد من الكتب حول CSS ، هذا النص بقلم دان سيدارهولم ، المؤسس المشارك لـ Dribbble ، هو المعيار الذهبي لنصوص CSS3.
  • HTML و CSS: تصميم وبناء مواقع الويب (2011) ، بقلم جون دوكيت: تتضمن هذه النصوص كلاً من HTML و CSS ، وهي واحدة من المقدمات الأكثر شهرة واحترامًا لكلا الموضوعين.
  • تعلم CSS في يوم واحد وتعلمها جيدًا (2015) ، بقلم جيمي تشان: إذا كنت مبتدئًا في CSS وتريد الحصول على تعليق الأساسيات بسرعة ، فهذا الكتاب هو لك.
  • CSS: الدليل المفقود (2015) ، بقلم ديفيد سوير مكفارلاند: هذا النص لا يستهدف فقط المبتدئين ، ولكنه بدلاً من ذلك يغطي موضوعات متقدمة مثل Flexbox واستخدام Sass. إذا كنت على استعداد للارتقاء من حالة المبتدئين ، فسيساعدك هذا النص على الوصول إلى هناك.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map