أفضل 12 دورة وكتب عبر الإنترنت لإتقان CSS

قد تبدو مواقع الويب مملة بدون CSS لأن لغة التصميم هذه مسؤولة عن نمط النص وحجمه ولونه وموضعه على صفحة الويب.

ما هو CSS؟

أوراق الأنماط المتتالية ، والمختصرة باسم CSS ، هي لغة تصف كيفية عرض عناصر HTML على شاشة أو ورقة. تم إنشاء CSS بواسطة World Wide Web Consortium (W3C) في عام 1996.

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

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

لماذا CSS؟

# 1. CSS فعال

تحمينا CSS من ألم إضافة علامات مثل الخط ومحاذاة العناصر والحدود واللون ونمط الخلفية والحجم في كل صفحة ويب.

# 2. وفر الوقت

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

# 3. توافق أجهزة متعددة

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

# 4. تطبيقات سهلة الصيانة

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

كيف يتم استخدام CSS مع HTML لإنشاء مواقع الويب؟

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

  أفضل 18 صانع فيديو عبر الإنترنت لعملك

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

وفقرة يُشار إليها بالرمز

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

سنشرح كيفية عمل HTML و CSS في القسم التالي.

أنواع CSS

# 1. CSS خارجي

لتصنيف CSS على أنها خارجية ، يجب أن يكون هناك ملف HTML وملف CSS منفصل بامتداد .css. على سبيل المثال ، style.css. يتم ربط ملف CSS بملف / مستند HTML باستخدام علامة ارتباط.

مثال على ملف CSS خارجي:

.main {

    text-align:center;   

}

.GF {

    color:red;

    font-size:50px;

    font-weight:bold;

}

#TP {

    color:blueviolet

    font-style:bold;

    font-size:20px;

}

يمكن ربط ملف CSS بمستند HTML التالي:

<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/>

    </head>

    <body>

        <div class = "main">

            <div class ="GF">Geek Flare!!!! </div>

            <div id ="TP">

               Your favourite tech portal

            </div>

        </div>

    </body>

</html>

تربط علامة الارتباط ورقة الأنماط الخارجية بمستند HTML ، بينما تحدد سمة href موقع ورقة الأنماط الخارجية.

ستظهر صفحة الويب النهائية على النحو التالي:

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

# 2. CSS داخلي

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

هذا مثال على CSS الداخلية:

<!DOCTYPE html>

<html>

    <head>

        <title>Internal CSS Example</title>

        <style>

            .main {

                text-align:center; 

            }

            .GF {

                color:Red;

                font-size:70px;

            }

            .custom {

                font-style:bold;

                font-size:20px;

            }

        </style>

    </head>

    <body>

        <div class = "main">

            <div class ="GF">Internal CSS Demonstration</div>

            <div class ="custom">

                The Results

            </div>

        </div>

    </body>

</html>

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

لا تعد CSS الداخلية مثالية في معظم الحالات لأنها تجعل الشفرة في مستند HTML كبيرة جدًا ، مما يؤثر على سرعة التحميل.

# 3. مضمنة CSS

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

<!DOCTYPE html>

<html>

    <head>

        <title>Inline CSS</title>

    </head>

    <body>

        <p style = "color:red; font-size:50px;

                font-style:bold; text-align:center;">

            Inline CSS Demonstration

        </p>

    </body>

</html>

سيظهر المستند الذي تم تقديمه على النحو التالي:

إن Inline CSS ليس مثاليًا إذا كنت ترغب في توسيع نطاق تطبيق الويب الخاص بك ، لأن إضافة خاصية CSS إلى كل علامة HTML تستغرق وقتًا.

استكشف بعضًا من أفضل الدورات والكتب على الإنترنت لإتقان CSS.

أنشئ مواقع ويب سريعة الاستجابة باستخدام HTML و CSS

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

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

متقدمة CSS و Sass

تقدم لك دورة CSS و Sass المتقدمة كيفية عمل CSS خلف الكواليس من خلال استكشاف موضوعات مثل التتالي ، والخصوصية ، والميراث.

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

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

تعلم CSS

تعلم لغة CSS من Codecademy كيفية استخدام CSS لتحويل HTML إلى مواقع ويب لافتة للنظر بصريًا. تنقسم الدورة إلى 8 دروس وتحتوي على 6 مشاريع لاختبار مدى استيعابك.

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

قم ببناء أول صفحة ويب باستخدام HTML و CSS

تعلم دورة إنشاء صفحة الويب الأولى الخاصة بك كيفية استخدام HTML5 و CSS3 لإنشاء مواقع ويب سريعة الاستجابة. يتم تقديم هذه الدورة المجانية في 4 وحدات وتتطلب حوالي 10 ساعات لإكمالها. لا تحتاج إلى أي معرفة مسبقة بالبرمجة لتعلم هذه الدورة.

أساسيات CSS

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

مقدمة إلى CSS3

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

مقدمة عن HTML و CSS

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

هذه الدورة المجانية مناسبة للمبتدئين وتستخدم نموذج التعلم الذاتي. تحتاج إلى حوالي 3 أسابيع لإكمال هذه الدورة التي يدرسها خبراء الصناعة.

دروس CSS

دروس CSS هي دورة مجانية على W3schools. تم تقسيم الدورة إلى فصول لتسهيل الفهم. يقدم كل فصل أمثلة وتمارين. تحتوي المنصة على منصة عبر الإنترنت حيث يمكنك تجربة مفاهيم مختلفة من خلال زر “جربها بنفسك”.

CSS: الدليل النهائي

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

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

تصميم ويب سريع الاستجابة باستخدام HTML5 و CSS

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

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

HTML و CSS: تصميم وبناء مواقع الويب

هذا الكتاب عن HTML و CSS مثالي للجميع ، سواء كنت هاويًا أو طالبًا أو محترفًا.

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

CSS الحديثة

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

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

الكلمات الأخيرة

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

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

بعد ذلك ، يمكنك التحقق من أوراق غش CSS للمطورين والمصممين.