الدرس الاول من دروس تعلم لغة css وهى عبارة عن مقدمة لشرح css وماهي متطلبات تعلمها وهل تستطيع كتابة كود css بدون تعلم لغة اخري وماهي الادوات المطلوبة لكتابة كود css وطرق وضع الاكواد وربطها بصفحة ال HTML
ما هى لغة css ؟
css هى المسئولة عن تنسيق شكل الموقع مثل اضافة الالوان للموقع وحجم الخط وغير ذلك من التنسيقات .
وهى اختصار cascading style sheets .
هل يجب تعلم اى لغة اخرى قبل البدء فى css ؟
نعم يجب اولا تعلم html بعدها يتم تعلم CSS لان CSS تعتمد كل تعليماتها على استخدام html .
ماهى الادوات المطلوبة لكتابة اكواد CSS؟
مثل ماذكرنا فى الدرس الاول من دروس html واللي ممكن تتطلع عليه من هنا :
فأنت تحتاج فقط الى Browser واحد البرامج او editor المستخدمة فى كتابة اكواد html ومن اهمها Notepad++ – komodo – brackets
وقبل البدء فى توضيح طرق تضمين اكواد CSS بداخل صفحات html .
يجب اولا معرفة syntax او طريقة كتابة اكواد CSS وهى كالتالى:
Selector{
Property:value;
.
.
}
ماهو ال Selector ؟
وهو element او العنصر المختار او مجموعة العناصر المختارة والمطلوب تطبيق هذه التنسيقات عليها .
ماهي ال property ؟
وهى الخاصية وهناك العديد والعديد من الخواص فى CSS .
ماهي ال value ؟
وهى القيمة الخاصة بهذة الخاصية .
ماهى الطرق المتاحة لوضع اكواد CSS بداخل صفحة HTML ؟
1- external
2-internal
3- inline
1- external :
من خلال كتابة اكواد CSS بداخل صفحة خارجية تاخذ الامتداد CSS
ويتم ربط صفحة css بصفحة html من خلال كتابة تاج الارتباط فى تاج head الخاص بصفحة HTML .
مثال للتوضيح :
بافتراض اننا نريد انشاء صفحة نكتب بها عبارة welcome to CSS ونريد عمل تنسيق لهذة العبارة وهو تغيير لونها بالون الاحمر .
<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
<p>welcome to CSS </p>
</body>
</HTML>
هنا يتم عمل صفحة خارجية تاخذ الامتداد CSS ولتكن هذة الصفحة باسم style.CSS
- ويتم كتابة الكود التالى داخل صفحة CSS :
p{
color:red;
}
هنا تم كتابة اسم تاج HTML وهو p وهو العنصر المختار او selector واستخدام خاصية color واسناد قيمة لها وهى red او اللون.
- باقى لنا الان هو الربط بين كلا الصفحتين صفحة HTML وصفحة CSS :
ذكرت فى الشرح ان كود الربط يتم كتابتة فى تاج head فى صفحة HTML كالتالى :
<head>
<link rel=”stylesheet” type=”text/CSS” href =”style.CSS”>
</head>
هنا يتم تحديد نوع الملف الخارجى وكذلك كتابة اسم صفحة CSS التى يتم الارتباط معها .
2- internal :
تكتب بداخل صفحة HTML فى تاج head بداخل تاج style
<head>
<style >
p{
color:red;
}
</style>
</head>
تكتب اكواد CSS بنفس الطريقة السابقة .
3-inline
<p style=”color : red ;”> welcome to CSS</p>
هنا يتم كتابة اكواد CSS بداخل اى عنصر او تاج نريد تطبيق هذة الخصائص او التنسيقات علية .
نقلا عن مهندس/ Fawzy Syam
