تضيف CSS مظهراً رائعاً لصفحات الويب وذلك بما تضفيه من خواص جذابة على عناصر صفحات الويب مثل التدرجات اللونية والظلال وغيرها .
ملاحظة مهمة : قبل البدء في دروس CSS يجب أن تكون لديك خلفية ولو بسيطة في لغة HTML , أو انتقل عبر الرابط التالي إلى دروس لغة HTML .
القاعدة العامة لكتابة كود CSS هي كالتالي :
حيث أن selector يمثل عنصر HTML الذي نريد تغيير خواصه مثل h3 , وتمثل property الخاصية التي نريد تغييرها مثل width, أما value فهي تمثل قيمة الخاصية التي نريد تغييرها وقد تكون لوناً مثل Red أو رقماً .. إلخ .
ولغة CSS ليست حساسة للمسافات , حيث يمكن كتابة الكود كالتالي :
هناك ثلاث طرق لاستخدام أكواد CSS وسنأخذ كل واحدة على حده :
الطريقة الأولى : وضع كود CSS بداخل كود صفحة HTML :
ونفعل هذا باستخدام الوسم <style> الذي يمكن أن نضعه بداخل الوسم <head> , وإليك هذا المثال :
ملاحظة : الخاصية المسؤولة عن التعامل مع الخلفية في لغة CSS هي background ويمكن كتابتها منفردة أو اقرانها بخواص تابعة لها مثل color لتغيير لون الخلفية أو image لتغيير صورة الخلفية .. إلخ , كما يجب ألا تنسى أن خواص CSS تنتهي بالفاصلة المنقوطة .
الطريقة الثانية : وضع كود CSS بداخل عناصر صفحة HTML :
ويتم هذا باستخدام الخاصية style وادراجها في الوسم الخاص بعنصر HTML , وإليك هذا المثال :
احفظ الصفحة وستجدها قد أصبحت كالصورة التالية :
ملاحظة : خواص HTML هي تلك التي نجدها بداخل وسوم HTML مثل bgcolor المسؤولة عن تغيير لون الخلفية , و height المسؤولة عن تغيير ارتفاع العنصر وغيرها , أما خواص CSS فهي تختلف بعض الشئ عن خواص HTML .
الطريقة الثالثة : وضع أكواد CSS في ملف خارجي :
ويتم ذلك بوضعها في ملف بالامتداد css. , حيث تسمى هذه الملفات (مستند ورقة أنماط متتالية) , وإليك هذا المثال :
لنقم أولا بانشاء ملف CSS (مستند ورقة الأنماط المتتالية) , افتح المفكرة واكتب الكود التالي :
ملاحظة : الخاصية color هي المسؤولة عن تغيير لون الخط في لغة CSS .
لنقم الآن بانشاء صفحة HTML , وسنربط صفحتنا مع ملف CSS بواسطة الوسم link الذي يكتب بداخل الوسم head :
ملاحظة : في كود HTML وفي السطر الثالث استخدمنا الوسم link لكي نربط صفحتنا ملف CSS الخارجي , واستخدمنا معه ثلاث خواص كالتالي :
1- الخاصية rel : وهي لتحديد نوع العلاقة بين صفحتنا والملف الخارجي , والعلاقة هي أن الملف الخارجي يمثل ورقة انماط متتالية بالنسبة لصفحتنا .
2- الخاصية type : وهي لتحديد نوع الملف الذي نريد أن نربطه مع صفحتنا ونوع الملف هو ملف CSS نصي .
3- الخاصية href : وهي لتحديد موقع ملف CSS ونكتب فيها مسار الملف مثل "mystyles\mystyle1.css" .
أفضل طريقة هي الطريقة الثالثة وخاصة في المشاريع الكبيرة ,, لنقل أنك ستصمم موقعاً يحتوي على 50 صفحة , وفجأة اتصل بك الزبون يريدك أن تقوم بتغيير أحد الألوان عندها يمكنك تغيير اللون في 50 صفحة عن طريق تغيير بسيط في بعض الأسطر في ملف CSS بدون أن تضطر إلى تغيير كل صفحة بشكل منفرد (تخيل صعوبة العمل حينما تقوم بتغيير اللون في 50 صفحة بشكل منفرد) .
ملاحظة مهمة : قبل البدء في دروس CSS يجب أن تكون لديك خلفية ولو بسيطة في لغة HTML , أو انتقل عبر الرابط التالي إلى دروس لغة HTML .
القاعدة العامة لكتابة كود CSS هي كالتالي :
selector
{
property1 : value;
property2 : value;
property3 : value;
}
ولغة CSS ليست حساسة للمسافات , حيث يمكن كتابة الكود كالتالي :
selector { property1 : value; property2 : value; property3 : value; }
هناك ثلاث طرق لاستخدام أكواد CSS وسنأخذ كل واحدة على حده :
الطريقة الأولى : وضع كود CSS بداخل كود صفحة HTML :
ونفعل هذا باستخدام الوسم <style> الذي يمكن أن نضعه بداخل الوسم <head> , وإليك هذا المثال :
<html>
<head>
<style>
p
{
background-color: Red;
}
</style>
</head>
<body>
<p> welcome to my page</p>
<p>it's my first page</p>
</body>
</html>
الآن قم بحفظ صفحة HTML ثم افتحها بواسطة المتصفح , سترى أنها أصبحت مشابهة للصورة التالية :
ملاحظة : الخاصية المسؤولة عن التعامل مع الخلفية في لغة CSS هي background ويمكن كتابتها منفردة أو اقرانها بخواص تابعة لها مثل color لتغيير لون الخلفية أو image لتغيير صورة الخلفية .. إلخ , كما يجب ألا تنسى أن خواص CSS تنتهي بالفاصلة المنقوطة .
الطريقة الثانية : وضع كود CSS بداخل عناصر صفحة HTML :
ويتم هذا باستخدام الخاصية style وادراجها في الوسم الخاص بعنصر HTML , وإليك هذا المثال :
<html>
<body>
<p style=" background-color:
Red; ">welcome to my page</p>
<p style=" background-color:
Yellow; ">it's my first page</p>
</body>
</html>
احفظ الصفحة وستجدها قد أصبحت كالصورة التالية :
ملاحظة : خواص HTML هي تلك التي نجدها بداخل وسوم HTML مثل bgcolor المسؤولة عن تغيير لون الخلفية , و height المسؤولة عن تغيير ارتفاع العنصر وغيرها , أما خواص CSS فهي تختلف بعض الشئ عن خواص HTML .
الطريقة الثالثة : وضع أكواد CSS في ملف خارجي :
ويتم ذلك بوضعها في ملف بالامتداد css. , حيث تسمى هذه الملفات (مستند ورقة أنماط متتالية) , وإليك هذا المثال :
لنقم أولا بانشاء ملف CSS (مستند ورقة الأنماط المتتالية) , افتح المفكرة واكتب الكود التالي :
p
{
background-color: Red;
color: White;
}
قم الآن بحفظ الملف باسم mystyle.css والأفضل أن تحفظه في نفس المجلد الذي فيه صفحة HTML .ملاحظة : الخاصية color هي المسؤولة عن تغيير لون الخط في لغة CSS .
لنقم الآن بانشاء صفحة HTML , وسنربط صفحتنا مع ملف CSS بواسطة الوسم link الذي يكتب بداخل الوسم head :
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="mystyle.css"
/>
</head>
<body>
<p> welcome to my page</p>
<p>it's my first page</p>
</body>
</html>
احفظ الصفحة وافتحها بمتصفح الانترنت , سترى أنها اصبحت هكذا :ملاحظة : في كود HTML وفي السطر الثالث استخدمنا الوسم link لكي نربط صفحتنا ملف CSS الخارجي , واستخدمنا معه ثلاث خواص كالتالي :
1- الخاصية rel : وهي لتحديد نوع العلاقة بين صفحتنا والملف الخارجي , والعلاقة هي أن الملف الخارجي يمثل ورقة انماط متتالية بالنسبة لصفحتنا .
2- الخاصية type : وهي لتحديد نوع الملف الذي نريد أن نربطه مع صفحتنا ونوع الملف هو ملف CSS نصي .
3- الخاصية href : وهي لتحديد موقع ملف CSS ونكتب فيها مسار الملف مثل "mystyles\mystyle1.css" .
أفضل طريقة هي الطريقة الثالثة وخاصة في المشاريع الكبيرة ,, لنقل أنك ستصمم موقعاً يحتوي على 50 صفحة , وفجأة اتصل بك الزبون يريدك أن تقوم بتغيير أحد الألوان عندها يمكنك تغيير اللون في 50 صفحة عن طريق تغيير بسيط في بعض الأسطر في ملف CSS بدون أن تضطر إلى تغيير كل صفحة بشكل منفرد (تخيل صعوبة العمل حينما تقوم بتغيير اللون في 50 صفحة بشكل منفرد) .