مقدمة الى CSS

مقدمة إلى CSS

كيف يمكن تنسيق العناصر المختلفة على صفحة الويب ..؟! ماهي الـ CSS ..؟ بماذا تستخدم الـ CSS ..؟!! ما هي مميزاتها..؟!! وكيف يمكننا تشغيل أكواد الـ CSS على صفحات الويب...!!!

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

في هذا المقال سنتعرف على :

• ما هي الـ CSS؟
• إصدارات .
• مزايا CSS.
• الـ CSS وطريقة كتابة الـ Code.
• التعليقات في CSS.
• طُرق تضمين اكواد CSS في HTML.
• تصميم صفحات الويب مع CSS.

ما هي الـ CSS؟

الـ CSS هي اختصار لـ "Cascading Style Sheets"، وهي لغة برمجة  تستخدم لتصميم وتنسيق صفحات الويب. تعتبر CSS أحد أهم الأدوات التي يستخدمها المصممون والمطورون لإدارة التنسيق والشكل الخارجي لصفحات الويب. أي هي لغة تصميم بسيطة تهدف إلى تبسيط عملية جعل صفحات الويب مقبولة للعرض المستخدم ..

تُستخدم CSS في التحكم بمظهر صفحات الويب هذا لان الـ CSS تتعامل مع الشكل والمظهر كجزء من صفحة الويب.و باستخدام الـ CSS ، يمكننا التحكم في لون النص ، ونمط الخطوط ، والتباعد بين الفقرات ، وكيفية تحديد حجم الأعمدة وتخطيطها ، وما هي صور أو ألوان الخلفية المستخدمة ، وتصميمات التخطيط ، وأشكال العرض لمختلف الأجهزة وأحجام الشاشة بالإضافة إلى مجموعة متنوعة من التأثيرات الأخرى.

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

إصدارات CSS

تم إصدار Cascading Style Sheets Level 1 (CSS 1) من W3C في ديسمبر 1996. يصف هذا الإصدار لغة CSS بالإضافة إلى نموذج تنسيق مرئي بسيط لجميع HTML tags .

ثم تم اطلاق الاصدار CSS2 من W3C في مايو 1998 ويعتمد على CSS1. يضيف هذا الإصدار دعمًا لأوراق الأنماط الخاصة بالوسائط على سبيل المثال الطابعات والأجهزة السمعية والخطوط القابلة للتنزيل وتحديد موضع العناصر والجداول.

الاصدار المستخدم اليوم هو CSS3 حيث أحدث الـ CSS3 تغيير كبير في بالمقارنة مع CSS2 هو إدخال النماذج Modules. وتتمثل فائدة هذه النماذج في أنها تسمح بوضع اللمسات الأخيرة على المواصفات وقبولها بشكل أسرع في المتصفحات . أيضًا ، هذا يسمح للمتصفح بدعم أجزاء من المواصفات و بعض النماذج الرئيسية في CSS3 هي:

• نموذج الصندوق Box model
• المحددات Selectors
• االحركة Animations
• واجهة المستخدم User interface (UI)
• تخطيطات متعددة الأعمدة Multiple column layouts
• التحولات بين 2D/3D
• قيم الصورة والمحتوى المستبدل Image values and replaced content
• تأثيرات النص Text effects
• الخلفيات والحدود Backgrounds and borders

مزايا CSS

 تتميز الـ CSS بأنها سهلة التعلم والفهم ولكنها توفر تحكمًا قويًا في عرض مستند HTML. حيث يتم دمج CSS مع لغات HTML أو XHTML. حيث تعمل على XHTML tags و HTML tags فبواسطتها يمكن التحكم بتنسيق وترتيب عناصر صفحة الويب مثل الخلفيات مواقع ظهور وألوان العناصر. لنتعرف على بعض مميزات الـ CSS :

• أنماط متفوقة على الـ HTML: يحتوي CSS على مجموعة سمات Attributes أوسع بكثير من HTML.
• معايير ويب عالمية : توفر الـ HTML بعض السمات Attributes ,ولكن ويوصى باستخدام CSS. هذا لأن استخدام CSS في جميع صفحات HTML يجعلها متوافقة مع تطوير المتصفحات في المستقبل.
• تحميل أسرع لصفحات الويب : إذا كنا نستخدم CSS ، فلن تحتاج إلى كتابة Attributes مع الـ HTML tags في كل مرة. ما علينا سوى كتابة قاعدة CSS واحدة للعلامة وتطبيقها على جميع تكرارات تلك الـ tags. لذا فإن code أقل يعني أوقات تنزيل أسرع.
• تصميم مستجيب (Responsive): CSS يوفر أدوات وتقنيات لتصميم صفحات الويب المستجيبة التي تتكيف مع مختلف أحجام الشاشات والأجهزة. يمكنك استخدام وسائط الاستعلام (Media Queries) وتعيين قواعد CSS مختلفة لأحجام الشاشة المختلفة، مما يسمح بتوفير تجربة مستخدم متسقة ومناسبة على الهواتف المحمولة والأجهزة اللوحية وأجهزة الكمبيوتر المكتبية. بمعنى باستخدام نفس مستند HTML  تسمح الـ CSS بتحسين المحتوى لأكثر من نوع واحد من الأجهزة متوافق
• .فصل المحتوى عن التنسيق: يعمل CSS على فصل تنسيق الصفحة عن عناصرها ومحتواها. هذا يعني أنه يمكن تعريف الأنماط البصرية والتنسيقات في ملفات CSS منفصلة عن صفحات HTML، مما يسمح بإعادة استخدامها على صفحات متعددة وتحسين صيانة التصميم وتحديثه بسهولة.
• توفير الوقت والجهد: باستخدام CSS، يمكنك تعريف أنماط وتنسيقات مرة واحدة وتطبيقها على عناصر متعددة في صفحة واحدة أو على صفحات متعددة. هذا يساعد على تقليل الجهد المبذول في تنسيق كل عنصر على حدة ويساهم في زيادة كفاءة عملية التطوير.
• تحسين التحكم والمرونة: CSS يوفر مرونة كبيرة في تنسيق الصفحات وتحديد المظهر البصري. يمكنك تعيين خصائص مفصلة للعناصر وتخصيصها وفقًا لاحتياجاتك الخاصة. بالإضافة إلى ذلك، يمكنك تعديل الأنماط والتنسيقات بسهولة من خلال تعديل قواعد CSS دون الحاجة لتعديل العناصر الفردية.
• تحسين تجربة المستخدم: باستخدام CSS، يمكنك تحسين تجربة المستخدم عبر تنسيق جذاب واحترافي لصفحات الويب. يمكنك تغيير الألوان والخطوط والحجم والهوامش والتأثيرات البصرية لخلق تصميم متميز ومناسب لهوية الموقع أو العلامة التجارية.
• قابلية التوسع والتعديل: CSS مرنة للغاية وتتيح للمطورين إضافة تعديلات وتعديلها بسهولة. يمكنك إضافة قواعد CSS جديدة أو تعديل القواعد الحالية لتحقيق التغييرات المطلوبة في التصميم دون الحاجة لإعادة كتابة الكود الأساسي.

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

الـ CSS وطريقة كتابة الـ Code

الصيغة العامة للطريقة كتابة الكود في CSS

selector
{
property: value;
}
OR
selector,...,selector
{
property: value;
.
.
.
property: value;
}

يتألف كود CSS من أجزاء تسمى محددات Selectors ويشير المحدد Selector الى عنصر من عناصر HTML أو عدة عناصر في HTML (نعني بهذه العناصر أوسمة Tags ) او يشير المحدد الى اسم للـ class او اسم للـ id.

عندما نريد ان يشير المحدد (Selector) الى عنصر (tag ) في HTML نكتب اسم العنصر مباشرة .

وللإشارة المحدد الى class في مستند HTML نكتب اسم الـ class ونضيف نقطة قبل اسم ال class مثلاً class_name.

اما للإشارة ا المحدد الى id نكتب علامة # ثم اسم الـ id مثلاً #id_name.

ملاحظة : لا تبدأ اسم id برقم وتذكر انه اسم الـ id لا يتكرر في المستند الواحد اقراء اكثر عن class & id في مقال عن تقسيم صفحة الويب .

ويتكون المحدد Selector من مجموعة من لإعلانات declarations تُعرف بـأقواس متعرجة { } curly braces بداخلها أزواج من الخصائص properties والقيم values ويفصل بين الخاصية وقيمتها بـ نقطتين رأسيتين (:) colons ويفصل بين كل اعلان declaration واخر بالفاصلة المنقوطة (;) semicolon لاحظ /ي الشكل التالي :

التعليقات في CSS

تكلمنا سابقاً عن مفهوم التعليقات وأهميتها في كتابة الكود في مقال أساسيات برمجية Programming basics ،التعليقات في CSS تبدأ بـ /* وتنتهي بـ */

لاحظ / ي المثال :

/*This is a code for p tag */
P {
    color:green;
    font-size:20px;
    }
/*This is a code for id called dd*/
#dd {
text-align: center;
}
/*This is code for class called cc*/ 
.cc {
color: Red;
font-family: arial;
}

طُرق تضمين اكواد CSS في HTML

ذكرنا أن CSS تدمج مع لغات HTML أو XHTML. حيث تعمل على XHTML tags و HTML tags فبواسطتها يمكن التحكم بتنسيق وترتيب عناصر صفحة الويب مثل الخلفيات مواقع ظهور وألوان العناصر لنتعرف على طريقة كتابة كود CSS كيفية إدراجه في مستند HTML…

ويمكن كتابة اكواد CSS داخل أو خارج صفحة الويب فهناك 3 طرق لتشغيل اكواد CSS في مستند الـ HTML وهي:

الطريقة الأولى وتسمى Inline Style

في طريقة Inline Style يكتب كود CSS داخل عنصر الـ HTML بواسطة Style ِAttribute حيث تستخدم هذا الاسلوب من التنسيق عندما نريد تطبيق التنسيق على عنصر بعينه وهذه الطريقة لها الأولوية في التنفيذ.

مثال :

<p style="color:green; font-size:20px;">This is a paragraph.</p>

الطريقة الثانية وتسمى Internal Style

في طريقة الـ Internal Style يكتب كود CSS داخل مستند HTML و بواسطة الوسم <style> وتستخدم هذه الطريقة عندما نريد تطبيق تنسق على مستند معين أو على عدد من عناصر مستند في معين وتأتي أولوية التنفيذ للكود المكتوب بهذه الطريقة بعد طريقة الـ Inline style .

مثال :

<Style>
 P {
    color:green;
    font-size:20px;
   } 
</style>

الطريقة الثالثة وتسمى External Style

في طريقة الـ External Style يكتب كود CSS خارج مستند HTML حيث يتم إنشاء ملف CSS (يأخذ ملف CSS الامتداد css. ) وربطه مع مستند HTML وتستخدم هذه الطريقة عندما نريد تطبيق التنسيق على مجموعة من صفحات الويب حيث يتم ربط عدد من صفحات الويب بملف CSS واحد مثل وضع مظهر معين لصفحات الموقع. اكواد الـ CSS المكتوبة بهذه الطريقة تأخذ الترتيب الأخير في أولوية التنفيذ ويتم ربط صفحة الويب مع ملف CSS بواسطة link tag (انظر مقال أوسمة رأس الصفحة Head tags )

مثال :الكود في صفحة HTML

<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>

الكود في صفحة CSS

P {
    color:green;
    font-size:20px;
   } 

تصميم صفحات الويب مع CSS

تلعب CSS دوراً حاسمًا في تصميم صفحات الويب الحديثة، حيث تعمل على تحديد وتنسيق المظهر البصري للعناصر والمحتوى على الصفحة. وفيما يلي بعض الأدوار الرئيسية التي تقوم بها CSS في تصميم صفحات الويب:

• تنسيق العناصر: يمكننا استخدام CSS لتحديد تنسيقات العناصر المختلفة على الصفحة. مثل تعيين حجم الخط، ولون النص، والهوامش، والتباعد بين العناصر، والخصائص الأخرى التي تؤثر على المظهر العام للعناصر.مثلاً:
• أنماط النص: يمكننا استخدام CSS لتحديد أنماط النص في صفحات الويب. مثل تغيير نوع الخط، وحجم الخط، ولون الخط، والتباعد بين الأسطر، والتأثيرات الأخرى المتعلقة بالنص.
• تنسيق الخلفيات: يمكننا استخدام CSS لتحديد تنسيقات الخلفيات للعناصر. يمكنك تعيين صور خلفية، أو ألوان خلفية، أو تأثيرات خلفية مثل التدرجات اللونية أو الصور المتكرر.
• تخطيط الصفحة: يمكننا استخدام CSS لتحديد تخطيط الصفحة ويكون بتقسيم الصفحة إلى أعمدة (Columns) متسكيل مصفوفة (Grids) من بناء صفوف واعمد( المزيد في مقال عن تخطيط صفحة الويب Grid Layout ) وتعيين توزيع العناصر داخل الصفحة باستخدام القوالب (Templates) والتحكم في التنسيقات الأفقية والرأسية.
• التنسيقات الشبكية (Responsive): يمكنك استخدام CSS لتصميم صفحات الويب المستجيبة التي تتكيف مع مختلف أحجام الشاشات والأجهزة. يمكنك استخدام وسائط الاستعلام (Media Queries) وتعيين تنسيقات مختلفة لأحجام الشاشة المختلفة، مما يسمح بتوفير تجربة مستخدم متسقة عبر مجموعة متنوعة من الأجهزة.
• التأثيرات البصرية: يمكنك استخدام CSS لتطبيق تأثيرات بصرية مختلفة على العناصر في صفحات الويب، مثل التأثيرات التحويلية (Transformations) والتأثيرات الانتقالية (Transitions) والتأثيرات الظلية (Box Shadows) والتأثيرات الأخرى التي تعزز المظهر البصري للصفحة.

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

إن قوة CSS تكمن في إمكانية فصل تنسيق الصفحة عن المحتوى، مما يُمكِّنَنَا من تعديل المظهر البصري بسهولة ومرونة. بفضل CSS، يُمكِننا تحديد تنسيقات العناصر المختلفة، مثل الخطوط والألوان والخلفيات، وتحديد تخطيط الصفحة وتنظيم العناصر داخلها. في ختام هذا المقال الذي يُعَدُّ مقدمة للغة CSS، نستطيع أن نستنتج أهمية هذه التقنية في تصميم صفحات الويب. من خلال CSS، يمكننا تحقيق العديد من الأهداف التصميمية وتوفير تجربة مستخدم مرنة وجذابة.