Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
ما هو CSS؟
CSS، أو أوراق الأنماط المتتالية (Cascading Style Sheets)، هو لغة تُستخدم لوصف كيفية عرض صفحات الويب. إنها تساعد في فصل محتوى الوثيقة (HTML) عن التصميم (CSS) بحيث يمكن التحكم في مظهر الموقع بشكل أكثر سهولة ومرونة.
لماذا نستخدم CSS؟
- التصميم والانسيابية: CSS يسمح لك بتنسيق مظهر صفحات الويب بشكل جميل واحترافي. يمكنك تغيير الألوان، الخطوط، الأحجام، والتخطيطات بكل سهولة.
- إعادة الاستخدام: يمكنك استخدام نفس ملف CSS في عدة صفحات ويب، مما يسهل عملية تحديث التصميم.
- فصل المحتوى عن التصميم: باستخدام CSS، يمكن فصل التصميم عن المحتوى، مما يجعل إدارة الموقع أسهل.
كيفية إضافة CSS إلى صفحة الويب
هناك ثلاث طرق لإضافة CSS إلى HTML:
- الإدراج الخارجي: يمكنك كتابة CSS في ملف منفصل بامتداد
.cssوربطه بملف HTML باستخدام الوسم<link>في قسم<head>.
<link rel="stylesheet" href="styles.css">الإدراج الداخلي: يمكنك كتابة CSS داخل ملف HTML نفسه، في قسم <head> بين وسمين <style>.
<style>
body {
background-color: lightblue;
}
</style>يمكنك إضافة CSS مباشرة إلى وسم HTML باستخدام السمة style.
<h1 style="color: blue;">مرحبا بكم في CSS</h1>القواعد الأساسية في CSS
تتكون القاعدة في CSS من ثلاثة أجزاء رئيسية:
- المحدد (Selector): يحدد العنصر الذي نريد تنسيقه.
- الخاصية (Property): تحدد ما نريد تغييره.
- القيمة (Value): تحدد كيفية تغيير الخاصية.
مثال على قاعدة CSS:
h1 {
color: blue;
font-size: 20px;
}في هذا المثال:
h1هو المحدد الذي يستهدف جميع العناصر<h1>.colorوfont-sizeهما الخصائص.blueو20pxهما القيم.
أمثلة على استخدامات CSS
تغيير لون النص
p {
color: red;
}يغير هذا المثال لون جميع العناصر <p> إلى الأحمر.
تغيير لون الخلفية
body {
background-color: #f0f0f0;
}يغير هذا المثال لون خلفية الصفحة إلى لون رمادي فاتح.
تنسيق النص
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
text-align: center;
}يستخدم هذا المثال خصائص font-family لتحديد نوع الخط، font-size لتحديد حجم الخط، و text-align لمحاذاة النص في المركز.
الختام
CSS أداة قوية تساعدك على جعل صفحات الويب أكثر جاذبية واحترافية. من خلال تعلم الأساسيات وتطبيقها، يمكنك تحسين تجربة المستخدم بشكل كبير. ابدأ بتجربة بعض الأمثلة بنفسك وسترى مدى سهولة وإمكانية تخصيص تصميمات الويب باستخدام CSS.
