CSS

Part 3 الخصائص (Properties) في CSS – سلسلة FSWD -CSS

ahmedمنذ 4 أسابيع

0 107 3 دقائق

3. الخصائص (Properties) في CSS

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

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

1. خاصية اللون (color):

تستخدم لتحديد لون النصوص في العنصر.
القيمة يمكن أن تكون: اسم اللون (مثل red)، رمز اللون الست عشري (مثل #ff0000)، rgb (مثل rgb(255, 0, 0))، أو rgba (مثل rgba(255, 0, 0, 0.5)).

مثال

p {
    color: blue;
}

الشرح:

سيتم تغيير لون النص داخل جميع الفقرات <p> إلى الأزرق.

2. خاصية حجم الخط (font-size):

تستخدم لتحديد حجم النص.
يمكن تحديد الحجم بوحدات مثل px (بكسل)، em (نسبة إلى حجم الخط الأب)، rem (نسبة إلى حجم الخط الجذري)، % (نسبة من حجم العنصر الأب).

مثال

h1 {
    font-size: 36px;
}

الشرح:

سيتم تغيير حجم الخط لعناصر <h1> إلى 36 بكسل.

3. خاصية خلفية اللون (background-color):

تستخدم لتحديد خلفية العنصر.
القيمة تكون لونًا كما في خاصية color.

مثال

div {
    background-color: lightblue;
}

الشرح:

سيتم تغيير لون خلفية جميع عناصر <div> إلى اللون الأزرق الفاتح.

4. خاصية الهوامش (margin):

تستخدم لتحديد المسافة بين العنصر والعناصر الأخرى من حوله.
يمكن تحديد الهوامش لجميع الاتجاهات في سطر واحد باستخدام: margin: 10px;
أو تحديد الهوامش لأربعة اتجاهات (العلوي، الأيمن، السفلي، الأيسر) باستخدام: margin: 10px 20px 30px 40px;

مثال

p {
    margin: 20px;
}

الشرح:

سيتم إضافة 20 بكسل من المسافة الفارغة حول جميع الفقرات <p>.

5. خاصية الحشوة (padding):

تستخدم لتحديد المسافة الفارغة بين محتوى العنصر وحدوده.
مشابهة للـ margin لكن padding تعمل داخل العنصر نفسه.

مثال

button {
    padding: 10px 15px;
}

الشرح:

سيتم إضافة 10 بكسل من المسافة الفارغة أعلى وأسفل زر <button>، و15 بكسل من المسافة الفارغة على الجانبين الأيسر والأيمن.

6. خاصية عرض العنصر (width) وارتفاع العنصر (height):

تستخدم لتحديد عرض وارتفاع العنصر.

مثال

div {
    width: 300px;
    height: 200px;
}

الشرح:

سيتم تحديد عرض عنصر <div> إلى 300 بكسل وارتفاعه إلى 200 بكسل.

7. خاصية الحدود (border):

تستخدم لتحديد حدود العنصر.
يمكن تحديد اللون، السماكة، والنمط (مثل خط مستقيم أو منقط).

مثال

div {
    border: 2px solid black;
}

الشرح:

سيتم إضافة حدود بسمك 2 بكسل، بنمط خط مستقيم ولون أسود حول جميع عناصر <div>.

8. خاصية محاذاة النص (text-align):

تستخدم لتحديد كيفية محاذاة النص داخل العنصر.
القيم الممكنة هي: left، right، center، justify.

مثال

h1 {
    text-align: center;
}

الشرح:

سيتم محاذاة النص داخل جميع عناصر <h1> إلى المركز.

9. خاصية الشفافية (opacity):

تستخدم لتحديد درجة الشفافية للعناصر. القيم تتراوح بين 0 (شفاف تمامًا) و1 (غير شفاف تمامًا).

مثال

img {
    opacity: 0.5;
}

لشرح:

سيتم تغيير شفافية جميع الصور <img> بحيث تكون نصف شفافة.

10. خاصية تغيير الشكل (border-radius):

تستخدم لتحديد مدى انحناء الحواف للعنصر.
القيمة تكون بوحدات مثل px أو %.

مثال

div {
    border-radius: 15px;
}

الشرح:

سيتم منح جميع عناصر <div> حواف منحنية بزاوية 15 بكسل.

كود مثال كامل:

الآن سنجمع كل الخصائص التي تم شرحها في مثال واحد:

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على CSS Properties</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>أهلاً وسهلاً في CSS!</h1>
    <p>هذه فقرة تحتوي على نص مع تنسيق CSS مخصص.</p>
    <div class="box">
        <p>هذه div مع تنسيقات مختلفة.</p>
    </div>
    <button>اضغط هنا</button>
    <img src="image.jpg" alt="صورة" />

</body>
</html>

CSS (styles.css)

/* خاصية اللون */
h1 {
    color: darkblue;
}

/* خاصية حجم الخط */
p {
    font-size: 18px;
}

/* خاصية الخلفية */
div.box {
    background-color: lightyellow;
    padding: 20px;
    border: 2px solid black;
    border-radius: 10px;
}

/* خاصية الهوامش */
button {
    margin: 20px;
    padding: 10px 20px;
    background-color: lightgreen;
    border: none;
    border-radius: 5px;
}

/* خاصية الشفافية */
img {
    width: 100px;
    opacity: 0.7;
}

/* خاصية محاذاة النص */
h1, p {
    text-align: center;
}

الشرح:

h1: يتم تعيين لون النص إلى الأزرق الداكن.
p: يتم تعيين حجم الخط إلى 18 بكسل.
div.box: يتم تعيين خلفية العنصر إلى اللون الأصفر الفاتح، إضافة هوامش داخلية (padding)، حدود بسمك 2 بكسل ولون أسود، مع حواف منحنية.
button: يتم إضافة هوامش حول الزر، إضافة حشوة داخلية، تعيين خلفية خضراء، وحواف منحنية.
img: يتم تعيين الشفافية إلى 70% بحيث تصبح الصورة شبه شفافة.
h1, p: يتم محاذاة النصوص إلى الوسط.