امتحان CSS 1: الأساسيات - 20 تمرين | تعلم البرمجة بالعربي

تمرين 1 طرق تضمين CSS (Inclusion Methods)

قم بتطبيق التنسيقات التالية بثلاث طرق مختلفة:

اجعل لون نص الفقرة (p) أحمر باستخدام التنسيق الداخلي (Inline Style).
اجعل خلفية الصفحة رمادية باستخدام وسم <style> في الرأس (Internal Style).
اكتب كود ربط ملف تنسيق خارجي باسم "style.css" (External Style).

الحل

<!-- 1. Inline Style -->
<p style="color: red;">نص أحمر</p>

<!-- 2. Internal Style -->
<head>
    <style>
        body { background-color: gray; }
    </style>
    
    <!-- 3. External Style -->
    <link rel="stylesheet" href="style.css">
</head>

تمرين 2 المحددات الأساسية (Basic Selectors)

اكتب قواعد CSS لتحديد العناصر التالية:

جميع الفقرات (p) لتكون محاذاتها في الوسط (text-align: center).
العنصر الذي يحمل المعرف (id="header") ليكون لونه أزرق.
جميع العناصر التي تحمل الفئة (class="btn") لتكون خلفيتها خضراء.

الحل

/* Element Selector */
p {
    text-align: center;
}

/* ID Selector */
#header {
    color: blue;
}

/* Class Selector */
.btn {
    background-color: green;
}

تمرين 3 الألوان والخلفيات (Colors & Backgrounds)

قم بتنسيق عنصر (div) بالمواصفات التالية:

لون النص أبيض (white).
لون الخلفية باستخدام نظام Hex Code للون الأسود (#000000).
صورة خلفية "bg.jpg" لا تتكرر (no-repeat) وتغطي كامل العنصر (cover).

الحل

div {
    color: white;
    background-color: #000000;
    background-image: url('bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

تمرين 4 تنسيق النصوص (Text Formatting)

نسق عنواناً (h1) بالمواصفات التالية:

اجعل النص يظهر بحروف كبيرة (uppercase).
أضف خطاً تحت النص (underline).
اجعل المسافة بين الحروف (letter-spacing) بمقدار 2px.
اجعل ارتفاع السطر (line-height) بمقدار 1.5.

الحل

h1 {
    text-transform: uppercase;
    text-decoration: underline;
    letter-spacing: 2px;
    line-height: 1.5;
}

تمرين 5 الخطوط (Fonts)

قم بتعيين خصائص الخط للفقرة (p):

نوع الخط (font-family) ليكون "Arial"، وفي حال عدم وجوده استخدم "sans-serif".
حجم الخط (font-size) ليكون 18px.
سمك الخط (font-weight) ليكون غامقاً (bold).
نمط الخط (font-style) ليكون مائلاً (italic).

الحل

p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
}

تمرين 6 المحددات المركبة (Combinators)

اكتب المحددات المناسبة للحالات التالية:

حدد جميع الفقرات (p) الموجودة داخل (div) (Descendant Selector).
حدد فقط الفقرات (p) التي تكون ابناً مباشراً لـ (div) (Child Selector).
حدد الفقرة (p) التي تأتي مباشرة بعد (h1) (Adjacent Sibling).

الحل

/* Descendant (مسافة) */
div p { color: red; }

/* Child (>) */
div > p { color: blue; }

/* Adjacent Sibling (+) */
h1 + p { color: green; }

تمرين 7 الفئات الزائفة (Pseudo-classes)

نسق الروابط (a) للحالات التالية:

عند مرور الماوس (hover) يصبح اللون أحمر.
عند زيارة الرابط (visited) يصبح اللون رمادياً.
عند الضغط على الرابط (active) يصبح اللون أخضر.

الحل

a:hover {
    color: red;
}

a:visited {
    color: gray;
}

a:active {
    color: green;
}

تمرين 8 القوائم (Lists)

نسق قائمة غير مرتبة (ul) كالتالي:

أزل النقاط الافتراضية (list-style-type: none).
اجعل العناصر تظهر بجانب بعضها (display: inline-block) أو (flex).
أضف هامشاً (margin) بمقدار 10px لكل عنصر.

الحل

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    display: inline-block;
    margin: 10px;
}

تمرين 9 الحدود (Borders)

أضف حدوداً لعنصر (div) بالمواصفات التالية:

سمك الحد 2px، نوعه متصل (solid)، ولونه أسود.
اجعل الزوايا دائرية (border-radius) بمقدار 10px.
اجعل الحد العلوي فقط (border-top) باللون الأحمر.

الحل

div {
    border: 2px solid black;
    border-radius: 10px;
    border-top-color: red;
}

تمرين 10 الشفافية والظل (Opacity & Shadow)

أضف تأثيرات بصرية لعنصر (button):

اجعل العنصر نصف شفاف (opacity: 0.5).
أضف ظلاً للنص (text-shadow) بمقدار 1px 1px ولون أسود.
أضف ظلاً للصندوق (box-shadow) بمقدار 5px 5px 10px ولون رمادي.

الحل

button {
    opacity: 0.5;
    text-shadow: 1px 1px black;
    box-shadow: 5px 5px 10px gray;
}

تمرين 11 متغيرات CSS (CSS Variables) متوسط

استخدم متغيرات CSS لإنشاء نظام ألوان قابل لإعادة الاستخدام:

أنشئ متغيرات CSS في :root للألوان التالية: --primary-color (أزرق)، --secondary-color (رمادي)، --text-color (أسود).
استخدم المتغيرات في تنسيق عنصر button بحيث يكون لون الخلفية var(--primary-color).
أنشئ متغير --spacing بقيمة 20px واستخدمه في padding و margin.
استخدم fallback value في حال عدم تعريف المتغير: var(--undefined-color, red).

الحل

/* تعريف المتغيرات في الجذر */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --text-color: #000000;
    --spacing: 20px;
}

/* استخدام المتغيرات */
button {
    background-color: var(--primary-color);
    color: white;
    padding: var(--spacing);
    margin: var(--spacing);
    border: none;
}

/* استخدام fallback */
.custom-element {
    color: var(--undefined-color, red);
}

/* يمكن تغيير قيم المتغيرات في سياقات مختلفة */
.dark-theme {
    --primary-color: #0056b3;
    --text-color: #ffffff;
}

تمرين 12 Flexbox المتقدم (Advanced Flexbox) متوسط

أنشئ تخطيط Flexbox متقدم:

أنشئ حاوية flex تحتوي على 5 عناصر، اجعلها تظهر في صف واحد (flex-direction: row).
اجعل العناصر تتوزع بالتساوي مع مسافات متساوية بينها (justify-content: space-between).
اجعل العناصر محاذاة عمودياً في المنتصف (align-items: center).
اجعل العنصر الثالث ينمو ليأخذ المساحة المتبقية (flex-grow: 1).
اجعل العناصر تنتقل إلى سطر جديد عند الحاجة (flex-wrap: wrap).

الحل

/* الحاوية الأب */
.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px; /* مسافة بين العناصر */
    padding: 20px;
    background-color: #f0f0f0;
}

/* العناصر الأبناء */
.flex-item {
    background-color: #007bff;
    color: white;
    padding: 20px;
    min-width: 100px;
    text-align: center;
}

/* العنصر الثالث ينمو */
.flex-item:nth-child(3) {
    flex-grow: 1;
}

/* مثال على الاستخدام في HTML */
/*

    1
    2
    3
    4
    5

*/

تمرين 13 CSS Grid Layout متوسط

أنشئ تخطيط Grid متقدم:

أنشئ شبكة Grid بـ 3 أعمدة متساوية (grid-template-columns: repeat(3, 1fr)).
اجعل المسافة بين الخلايا 20px (gap: 20px).
اجعل العنصر الأول يمتد على عمودين (grid-column: span 2).
اجعل العنصر الرابع يمتد على صفين (grid-row: span 2).
استخدم grid-template-areas لإنشاء تخطيط مسمى.

الحل

/* الحاوية Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    background-color: #f5f5f5;
}

/* العناصر */
.grid-item {
    background-color: #28a745;
    color: white;
    padding: 30px;
    text-align: center;
    border-radius: 5px;
}

/* العنصر الأول يمتد على عمودين */
.grid-item:nth-child(1) {
    grid-column: span 2;
}

/* العنصر الرابع يمتد على صفين */
.grid-item:nth-child(4) {
    grid-row: span 2;
}

/* مثال متقدم باستخدام grid-template-areas */
.grid-layout {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "sidebar content aside"
        "footer footer footer";
    gap: 15px;
    min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

تمرين 14 Pseudo-elements (::before & ::after) متوسط

استخدم pseudo-elements:

أضف محتوى قبل كل فقرة باستخدام ::before.
أضف محتوى بعد كل رابط باستخدام ::after.

الحل

p::before {
    content: "📝 ";
}

a::after {
    content: " →";
}

تمرين 15 calc() Function متوسط

استخدم calc() للحسابات:

اجعل العرض = 100% - 50px.
اجعل الارتفاع = 100vh - 80px.

الحل

.container {
    width: calc(100% - 50px);
    height: calc(100vh - 80px);
}

تمرين 16 Custom Properties المتقدمة متقدم

أنشئ نظام ألوان متكامل:

عرّف متغيرات للألوان الأساسية.
استخدم calc() مع المتغيرات.

الحل

:root {
    --primary: #007bff;
    --spacing: 1rem;
    --double-spacing: calc(var(--spacing) * 2);
}

.button {
    background: var(--primary);
    padding: var(--double-spacing);
}

تمرين 17 Gradient Backgrounds متقدم

أنشئ خلفيات متدرجة:

تدرج خطي من الأزرق للأحمر.
تدرج دائري من المركز.

الحل

.linear {
    background: linear-gradient(to right, blue, red);
}

.radial {
    background: radial-gradient(circle, blue, red);
}

تمرين 18 Object-fit & Object-position متقدم

تحكم في عرض الصور:

استخدم object-fit: cover.
ضع الصورة في الأعلى باستخدام object-position.

الحل

img {
    width: 300px;
    height: 200px;
    object-fit: cover;
    object-position: top;
}

تمرين 19 Writing Modes متقدم

غيّر اتجاه الكتابة:

اجعل النص عمودياً من اليمين لليسار.
استخدم writing-mode و direction.

الحل

.vertical-text {
    writing-mode: vertical-rl;
    direction: rtl;
}

تمرين 20 مشروع: بطاقة منتج متكاملة متقدم

أنشئ بطاقة منتج تحتوي على:

صورة مع object-fit.
تدرج في الخلفية.
متغيرات CSS للألوان.
Flexbox للتخطيط.
تأثيرات hover.

الحل

:root {
    --primary: #007bff;
    --shadow: rgba(0,0,0,0.1);
}

.product-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--shadow);
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-info {
    padding: 1.5rem;
    color: white;
}

.product-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
}

DevArabi

دورة تعلم CSS

امتحان CSS 1: الأساسيات والمستوى المتوسط (20 تمرين)

امتحان CSS: الأساسيات والمستوى المتوسط

DevArabi

دورة تعلم CSS

امتحان CSS 1: الأساسيات والمستوى المتوسط (20 تمرين)

امتحان CSS: الأساسيات والمستوى المتوسط

المحرر الذكي

قناة ديف عربي

تابعنا