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

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

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

1. ما هي CSS؟

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

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

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

الأسلوب الداخلي (Inline CSS): يتم إضافة الأنماط مباشرة إلى عناصر HTML باستخدام السمة style.
الأسلوب الداخلي في الرأس (Internal CSS): يتم كتابة الأنماط داخل وسم <style> في رأس المستند.
الأسلوب الخارجي (External CSS): يتم كتابة الأنماط في ملف منفصل بامتداد .css وربطه بصفحة HTML باستخدام وسم <link>.

<!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

القاعدة (Rule): تتكون من محدد (selector) وإعلان (declaration).
المحدد (Selector): يحدد العنصر الذي سيتم تطبيق الأنماط عليه.
الإعلان (Declaration): يحتوي على خاصية وقيمة.

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

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

الألوان: يمكن تحديد الألوان باستخدام الأسماء، القيم الست عشرية (hex), RGB، أو HSL.

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

Flexbox: نظام لتخطيط العناصر بشكل مرن وسهل.

.container {
display: flex;
justify-content: space-around;
}
.item {
flex: 1;
padding: 10px;
}

Grid: نظام تخطيط ثنائي الأبعاد يمكن استخدامه لإنشاء تخطيطات معقدة.

.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: من الأساسيات إلى الاحتراف