قديماً كانت صفحات الإنترنت عبارة عن صفحات وظيفية فقط هدفها تأدية وظيفة معينة ولا التفات للشكل , كانت المعلومات تعرض بطريقة صارخة وغير جذابة , خلفية بيضاء روابط زرقاء وانتهى الأمر.
الى أن ظهرت لغة CSS تلك اللغة الساحرة التي غيرت الويب للأبد.
ما هي لغة CSS
CSS هي اختصار "Cascading Style Sheets" أو "أوراق الأنماط المتتالية" فهي تعطي انماط شكلية لصفحات الويب وتجعل كل صفحة متميزة.
قلنا عن لغة HTML أنها الهيكل العظمي لصفحات الويب , لغة CSS هي مظهر الجسد والملابس هي ما يجعل صفحة الإنترنت أنيقة جذابة للعين ممتعة لمن يتصفحها .
لغة CSS مسؤولة عن كل شكل كل شئ تراه امامك في الصفحة ألوان خلفيات حجم الخط شكل الخط كل شئ هي التي تفعل شكله وتعدل عليه .
كيف تكتب لغة CSS
هناك طريقتين أساسيتين لكتابة لغة CSS
CSS داخلية - Inline CSS
وهي تكتب مباشرة داخل كود HTML كوسم في كود HTML بهذا الشكل
[[style=""]]
مثال هذا الكود هو لفقرة تم اعطائها اللون الأحمر وحجم خط 15 بيكسل
<p style="color:red; font-size:15px">فقرة</p>
يتم الفصل بين خاصية وأخرى برمز فاصلة منقوطة [[;]]
ولهذا العنصر الأخير لأنه لا يليه شئ ليس ضروري أن تضيفها لكن لو اضفتها لا مشكلة أيضاً
CSS خارجية - External CSS
وهنا يتم الفصل بين لغة HTML و CSS كل واحده تكتب بعيداً عن الأخرى وهذا هو الإستخدام الأمثل لسهولة القراءة والتعديل
وهذه الطريقة تتم عبر استهداف العناصر عن طريق نوع العنصر أو الكلاس أو المعرف وسنتعلم في المستقبل الكثير حول طرق الإستهداف
تكتب اللغة في النسق الخارجي بين قوسين مجعدين كهذه الأقواس
[[{}]]
أحدهم وسم الفتح وآخر وسم الغلق , يجب أن يفتح أكواد كل عنصر وتغلق بشكل صحيح حتى لا يحدث خطأ في الصفحة
نفس عنصر الفقرة السابق سنضيف له نفس الخصائص لكن بالطريقة الخارجية
p {
color:red;
font-size:15px
}
أين تكتب لغة CSS
هناك عدة أماكن لكتابة لغة CSS وبالفعل يعتبر ذكرنا احدها عندما ذكرنا الـ CSS الداخلية فهي تكتب داخل لغة HTML
لكن هناك أماكن أخرى لكتابتها
الكتابة بشكل مستقل في HTML
تكتب أيضاً بين وسم الفتح والإغلاق الخاص بـ
[[<head>]] نفس الشئ تكتب في الوسم
[[<body>]]
وطريقة كتابتها تكون بوضعها بين وسم [[<style>]]
مثال
<style>
p {
color:red;
font-size:15px
}
.myclass {
background-color:white;
text-align:center;
}
</style>
الإضافة في ملف خارجي
تكتب اللغة بشكل عادي بدون أن تضاف في وسوم لكن في ملف بإمتداد css ويتم رفع هذا الملف على موقع خارجي اما على نفس استضافة موقعك او على استضافة أخرى
ثم يتم استدعاء هذا الملف في الصفحة بإضافته أيضاً اما في
[[<head>]] أو [[<body>]]
يتم استدعاءه بهذا الشكل
<link rel="stylesheet" href="styles.css">
هنا styles.css هو رابط الملف يمكن أن يكون رابط كامل من موقع خارجي كما قلنا وستلاحظ هذا الأمر في الخطوط تجد أحيانا ملف كهذا يتم استدعاء أكواد الخط به.
مكان إضافي لبلوجر
هذا المكان هو خاص بمنصة بلوجر وهو المكان الذي تجد فيه اكواد الـ CSS الخاصة بالقالب وهو بين وسوم skin
<b:skin version='1.3.3'><![CDATA[/*
p {
color:red;
font-size:15px
}
.myclass {
background-color:white;
text-align:center;
}
]]></b:skin>
هذا ما تحتاج تعلمه وفهمه جيداً كمدخل للغة CSS وفي الدروس القادمة سنتبحر أكثر في عالم تلك اللغة والتي ان فهمتها ستستمتع حقاً بما يمكنك عمله بها
تعليقات