CSS - Example1

-

مثال تطبيقي شامل على دروس CSS


<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>تجربة CSS</title>
  <style>
    body {
      background-color: #f5f5f5;
      font-family: Tahoma, sans-serif;
      margin: 20px;
      color: #333;
    }

    h1 {
      text-align: center;
      color: #006699;
      text-transform: uppercase;
      border-bottom: 2px solid #ccc;
      padding-bottom: 10px;
    }

    .intro {
      background-color: #ffffff;
      padding: 15px;
      margin-bottom: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }

    .colored-box {
      background-color: rgb(255, 235, 205);
      border: 2px dashed #ff6600;
      padding: 10px;
      margin-bottom: 20px;
    }

    .custom-list {
      list-style-type: square;
      background-color: #e0f7fa;
      padding: 10px;
      max-width: 300px;
    }

    .custom-list li {
      padding: 5px 0;
    }

    table {
      border-collapse: collapse;
      width: 100%;
      max-width: 600px;
      margin: auto;
      background-color: #fff;
    }

    table, th, td {
      border: 1px solid #bbb;
    }

    th {
      background-color: #009688;
      color: white;
      padding: 10px;
    }

    td {
      padding: 8px;
      text-align: center;
    }

    a {
      color: #0077cc;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .note {
      font-style: italic;
      color: #666;
      margin-top: 20px;
      text-align: center;
    }
  </style>
</head>
<body>

  <h1>تجربة تنسيقات CSS</h1>

  <div class="intro">
    <p>هذه فقرة توضيحية تحتوي على تنسيقات للنصوص، وتُظهر كيفية استخدام الحشوات والحدود والخطوط والخلفيات.</p>
  </div>

  <div class="colored-box">
    هذا صندوق بخلفية ملونة وحدود منقطة باستخدام RGB.
  </div>

  <ul class="custom-list">
    <li>العنصر الأول</li>
    <li>العنصر الثاني</li>
    <li>العنصر الثالث</li>
  </ul>

  <br>

  <table>
    <tr>
      <th>الاسم</th>
      <th>العمر</th>
    </tr>
    <tr>
      <td>أحمد</td>
      <td>25</td>
    </tr>
    <tr>
      <td>سارة</td>
      <td>30</td>
    </tr>
  </table>

  <p class="note">
    للمزيد، تفضل بزيارة
    <a href="https://www.example.com/css/">Example Website</a>
  </p>

</body>
</html>

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

HTML - Text Formatting تنسيقات النص

-
تنسيقات النص في HTML (HTML Text Formatting) توفر HTML مجموعة من الوسوم الخاصة بتنسيق النصوص، مثل جعل النص عريض (Bold)، مائل (Italic)، تحته خط، مشطوب، وغيرها. ✅ أشهر وسوم التنسيق: الوسم الوصف <b> لجعل النص عريض بدون أهمية معنوية <strong> لجعل النص عريض مع دلالة على الأهمية <i> لجعل النص مائل بدون أهمية معنوية <em> لجعل النص مائل مع دلالة على التأكيد <mark> لتمييز النص بخلفية صفراء مثل التظليل <small> لجعل النص بحجم أصغر <del> لنص مشطوب <ins> لنص مضاف حديثًا <sub> لنص سفلي (H 2 O) <sup> لنص علوي (x 2 ) 🧪 أمثلة على تنسيق النصوص: <p>هذا نص <b>عريض</b> باستخدام وسم <b>.</p> <p>هذا نص <strong...
قراءة المزيد

HTML - ملخص شامل لأهم التاجات

-
  ملخص شامل لأهم ما في HTML HTML (HyperText Markup Language) هي اللغة الأساسية المستخدمة لإنشاء صفحات الويب، حيث تحدد هيكل المحتوى الذي يتم عرضه على المتصفح. HTML ليست لغة برمجة، بل هي لغة ترميز تعتمد على العناصر (Elements) و الوسوم (Tags) لتنظيم المحتوى. 1. أساسيات HTML أ. الهيكل الأساسي لصفحة HTML كل مستند HTML يحتوي على هيكل أساسي يبدأ بالوسم <html> وينقسم إلى قسمين رئيسيين: <head> : يحتوي على معلومات الصفحة مثل العنوان ( <title> ) والروابط الخارجية (مثل ملفات CSS). <body> : يحتوي على المحتوى المرئي للمستخدم مثل النصوص، الصور، الأزرار، الجداول، إلخ. مثال على صفحة HTML أساسية <!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>أول صفحة HTML</title> </head> <body> <h1>مرحبًا بك في HTML</h1> <p>هذه صفحة HTML بسيطة.</p> </...
قراءة المزيد

Excel - استخدام الفلاتر (Filters) لتركيز التحليل

-
2.4 Excel - استخدام الفلاتر (Filters) لتركيز التحليل عندما تعمل مع مجموعات كبيرة من البيانات في Excel ، قد تحتاج إلى عرض جزء معين منها فقط دون حذف الباقي. هنا يأتي دور الفلاتر (Filters) ، وهي أداة فعالة لتركيز التحليل على بيانات معينة بسرعة وسهولة. 🔹 ما هو الفلتر (Filter) في Excel؟ الفلتر يسمح لك بعرض صفوف معينة بناءً على معايير محددة تقوم بتحديدها، مع إبقاء باقي البيانات مخفية مؤقتًا دون حذفها من الملف. 🔹 أين تجد أداة الفلترة؟ تجد الفلتر داخل تبويب Home ➔ Sort & Filter ➔ Filter أو مباشرة من تبويب Data ➔ Filter . 🔹 كيفية تطبيق الفلتر خطوة بخطوة حدد نطاق البيانات أو تأكد أن المؤشر داخل الجدول. اذهب إلى Data ➔ Filter . ستلاحظ ظهور أسهم ▼ بجانب رؤوس الأعمدة. اضغط على السهم بجانب العمود الذي تريد تصفيته. اختر القيم التي تريد عرضها فقط. 🔹 أنواع الفلاتر المتاحة فلترة حسب النص: مثل عرض الخلايا التي تحتوي على كلمة معينة. فلترة حسب الرقم: مثل عرض القيم الأكبر من 100. فلترة حسب التاريخ: مثل عرض بيانات لشهر محدد فقط. فلترة ...
قراءة المزيد