توثيق تقني

التصنيف: css

  • الفصل 3: السليكتورز في CSS | يعني نختار العناصر إزاي؟

    🥸 يعني إيه Selectors؟

    ببساطة كده، السليكتور هو اللي بتقول بيه للمتصفح:

    “اسمع يا عم، لو لقيت العنصر ده، ظبطه كذا وكذا”.

    زي لما تقول:

    cssCopy codep {
  color: red;
}

    يعني كل <p> في الصفحة يبقى لونه أحمر. سهلة؟ سهلــة.

    💣 أنواع السليكتورز اللي هتحتاجها طول حياتك:

    1. 🏷️ سليكتور التاج (Tag Selector)

    يعني تظبط كل العناصر من نوع معين، زي كل العناوين أو كل البراجرافات.

    cssCopy codeh1 {
  color: blue;
}

    يعني كل <h1> في الموقع هيبقى لونه أزرق.

    2. 🆔 سليكتور الـ ID

    بتستخدمه لما تكون عايز تظبط عنصر واحد بس، مميز وفريد.

    htmlCopy code<p id="hero">أهلا بيك</p>

    cssCopy code#hero {
  font-size: 24px;
}

    شايف العلامة #؟ دي معناها “أنا شغال على ID”.

    ⛔ خُد بالك: الـ ID مينفعش يتكرر، عامل زي رقمك القومي كده.

    3. 👕 سليكتور الـ Class

    ده بقى اللي بنعتمد عليه 90% من الوقت. تقدر تستخدمه على كذا عنصر.

    htmlCopy code<p class="highlight">نص مميز</p>
<p class="highlight">وده كمان</p>

    cssCopy code.highlight {
  background-color: yellow;
}

    ⏺️ شايف النقطة .؟ بتقول: “ده كلاس”.

    4. 🌳 سليكتور العنصر جوه عنصر تاني (Descendant)

    يعني: لو فيه عنصر جوه عنصر تاني، إشتغل عليه.

    cssCopy code.card p {
  color: green;
}

    يعني: أي <p> جوه كلاس اسمه card، خليه لونه أخضر.

    5. 📦 تجميع السليكتورز مع بعض (Grouping)

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

    cssCopy codeh1, h2, p {
  font-family: Arial;
}

    6. 🌀 السليكتور العام (Universal Selector)

    يعني: “يالا نشتغل على كل اللي في الصفحة”.

    cssCopy code* {
  margin: 0;
  padding: 0;
}

    ينضفلك الصفحة كده من غير لخبطة.

    7. 👶 ابن مباشر (Child Selector)

    يعني: “هاتلي العنصر اللي جاي مباشر تحت ده”.

    cssCopy code.card > p {
  color: red;
}

    بس ده هيشتغل على <p> اللي تحت card على طول، مش اللي جوه جوه.

    8. 🔂 أخوه اللي بعده على طول (Adjacent Sibling)

    cssCopy codeh2 + p {
  color: orange;
}

    يعني أي <p> جاي بعد <h2> على طول، ظبطه.

    9. 🤜 كل الأخوات اللي بعده (General Sibling)

    cssCopy codeh2 ~ p {
  color: purple;
}

    أي <p> جاي بعد <h2> على نفس المستوى، شغال عليه.

    💥 المقارنة الجدعنة بين ID و Class:

    الحتة ديID (#)Class (.)
    بيتكرر؟لأآه
    للعنصر الواحد؟تمامممكن أكتر من عنصر
    أستخدمه إمتى؟لحاجات مميزةفي كل حتة تقريبا

    🛠️ تمرين جدعنة:

    htmlCopy code<div class="card">
  <h2 id="main-title">عنوان رئيسي</h2>
  <p class="desc">ده وصف صغير</p>
</div>

    cssCopy code#main-title {
  color: red;
}

.desc {
  font-style: italic;
}

.card p {
  background-color: #f0f0f0;
}

  • الفصل 2: كيفية ربط CSS بملف HTML | تطبيق على ربط ملفات خارجية

    📌 لماذا نربط CSS بملف HTML؟

    صفحة الويب تحتاج إلى شيئين:

    • هيكل (Structure): وهو HTML.
    • تنسيق (Style): وهو CSS.

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

    💡 طرق ربط CSS بصفحة HTML

    1. الربط الخارجي (External CSS) ✅ الأفضل والأكثر استخدامًا

    نستخدمه عند فصل التصميم في ملف منفصل. الملف عادة يكون اسمه style.css أو أي اسم آخر.

    ✅ الخطوات:

    1. أنشئ ملف HTML باسم index.html
    2. أنشئ ملف CSS باسم style.css
    3. داخل <head> من ملف HTML، أضف الكود التالي:
    htmlCopy code<link rel="stylesheet" href="style.css">

    📦 مثال عملي:

    🔹 ملف: index.html

    htmlCopy code<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مثال على ربط CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>مرحبًا بك في موقعي</h1>
  <p>هذا مثال على ربط ملف CSS خارجي.</p>
</body>
</html>

    🔹 ملف: style.css

    cssCopy codebody {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}

h1 {
  color: #0066cc;
  text-align: center;
}

p {
  color: #444;
  text-align: center;
}

    🔁 النتيجة:

    • الخلفية باللون الرمادي الفاتح
    • العنوان بلون أزرق ومنتصف الصفحة
    • النص بلون رمادي غامق

    🟡 هل يمكن وضع أكثر من ملف CSS؟

    نعم، يمكن ربط عدة ملفات CSS في نفس الصفحة:

    htmlCopy code<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">

    المتصفح يقرأها بالترتيب. لو هناك تعارض، يُطبق الملف الأخير.

    ❗أين نضع وسم <link> داخل HTML؟

    يجب أن يكون داخل <head> قبل غلق الوسم:

    htmlCopy code<head>
  <link rel="stylesheet" href="style.css">
</head>

    لو تم وضعه في <body> قد يعمل لكنه ليس مفضل من الناحية التقنية.

    🛠️ أخطاء شائعة:

    الخطأالسببالحل
    الملف لا يظهرالمسار خاطئتأكد من اسم المجلد/المسار
    التنسيقات لا تعملوسم <link> في مكان خاطئضعه داخل <head>
    CSS لا يطبق على عناصر HTMLselector غير صحيحتأكد من أسماء العناصر أو الكلاسات

    🎯 متى نستخدم الربط الخارجي؟

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

    ✍️ تدريب تطبيقي:

    المطلوب:

    • صمّم صفحة HTML بسيطة فيها عنوان، فقرة، وزر.
    • أنشئ ملف CSS خارجي يحتوي على:
      • لون خلفية
      • تغيير لون العنوان
      • تغيير شكل الزر (لون + حدود + تأثير hover)

  • مقدمة عن CSS – ما هو ولماذا نستخدمه؟ | الفرق بين Inline وInternal وExternal

    الفصل 1: ما هو CSS؟

    CSS اختصار لـ (Cascading Style Sheets)، وتعني “أوراق الأنماط المتتالية”، وهي تقنية تُستخدم في تنسيق وتجميل صفحات الويب. HTML تُستخدم لبناء هيكل الصفحة، بينما CSS تتحكم في مظهرها.

    لماذا سُميت “متتالية”؟

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

    الفصل 2: لماذا نستخدم CSS؟

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

    الفصل 3: أساسيات كتابة CSS

    الهيكل الأساسي:

    cssCopyEditselector {
  property: value;
}

    مثال:

    cssCopyEdith1 {
  color: red;
  font-size: 24px;
}

    أهم الخصائص:

    الخاصيةالاستخدام
    colorتحديد لون النص
    background-colorخلفية العنصر
    font-sizeحجم الخط
    marginالمسافة الخارجية
    paddingالمسافة الداخلية
    borderالحدود حول العنصر
    displayطريقة عرض العنصر

    الفصل 4: طرق كتابة CSS

    الطريقة الأولى: Inline CSS

    يتم كتابتها مباشرة داخل وسم HTML.

    htmlCopyEdit<h1 style="color: blue;">مرحبا بك</h1>

    ✅ مميزاتها:

    • تُستخدم للتعديلات السريعة.
    • سهلة الفهم للمبتدئين.

    ❌ عيوبها:

    • تكرار ممل وغير عملي في المواقع الكبيرة.
    • يصعب تعديل التصميم لاحقًا.
    • تخلط بين الهيكل والتصميم.

    الطريقة الثانية: Internal CSS

    يتم وضع الكود داخل ملف HTML نفسه، بين وسم <style> في <head>.

    htmlCopyEdit<head>
  <style>
    h1 {
      color: green;
    }
  </style>
</head>

    ✅ مميزاتها:

    • مناسبة للمشاريع الصغيرة أو صفحة واحدة.
    • تفصل نوعًا ما بين التنسيق والمحتوى.

    ❌ عيوبها:

    • عند وجود عدة صفحات، يجب تكرار الكود.
    • لا تُعد الأفضل للتوسّع في المشروع.

    الطريقة الثالثة: External CSS

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

    htmlCopyEdit<link rel="stylesheet" href="style.css">

    cssCopyEdit/* داخل style.css */
h1 {
  color: purple;
}

    ✅ مميزاتها:

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

    ❌ عيوبها:

    • تحتاج إنترنت أو تحميل الملف في بعض الأنظمة للعمل بشكل صحيح.
    • لا تعمل وحدها بدون ملف HTML.

    الفصل 5: مقارنة شاملة بين الطرق الثلاث

    المعيارInline CSSInternal CSSExternal CSS
    السهولةسهلةسهلةمتوسطة
    الأداءبطيءمتوسطعالي
    التنظيمسيءجيدممتاز
    الأفضل للمشاريعلالانعم

    الفصل 6: كيف يتعامل المتصفح مع CSS؟

    • المتصفح يقرأ HTML أولًا، ثم يتبع ترتيب الأنماط المرفقة.
    • يعطي أولوية حسب القرب من العنصر: inline > internal > external.
    • عند التعارض بين الأساليب، يتم اعتماد الأعلى في الأولوية إلا إذا تم استخدام !important.

    الفصل 7: مفاهيم متقدمة (تُفصّل لاحقًا في الفصول القادمة):

    • الوراثة (Inheritance): بعض الخصائص تنتقل من العنصر الأب للابن تلقائيًا.
    • الخصوصية (Specificity): مدى قوة كل نوع من أنواع الانتقاء.
    • الأنماط المتضاربة: كيف يُحسم التعارض بين أكثر من نمط.

  • التفاعل مع JavaScript

    مقدمة في JavaScript

    JavaScript هي لغة برمجة تُستخدم لإضافة التفاعل على صفحات الويب. باستخدام JavaScript، يمكن للمستخدم التفاعل مع العناصر على الصفحة بشكل ديناميكي. على سبيل المثال، يمكن أن يُظهر لك JavaScript رسائل منبثقة (pop-up) عند الضغط على زر، أو يُعدل محتوى الصفحة بدون الحاجة لإعادة تحميلها.

    كيف ندمج JavaScript مع HTML؟

    1. داخل صفحة HTML:
      يمكن إضافة أكواد JavaScript داخل الصفحة باستخدام وسم <script>. عادةً ما يتم وضعه في <head> أو <body> في الصفحة. لكن يفضل إضافته قبل نهاية وسم </body> لتحسين الأداء. مثال: <html> <head> <title>التفاعل مع JavaScript</title> </head> <body> <h1>مرحبًا بالعالم!</h1> <button onclick="myFunction()">اضغط هنا</button> <script> function myFunction() { alert("تم الضغط على الزر!"); } </script> </body> </html>
      • في المثال السابق، عند الضغط على الزر، يتم استدعاء دالة myFunction()، والتي تعرض رسالة منبثقة (alert).
    2. استخدام ملف خارجي:
      يمكن أيضًا كتابة JavaScript في ملف خارجي ومن ثم ربطه بصفحة HTML باستخدام وسم <script src="file.js"></script>.
      1. أولًا، أنشئ ملف JavaScript خارجي مثل script.js:
      function myFunction() { alert("تم الضغط على الزر!"); }
      1. ثم اربط الملف في صفحة HTML:
      <html> <head> <title>التفاعل مع JavaScript</title> </head> <body> <h1>مرحبًا بالعالم!</h1> <button onclick="myFunction()">اضغط هنا</button> <script src="script.js"></script> </body> </html>

    أحداث JavaScript:

    JavaScript يعمل بشكل رئيسي عبر الأحداث (events). الأحداث هي أشياء تحدث في الصفحة، مثل:

    • النقر على زر
    • تغيير قيمة في حقل نصي
    • تحميل الصفحة
    1. onclick: يتم تفعيلها عند النقر على عنصر.
    2. onmouseover: يتم تفعيلها عندما يمر المستخدم فوق العنصر.
    3. onchange: يتم تفعيلها عندما يتم تغيير قيمة عنصر (مثل حقل نصي أو قائمة منسدلة).

    مثال:

    <button onclick="changeText()">اضغط هنا لتغيير النص</button>
<p id="demo">النص الأصلي.</p>

<script>
    function changeText() {
        document.getElementById("demo").innerHTML = "تم تغيير النص!";
    }
</script>

    في المثال ده، عند الضغط على الزر، سيتم تغيير النص داخل العنصر <p>.

    التعامل مع العناصر باستخدام JavaScript:

    JavaScript يتيح لك التحكم في العناصر داخل الصفحة عبر DOM (Document Object Model). باستخدام DOM، يمكنك تغيير أو إضافة أو حذف عناصر من الصفحة.

    1. الاختيار والتعديل على العناصر:
    • document.getElementById("id"): لاختيار عنصر عن طريق الـ id.
    • document.getElementsByClassName("class"): لاختيار العناصر حسب الـ class.
    • document.querySelector("selector"): لاختيار العناصر باستخدام أي selector CSS.

    مثال:

    <button onclick="changeBackgroundColor()">اضغط هنا لتغيير الخلفية</button>

<script>
    function changeBackgroundColor() {
        document.body.style.backgroundColor = "lightblue";
    }
</script>

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

    1. إضافة محتوى إلى الصفحة:
      • يمكن أيضًا استخدام JavaScript لإضافة محتوى جديد إلى الصفحة مثل النصوص أو الصور.
      مثال: <button onclick="addElement()">إضافة عنصر جديد</button> <script> function addElement() { var newElement = document.createElement("p"); newElement.innerHTML = "تم إضافة عنصر جديد!"; document.body.appendChild(newElement); } </script> في المثال ده، عند الضغط على الزر، سيتم إضافة فقرة جديدة إلى الصفحة.

    التفاعل مع المستخدم:

    يمكنك التفاعل مع المستخدم عبر النوافذ المنبثقة أو نوافذ الإدخال.

    1. النوافذ المنبثقة (alert):
      • لعرض رسالة بسيطة للمستخدم.
      alert("مرحبًا! هذه رسالة منبثقة.");
    2. النوافذ التي تطلب إدخال من المستخدم (prompt):
      • لطلب إدخال من المستخدم.
      var userInput = prompt("من فضلك أدخل اسمك:"); alert("مرحبًا " + userInput);
    3. النوافذ التي تطلب تأكيد (confirm):
      • لطلب تأكيد من المستخدم.
      var result = confirm("هل أنت متأكد من أنك تريد المتابعة؟"); if (result) { alert("تم التأكيد!"); } else { alert("تم الإلغاء."); }

    التحقق من البيانات باستخدام JavaScript:

    يمكنك استخدام JavaScript للتحقق من صحة البيانات التي يتم إدخالها في النماذج.

    مثال:

    <form onsubmit="return validateForm()">
    <label for="email">البريد الإلكتروني:</label>
    <input type="email" id="email" name="email">
    <input type="submit" value="إرسال">
</form>

<script>
    function validateForm() {
        var email = document.getElementById("email").value;
        if (email == "") {
            alert("من فضلك أدخل بريدك الإلكتروني.");
            return false;
        }
        return true;
    }
</script>

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

    في الختام:

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

  • التصميم المتجاوب (Responsive Design)

    مقدمة في التصميم المتجاوب

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

    كيف يعمل التصميم المتجاوب؟

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

    استخدام meta viewport

    أول خطوة في تصميم صفحة متجاوبة هي إضافة وسم meta viewport داخل الـ <head> لتحديد كيفية التعامل مع حجم الصفحة على الأجهزة المختلفة. هذه الخطوة مهمة جدًا للموبايل.

    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
    • width=device-width: بتحدد العرض على حسب عرض الجهاز.
    • initial-scale=1.0: بتحدد مستوى التكبير الأولي عند تحميل الصفحة.

    استخدام Media Queries

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

    1. الهيكل الأساسي لـ Media Query:
    @media only screen and (max-width: 600px) {
    /* هنا تضيف التنسيقات الخاصة بالشاشة الصغيرة */
    body {
        background-color: lightblue;
    }
}
    • max-width: بتحدد الحد الأقصى للعرض.
    • min-width: بتحدد الحد الأدنى للعرض.
    • only screen: بتحدد الاستعلامات لعرض الصفحة على الشاشات فقط (تستثني الطابعات).

    أنماط متجاوبة باستخدام Media Queries

    1. التصميم المخصص للموبايل:
      باستخدام @media, يمكن تغيير تنسيق العناصر بناءً على حجم الشاشة. مثلاً، لو كانت الشاشة صغيرة (مثل الموبايل)، نغير حجم النصوص أو المسافات. مثال: @media only screen and (max-width: 600px) { body { font-size: 14px; } h1 { font-size: 24px; } }
    2. التصميم المتجاوب للتابلت:
      لو عايز تميز التابلت، تستخدم مثلاً عرض أكبر من 600px وأقل من 1024px. مثال: @media only screen and (min-width: 601px) and (max-width: 1024px) { body { font-size: 16px; } h1 { font-size: 28px; } }
    3. التصميم للكمبيوتر:
      بالنسبة للشاشات الكبيرة مثل الكمبيوتر، لا نحتاج لاستخدام media queries لأن التصميم سيكون بشكل افتراضي مناسب لهم. مثال: @media only screen and (min-width: 1025px) { body { font-size: 18px; } h1 { font-size: 32px; } }

    تقنيات التصميم المتجاوب:

    1. Flexbox:
      Flexbox هو نظام تخطيط مرن يساعدك في توزيع المسافات بين العناصر داخل الـ container بسهولة. يمكنك تحديد كيفية ترتيب العناصر، سواء كانت في صف واحد أو عمود، وكيفية توزيع المسافات. مثال: .container { display: flex; flex-wrap: wrap; } .item { flex: 1; padding: 10px; }
    2. CSS Grid:
      Grid هو نظام تصميم شبكي يوفر طريقة قوية لتنظيم المحتوى في صفوف وأعمدة. يتيح لك تحديد عدد الأعمدة والصفوف وتوزيع المساحة بينهم. مثال: .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; }
    3. صورة مرنة (Flexible Images):
      لجعل الصور مرنة بحيث تتناسب مع أحجام الشاشات المختلفة، يمكنك تحديد الصور باستخدام max-width: 100%. مثال: img { max-width: 100%; height: auto; }

    التأكد من استجابة التصميم:

    لتتأكد أن صفحتك متجاوبة على مختلف الأجهزة، يمكنك استخدام أدوات المطور (DevTools) في المتصفح:

    • في جوجل كروم، افتح الأدوات الخاصة بالمطور من خلال الضغط على F12 أو Ctrl+Shift+I، ثم اختر أيقونة الموبايل أو التابلت من الزاوية العلوية لتجربة التصميم على الشاشات المختلفة.

    نصائح لتصميم متجاوب:

    1. اختبر على جميع الأجهزة:
      تأكد دائمًا من اختبار التصميم على شاشات مختلفة لضمان تجربة مستخدم جيدة.
    2. استخدم صور مرنة:
      تأكد من استخدام صور مرنة لا تسبب مشاكل في التصميم عندما تتغير الأبعاد.
    3. الخطوط وأحجام النصوص:
      اجعل حجم الخط مرنًا باستخدام النسب المئوية أو وحدات مثل em أو rem بدلاً من البكسل.

    في الختام:

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