ما هي تقنية CSS؟

لعلك سمعت عن CSS من قبل لكن لا تعرف حقاً ما هي، في هذا الدرس ستتعلم المزيد عن
CSS وماذا يمكن لهذه التقنية أن تقدم لك.

CSS هي اختصار لي Cascading Style Sheets.

ماذا يمكن أن أفعل بتقنية
CSS؟

CSS هي لغة تصميم تحدد شكل وثيقة HTML، فهي تهتم بالخطوط، الألوان، الهامش،
والعرض والارتفاع، صورة خلفية الموقع، وكيفية توزيع المساحات وأشياء أخرى كثيرة،
انتظر فقط وسترى!

HTML يمكن أن تستخدم بشكل خاطئ لإضافة تصميم للمواقع، لكن CSS توفر المزيد من
الخيارات وهي أكثر دقة وعملية، وهي مدعومة من قبل المتصفحات الرئيسية اليوم.

بعد أجزاء قليلة في هذا الدرس ستتمكن من إنشاء ملف CSS الأول لكي تعطي موقعك
مظهراً رائعاً.

ما الفرق بين CSS
وHTML؟

تستخدم لوضع هيكلية ونظام منطقي للمحتويات، أما CSS فهي تستخدم لإضافة تصميم
لهذه المحتويات.

حسناً، قد يبدو هذا مربكاً لكن أكمل القراءة وستفهم ما قرأته قريباً.

في الماضي القريب اخترع رجل اسمه تيم بيرنرز لي شبكة الويب، في ذلك الوقت كانت
HTML تستخدم فقط لإضافة هيكلية للنص، الكاتب يمكنه أن يقوم بإضافة معنى للنص بأن
يقول مثلاً “هذا عنوان” أو “هذه فقرة” ويستخدم وسوم HTML مثل <h1>
و<p>.

مع ازدياد شهرة شبكة الويب بدأ المصممون في البحث عن طرق لإضافة تصميم للوثائق،
ولتلبية رغباتهم قام مبرمجوا المتصفحات – نيتكسيب ومايكروسوفت – باختراع وسوم HTML
جديدة مثل <font> الذي يختلف عن وسوم HTML الأصلية بأنه يهتم بالشكل لا
بالهيكلية.

أدى ذلك إلى أن تستخدم وسوم هيكلية مثل <table> بشكل خاطئ، حيث استخدام
هذا الوسم لتحديد تصميم الصفحة بدلاً من إضافة معنى للنص، والكثير من الوسوم التي
اخترعت مثل <blink> كانت فقط مدعومة من قبل متصفح واحد، أصبحت جملة “ستحتاج
إلى المتصفح الفلاني لرؤية هذه الصفحة” مألوفة في مواقع الشبكة.

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

كيف ستفيدني CSS؟

تعتبر CSS ثورة في عالم تصميم المواقع، وفوائدها الأساسية هي:

• التحكم بالتصميم من خلال ملف واحد.
  
• إمكانية أكبر وأدق للتحكم بتفاصيل
  التصميم.
  
• إنشاء تصاميم خاصة لمختلف وسائل عرض الموقع مثل
  الشاشات والطابعات والهواتف النقالة .. إلخ
  
• العديد من التقنيات والأساليب المتقدمة في التحكم
  بالتصميم
  

الدرس 1 : الروابط ( Links )


إن CSS تسمح لك بتحديد خصائص مختلفة بحسب حالة الرابط إن لم يزر المستخدم الرابط
أو زاره أو كان نشطاً أو كان مؤشر الفأرة فوق الرابط، كل هذا يمكنك من إضافة مؤثرات
جميلة ومفيدة على الروابط، للتحكم بهذه التأثيرات يجب أن تستخدم ما يسمى
pseudo-classes.

هذه هي قائمة الـ pseudo-classes المتوفرة الى الآن :

• Active
  
• Focus
  
• Hover
  
• Link
  
• Visited
  
• Befor
  
• After
  
• lang
  

pseudo-class يسمح لك بأن تأخذ في عين الاعتبار مختلف الحالات والأحداث عندما
تقوم بتحديد خصائص لعنصر في HTML.

لنلقي نظرة على المثال، كما تعرف الروابط تحدد في HTML من خلال الوسم
لذلك يمكننا أن نستخدم a كمنتقي في CSS:
a{
color: blue;
}


الرابط له عدة حالات، فمثلاً يمكن أن يزوره المستخدم أو لا يفعل، لذلك يمكنك أن
تستخدم فئة مستعارة (pseudo-classe) لكي تحدد شكلاً مختلفاً للرابط الذي زاره
المستخدم عن الرابط الذي لم يزره بعد.
a:link {
color: blue;
}
a:visited {
color: red;
}


استخدم a:link و a:visited للروابط التي زارها أو لم يزرهاالمستخدم، الروابط
يمكن أن تكون نشطة لها فئة مزيفة خاصة وهي a:active أما a:hover فهي الحالة التي
يكون فيها مؤشر الفأرة فوق الرابط.

الفئة المستعارة:
link

الفئة المستعارة a:link تستخدم للروابط التي تقود المستخدم إلى صفحات لم
يزرها.

في المثال أدناه الروابط التي لم يزرها المستخدم ستظهر بلون أزرق فاتح.
a:link {
color: #6699CC;
}




الفئة المستعارة :
visited

الفئة المستعارة a:visited تستخدم للروابط التي زارها المستخدم، المثال أدناه
سيجعل كل الروابط التي زارها المستخدم بلون بنفسجي غامق:
a:visited {
color: #660099;
}




الفئة المستعارة:
active

الفئة المستعارة a:active تستخدم للروابط النشطة.

في المثال أدناه كل الروابط النشطة ستظهر بخلفية صفراء :
a:active {
background-color: #FFFF00;
}




الفئة المستعارة :
hover

الفئة المستعارة : a:hover تستخدم عندما يكون مؤشر الفأرة فوق الرابط.

يمكن استخدام هذه الفئة لإنشاء مؤثرات جميلة، فمثلاً إذا أردنا أن تكون خلفية
الروابط زرقاء عندما نضع مؤشرة الفأرة عليها فعلينا أن نكتب CSS بهذا الشكل:
a:hover {
background:#0099FF;
color:#fff;
}