معهد آفاق التيسير للتعليم عن بعد - (2) الدرس الثاني: تقنية css

الحمدلله والصلاة والسلام على رسول الله

تعرفنا على بعض الخصائص المستخدمة مع الوسم <body> ، لكن في أغلب صفحات الويب تطبق الخصائص السابقة بواسطة تقنية CSS .
فما هي تقنية CSS ؟

أولا: يجب أنه نعرف أن إنشاء موقع لابد أن يكون باستخدام لغة HTML فلا توجد طريقة أخرى، وأن استخدام CSS أو javascript أو php يتطلب معرفة أساسيات html
CSS هي أداة تستخدم لإضافة تصميم للمواقع هي اختصار لـــ: ورقة الأنماط المتتالية ــCascading Style Sheet .
وهي عبارة هن لغة تصميم تحدد شكل صفحة HTML: الخطوط، الألوان، الهامش، والعرض والارتفاع، صورة خلفية الموقع، وكيفية توزيع المساحات وأشياء أخرى كثيرة، وأيضا تدعمها معظم المتصفحات.

ومن فوائدها الأساسية هي:
- التحكم بتصميم عدد من الصفحات من خلال ملف واحد. (يكون امتداده css)
- إمكانية أكبر وأدق للتحكم بتفاصيل التصميم.
- إنشاء تصاميم خاصة لمختلف وسائل عرض الموقع مثل الشاشات والطابعات والهواتف النقالة .. إلخ

أما طريقة كتابته في html :

http://www.afaqattaiseer.com/vb/uplo...1346325544.gif

الطريقة 1: Inline ضمن وسوم HTML باستخدام خاصية: نمط style

كود:

<body style="background-color:#b0c4de;">

وفقكم الله ، لاحظوا طريقة كتابة النمط في وسم body :

- ""= style
- "" نكتب بداخلها الخصائص كما في المثال.
- ونكتب ; فاصلة منقوطة ، كفاصل بين كل خاصيتين، وإلا قد لا يتعرف المتصفح على الخاصية المطلوب تنفيذها .
- ونستخدم : نقطتين رأسيتين بدلا من رمز = بين الخاصية والقيمة كما في المثال.

إذن طريقة كتابة أنماط css ضمن وسوم html سوف تكون كالتالي:

كود:

<br style=" القيمة:الخاصية الثانية ; القيمة:الخاصية الأولى">

الطريقة 2: داخلي internal ضمن ملف HTML باستخدام وسم style

كود:

<style type="text/css">

 body {background-color : #FF0000;}

</style>

هذا الشكل من الأنماط يكتب في قسم الرأس أي بين <head> </head>
وحتى يتعرف المتصفح على الأنماط نكتبها بين وسم </style> <style>
ثم بين {}

كود:

  <head>        <style>{       هنا نكتب الأنماط بنفس الطريقة السابقة      }         </style>      </head>

الطريقة 3: ملف خارجي external
وهو ملف نصي يحوي أوامر CSS يستخدم امتداد css

كود:

<link rel="stylesheet" type="text/css" href="style/style.css"/>

فائدة:
الطريقتين 2 و3 يمكن تطبيقها على جافا سكريبت javascript *.js و php *.php

كمثال على طريقة رقم 3
- اذهب إلى صفحة التسجيل http://www.afaqattaiseer.com/vb/register.php
- ثم ضع المؤشر في أي موضع من الصفحة ثم اضغط على يمين الماوس
- اختر view page source أو عرض مصدر الصفحة
- في السطر رقم 51 ستجد

كود:

<link rel="stylesheet" type="text/css" href="clientscript/vbulletin_important.css?v=384" />

وهذا الملف ستجده وجميع محتويات الصفحة ، إن شاء الله بالطريقة التالية:
- حفظ الصفحة السابقة register.php.htm
- ثم فتح المجلد : register.php_files
- ستجد من ضمن محتويات الصفحة ملف الأنماط vbulletin_important.css

أما عن كيفية استخدام تقنية أنماط CSS مع الوسم <body> كالتالي:
- الخاصية background-image وهي تقابل الخاصية background
- الخاصية background-color وهي تعمل نفس عمل الخاصية bgcolor

- الخاصية Background-repeat للتحكم بتكرار صورة الخلفية وتأخذ أربع قيم:
تكرار أفقي repeat-x
تكرار رأسي/عمودي repeat-y
تكرار أفقي وعمودي repeat
بدون تكرار no-repeat

مثال : سوف نستخدم الصورة التالية كخلفية مع خاصية التكرار العمودي

http://www.afaqattaiseer.com/vb/uplo...1346326552.jpg

النتيجة:

تستطيع أن ترى الصورة بحجمها الطبيعي بعد الضغط عليها

في CSS نستخدم أربع طرق التعبير عن القيم الرقمية :

px بيكسل وpt نقطة = قيم مطلقة ، محددة بدقة وثابتة
% وem = قيم نسبية، أي بالنسبة لحجم الشاشة وهي قابلة للتعديل.
وتعديلها يكون من خلال قائمة عرض view في أي متصفح.

- الخاصية background-attachment وهي تعمل نفس عمل الخاصية bgproperties
- الخاصية background-position لتحديد موضع الصورة x و y نسبيا أو بالبيكسل أو عن طريقة الأسماء: center, top , bottom ...إلخ

مثال:

كود بلغة HTML:

<body   style="background-image:url(bg.jpg); background-color:#EAFFFF;    background-repeat:no-repeat; background-position: 50% 25%">

نذكر في الدرس السابق :
استخدمنا صور من النت وذلك بكتابة عنوان الصورة على النت
في تقنية الأنماط :

كود:

background-image:url(http://www.webpage.com/bg.jpg)

*** http:///www.webpage.com : هذا العنوان ليس حقيقة ، مجرد مثال.

أما بالنسبة للروابط

LINK وتقابل a:link تنسيق رابط
VLINK تنسيق رابط قد زرته وتقابل a:visited
ALINK وتقابل a:hover تنسيق عند مرر الماوس
تنسيق عند الضغط عليه a:active وتقابل active

كتابتها ضمن وسوم html :

كود بلغة HTML:

<a href="http://www.google.com.sa" style="color:red">Google</a>

والطريقة الأخرى،

كود:

<style type="text/css">

 a:link {

 COLOR: #0000FF;

 }

 a:visited {

 COLOR: #800080;

 }

 a:hover {

 COLOR: #FF0000;

 }

 a:active {

 COLOR: #00FF00;

 }

 </style>

مع ضرورة التنبه أن كتابة أنماط css بهذا الشكل يجب أن تكون في قسم الرأس head
ملاحظة:
استخدام الأنماط في تنسيق الروابط سيتضح بشكل أفضل إن شاء الله ، في درس الوصلات التشعبية حيث سنقوم بتطبيق هذه الأنماط على الروابط أو الوصلات التشعبية.

الواجب التطبيقي (3):
استخدام الخصائص التالية :
- الخاصية background-image
- الخاصية Background-repeat
- الخاصية background-position
- الخاصية background-color

في تطوير/تعديل الصفحة التي تم إنشائها في الواجب التطبيقي رقم (2)

وفقكم الله وسددكم

الحمدلله
والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين