قواعد كتابة الكود واماكنها Syntax - تعلم CSS
مرحبًا بكم جميعًا، أتمنى أن تكونوا بخير وبأفضل حال. في هذا الدرس التعليمي سنتعرف على أساسيات كتابة أكواد CSS، وهي إحدى اللغات الأساسية في تصميم صفحات الويب، وسنشرح طرق استخدامها المختلفة داخل ملفات HTML، سواء من خلال الطريقة المضمنة Inline، أو الداخلية Internal، أو الخارجية External.
قبل البدء في كتابة أي كود CSS، يجب أولًا أن نتأكد من توفر محرر أكواد مناسب. في هذا الشرح سنستخدم برنامج Visual Studio Code، والذي يُعد من أفضل المحررات المجانية والمتوافقة مع معظم لغات البرمجة. إذا لم تكن قد قمت بتثبيته مسبقًا، يمكنك الرجوع إلى الدروس السابقة لمعرفة طريقة تحميله وتثبيته على جهازك.
إنشاء ملفات المشروع
لبدء العمل، نحتاج إلى إنشاء مجلد يحتوي على جميع ملفات المشروع مثل ملفات HTML وCSS وJavaScript والصور والفيديوهات وغيرها. يُفضل دائمًا حفظ هذا المجلد في مكان آمن على جهازك بعيدًا عن سطح المكتب أو قرص النظام لتجنب حذفه بالخطأ.
نقوم بإنشاء مجلد جديد ونسميه مثلاً "test". في حالة كان اسم المجلد يتكون من كلمتين، يُفضل استخدام الشرطة السفلية (_) للفصل بين الكلمات، وذلك لتجنب أي مشاكل مستقبلية عند رفع الملفات إلى الإنترنت.
بعد إنشاء المجلد، نقوم بفتحه من داخل محرر الأكواد Visual Studio Code من خلال خيار "Open Folder"، ثم نبدأ بإنشاء ملف HTML جديد ونسميه "index.html". هذا الاسم شائع الاستخدام لأنه يُستخدم كصفحة رئيسية في معظم مواقع الويب، خاصة تلك التي تعمل بنظام إدارة المحتوى مثل WordPress.
إعداد ملف HTML
بعد إنشاء الملف، نبدأ بكتابة الهيكل الأساسي للصفحة باستخدام اختصارات Visual Studio Code. على سبيل المثال، يمكن كتابة علامة التعجب (!) والضغط على Enter ليتم إنشاء قالب HTML تلقائيًا. ثم نقوم بتعديل عنوان الصفحة (Title) حسب الحاجة.
لعرض الصفحة على المتصفح، يمكن الضغط على الملف مرتين، وسيتم فتحه تلقائيًا باستخدام المتصفح الافتراضي. في هذه المرحلة، تكون الصفحة فارغة لأننا لم نضف أي محتوى بعد.
طرق كتابة CSS
هناك ثلاث طرق رئيسية لكتابة أكواد CSS:
1. الطريقة المضمنة Inline CSS
تُستخدم هذه الطريقة عندما نريد تطبيق تنسيق معين على عنصر HTML محدد مباشرة
داخل التاج. على سبيل المثال، إذا أردنا تغيير لون عنوان
<h1>، يمكننا استخدام خاصية
style داخل التاج كما يلي:
<h1 style="color: red; font-size: 20px;">عنوان</h1>
بهذه الطريقة، سيتم تطبيق الخصائص فقط على هذا العنصر دون غيره. ويمكن إضافة
أكثر من خاصية داخل سمة style بشرط الفصل بينها
باستخدام الفاصلة المنقوطة ;.
2. الطريقة الداخلية Internal CSS
يتم استخدام هذه الطريقة عندما نرغب في تطبيق أنماط CSS على أكثر من عنصر داخل
نفس صفحة HTML. حيث نقوم بكتابة الكود داخل وسم
<style> الموجود داخل وسم
<head>، كالتالي:
<head>
<style>
p {
color: blue;
font-size: 18px;
}
h1 {
color: green;
}
</style>
</head>
بهذا الشكل يمكننا التحكم في مظهر جميع العناصر من نوع معين داخل الصفحة.
3. الطريقة الخارجية External CSS
في هذه الطريقة نقوم بكتابة أكواد CSS في ملف منفصل بامتداد
.css، مثل style.css، ثم نربط
هذا الملف بصفحة HTML باستخدام وسم <link> داخل
وسم <head>:
<head>
<link rel="stylesheet" href="style.css">
</head>
وفي ملف style.css نكتب التنسيقات بنفس الطريقة التي
استخدمناها مع Internal CSS:
p {
color: red;
font-size: 16px;
}
h1 {
color: blue;
}
يجب التأكد من أن ملف CSS في نفس مجلد ملف HTML أو تحديد المسار الصحيح له.
أولوية تنفيذ أكواد CSS
عند استخدام أكثر من طريقة لتطبيق CSS على نفس العنصر، يتبع المتصفح ترتيبًا محددًا في التنفيذ:
-
أقل أولوية: CSS الخارجي (External)
-
ثم CSS الداخلي (Internal)
-
أعلى أولوية: CSS المضمن (Inline)
مثال: إذا قمت بتطبيق لون أحمر على عنوان
<h1> في ملف CSS خارجي، ولون أزرق في CSS داخلي،
ولون أصفر في CSS مضمن داخل نفس العنصر، سيتم تطبيق اللون الأصفر لأنه الأخير
والأعلى أولوية.
خلاصة الدرس
في هذا الدرس تعلمنا كيفية إعداد ملفات المشروع وكتابة أكواد CSS بثلاث طرق مختلفة، مع توضيح أولوية التنفيذ. تأكد دائمًا من كتابة الكود بطريقة منظمة وصحيحة لتفادي أي أخطاء. في الدروس القادمة سنتعمق أكثر في خصائص CSS المختلفة مثل التحكم في الألوان، الخطوط، المساحات، التباعد، وغيرها.
نتمنى أن يكون الشرح قد أفادكم، وإذا كان لديكم أي استفسار أو سؤال، يرجى تركه في التعليقات، وسنقوم بالإجابة عليه في أسرع وقت.
شكرًا لمتابعتكم، ونلقاكم في درس جديد بإذن الله.