السبت، 13 أبريل 2013
في هذا الدرس الرابع سنتوقف قليلا مع لغة css وسنحاول تسليط الضوء عليها بشكل مختصر أيضا لأننا سنتناولها بشكل أكثر تفصيلا في قادم الدروس :
1- ماهية CSS
2- إصدارات CSS
3- آلية تطبيق ستايل css
4- فيديو
1- ماهية CSS
فكرت كثيرا في المثال الذي يمكن ضربه لإيضاح العلاقة بين html و css وفهم دور كلا منهما في عملية بناء موقع اليكتروني وتوصلت الى التالي : لنفترض أننا نريد الانتقال الى منزل جديد للعيش فيه , عادة سنتحتاج إلى شراء الأثاث ومختلف المكونات الأخرى من أواني وزرابي ومخدات ... الخ , ونقوم بنقلها الى المنزل وتكويمها هناك قبل البدء في تنظيمها ووضع الديكور الخاص بها ... تماما كما تفعل لغة html عندما تقوم بنقل المحتوى من صور ونصوص وفيديو من حاسبنا الشخصي إلى موقع الانترنت الذي نريد إنشاءه . لكن تنظيم كل تلك المكونات المتراكمة والمتناثرة تأتي في الخطوة الثانية وهي مسؤولية لغة css , حيث تهتم css بوضع ديكور وشكل لكل تلك العناصر وتلوين النصوص ووضع الزخارف واللوحات الجدارية ليظهر منزلنا الافتراضي (موقع الانترنت) بالشكل الجمالي الذي نريد .
2- إصدارات CSS
منذ عام 1996 أي عام ولادة css تم اصدار عدة نسخ من اللغة :
; CSS 2.1 , CSS 2.0 , CSS 1 وأخير CSS3
التي هي في طريقها لتكون مدعومة في غالبية متصفحات الانترنت والتي أتاحت لنا إمكانيات هائلة كانت مختصرة قبل ذالك في لغات السكريبت مثل javascript .
3- آلية تطبيق ستايل css
عادة نبدأ بإنشاء استايل لصفحات الويب عندما ننتهي من إضافة المحتوى الأساسي للصفحة باستخدام html , لأن كل ماتفعله css هو تخصيص شكل للمكونات التي تم إضافتها بواسطة وسوم html باستدعاء الوسم وتزيينه بالطريقة التالية :
balise1
{
;3 propriete1 : valeur
; propriete2 : valeur2
}
حيث نستدعي اسم الوسم الموجود في صفحتنا html ونطبق عليه الخصائص التي نريد .مثلا : لتخصيص شكل مميز للنص الموجود في وسم <p> نقوم فقط باستدعاء حرف الوسم (هنا p) في كود css ونقوم بتزيينه واعطائه اللون والحجم الذي نرغب فيه .
p
{
;color : yellow
;background-color: green
}
ففي المثال السابق قمنا بتلوين النص باللون الأحمر مع وجود خلفية خضراء .
3- طرق تطبيق استايل على صفحة ويب
هناك ثلاث طرق لتطبيق ستايل css :
ا- بكتابة كود css منفردا واضافته الى صفحة html عن طريق حصر الأمر التالي:
<link rel=" stylesheet " href =" style .css " />
بين وسمي <head> حيث style.css هو عنوان استايل الذي نريد تطبيقه .ب - أو باضافة
<style>
p{
color : yellow;
background-color: green;
}
</style>
الي صفحة html وحصره بين وسمي <head>وتكون خصائص استايل محصورة بين وسمي style , هنا استخدمنا مثال جاهز لوسم p لتوضيح الفكرة لا أكثر.
ج - أو بتطبيق استايل خاص على كل وسم موجود في صفحة html مثل :
<p style="color:yellow;background-color:green"> النص هنا </p>
4- الفيديو
ليست هناك تعليقات:
إرسال تعليق