اساسيات CSS

CSS هي لغة تنسيق الويب التي تستخدم لتصميم وتنسيق صفحات الويب. هنا بعض الأساسيات:

1. 1. تحديد العناصر: يتم استخدام CSS لتحديد العناصر HTML وتطبيق التنسيق عليها باستخدام محددات الموجه (selectors).

1. 1. الخصائص والقيم: يحدد CSS الكثير من الخصائص التي يمكن تطبيقها على العناصر، مثل الألوان، الحجم، الخطوط، والهوامش.

1. 1. الوحدات: تستخدم وحدات مثل البكسل (pixels) أو النسبة المئوية (percentage) لتحديد الأبعاد والمسافات.

1. 1. التنسيق الداخلي والخارجي: يمكن وضع CSS داخل الوثيقة HTML مباشرةً (داخل <style> tags) أو في ملف خارجي للفصل بين البنية والتنسيق.

هذه مقدمة بسيطة في أساسيات CSS ( لغة تنسيق الويب )

في CSS، يمكن تطبيق التنسيقات على العناصر باستخدام مجموعة متنوعة من الخصائص والقيم. هنا بعض التفاصيل:

1. 1. المحددات (Selectors): تستخدم لتحديد العناصر التي ستتم تنسيقها. يمكن استخدام اسم العنصر (element name)، الفئة (class)، الهوية (ID)، وغيرها.

1. 1. الخصائص (Properties): تحدد الجوانب المختلفة التي يمكن تغييرها، مثل اللون (color)، الخلفية (background)، الحجم (size)، الهوامش (margin)، والحدود (border)، وغيرها الكثير.

1. 1. القيم (Values): تُعطى للخصائص وتحدد كيف يجب أن تكون الخصائص مثل اللون أو الحجم. على سبيل المثال، color: blue; أو font-size: 16px;.

1. 1. الوحدات (Units): تحدد القياسات المختلفة مثل البكسل (pixels)، النسبة المئوية (percentage)، والـ EMs و REMs.

1. 1. التعليقات (Comments): تستخدم لوضع تعليقات داخل كود CSS لشرحه وجعله أكثر فهمًا.

هذه بعض التفاصيل الأساسية .

امثلة CSS

إليك بعض الأمثلة البسيطة لاستخدام CSS:

1. تغيير لون النص:

p {
color: blue;
}

هذا سيغير لون النص في كل عنصر <p> إلى اللون الأزرق.

2. تغيير خلفية الصفحة:

body {
background-color: #f0f0f0;
}

هذا سيغير لون خلفية الصفحة إلى اللون الرمادي الفاتح.

3. تنسيق عنصر معين باستخدام الهوية:

#header {
font-size: 24px;
color: black;
}

هذا سيطبق خصائص التنسيق على العنصر الذي يحمل الهوية header.

4. تغيير حجم الخطوط داخل عنصر معين:

.article p {
font-size: 18px;
}

هذا سيغير حجم النص داخل الفقرة <p> داخل عنصر يحمل الفئة article.

5. تطبيق هامش للعناصر:

div {
margin: 10px;
}

سيضيف هامش بحجم 10 بكسل لكل جانب من جوانب كل عنصر <div>.

هذه أمثلة بسيطة في اساسيات CSS لغة تنسيق الويب . ان كنت تريد أمثلة أخرى فيمكنك اتباع الدرس القادم

Download Visual Studio Code