تعلم لغة CSS: كورس شامل من البداية إلى الاحتراف

تعلم لغة CSS: كورس شامل من البداية إلى الاحتراف

Profil
Icons
ياسر صابري
كاتب محتوى في معلومات
منذ: 2024-04-23
آخر تحديث: 2024-07-08

محتويات


تعلم لغة CSS: كورس شامل من البداية إلى الاحتراف

CSS (Cascading Style Sheets) هي لغة تنسيق تُستخدم لتحسين وتنسيق مظهر صفحات الويب. تعتبر CSS من الركائز الأساسية لتطوير المواقع الإلكترونية، حيث تسمح للمطورين بفصل محتوى الموقع (HTML) عن شكله وتصميمه. في هذا الكورس الشامل، سنتناول أساسيات CSS وننتقل إلى المفاهيم المتقدمة مع أمثلة عملية.

القسم الأول: مقدمة في CSS

1. ما هي CSS؟

CSS هي لغة تُستخدم لوصف مظهر وثبات المستند المكتوب بلغة HTML أو XML. باستخدام CSS، يمكن التحكم في الألوان، والخطوط، والمسافات، والتخطيطات، والتأثيرات البصرية الأخرى.

2. كيفية تضمين CSS في HTML

هناك ثلاث طرق لتضمين CSS في مستند HTML:

<!-- Example of External CSS -->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>My First CSS Page</title>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <h1>Welcome to CSS</h1>
</body>
</html>

القسم الثاني: أساسيات CSS

1. القواعد الأساسية في CSS

/* Example of a CSS Rule */
h1 {
   color: blue; /* Declaration: property and value */
   font-size: 20px; /* Another Declaration */
}

2. الألوان والخطوط

p {
   color: red; /* Using color name */
   background-color: #f0f0f0; /* Using hex value */
}

body {
   font-family: Arial, sans-serif;
   font-size: 16px;
   font-weight: bold;
}

القسم الثالث: التخطيطات والتصميم

1. صناديق التخطيط (Box Model)

كل عنصر في HTML يعتبر صندوقًا يحتوي على الحواف (margin)، الحدود (border)، الحشوة (padding)، والمحتوى (content).

div {
   margin: 10px;
   border: 1px solid black;
   padding: 10px;
   width: 200px;
}

2. التخطيط باستخدام Flexbox وGrid

.container {
   display: flex;
   justify-content: space-around;
}

.item {
   flex: 1;
   padding: 10px;
}

.container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
}

.item {
   background-color: lightblue;
   padding: 20px;
}

القسم الرابع: التأثيرات والتفاعلات

1. التحولات (Transitions)

تسمح بإضافة تأثيرات الانتقال بين حالتي عنصر.

button {
   background-color: blue;
   transition: background-color 0.3s ease;
}

button:hover {
   background-color: green;
}

2. الرسوم المتحركة (Animations)

يمكنك إنشاء رسوم متحركة باستخدام @keyframes.

@keyframes slide {
   from {
       transform: translateX(0);
   }
   to {
       transform: translateX(100px);
   }
}

.box {
   animation: slide 2s infinite;
}

القسم الخامس: المفاهيم المتقدمة

1. الاستجابة (Responsive Design)

تصميم مواقع تتكيف مع مختلف أحجام الشاشات باستخدام استعلامات الوسائط (media queries).

@media (max-width: 600px) {
   .container {
       flex-direction: column;
   }
}

2. CSS المتغيرة (CSS Variables)

تتيح لك إعادة استخدام القيم عبر أنماط متعددة.

:root {
   --main-color: #3498db;
}

h1 {
   color: var(--main-color);
}

CSS هي أداة قوية تمكنك من تحسين تجربة المستخدم على موقعك الإلكتروني. من خلال فهم الأساسيات واستخدام الأدوات المتقدمة، يمكنك إنشاء تصاميم جذابة ومتجاوبة. استمر في التدرب واستكشاف المزيد من الميزات لتحسين مهاراتك في تصميم الويب.

قد يهمك: كيفية إنشاء شريط جانبي(Sidebar) باستخدام HTML وCSS وJavaScript

قد يهمك: إنشاء آلة حاسبة باستخدامHTML وCSS وJavaScript

قد يهمك: كورس شامل لتعلم لغةHTML: من الأساسيات إلى الاحتراف

الوسوم

شارك المقالة


إقرأ أيضا


مقالات منوعة

صلاة الوتر

كيفيّة أداء صلاة الوتر

الكرة الطائرة

الكرة الطائرة

فهم الفرق بين التداول الآلي واليدوي

الفرق بين المدير والقائد

الفرق بين المدير والقائد

أفضل الطرق في علاج جفاف البشرة الدهني

علاج جفاف البشرة الدهني

ما هي قوانين كرة السلة

ما هي قوانين كرة السلة

فهم الـ NFTs

حكم قراءة الأبراج بين متعة التسلية وضرورة التفكير العقلاني

حكم قراءة الأبراج

 كيفية تنمية المهارات الإدارية؟

تأسيس شركة ناجحة

كيفية تقصير بنطلون الجينز

كيفية تقصير بنطلون الجينز

شكرًا لكم على زيارتكم لمعلومات، ونتطلع لرؤية تقدمكم ونجاحكم في رحلة التعلم.