لغات البرمجة
الربط مع CSS: شرح تنسيق صفحات HTML (الدرس الثامن)
هل تعلم أن المستخدم العادي يستغرق أقل من 50 مللي ثانية ليكوّن انطباعاً أولياً عن موقعك الإلكتروني؟ وأن 38% من المستخدمين سيتوقفون عن تصفح موقع ذي تصميم غير جذاب؟ نعم، مهما كان محتوى موقعك رائعاً، فإن التصميم والتنسيق هما البوابة التي تجذب الزوار وتحثهم على البقاء والتفاعل مع ما تقدمه.
في المقالات السابقة من سلسلة ملتقى الويب التعليمية، تعلمنا كيفية بناء هيكل صفحات الويب باستخدام HTML، وكيفية جعلها أكثر دلالية ومعنى. واليوم سننتقل إلى المرحلة التالية – كيفية جعل هذه الصفحات جميلة وجذابة باستخدام CSS (Cascading Style Sheets) أو “أوراق الأنماط المتتالية”.
فهرس شرح تعلم لغة HTML
في ملتقى الويب، نفخر بتقديم سلسلة شاملة من المقالات والدروس المخصصة للمبتدئين في تعلم HTML. سنرافقك خطوة بخطوة من البداية وحتى الاحتراف، مع التركيز على التطبيقات العملية والتجارب الواقعية.
إليك نظرة عامّة على كورس HTML المجاني:
مقدمة إلى عالم HTML – التاريخ والأهمية والأدوات اللازمة
الهيكل الأساسي لصفحات HTML – تعلم العناصر الضرورية لكل صفحة
التعامل مع النصوص والروابط – كيفية تنسيق المحتوى النصي وإنشاء الارتباطات
إضافة الصور والوسائط – جعل صفحاتك أكثر جاذبية بالمحتوى المرئي
إنشاء الجداول في HTML – تنظيم البيانات بشكل منظم
نماذج الإدخال والتفاعل – جمع معلومات المستخدمين بطريقة احترافية
العناصر الدلالية في HTML5 – فهم وتطبيق الهيكلة الحديثة للصفحات
الربط مع CSS – الخطوات الأولى في تجميل صفحاتك
مقدمة إلى JavaScript مع HTML – إضافة التفاعلية البسيطة
أفضل الممارسات وتحسين الأداء – جعل مواقعك أسرع وأكثر كفاءة
للوصول إلى كافة الدروس المتعلقة بالدورة اضغط على دورة تعلم 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>
المزايا:
يمكن استخدام نفس ملف 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>
المزايا:
لا حاجة لتحميل ملفات إضافية
مفيد للصفحات الفريدة ذات التنسيق الخاص
مناسب للمشاريع الصغيرة أو النماذج الأولية
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>
المزايا:
مفيد للتعديلات السريعة
يتجاوز القواعد الأخرى بسبب الأولوية العالية
لا يتطلب اختيار العناصر
على الرغم من فوائد الطريقتين الثانية والثالثة في بعض الحالات، إلا أنني أوصي دائمًا باستخدام ملفات CSS الخارجية للمشاريع الاحترافية، لما توفره من مزايا في التنظيم والصيانة وإعادة الاستخدام.
هيكل قواعد CSS الأساسية
قبل البدء في استخدام CSS، من المهم فهم الهيكل الأساسي لقواعد التنسيق:
المحدد {
الخاصية: القيمة;
خاصية-أخرى: قيمة-أخرى;
}
المحدد (Selector): يشير إلى العنصر (أو العناصر) من HTML الذي سيتم تنسيقه
الخاصية (Property): الجانب المحدد الذي تريد تغييره (مثل اللون، الحجم، الهامش)
القيمة (Value): الإعداد الذي تريد تطبيقه على الخاصية
على سبيل المثال:
h1 {
color: blue;
font-size: 24px;
margin-bottom: 15px;
}
هذه القاعدة تنسق جميع عناصر <h1> بلون أزرق وحجم خط 24 بكسل وهامش سفلي بقيمة 15 بكسل.
أنواع المحددات في CSS
المحددات (Selectors) هي الطريقة التي نخبر بها المتصفح أي العناصر يجب تنسيقها. لنتعرف على أنواع المحددات الرئيسية:
1. محدد العنصر (Element Selector)
يستهدف جميع العناصر من نوع معين:
h1 {
color: navy;
}
p {
line-height: 1.6;
}
2. محدد الهوية (ID Selector)
يستهدف عنصرًا محددًا بواسطة السمة id. يجب أن تكون قيمة id فريدة في الصفحة:
#header {
background-color: #333;
color: white;
}
#main-content {
padding: 20px;
}
HTML:
<header id="header">ترويسة الموقع</header>
<div id="main-content">المحتوى الرئيسي</div>
3. محدد الفئة (Class Selector)
يستهدف العناصر المحددة بواسطة السمة class. يمكن استخدام نفس الفئة لعدة عناصر:
.button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
}
.highlight {
background-color: yellow;
}
HTML:
<button class="button">انقر هنا</button>
<a href="#" class="button">رابط يشبه الزر</a>
<p>هذه فقرة تحتوي على <span class="highlight">نص مميز</span>.</p>
4. محدد السمة (Attribute Selector)
يستهدف العناصر بناءً على سماتها:
input[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}
a[target="_blank"] {
color: orangered;
}
HTML:
<input type="text" placeholder="أدخل اسمك">
<a href="https://example.com" target="_blank">رابط خارجي</a>
5. المحددات المجمعة (Combinators)
تسمح لنا بإنشاء محددات أكثر تحديدًا من خلال الجمع بين المحددات الأخرى:
محدد الأبناء (Descendant Selector)
article p {
font-size: 16px;
}
يطبق التنسيق على جميع عناصر <p> الموجودة داخل عنصر <article>.
محدد الابن المباشر (Child Selector)
nav > ul {
list-style-type: none;
}
يطبق التنسيق على عناصر <ul> التي هي أبناء مباشرين لعنصر <nav>.
محدد الأشقاء المتجاورين (Adjacent Sibling Selector)
h2 + p {
font-weight: bold;
}
يطبق التنسيق على عنصر <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; /* اتجاه النص */
}
الحدود والمساحات
div {
width: 300px; /* العرض */
height: 200px; /* الارتفاع */
padding: 20px; /* الحشو الداخلي */
margin: 10px; /* الهامش الخارجي */
border: 1px solid #000; /* الحدود: الحجم النوع اللون */
border-radius: 5px; /* تدوير الزوايا */
}
يمكن تحديد الاتجاهات بشكل منفصل:
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
/* أو بشكل مختصر (أعلى - يمين - أسفل - يسار) */
padding: 10px 20px 10px 20px;
/* عند تطابق القيم المتقابلة */
padding: 10px 20px; /* 10px للأعلى والأسفل، 20px لليمين واليسار */
}
الخلفيات
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;
}
العرض والموضع
.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 */
}
التأثيرات المرئية
.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; /* الانتقال: الخاصية المدة التوقيت */
}
أمثلة عملية للربط بين 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>
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;
}
مثال 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>
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;
}
مثال 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>
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;
}
10 نصائح احترافية لكتابة CSS فعال
بناءً على خبرتي في تطوير الويب، إليك أهم النصائح لكتابة CSS بشكل أفضل:
استخدم نظام تسمية متناسق – اعتمد نهجًا مثل BEM (Block Element Modifier) لتسمية الفئات بشكل منظم ومفهوم.
نظم ملفات CSS – قسّم الأكواد إلى ملفات منطقية (مثل reset.css، typography.css، layout.css) للمشاريع الكبيرة.
استخدم المتغيرات – استفد من متغيرات CSS لتخزين القيم المتكررة مثل الألوان والخطوط: :root { --primary-color: #4CAF50; --secondary-color: #333; --font-main: 'Cairo', sans-serif; } .button { background-color: var(--primary-color); font-family: var(--font-main); }
تجنب تحديد العناصر بشكل مفرط – كلما زاد تعقيد المحدد، زادت صعوبة تجاوزه: /* تجنب هذا */ body header nav ul li a.nav-link { ... } /* استخدم هذا بدلاً منه */ .nav-link { ... }
استخدم تعليقات توضيحية – خاصة للأقسام الرئيسية والأكواد المعقدة: /* === رأس الصفحة === */ .header { ... } /* === القائمة الرئيسية === */ .main-nav { ... } /* === تعديل الزر للشاشات الصغيرة === */ @media (max-width: 768px) { .button { ... } }
تحقق من التوافق بين المتصفحات – استخدم الـ prefixes عند الضرورة: .box { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
اعتمد مبدأ DRY (Don’t Repeat Yourself) – استخدم الفئات المشتركة للتنسيقات المتكررة: .text-center { text-align: center; } .text-bold { font-weight: bold; } .margin-top { margin-top: 20px; }
ابدأ بإعادة ضبط CSS – استخدم Reset CSS أو Normalize.css لضمان تناسق المظهر عبر المتصفحات.
اختبر على أجهزة متعددة – تأكد من تجربة تصميمك على مختلف أحجام الشاشات والمتصفحات.
راقب حجم وأداء 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;
}
}
وحدات قياس متجاوبة
استخدم وحدات نسبية بدلاً من البكسل الثابت:
.container {
width: 90%; /* نسبة من عرض الأب */
max-width: 1200px; /* حد أقصى للعرض */
margin: 0 auto;
}
.title {
font-size: 2rem; /* مرتبط بحجم الخط الأساسي للمستند */
}
.hero-image {
height: 50vh; /* نسبة من ارتفاع viewport */
}
.padding-section {
padding: 5%; /* نسبة من عرض العنصر نفسه */
}
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;
}
}
Grid:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
نهج Mobile-First
من أفضل الممارسات الحديثة هو البدء بتصميم للأجهزة المحمولة أولاً (Mobile-First)، ثم التوسع للأحجام الأكبر:
/* تنسيقات أساسية للهواتف */
.container {
padding: 15px;
}
/* للأجهزة المتوسطة وما فوق */
@media (min-width: 576px) {
.container {
padding: 20px;
}
}
/* للأجهزة الكبيرة وما فوق */
@media (min-width: 992px) {
.container {
padding: 30px;
}
}
قالب شامل للربط بين 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>
ومحتوى ملف 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;
}
}
خاتمة: خطواتك القادمة في رحلة CSS
لقد غطينا في هذا المقال الأساسيات الضرورية للربط بين HTML و CSS، من طرق الربط المختلفة إلى المحددات والخصائص الأساسية، وصولاً إلى التصميم المتجاوب وأفضل الممارسات. ولكن رحلة CSS طويلة ومليئة بالمزيد من المفاهيم المتقدمة.
في ملتقى الويب، نؤمن بأن إتقان CSS يعد مهارة أساسية لأي مطور ويب. استخدم ما تعلمته في هذا المقال كنقطة انطلاق، وواصل التعلم والتجريب لتطوير مهاراتك في هذا المجال.
في مقالنا القادم، سنستكشف مقدمة إلى JavaScript مع HTML، حيث ستتعلم كيفية إضافة التفاعلية لصفحات الويب الخاصة بك. تأكد من متابعتنا!
هل بدأت بتطبيق CSS على مشروعك؟ ما هي التحديات التي واجهتك؟ شاركنا تجربتك في التعليقات أدناه!