أوراق الأنماط المتتالية، المعروفة شيوعاً باسم CSS، هي لغة تنسيق تُستخدم لوصف طريقة عرض وتنسيق المستندات المكتوبة بلغة HTML (لغة ترميز النص التشعبي) أو XML (لغة الترميز القابلة للتوسع).
تتحكم هذه اللغة في التخطيط، الألوان، الخطوط، المسافات، والمظهر المرئي العام لصفحات الويب، مما يفصل بشكل فعال بين المحتوى (الذي تتولاه HTML) وبين التصميم. هذا الفصل يجعل المواقع أسهل في الصيانة، وأكثر قابلية للوصول لقارئات الشاشة، ومتجاوبة مع مختلف الأجهزة مثل أجهزة الكمبيوتر المكتبية، والأجهزة اللوحية، والهواتف المحمولة.
لماذا يجب عليك تعلم CSS؟
يعد تعلم CSS ضرورياً لأي شخص مهتم بتطوير الويب، أو التصميم، أو حتى التخصيص الأساسي للمواقع الإلكترونية—على سبيل المثال، على منصات مثل WordPress أو المدونات الشخصية. فهي تمنحك القدرة على إنشاء واجهات جذابة بصرياً وسهلة الاستخدام دون الاعتماد على برمجة معقدة.
تطورت CSS بشكل كبير بمرور الوقت. تشمل الميزات الحديثة Flexbox، و Grid (الشبكة)، و الرسوم المتحركة، و استعلامات الوسائط (Media Queries)، والتي تمكن من إنشاء تصميمات متطورة وديناميكية.
كيف تتعلم بفعالية
ابدأ بالأساسيات: افهم كيف تتفاعل CSS مع عناصر HTML.
تدرب عملياً: استخدم أدوات مثل CodePen أو JSFiddle أو محرر أكواد محلي (مثل Visual Studio Code) جنباً إلى جنب مع أدوات المطور في المتصفح (يمكن الوصول إليها عبر الضغط على F12 أو النقر بزر الماوس الأيمن > فحص "Inspect").
ابنِ تدريجياً: ابدأ بتنسيق النصوص البسيط، ثم انتقل إلى تخطيطات الصفحة، والتصميم المتجاوب، والتأثيرات البصرية المتقدمة.
استفد من الموارد: تشمل المصادر المجانية الممتازة وثائق MDN Web Docs، و freeCodeCamp، و W3Schools. الكتب مثل "CSS in Depth" للمؤلف Keith J. Grant مفيدة أيضاً. استهدف التدريب لمدة ساعة إلى ساعتين يومياً.
1. بناء الجملة الأساسي والمحددات (Selectors)
تتكون قواعد CSS) من محدد (Selector(الذي يستهدف عناصر HTML محددة) يليه كتلة تصريح Declaration block)) محاطة بأقواس معقوفة {}. يحتوي كل تصريح على خاصية (مثل color) وقيمة (مثل red).
أنواع المحددات (Selectors):
أنواع العناصر: تستهدف وسوماً مثل p للفقرات.
الفئات (Classes) تستهدف العناصر التي تحمل سمة فئة محددة، وتُكتب بالشكل .class-name
المعرفات (IDs) تستهدف عنصراً فريداً، وتُكتب بالشكل #id-name
الفئات التأثيرية Pseudo-classes)) تستهدف حالة محددة، مثل :hover لتأثيرات مرور مؤشر الماوس.
مفهوم "التتالي" (The Cascade): تعني CSS "الأنماطالمتتالية"،أي أنالأنماط يمكنأن تُورثمن العناصرالأب (Parent elements). تحدد قواعد "الخصوصية" (Specificity) أينمط سيفوزفي حالوجود تعارض؛على سبيلالمثال، محددالمعرف (ID) يتغلبعلى محددالفئة (Class)
مثال على الكود
HTML (احفظه باسم index.html):
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
<p class="intro">This is a paragraph.</p>
<p id="special">This is special text.</p>
</body>
</html>
CSS (احفظه باسم styles.css):
CSS
/* محدد العنصر */
h1 {
color: blue; /* الخاصية: القيمة */
font-size: 24px;
}
/* محدد الفئة */
.intro {
background-color: lightgray;
padding: 10px;
}
/* محدد المعرف */
#special {
font-style: italic;
color: green;
}
النتيجة المتوقعة
عند فتح index.html في المتصفح:
سيظهر العنوان <h1> باللون الأزرق وبحجم 24 بكسل.
الفقرة الأولى (التي تحمل الفئة "intro") سيكون لها خلفية رمادية فاتحة مع 10 بكسلات من الحشو (padding) حول النص.
الفقرة الثانية (التي تحمل المعرف "special") ستظهر مائلة وباللون الأخضر.
2. الألوان، الخطوط، وتنسيق النصوص
تدير CSS خصائص النص المرئية وهي أساسية للقراءة والهوية البصرية.
اللون (Color) يُعرف باستخدام الأسماء، أو رموز سداسية عشرية (Hex codes مثل #FF0000 للأحمر)، أو RGB (أحمر أخضر أزرق)، أو HSL.
الطباعة (Typography) يتم التحكم فيها بواسطة font-family (مثلاً 'Arial')، و font-size (باستخدام وحدات px أو em أو rem)، و text-align (محاذاة النص)، و line-height (ارتفاع السطر).
مثال على الكود
HTML
<p class="styled-text">Learning CSS is fun!</p>
CSS
.styled-text {
color: #333333; /* رمادي غامق */
font-family: 'Helvetica', sans-serif;
font-size: 18px;
text-align: center;
line-height: 1.5;
text-decoration: underline;
}
النتيجة المتوقعة
سيظهر نص الفقرة في المنتصف، بخط Helvetica نظيف (أو خط sans-serif عام إذا لم يكن Helvetica متاحاً)، بحجم 18 بكسل، مع تباعد أسطر بمقدار 1.5 مرة من الطبيعي، وتحته خط، ولونه رمادي غامق.
3. نموذج الصندوق (Box Model) والمسافات
كل عنصر HTML هو في الأساس "صندوق" مستطيل. فهم هذا المفهوم بالغ الأهمية لتجنب مشاكل التخطيط.
مكونات الصندوق:
المحتوى (Content) النص أو الصورة الفعلية.
الهوامش الداخلية (Padding) المساحة بين المحتوى والحدود (مساحة داخلية).
الحدود (Border) الخط الذي يحيط بالهوامش الداخلية.
الهوامش الخارجية (Margin) المساحة خارج الحدود، وتفصل العنصر عن جيرانه (مساحة خارجية).
مثال على الكود
HTML
<div class="box">This is a box.</div>
CSS
.box {
width: 200px;
height: 100px;
padding: 20px;
margin: 10px auto; /* auto تقوم بتوسيط العنصر أفقياً */
border: 2px dashed red;
background-color: yellow;
box-sizing: border-box; /* يضمن احتساب الحشوة والحدود ضمن العرض/الارتفاع الكلي */
}
النتيجة المتوقعة
صندوق مستطيل أصفر، عرضه 200 بكسل وارتفاعه 100 بكسل (شاملاً الحشو)، يتوسط الصفحة. سيكون له هامش خارجي 10 بكسلات، وحدود حمراء متقطعة، و20 بكسلاً من الحشو الداخلي حول النص.
4. التخطيطات باستخدام Flexbox
Flexbox هو نموذج تخطيط أحادي البعد مصمم لمحاذاة العناصر في صفوف أو أعمدة. وهو ممتاز للتصميمات المتجاوبة.
الخصائص الرئيسية:
display: flex;: تفعيل Flexbox على الحاوية.
flex-direction: يحدد الاتجاه (صف row أو عمود column).
justify-content: يحدد المحاذاة الأفقية (المحور الرئيسي).
align-items: يحدد المحاذاة الرأسية (المحور المتقاطع).
مثال على الكود
HTML
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
CSS
.container {
display: flex;
flex-direction: row; /* العناصر في صف */
justify-content: space-between; /* مسافة بين العناصر */
align-items: center;
height: 200px;
background-color: lightblue;
}
.item {
background-color: white;
padding: 10px;
border: 1px solid black;
}
النتيجة المتوقعة
حاوية زرقاء فاتحة تحتوي على ثلاثة عناصر بيضاء موضوعة جنباً إلى جنب. ستكون متباعدة بالتساوي أفقياً ومتوسطة عمودياً. إذا تم تغيير حجم نافذة المتصفح، ستحافظ العناصر على محاذاتها.
5. التصميم المتجاوب مع استعلامات الوسائط (Media Queries)
تسمح استعلامات الوسائط للمواقع بأن تكون "صديقة للمحمول" من خلال تطبيق أنماط مختلفة بناءً على حجم الشاشة أو اتجاهها. يتم تحقيق ذلك باستخدام قاعدة @media لاستهداف "نقاط توقف" محددة (على سبيل المثال، العروض الأقل من 600 بكسل).
مثال على الكود
(أضف هذا إلى CSS من مثال نموذج الصندوق أعلاه)
CSS
@media (max-width: 600px) {
.box {
width: 100%; /* عرض كامل على الشاشات الصغيرة */
background-color: pink; /* تغيير اللون */
}
}
النتيجة المتوقعة
على الشاشات التي يزيد عرضها عن 600 بكسل، يظل الصندوق بعرض 200 بكسل ولون أصفر. على الشاشات الأضيق (مثل الهواتف المحمولة)، يتوسع الصندوق ليملأ 100% من العرض ويتغير لونه إلى الوردي.
6. الرسوم المتحركة والانتقالات (Animations and Transitions)
يمكنك إضافة التفاعل باستخدام transition (للتغييرات السلسة بمرور الوقت) أو @keyframes للرسوم المتحركة المعقدة.
مثال على الكود
HTML
<button class="btn">Hover Me</button>
CSS
.btn {
background-color: blue;
color: white;
padding: 10px;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn:hover {
background-color: green;
transform: scale(1.1); /* تكبير طفيف */
}
النتيجة المتوقعة
زر أزرق، عند تمرير الماوس فوقه، يتغير لونه بسلاسة إلى الأخضر ويكبر حجمه بنسبة 10% خلال مدة 0.3 ثانية.
مواضيع متقدمة ونصائح
تخطيط الشبكة (Grid Layout) استخدم display: grid; للتخطيطات ثنائية الأبعاد التي تتضمن صفوفاً وأعمدة معاً.
المتغيرات (Variables) استخدم الخصائص المخصصة مثل --main-color: blue; لتخزين قيم قابلة لإعادة الاستخدام.
المعالجة المسبقة (Preprocessing) أدوات مثل Sass أو Less توسع قدرات CSS بالمتغيرات، والتداخل (nesting)، و الـ mixins للمشاريع الكبيرة.
أفضل الممارسات: حافظ على تنظيم CSS الخاص بك (على سبيل المثال، استخدم تسمية BEM للفئات)، قلل من صراعات الخصوصية، واختبر التوافق عبر متصفحات مختلفة.
أخطاء شائعة: نسيان الوحدات (مثل بكسل px)، تجاهل إمكانية الوصول (مثل تباين الألوان الضعيف)، أو الإفراط في استخدام علامة !important لفرض الأنماط.
الطريق إلى الإتقان
تدرب من خلال بناء مشاريع حقيقية: أنشئ معرض أعمال شخصي (Portfolio)، أو صفحة هبوط متجاوبة، أو قم باستنساخ مواقع بسيطة. تتبع تقدمك مع تحديات على مواقع مثل CSS Battles أو Frontend Mentor. مع الجهد المستمر، يمكنك إتقان CSS في غضون شهر إلى ثلاثة أشهر.
 |  |  |
 |  |  |