+201555349790
السبت - الخميس: 10:00 ص - 10:00 م

خطواتك الأولى في CSS: المحددات، الخصائص، والقيم

ابدأ رحلتك في تصميم الويب بتعلم أساسيات لغة CSS.

بواسطة: مريم خالدFriday, November 15, 2024
خطواتك الأولى في CSS: المحددات، الخصائص، والقيم

خطواتك الأولى في CSS: المحددات، الخصائص، والقيم

CSS (Cascading Style Sheets) هي لغة تصميم صفحات الويب التي تجعل المواقع جميلة ومتجاوبة. هذا الدليل الشامل سيساعدك على فهم أساسيات CSS والبدء في تصميم صفحاتك.

ما هو CSS؟

CSS هي لغة تنسيق صفحات الويب التي تتحكم في مظهر العناصر. تسمح لك بتغيير الألوان، الخطوط، الأحجام، والمواضع لإنشاء تصميمات جميلة ومتجاوبة.

مثال بسيط:

/* CSS */
h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

/* HTML */
<h1>مرحباً بالعالم!</h1>

لماذا CSS مهم؟

🎨 التصميم

جعل المواقع جميلة وجذابة

📱 الاستجابة

تأقلم التصميم مع جميع الأجهزة

🔄 إعادة الاستخدام

تطبيق نفس التصميم على عدة صفحات

⚡ الأداء

تحسين سرعة تحميل الموقع

البنية الأساسية لـ CSS:

المحدد (Selector):

يحدد العنصر الذي تريد تنسيقه

h1          /* جميع عناصر h1 */
.class      /* جميع العناصر مع class="class" */
#id         /* العنصر مع id="id" */

الخاصية (Property):

ما تريد تغييره (اللون، الحجم، إلخ)

color       /* لون النص */
font-size   /* حجم الخط */
margin      /* المسافة الخارجية */

القيمة (Value):

القيمة التي تريد تطبيقها

blue        /* لون أزرق */
16px        /* حجم 16 بكسل */
20px        /* مسافة 20 بكسل */

أنواع المحددات:

محددات العناصر:

/* استهداف جميع عناصر h1 */
h1 {
    color: red;
}

/* استهداف جميع عناصر p */
p {
    font-size: 16px;
    line-height: 1.5;
}

محددات الفئات (Classes):

/* HTML */
<div class="container">محتوى</div>
<p class="highlight">نص مميز</p>

/* CSS */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.highlight {
    background-color: yellow;
    padding: 10px;
}

محددات المعرفات (IDs):

/* HTML */
<div id="header">رأس الصفحة</div>
<button id="submit-btn">إرسال</button>

/* CSS */
#header {
    background-color: #333;
    color: white;
    padding: 20px;
}

#submit-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
}

الخصائص الأساسية:

خصائص النص:

p {
    color: #333;              /* لون النص */
    font-size: 16px;          /* حجم الخط */
    font-family: Arial, sans-serif; /* نوع الخط */
    font-weight: bold;        /* وزن الخط */
    text-align: center;       /* محاذاة النص */
    line-height: 1.6;         /* ارتفاع السطر */
    text-decoration: underline; /* تزيين النص */
}

خصائص الخلفية:

body {
    background-color: #f5f5f5; /* لون الخلفية */
    background-image: url('image.jpg'); /* صورة الخلفية */
    background-size: cover;    /* حجم الصورة */
    background-position: center; /* موضع الصورة */
    background-repeat: no-repeat; /* تكرار الصورة */
}

خصائص الحشو والهامش:

div {
    padding: 20px;            /* حشو داخلي */
    margin: 10px;              /* هامش خارجي */
    border: 2px solid black;   /* إطار */
    border-radius: 10px;      /* زوايا مدورة */
}

وحدات القياس:

📏 الوحدات المطلقة:

  • px - البكسل (1px = 1 نقطة)
  • pt - النقطة (1pt = 1.33px)
  • in - البوصة (1in = 96px)
  • cm - السنتيمتر

📐 الوحدات النسبية:

  • % - نسبة مئوية من العنصر الأب
  • em - نسبة من حجم خط العنصر
  • rem - نسبة من حجم خط الجذر
  • vw/vh - نسبة من عرض/ارتفاع الشاشة

الألوان في CSS:

طرق تحديد الألوان:

/* أسماء الألوان */
color: red;
color: blue;
color: green;

/* الألوان السداسية */
color: #ff0000;  /* أحمر */
color: #00ff00;  /* أخضر */
color: #0000ff;  /* أزرق */

/* RGB */
color: rgb(255, 0, 0);     /* أحمر */
color: rgb(0, 255, 0);    /* أخضر */
color: rgb(0, 0, 255);    /* أزرق */

/* RGBA (مع الشفافية) */
color: rgba(255, 0, 0, 0.5); /* أحمر شفاف */

التخطيط الأساسي:

Display Property:

/* العناصر المبنية (Block) */
div {
    display: block;        /* يأخذ السطر كاملاً */
    width: 100%;
}

/* العناصر المدمجة (Inline) */
span {
    display: inline;       /* يأخذ المساحة المطلوبة فقط */
}

/* العناصر المدمجة المبنية (Inline-Block) */
button {
    display: inline-block; /* يجمع بين الميزتين */
    width: 100px;
    height: 40px;
}

الموضع (Position):

/* الموضع الثابت */
.static {
    position: static;      /* الموضع الطبيعي */
}

/* الموضع النسبي */
.relative {
    position: relative;    /* موضع نسبي للعنصر الأب */
    top: 10px;
    left: 20px;
}

/* الموضع المطلق */
.absolute {
    position: absolute;    /* موضع مطلق للصفحة */
    top: 0;
    right: 0;
}

/* الموضع الثابت */
.fixed {
    position: fixed;        /* ثابت على الشاشة */
    top: 0;
    left: 0;
}

Flexbox - التخطيط المرن:

الخصائص الأساسية:

.container {
    display: flex;         /* تفعيل Flexbox */
    flex-direction: row;   /* اتجاه العناصر */
    justify-content: center; /* محاذاة أفقية */
    align-items: center;    /* محاذاة عمودية */
    gap: 20px;             /* المسافة بين العناصر */
}

.item {
    flex: 1;               /* توزيع متساوي للمساحة */
    flex-grow: 2;         /* نمو العنصر */
    flex-shrink: 1;        /* انكماش العنصر */
    flex-basis: 200px;     /* الحجم الأساسي */
}

مثال عملي:

/* HTML */
<div class="card-container">
    <div class="card">بطاقة 1</div>
    <div class="card">بطاقة 2</div>
    <div class="card">بطاقة 3</div>
</div>

/* CSS */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.card {
    flex: 1;
    min-width: 200px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

الاستجابة (Responsive Design):

Media Queries:

/* للشاشات الصغيرة */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 10px;
    }

    .card {
        flex-direction: column;
    }
}

/* للشاشات الكبيرة */
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

Viewport Meta Tag:

<!-- في HTML head -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

أفضل الممارسات:

📝 تنظيم الكود:

  • استخدم تعليقات لتنظيم الكود
  • اجمع الخصائص المتشابهة معاً
  • استخدم أسماء واضحة للفئات
  • تجنب الكود المكرر

🎨 التصميم:

  • استخدم نظام ألوان متسق
  • اختر خطوط واضحة ومقروءة
  • اترك مساحات بيضاء مناسبة
  • اختبر التصميم على أجهزة مختلفة

⚡ الأداء:

  • قلل من عدد ملفات CSS
  • استخدم CSS Minification
  • تجنب الاستعلامات المعقدة
  • استخدم CSS Variables

مشاريع تطبيقية:

🎨 بطاقة شخصية:

/* HTML */
<div class="profile-card">
    <img src="avatar.jpg" alt="الصورة الشخصية">
    <h2>أحمد محمد</h2>
    <p>مطور ويب</p>
    <div class="social-links">
        <a href="#">LinkedIn</a>
        <a href="#">GitHub</a>
    </div>
</div>

/* CSS */
.profile-card {
    width: 300px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: center;
    padding: 30px;
    margin: 20px auto;
}

.profile-card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.profile-card h2 {
    color: #333;
    margin-bottom: 10px;
}

.social-links {
    margin-top: 20px;
}

.social-links a {
    display: inline-block;
    margin: 0 10px;
    color: #007bff;
    text-decoration: none;
}

الخطوات التالية:

  • تعلم CSS Grid للتخطيطات المعقدة
  • فهم CSS Variables
  • تعلم CSS Animations
  • ممارسة Responsive Design
  • استخدام CSS Frameworks

CSS هو مفتاح التصميم الجميل. ابدأ في تعلمه اليوم!

تعلم CSS معنا

تواصل معنا

عبر الماسنجر او الهاتف

اختر طريقة التواصل