الربط مع CSS: شرح تنسيق صفحات HTML (الدرس الثامن)

HTML, دورة شرح تعلم لغة HTML / مبتدىء

لغات البرمجة تطوير الويب

هل تعلم أن المستخدم العادي يستغرق أقل من 50 مللي ثانية ليكوّن انطباعاً أولياً عن موقعك الإلكتروني؟ وأن 38% من المستخدمين سيتوقفون عن تصفح موقع ذي تصميم غير جذاب؟ نعم، مهما كان محتوى موقعك رائعاً، فإن التصميم والتنسيق هما البوابة التي تجذب الزوار وتحثهم على البقاء والتفاعل مع ما تقدمه.

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

فهرس شرح تعلم لغة HTML

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

إليك نظرة عامّة على كورس HTML المجاني:

  1. مقدمة إلى عالم HTML – التاريخ والأهمية والأدوات اللازمة
  2. الهيكل الأساسي لصفحات HTML – تعلم العناصر الضرورية لكل صفحة
  3. التعامل مع النصوص والروابط – كيفية تنسيق المحتوى النصي وإنشاء الارتباطات
  4. إضافة الصور والوسائط – جعل صفحاتك أكثر جاذبية بالمحتوى المرئي
  5. إنشاء الجداول في HTML – تنظيم البيانات بشكل منظم
  6. نماذج الإدخال والتفاعل – جمع معلومات المستخدمين بطريقة احترافية
  7. العناصر الدلالية في HTML5 – فهم وتطبيق الهيكلة الحديثة للصفحات
  8. الربط مع CSS – الخطوات الأولى في تجميل صفحاتك
  9. مقدمة إلى JavaScript مع HTML – إضافة التفاعلية البسيطة
  10. أفضل الممارسات وتحسين الأداء – جعل مواقعك أسرع وأكثر كفاءة

للوصول إلى كافة الدروس المتعلقة بالدورة اضغط على دورة تعلم HTML

ما هو CSS ولماذا هو مهم؟

وفقاً لإحصائيات حديثة، فإن 75% من مطوري الويب يقضون أكثر من نصف وقتهم في كتابة وصيانة أكواد CSS. فما الذي يجعل هذه التقنية بهذه الأهمية؟

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

  • تحسين قابلية الصيانة – يمكنك تغيير مظهر الموقع بالكامل دون المساس بالمحتوى
  • تسريع التحميل – باستخدام ملف CSS واحد لتنسيق صفحات متعددة
  • توحيد المظهر – ضمان اتساق التصميم عبر الموقع بأكمله
  • تحسين تجربة المستخدم – من خلال تصميمات جذابة وسهلة الاستخدام
  • دعم التصميم المتجاوب – لعرض الموقع بشكل مثالي على جميع الأجهزة

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

طرق ربط CSS بصفحات HTML

هناك ثلاث طرق أساسية لإضافة CSS إلى صفحات HTML. دعنا نستكشفها:

1. ربط ملف CSS خارجي (External CSS)

هذه هي الطريقة الأكثر استخداماً واحترافية، حيث يتم وضع جميع أكواد CSS في ملف خارجي منفصل (غالباً بامتداد .css)، ثم يتم ربطه بصفحات HTML باستخدام عنصر <link>:

<head>
    <link rel="stylesheet" href="styles.css">
</head>
Code language: HTML, XML (xml)

المزايا:

  • يمكن استخدام نفس ملف CSS لعدة صفحات HTML
  • تحميل أسرع للصفحات بعد التحميل الأول (بسبب التخزين المؤقت للمتصفح)
  • فصل نظيف بين المحتوى والتنسيق
  • صيانة أسهل للمشاريع الكبيرة

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

2. استخدام CSS داخلي (Internal CSS)

في هذه الطريقة، يتم كتابة أكواد CSS داخل وسم <style> في قسم <head> من صفحة HTML:

<head>
    <style>
        body {
            font-family: 'Cairo', sans-serif;
            background-color: #f5f5f5;
        }
        
        h1 {
            color: #0066cc;
            text-align: center;
        }
    </style>
</head>
Code language: HTML, XML (xml)

المزايا:

  • لا حاجة لتحميل ملفات إضافية
  • مفيد للصفحات الفريدة ذات التنسيق الخاص
  • مناسب للمشاريع الصغيرة أو النماذج الأولية

3. استخدام CSS مضمن (Inline CSS)

في هذه الطريقة، يتم تطبيق CSS مباشرة على عناصر HTML محددة باستخدام السمة style:

<h1 style="color: #0066cc; text-align: center;">عنوان المقال</h1>
<p style="font-size: 16px; line-height: 1.6;">محتوى الفقرة...</p>
Code language: HTML, XML (xml)

المزايا:

  • مفيد للتعديلات السريعة
  • يتجاوز القواعد الأخرى بسبب الأولوية العالية
  • لا يتطلب اختيار العناصر

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

هيكل قواعد CSS الأساسية

قبل البدء في استخدام CSS، من المهم فهم الهيكل الأساسي لقواعد التنسيق:

المحدد {
    الخاصية: القيمة;
    خاصية-أخرى: قيمة-أخرى;
}
  • المحدد (Selector): يشير إلى العنصر (أو العناصر) من HTML الذي سيتم تنسيقه
  • الخاصية (Property): الجانب المحدد الذي تريد تغييره (مثل اللون، الحجم، الهامش)
  • القيمة (Value): الإعداد الذي تريد تطبيقه على الخاصية

على سبيل المثال:

h1 {
    color: blue;
    font-size: 24px;
    margin-bottom: 15px;
}
Code language: CSS (css)

هذه القاعدة تنسق جميع عناصر <h1> بلون أزرق وحجم خط 24 بكسل وهامش سفلي بقيمة 15 بكسل.

أنواع المحددات في CSS

المحددات (Selectors) هي الطريقة التي نخبر بها المتصفح أي العناصر يجب تنسيقها. لنتعرف على أنواع المحددات الرئيسية:

1. محدد العنصر (Element Selector)

يستهدف جميع العناصر من نوع معين:

h1 {
    color: navy;
}

p {
    line-height: 1.6;
}
Code language: CSS (css)

2. محدد الهوية (ID Selector)

يستهدف عنصرًا محددًا بواسطة السمة id. يجب أن تكون قيمة id فريدة في الصفحة:

#header {
    background-color: #333;
    color: white;
}

#main-content {
    padding: 20px;
}
Code language: CSS (css)

HTML:

<header id="header">ترويسة الموقع</header>
<div id="main-content">المحتوى الرئيسي</div>
Code language: HTML, XML (xml)

3. محدد الفئة (Class Selector)

يستهدف العناصر المحددة بواسطة السمة class. يمكن استخدام نفس الفئة لعدة عناصر:

.button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
}

.highlight {
    background-color: yellow;
}
Code language: CSS (css)

HTML:

<button class="button">انقر هنا</button>
<a href="#" class="button">رابط يشبه الزر</a>
<p>هذه فقرة تحتوي على <span class="highlight">نص مميز</span>.</p>
Code language: HTML, XML (xml)

4. محدد السمة (Attribute Selector)

يستهدف العناصر بناءً على سماتها:

input[type="text"] {
    border: 1px solid #ccc;
    padding: 5px;
}

a[target="_blank"] {
    color: orangered;
}
Code language: CSS (css)

HTML:

<input type="text" placeholder="أدخل اسمك">
<a href="https://example.com" target="_blank">رابط خارجي</a>
Code language: HTML, XML (xml)

5. المحددات المجمعة (Combinators)

تسمح لنا بإنشاء محددات أكثر تحديدًا من خلال الجمع بين المحددات الأخرى:

محدد الأبناء (Descendant Selector)

article p {
    font-size: 16px;
}
Code language: CSS (css)

يطبق التنسيق على جميع عناصر <p> الموجودة داخل عنصر <article>.

محدد الابن المباشر (Child Selector)

nav > ul {
    list-style-type: none;
}
Code language: CSS (css)

يطبق التنسيق على عناصر <ul> التي هي أبناء مباشرين لعنصر <nav>.

محدد الأشقاء المتجاورين (Adjacent Sibling Selector)

h2 + p {
    font-weight: bold;
}
Code language: CSS (css)

يطبق التنسيق على عنصر <p> الموجود مباشرة بعد عنصر <h2>.

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

الخصائص الأساسية في CSS

دعنا نستعرض الخصائص الأكثر استخداماً في CSS مقسمة حسب الفئة:

تنسيق النص

p {
    color: #333; /* لون النص */
    font-family: 'Cairo', sans-serif; /* نوع الخط */
    font-size: 16px; /* حجم الخط */
    font-weight: bold; /* سماكة الخط: normal, bold, 100-900 */
    text-align: right; /* محاذاة النص: right, left, center, justify */
    text-decoration: underline; /* زخرفة النص: underline, overline, line-through, none */
    line-height: 1.6; /* ارتفاع السطر */
    letter-spacing: 1px; /* المسافة بين الحروف */
    text-transform: uppercase; /* تحويل النص: uppercase, lowercase, capitalize */
    direction: rtl; /* اتجاه النص */
}
Code language: CSS (css)

الحدود والمساحات

div {
    width: 300px; /* العرض */
    height: 200px; /* الارتفاع */
    padding: 20px; /* الحشو الداخلي */
    margin: 10px; /* الهامش الخارجي */
    border: 1px solid #000; /* الحدود: الحجم النوع اللون */
    border-radius: 5px; /* تدوير الزوايا */
}
Code language: CSS (css)

يمكن تحديد الاتجاهات بشكل منفصل:

div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    
    /* أو بشكل مختصر (أعلى - يمين - أسفل - يسار) */
    padding: 10px 20px 10px 20px;
    
    /* عند تطابق القيم المتقابلة */
    padding: 10px 20px; /* 10px للأعلى والأسفل، 20px لليمين واليسار */
}
Code language: CSS (css)

الخلفيات

header {
    background-color: #f0f0f0; /* لون الخلفية */
    background-image: url('background.jpg'); /* صورة الخلفية */
    background-repeat: no-repeat; /* تكرار الخلفية: repeat, no-repeat, repeat-x, repeat-y */
    background-position: center; /* موضع الخلفية */
    background-size: cover; /* حجم الخلفية: cover, contain, 100% 100% */
    
    /* جميع الخصائص في سطر واحد */
    background: #f0f0f0 url('background.jpg') no-repeat center / cover;
}
Code language: CSS (css)

العرض والموضع

.container {
    display: flex; /* نوع العرض: block, inline, inline-block, flex, grid, none */
    position: relative; /* الموضع: static, relative, absolute, fixed, sticky */
    top: 10px; /* المسافة من الأعلى (عند استخدام position غير static) */
    z-index: 1; /* ترتيب التراكب (عند استخدام position غير static) */
    float: right; /* التعويم: right, left, none */
    overflow: hidden; /* التعامل مع المحتوى الزائد: visible, hidden, scroll, auto */
}
Code language: CSS (css)

التأثيرات المرئية

.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل الصندوق */
    opacity: 0.9; /* الشفافية (0-1) */
    transform: rotate(5deg); /* التحويل: rotate, scale, translate, skew */
    transition: all 0.3s ease; /* الانتقال: الخاصية المدة التوقيت */
}
Code language: CSS (css)

أمثلة عملية للربط بين HTML و CSS

دعنا نرى بعض الأمثلة العملية التي توضح كيفية ربط CSS بـ HTML:

مثال 1: تنسيق القائمة الرئيسية

HTML:

<nav class="main-nav">
    <ul>
        <li><a href="index.html">الرئيسية</a></li>
        <li><a href="about.html">من نحن</a></li>
        <li><a href="services.html">خدماتنا</a></li>
        <li><a href="contact.html">اتصل بنا</a></li>
    </ul>
</nav>
Code language: HTML, XML (xml)

CSS:

.main-nav {
    background-color: #333;
    padding: 10px 0;
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.main-nav li {
    margin: 0 15px;
}

.main-nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.main-nav a:hover {
    background-color: #555;
}
Code language: CSS (css)

مثال 2: تنسيق بطاقة منتج

HTML:

<div class="product-card">
    <img src="product.jpg" alt="اسم المنتج">
    <h3>سماعات بلوتوث XYZ</h3>
    <p class="price">299 ريال</p>
    <p class="description">سماعات لاسلكية فائقة الجودة مع إلغاء الضوضاء</p>
    <button class="add-to-cart">أضف إلى السلة</button>
</div>
Code language: JavaScript (javascript)

CSS:

.product-card {
    width: 300px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.product-card img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.product-card h3 {
    margin: 15px 0 10px;
    color: #333;
}

.product-card .price {
    font-size: 1.2em;
    font-weight: bold;
    color: #e63946;
    margin: 10px 0;
}

.product-card .description {
    color: #666;
    margin-bottom: 15px;
}

.add-to-cart {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.add-to-cart:hover {
    background-color: #45a049;
}
Code language: CSS (css)

مثال 3: تنسيق نموذج الاتصال

HTML:

<form class="contact-form">
    <div class="form-group">
        <label for="name">الاسم</label>
        <input type="text" id="name" name="name" required>
    </div>
    
    <div class="form-group">
        <label for="email">البريد الإلكتروني</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <div class="form-group">
        <label for="message">الرسالة</label>
        <textarea id="message" name="message" rows="5" required></textarea>
    </div>
    
    <button type="submit" class="submit-btn">إرسال</button>
</form>
Code language: JavaScript (javascript)

CSS:

.contact-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 16px;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #4CAF50;
    outline: none;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

.submit-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #45a049;
}
Code language: CSS (css)

10 نصائح احترافية لكتابة CSS فعال

بناءً على خبرتي في تطوير الويب، إليك أهم النصائح لكتابة CSS بشكل أفضل:

  1. استخدم نظام تسمية متناسق – اعتمد نهجًا مثل BEM (Block Element Modifier) لتسمية الفئات بشكل منظم ومفهوم.
  2. نظم ملفات CSS – قسّم الأكواد إلى ملفات منطقية (مثل reset.css، typography.css، layout.css) للمشاريع الكبيرة.
  3. استخدم المتغيرات – استفد من متغيرات CSS لتخزين القيم المتكررة مثل الألوان والخطوط:
    :root { --primary-color: #4CAF50; --secondary-color: #333; --font-main: 'Cairo', sans-serif; }
    .button { background-color: var(--primary-color); font-family: var(--font-main); }
  4. تجنب تحديد العناصر بشكل مفرط – كلما زاد تعقيد المحدد، زادت صعوبة تجاوزه:
    /* تجنب هذا */ body header nav ul li a.nav-link { ... }
    /* استخدم هذا بدلاً منه */ .nav-link { ... }
  5. استخدم تعليقات توضيحية – خاصة للأقسام الرئيسية والأكواد المعقدة:
    /* === رأس الصفحة === */ .header { ... } /* === القائمة الرئيسية === */ .main-nav { ... } /* === تعديل الزر للشاشات الصغيرة === */ @media (max-width: 768px) { .button { ... } }
  6. تحقق من التوافق بين المتصفحات – استخدم الـ prefixes عند الضرورة:
    .box { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
  7. اعتمد مبدأ DRY (Don’t Repeat Yourself) – استخدم الفئات المشتركة للتنسيقات المتكررة:
    .text-center { text-align: center; } .text-bold { font-weight: bold; } .margin-top { margin-top: 20px; }
  8. ابدأ بإعادة ضبط CSS – استخدم Reset CSS أو Normalize.css لضمان تناسق المظهر عبر المتصفحات.
  9. اختبر على أجهزة متعددة – تأكد من تجربة تصميمك على مختلف أحجام الشاشات والمتصفحات.
  10. راقب حجم وأداء CSS – تجنب القواعد غير المستخدمة وقم بضغط الملفات للإنتاج.

التصميم المتجاوب (Responsive Design) باستخدام CSS

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

استخدام Media Queries

Media Queries تسمح لنا بتطبيق أنماط مختلفة بناءً على خصائص الجهاز (مثل عرض الشاشة):

/* تنسيقات أساسية (للجميع) */
body {
    font-size: 16px;
}

/* للأجهزة المتوسطة (الأجهزة اللوحية) */
@media (max-width: 992px) {
    body {
        font-size: 14px;
    }
    
    .sidebar {
        width: 30%;
    }
}

/* للأجهزة الصغيرة (الهواتف) */
@media (max-width: 576px) {
    body {
        font-size: 12px;
    }
    
    .sidebar {
        width: 100%;
    }
    
    .hide-on-mobile {
        display: none;
    }
}
Code language: CSS (css)

وحدات قياس متجاوبة

استخدم وحدات نسبية بدلاً من البكسل الثابت:

.container {
    width: 90%; /* نسبة من عرض الأب */
    max-width: 1200px; /* حد أقصى للعرض */
    margin: 0 auto;
}

.title {
    font-size: 2rem; /* مرتبط بحجم الخط الأساسي للمستند */
}

.hero-image {
    height: 50vh; /* نسبة من ارتفاع viewport */
}

.padding-section {
    padding: 5%; /* نسبة من عرض العنصر نفسه */
}
Code language: CSS (css)

Flexbox و Grid

استخدم هذه التقنيات الحديثة للتخطيط المتجاوب:

Flexbox:

.nav-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
    }
}
Code language: CSS (css)

Grid:

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
Code language: CSS (css)

نهج Mobile-First

من أفضل الممارسات الحديثة هو البدء بتصميم للأجهزة المحمولة أولاً (Mobile-First)، ثم التوسع للأحجام الأكبر:

/* تنسيقات أساسية للهواتف */
.container {
    padding: 15px;
}

/* للأجهزة المتوسطة وما فوق */
@media (min-width: 576px) {
    .container {
        padding: 20px;
    }
}

/* للأجهزة الكبيرة وما فوق */
@media (min-width: 992px) {
    .container {
        padding: 30px;
    }
}
Code language: CSS (css)

قالب شامل للربط بين HTML و CSS

إليك قالباً شاملاً يمكنك استخدامه كنقطة انطلاق لربط CSS بـ HTML:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان الصفحة | اسم الموقع</title>
    
    <!-- ربط ملف CSS الخارجي -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- CSS داخلي (اختياري) -->
    <style>
        /* يمكن وضع أكواد CSS هنا إذا كانت خاصة بهذه الصفحة فقط */
        .page-specific {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <header class="site-header">
        <div class="container">
            <div class="logo">
                <h1>اسم الموقع</h1>
            </div>
            
            <nav class="main-nav">
                <ul>
                    <li><a href="#" class="active">الرئيسية</a></li>
                    <li><a href="#">الخدمات</a></li>
                    <li><a href="#">المنتجات</a></li>
                    <li><a href="#">من نحن</a></li>
                    <li><a href="#">اتصل بنا</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <main class="content">
        <section class="hero">
            <div class="container">
                <h2>عنوان رئيسي جذاب</h2>
                <p>وصف موجز للخدمات أو المنتجات التي يقدمها الموقع.</p>
                <a href="#" class="btn btn-primary">زر الدعوة للعمل</a>
            </div>
        </section>
        
        <section class="features">
            <div class="container">
                <h2 class="section-title">ميزاتنا</h2>
                
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon"><!-- أيقونة --></div>
                        <h3>الميزة الأولى</h3>
                        <p>وصف الميزة الأولى وكيف تفيد العملاء.</p>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon"><!-- أيقونة --></div>
                        <h3>الميزة الثانية</h3>
                        <p>وصف الميزة الثانية وكيف تفيد العملاء.</p>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon"><!-- أيقونة --></div>
                        <h3>الميزة الثالثة</h3>
                        <p>وصف الميزة الثالثة وكيف تفيد العملاء.</p>
                    </div>
                </div>
            </div>
        </section>
    </main>
    
    <footer class="site-footer">
        <div class="container">
            <p>جميع الحقوق محفوظة &copy; <span id="year">2025</span></p>
        </div>
    </footer>
    
    <!-- ربط ملف JavaScript (اختياري) -->
    <script src="main.js"></script>
</body>
</html>
Code language: HTML, XML (xml)

ومحتوى ملف CSS (styles.css):

/* === إعادة ضبط CSS === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === المتغيرات === */
:root {
    --primary-color: #3498db;
    --primary-dark: #2980b9;
    --secondary-color: #2c3e50;
    --text-color: #333;
    --light-color: #f8f9fa;
    --gray-color: #e5e5e5;
}

/* === الأنماط الأساسية === */
body {
    font-family: 'Cairo', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #f5f5f5;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s;
}

a:hover {
    color: var(--primary-dark);
}

img {
    max-width: 100%;
    height: auto;
}

/* === زر === */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
}

/* === ترويسة الموقع === */
.site-header {
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 15px 0;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.main-nav ul {
    display: flex;
    list-style: none;
}

.main-nav li {
    margin: 0 10px;
}

.main-nav a {
    color: var(--text-color);
    font-weight: bold;
    padding: 5px 10px;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--primary-color);
}

/* === قسم الصورة الرئيسية === */
.hero {
    background-color: var(--primary-color);
    color: white;
    padding: 60px 0;
    text-align: center;
}

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* === قسم الميزات === */
.features {
    padding: 50px 0;
}

.section-title {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 30px;
    text-align: center;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background-color: rgba(52, 152, 219, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-card h3 {
    margin-bottom: 15px;
    color: var(--secondary-color);
}

/* === تذييل الموقع === */
.site-footer {
    background-color: var(--secondary-color);
    color: white;
    padding: 20px 0;
    text-align: center;
}

/* === التصميم المتجاوب === */
@media (max-width: 768px) {
    .site-header .container {
        flex-direction: column;
    }
    
    .logo {
        margin-bottom: 15px;
    }
    
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .main-nav li {
        margin: 5px;
    }
    
    .hero h2 {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 576px) {
    .hero h2 {
        font-size: 1.8rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
}
Code language: CSS (css)

خاتمة: خطواتك القادمة في رحلة CSS

لقد غطينا في هذا المقال الأساسيات الضرورية للربط بين HTML و CSS، من طرق الربط المختلفة إلى المحددات والخصائص الأساسية، وصولاً إلى التصميم المتجاوب وأفضل الممارسات. ولكن رحلة CSS طويلة ومليئة بالمزيد من المفاهيم المتقدمة.

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

في مقالنا القادم، سنستكشف مقدمة إلى JavaScript مع HTML، حيث ستتعلم كيفية إضافة التفاعلية لصفحات الويب الخاصة بك. تأكد من متابعتنا!

هل بدأت بتطبيق CSS على مشروعك؟ ما هي التحديات التي واجهتك؟ شاركنا تجربتك في التعليقات أدناه!

قد يهمك:

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Scroll to Top
×

Telegram

اضغط هنا للاشتراك
ادعمنا بمتابعتك!
×

Telegram

اضغط هنا للاشتراك
ادعمنا بمتابعتك!