لغة CSS
والأن بعد أن تعرفنا على لغة HTML التي قلنا في الأول أنها تستعمل لإضافة المحتوى إلى صفحة الويب سنتعرف الأن على لغة ال CSS وهي تستعمل لتنسيق الصفحة وإعطائها تصميما معينا حيت يمكننا تغيير لون النص وقده وشكل الخط كما يمكننا من تحديد مكان كل عنصر على حدة مثل النصوص والصور والقوائم إلى غير ذلك.
ولعلمكم فإن HTML ظهرت مند سنة 1991 أما CSS فهو لم يظهر إلا سنة 1996 وخلال هذه الفترة قبل ظهور الCSS فإن تنسيق المواقع يتم عن طريق HTML حيت كانت هناك أوسمة HTML خاصة بتنسيق صفحات الويب لكن صفحات الويب كانت معقدة جدا ومتشابكة لكترة الأوسمة فيها.
وقد مر تطور CSS من عدة مراحل وظهرت منه العديد من النسخ: CSS1, CSS2.0, CSS2.1, CSS3
كما يجب أن تعرفو أيضا أن المتصفحات لا تتعرف كلها خصائص الCSS وإليكم هذا الموقع الذي سيعطيكم جدولا بخصائص HTML وCSS التي تدعمها المتصفحات http://www.caniuse.com.
طرق إدراج CSS داخل صفحات الويب
يمكننا أن نكتب كود CSS في تلاتة أماكن وهي :
- إما أن نكتبه في ملف مستقل وهي الطريقة الأفضل.
- أو في ترويسة ملف HTML أي داخل الوسم <head>.
- أو مباشرة في أوسمة ملف HTML عن طريقة كتابة الخاصية style. وهذه طريقة لا ينصح باستعمالها.
الأن سنبدأ بشرح الطريقة الأولى وهي التي أنصحكم بإستعمالها. وتعتمد هذه الطريقة على إنشاء ملف في محرر النصوص notepad++ حيت نكتب فيه خصائص الCSS التي نريد إستعمالها تم نحفظه على شكل ملف CSS بحيت عند حفظه نكتب إسمه متبوعا بالإمتداد .css مثلا إدا كان إسمه هو style فإننا نكتبه كالتالي style.css تم نقوم بحفظه في نفس الملف الذي يوجد به ملف HTML المراد تنسيقه.
لكن هذا لا يكفي لكي نحصل على صفحة منسقة لأنه يجب أن نخبر ملف HTML أن هناك ملف CSS يجب أن يستعمله ويكون ذلك عن طريق إدراج عنوان ملف CSS عن طريق الوسم التالي:
داخل وسمي الترويسة <head>
ويكون الكود كالتالي:
<html>
<head>
<meta charset="utf-8"/>
<title>عنوان الصفحة</title>
<link rel="stylesheet" href="style.css/>
</head>
<body>
</body>
</html>
أما الطريقة التانية فهي تعتمد على إضافة خاصيات الCSS عن طريق الوسم <style> في ترويسة ملف HTML أي داخل الوسم <head> وإليكم المثال التالي لتفهمو المبدأ أكتر:
<html>
<head>
<meta charset="utf-8"/>
<title>عنوان الصفحة</title>
<style>
هنا بين هذين الوسمين نكتب مباشرة الCSSالتي نريدها
</style>
</head>
<body>
</body>
</html>
وأخيرا هناك طريقة أخرى لكنها لا تستعمل كثيرا. ومبدأ هذه الطريقة يكون عن طريق إضافة خاصية style إلى أي وسم تريدونه وتكتبون بعده خصائص CSS التي تريدونها.وإليكم هذا المتال لتفهمو أكتر هذه الطريقة:
الأن تعرفنا على ثلاث طرق لإدراج خصائص CSS داخل صفحة ويب لكني أنصحكم بإستعمال الطريقة الأولى رغم أنها قد تبدو معقدة إلا أنها أسهل من الطرق الأخرى لأننا نستعمل ملف CSS واحد لجميع الصفحات عن طريق إدراج عنوانه فقط في كل صفحة. أما الطرق الأخرى فتحتاج إلى إضافة التنسيق إلى كل صفحة على حدة، وهذا ما يجعلها صعبة. فمثلا تخيل معي أن موقعك يتضمن عشرات الصفحات، وذات يوم أردت التعديل على التصميم ففي هذه الحالة يلزمك التعديل على كل الصفحات واحدة تلو الأخرى، وهذا يتطلب الكتير من الوقت والعمل. أما الطريقة التي أنصحكم بها فلتغيير التصميم مثلا فيكفي التعديل على ملف CSS فقط فيتغير تصميم جميع الصفحات لكونه مرتبط بها كلها.
تطبيق الCSS على الأوسمة
أولا لتطبيق تنسيق ما على إحدى الوسوم فإننا نقوم بكتابة هذا الوسم ونفتح بعدها معقوفة تم نكتب الخاصية التي نريدها تم نقطتين وبعدها قيمة هذه الخاصية متبوعة بفاصلة منقطة وأخيرا نغلق المعقوفة.
فمثلا لو اردنا تلوين فقرات الصفحة بلون معين فإننا نكتب الوسم المعني بالأمر وبين المعقوفتين نكتب الخاصية التي نريد وهنا خاصية اللون أي نكتب color وأمامها القيمة أي اللون الذي نريد أن نلون بها هذه الفقرة ويكون الكود كالتالي:
color: green;
}
p {
color: blue;
}
الكود الأول سيلون جميع العناوين الرئيسية h1 باللون الأخضر.
والثاني سيلون الفقرات p باللون الأزرق.
أما إذا أردنا الفقرات باللون الأخضر كذالك فإننا نضيف إسم وسم الفقرات p أمام وسم العنوان h1 بعد فاصلة ويكون الكود كالتالي:
color: green;
}
من الممكن أن ننشيء خاصية خاصة بالفقرات لكن إن كنا نريد تلوينهما بنفس اللون وتفاديا للتكرار فإننا نستعمل هذه الطريقة التي رأيناها في هذا الكود الأخير مع العلم أنه بإمكاننا أن نستعملها لتلوين بقدر ما نريد من عناصر الصفحة وليس فقط إتنين.
التعليق على CSS
كما في الHTML فإنه من الممكن أيضا في الCSS إضافة التعليقات وكما تعرفون فإن التعليقات لا تظهر على الصفحات في المتصفح ولكنها تستعمل فقط لإضافة تحديدات على الكود، خصوصا إذا كان طويلا. ولإضافة التعليقات إلى كود الCSS نقوم بكاية الرمز التالي */ ونكتب بعدها التعليق تم ننهيه بالرمز التالي* / وإليكم المثال التالي والذي يتضمن تعليقات:
كود سي إس إس*/
h1, p {
color: green; /* هذا الكود سيلون جميع الفقرات والعناوين الرئيسية باللون الأخضر*/
}
إستخدام ال class وال id
فيما سبق رأينا كيف نجعل فقراتنا وعناويننا الريئيسية وأي عنصر أخر نريده بأي لون نريده لكن المشكلة تكمن في أن جميع الفقرات أو جميع العناوين التي تتكون منها الصفحة تلون بهدا اللون فماذا لو أردنا تلوين صفحة واحدة باللون الأخضر والصفحات الأخرى بلون أخر ونفس الشيء بالنسبة للعناوين وباقي عناصر الصفحة ولهذا فإننا نستعمل الخاصيتين class وid واللتان تمكننا من إختيار عنصر واحد وحينها نطبق عليه الشكل الذي نريد وكيفية إضافة هذه الخاصية على أي وسم نريده فهي كما في المتال التالي الذي طبقناه على وسم الفقرة ووسم الصورة:
<img class="" />
بهذه الطريقة يمكننا التحكم في أي عنصر دون غيره بعد تحديده بالخاصية class التي ندرجها في الوسم مع كتابة إسم معين أمامها بين العلامتين:"" كما في الكتال التالي:
وفي كود الcss نكتب الإسم الدي وضعناه أمام الclass وفي هده الحالة هو:paragraph1 مسبوقا بنقطة ونكتب بين المعقوفتين جميع الخصائص التي نريد تطبيقها على ذلك العنصر حيت يكون على الشكل التالي:
color: green;
}
هناك أيضا الخاصية id والتي ذكرناها وليس هناك الكثير لنقوله عنها، فهي أيضا تعمل بنفس الطريقة التي تعمل بها class والإختلاف الوحيد بينهما هو أن الخاصية id تستعمل مرة واحدة فقط لذلك فهي تستعمل لتحديد عناصر تكون وحيدة في الصفحة كصورة الترويسة مثلا وإليكم هذا الكود لتفهمو كيف يتم إستعمالها:
أما في كود الcss فنكتب إسم الid مسبوقا بعلامة دييز # وهذا مثال لذلك:
}
وبين المعقوفتين نكتب الخصائص التي نريد تطبيقها على هذا العنصر.
كل الأمور حتى الأن جيدة لكن مازال هناك مشكل لم نفكر فيه وهو كيف يمكننا أن نحدد كلمة ما إن لم تكن محاطة بأوسمة؟
فلنأخد مثلا الكود التالي:
هل من الممكن أن نغير متلا لون كلمة "موقعي" وحدها.
طبعا هذا غير ممكن بإستعمال الخاصيتين id وclass التي رأينهما سابقا.
الأوسمة الشاملة
لدلك فهناك وسمين يستعملان لهدا الغرض ويسميان بالأوسمة الشاملة وهما في الحقيقة ليس لهما أي تأتير فهما يستعملان فقط لتطبيق خاصية على كلمة ما عن طريقة إحاطتها بهدين الوسمين ومن تم إضافة الخاصيتين id أو class وهذين الوسمين هما: <sapn></span> و <div></div>
ولإستخدامهما يكفي أن نضع الجزء المراد التعديل عليه بين المعقوفتين وفي المثال التالي فقد قمنا بتطبيق هذه الطريقة على كلمة موقعي:
السلام عليكم أتمنى أن يعجبكم
<span class="mon_site">موقعي</span>
</p>
أما كود ال CSS فسيكون كاالتالي:
.mon_site {
Color:green;
}
ونفس الشيء بالنسبة للوسم الأخر فهو يستعمل بنفس الطريقة الفرق الوحيد بينهم هو أن الوسم الأول يستعمل في وسط الفقرة وذلك لتحديد جملة أو كلمة معينة بينما الأخر فهو يستعمل لتحديد جزء كبير من الصفحة قد يحتوي على عدة فقرات أو أي عنصر أخر.
إستخدام المحددات أخرى
حتى هنا نكون قد تعرفنا على مجموعة من المحددات الأساسية مثل محددات الفقرات والعناوين وأيضا محددات أخرى مثل class و id. ولكن هذا ليس كل شيء فهناك الكثير والكثير من المحددات الأخرى وهنا سنتعرف على محدد يسمى بالمحدد الشامل وهو يمكننا من تحديد جميع الأوسمة الموجودة في الصفحة بدون إستتناء.
ويكتب على الشكل التالي:
*{
}
في الجزء الموالي سنتعرف على كيفية تنسيق النص.
الدرس السابق: تعلم HTML (هتمل):الإسثمار
الدرس التالي: تعلم HTML و CSS: تنسق النص
الدرس السابق: تعلم HTML (هتمل):الإسثمار
الدرس التالي: تعلم HTML و CSS: تنسق النص