مقدمة عن css

اولا :ماهى css ؟
css : هى المسئولة عن تنسيق شكل الموقع مثل اضافة الالوان للموقع وحجم الخط وغير ذلك من التنسيقات .
وهى اختصار لكلمة cascading style sheets .

ثانيا: هل يجب تعلم اى لغة اخرى قبل البدء فى css ؟

نعم يجب اولا تعلم html بعدها يتم تعلم CSS لان CSS تعتمد كل تعليماتها على استخدام html .

ثالثا : ماهى الادوات المطلوبة لكتابة اكواد CSS

 تحتاج فقط الى Browser

واحد البرامج التالية من اهمها 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 بداخل اى عنصر او تاج نريد تطبيق هذة الخصائص او التنسيقات علية .
تحياتى للجميع .
كريم ابراهيم
كريم ابراهيم
تعليقات