البرمجة

أساسيات CSS للمبتدئين

Iso's Recipes
اخر تحديث :

مقدمة

بعد أن تتعلم HTML وتفهم كيف يتم بناء صفحات الويب، تأتي الخطوة التالية وهي تعلم CSS. إذا كانت HTML هي هيكل الصفحة، فإن CSS هي ما يجعل هذا الهيكل جميلًا ومنظمًا واحترافيًا.

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

CSS هي اختصار لـ:

Cascading Style Sheets

وتعني “أوراق الأنماط المتتالية”.

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

الفصل الأول: ما هي CSS ولماذا نستخدمها؟

تعريف CSS

CSS هي لغة تستخدم لتنسيق صفحات الويب المكتوبة بـ HTML.

ماذا تعني كلمة “تنسيق”؟

التنسيق يعني:

  • تغيير الألوان
  • التحكم في الخطوط
  • تحديد الأحجام
  • ترتيب العناصر
  • إضافة مسافات
  • تصميم الشكل العام للموقع

مثال بدون CSS:

<h1>مرحبا</h1>
<p>هذا موقع بسيط</p>

سيظهر النص بشكل عادي جدًا.

مثال مع CSS:

<h1 style="color: blue;">مرحبا</h1>
<p style="font-size: 20px;">هذا موقع جميل</p>

هنا لاحظت الفرق:

  • اللون تغير
  • حجم الخط تغير

لكن استخدام style ليس الطريقة الاحترافية.

الفصل الثاني: طرق إضافة CSS إلى HTML

هناك 3 طرق رئيسية لاستخدام CSS:

1. CSS داخل العنصر (Inline CSS)

<p style="color: red;">نص باللون الأحمر</p>

عيوبه:

  • غير منظم
  • صعب التحكم في المواقع الكبيرة

2. CSS داخل الصفحة (Internal CSS)

<head>
<style>
p {
  color: green;
}
</style>
</head>

ميزته:

  • مناسب للمشاريع الصغيرة

3. CSS خارجي (External CSS) ⭐ الأفضل

ملف HTML:

<link rel="stylesheet" href="style.css">

ملف CSS:

p {
  color: blue;
}

ميزته:

  • منظم
  • احترافي
  • يستخدم في جميع المواقع الكبيرة

الفصل الثالث: أول كود CSS حقيقي

body {
  background-color: lightgray;
}

h1 {
  color: blue;
}

p {
  color: black;
}

ماذا يحدث هنا؟

  • خلفية الصفحة تصبح رمادية
  • العناوين تصبح زرقاء
  • الفقرات تصبح سوداء

الفصل الرابع: أساسيات CSS (Selectors)

ما هو الـ Selector؟

هو الطريقة التي نختار بها العناصر من HTML لتطبيق التنسيق عليها.

1. Selector العنصر

p {
  color: red;
}

يعني: كل الفقرات في الصفحة تصبح حمراء.

2. Selector الكلاس (class)

HTML:

<p class="text">مرحبا</p>

CSS:

.text {
  color: green;
}

3. Selector الـ ID

HTML:

<p id="intro">نص مهم</p>

CSS:

#intro {
  color: blue;
}

الفرق بين class و id:

النوع الاستخدام
class يستخدم لعدة عناصر
id يستخدم لعنصر واحد فقط

الفصل الخامس: الألوان في CSS

CSS يدعم عدة طرق لتحديد الألوان:

1. اسم اللون

h1 {
  color: red;
}

2. HEX

h1 {
  color: #ff0000;
}

3. RGB

h1 {
  color: rgb(255, 0, 0);
}

4. RGBA (مع الشفافية)

h1 {
  color: rgba(255, 0, 0, 0.5);
}

الفصل السادس: الخطوط (Fonts)

تغيير نوع الخط:

p {
  font-family: Arial;
}

حجم الخط:

p {
  font-size: 20px;
}

سمك الخط:

p {
  font-weight: bold;
}

محاذاة النص:

p {
  text-align: center;
}

الفصل السابع: الخلفيات (Background)

لون الخلفية:

body {
  background-color: lightblue;
}

صورة خلفية:

body {
  background-image: url("bg.jpg");
}

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

body {
  background-size: cover;
  background-repeat: no-repeat;
}

الفصل الثامن: الصناديق (Box Model) ⭐ مهم جدًا

كل عنصر في CSS يُعتبر “صندوق”.

يتكون من:

  1. المحتوى (Content)
  2. الحشو (Padding)
  3. الحدود (Border)
  4. الهامش (Margin)

مثال:

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

شرح بسيط:

  • padding = مسافة داخلية
  • margin = مسافة خارجية
  • border = إطار حول العنصر

الفصل التاسع: الحدود (Borders)

div {
  border: 2px solid black;
}

أنواع الحدود:

  • solid (خط مستقيم)
  • dotted (نقاط)
  • dashed (خط متقطع)

الفصل العاشر: المسافات (Margin & Padding)

Margin:

div {
  margin: 20px;
}

Padding:

div {
  padding: 20px;
}

الفرق المهم:

  • Margin: يبعد العنصر عن غيره
  • Padding: يبعد المحتوى عن حواف العنصر

الفصل الحادي عشر: العرض والارتفاع

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

الفصل الثاني عشر: display في CSS

1. block

div {
  display: block;
}

يأخذ كامل العرض

2. inline

span {
  display: inline;
}

يأخذ مساحة المحتوى فقط

3. inline-block

يجمع بين الاثنين

الفصل الثالث عشر: Flexbox (مقدمة بسيطة)

Flexbox يساعدك على ترتيب العناصر بسهولة.

مثال:

.container {
  display: flex;
}

توسيط العناصر:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

الفصل الرابع عشر: Hover (التفاعل)

button:hover {
  background-color: blue;
  color: white;
}

عند مرور الماوس يتغير الشكل

الفصل الخامس عشر: الانتقالات (Transition)

button {
  transition: 0.3s;
}

مثال كامل:

button:hover {
  transform: scale(1.1);
}

الفصل السادس عشر: Position في CSS

الأنواع:

1. static (افتراضي)

2. relative

div {
  position: relative;
  top: 10px;
}

3. absolute

div {
  position: absolute;
  top: 50px;
}

4. fixed

يبقى ثابت عند التمرير

الفصل السابع عشر: Responsive Design (التصميم المتجاوب)

مهم جدًا للموبايل

@media (max-width: 768px) {
  body {
    background-color: lightgreen;
  }
}

الفصل الثامن عشر: أهم أخطاء المبتدئين

  • استخدام CSS داخل HTML بكثرة
  • عدم فهم box model
  • تجاهل responsive design
  • عدم تنظيم الكود
  • استخدام قيم عشوائية

الفصل التاسع عشر: مشروع بسيط بـ CSS

HTML:

<div class="box">
  مرحبا بك في موقعي
</div>

CSS:

.box {
  width: 300px;
  padding: 20px;
  margin: 50px auto;
  background-color: blue;
  color: white;
  text-align: center;
  border-radius: 10px;
}

الفصل العشرون: كيف تتعلم CSS بسرعة؟

  • طبق يوميًا
  • صمم صفحات بسيطة
  • حاول تقليد مواقع حقيقية
  • تعلم Flexbox و Grid
  • لا تحفظ، بل افهم

الفصل الحادي والعشرون: أدوات تساعدك

  • VS Code
  • Google Chrome DevTools
  • CodePen
  • MDN Web Docs

خاتمة

CSS هي المرحلة التي تحول صفحات HTML من شكل بسيط إلى مواقع احترافية جميلة. بدون CSS، الإنترنت سيكون مجرد نصوص مملة.

لكن مع CSS يمكنك:

  • تصميم مواقع جميلة
  • تحسين تجربة المستخدم
  • بناء واجهات احترافية

رحلة تعلم CSS تحتاج صبر وتطبيق، وليس حفظ فقط.

إذا استمريت في التعلم، ستصبح قادرًا على تصميم مواقع كاملة خلال وقت قصير جدًا.


تعديل المقال
الأقسام

مقالات قد تهمك