تعلم لغة CSS المشروع الأول – Syntax

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

الأدوات المطلوبة لبداية تعلم CSS بالعربية

1- محرر الكود Visual Studio Code, ويمكنك تحميله مباشرة من الرابط المرفق.

ويمكنك اختيار أي محرر أخر مثل Atom مثلا

2- بعد تحميل المحرر Visual Studio Code يمكنك البدء بإنشاء المجلد الخاص بالمشروع, ويمكنك إنشاءه مباشرة من المحرر .

أو بعمل مجلد جديد باسم المشروع في أي مكان على جهازك وليكن أسم المجلد CSS_Project. ( وقم بفتح المجلد في محرر Visual Studio Code )

3- داخل مجلد CSS_Project ستقوم بعمل ملف ملف index.html, ومجلد CSS

4- مجلد CSS به ملف جديد باسم master.css

5- قم بإضافة ملف Normalize داخل مجلد الـ CSS.

في البداية نقوم بفتح ملف index.html وسيكون فارغ تماماً, ونقوم بأنشاء البنيه الأساسية, وذلك بكتابة حرف ! ثم الضغط على Enter أو Tab g ليكون بالشكل التالي:

وكما ترا في الصورة السابقة مجلد CSS_Project وبه ملف index.html ومجلد الـ CSS وبه ملف master.css

طريقة ربط ملف CSS بملف ال index.html

عن طريق كتابة الرابط link في قسم الـ head كما يلي :

    <link rel="stylesheet" href="css/master.css">

CSS هي اللغة التي نستخدمها لتصميم مستند HTML.

يصف CSS كيفية عرض عناصر HTML.

سيعلمك هذا البرنامج التعليمي CSS من الأساسي إلى المتقدم

مفاهيم أساسية عن CSS

يصف CSS كيفية عرض عناصر HTML على الشاشة أو الورق أو أي وسائط أخرى.

CSS يمكنه عمل الكثير, ويمكنه التحكم في تخطيط العديد من صفحات الويب دفعة واحده

لماذا نستخدم CSS ؟

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

مثال على CSS

CSS Example
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: cairo;
  font-size: 20px;
}

لم يكن القصد من HTML أبدًا أن يحتوي على علامات لتنسيق صفحة ويب!

تم إنشاء HTML لوصف محتوى صفحة الويب ، مثل:

<h1>هذا عنوان</p> & <h1>هذه فقره</p>

عندما تمت إضافة علامات مثل <font> وسمات اللون إلى مواصفات HTML 3.2 ، فقد بدأت كابوسًا لمطوري الويب.

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

لحل هذه المشكلة ، أٌنشأ اتحاد شبكة الويب العالمية (W3C) CSS.

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

عادة ما يتم حفظ تعريفات الأنماط في ملفات .CSS الخارجية.

باستخدام ملف external stylesheet خارجي ، يمكنك تغيير مظهر موقع ويب بأكمله عن طريق تغيير ملف واحد فقط!

أنتهى درس اليوم ألقاكم فالدرس القادم