دورة CSS – الدرس الأول

قياسي

بسم الله الرَّحمن الرحيم

سوف نبدأ بإذن الله مع مقدمة نظرية في الـCSS أوزعها على درسين إن شاء الله ، ولا أريد أن أطيل في الحديث النظري لسبب بسيط ، وهو أنَّ مواقع الإنترنت ملئى جدًا بدروس تعليم الأساسيات النظرية للـCSS ، كما أنّ الكثير من النَّاس لديه خلفية في لغات التصميم  لكنه يريد أن يعرف كيف يبدئ بتطبيق ما يعرفه عمليًا ، سوف تساعده الدروس التطبيقية بالتأكيد على ذلك إن شاء الله ، ما سنتعلمه هنا هو تصميم مواقع الإنترنت عن طريق لغة XHTML و CSS عملياً ، بدون الإستعانة بأي برامج مثل Dreamweaver 🙂 ، وسوف أضع لكم روابط لدروس تفصيلية إن شاء الله عندما أشرح مفاهيم نظرية بشكلٍ سريع .

قد لا تفهم الكثير مما سأشرحه في هذين الدرسين ، لا تقلق ، الغرض من كتابتهما مجرد تمهيدٍ بسيط للدروس العمليَّة والتي سوف نقوم فيها إن شاء الله بعمل تصميم ويب معين يمكن الإستفادة منه لاحقًا في أي مجال من مجالات الويب ، سواءًا المدونات أو غيرها .

هيكل الـCSS :

عبر الـ css أنت سوف تقوم بتحديد مجموعةٍ من الخصائص لكائنٍ معيَّن يعرف بـ selector ، وهذا الكائن قد يكون وسم HTML ، مثل الوسم <div> على سبيل المثال ، فإذا حددتَ قيمة لون معين ” الأزرق مثلاً ” لخلفية هذا الوسم ، فإنَّ الـCSS تقوم بتلوين أي وسم div باللون الأزرق ! ، توجد هناكـ أنواعٌ أخرى من الـselectors سوف نذكرها لاحقًا إن شاء الله .

يمكن القول بأنَّ الـcss تتكون من عدد مختلفٍ من المحددات ( selectors ) ، تعيِّن لها قيم ( values ) لخصائص ( Attributes ) يقوم المصمم باختيارها من مجموعة كبيرة من الخصائص التي توفرها له css .

وتكتب هكذا :

selector

}

;attribute1:value1

;attribute2:value2

.

.

etc

{

إننا نحدد خصائص الselector بن قوسن معقوقين {} ، نفصل بين كل خاصية وأخرى بفاصلة منقوطة ، ونسبق قيمة الخاصية بـنقطتين رأسيتين بدلاً من علامة المساواة .

طرق كتابة الـCSS :

توجد هنالك 3 طرق لكتابة توصيفات الـCSS :

الطريقة الأولى :

تسمى / in line ، أو / ضمن السطر ، أي أننا نقوم بتحديد خصائص الـselector ضمنيًا بين أسطر أوسمة الـHTML ، بمعنى أننا نستخدم ذات الطريقة التي تستخدمها الـHTML في تحديد خصائص أوسمتها .

نقوم بوضع خاصية style لوسم الـHTML ، ثم نضع في هذه الخاصية ، خواص CSS التي نرغب بها .

للتوضيح :

<h1 style=”attribute1:value1; attribute2:value2;“>E7san</h1>

وخاصية style هي خاصية من خواص HTML ، قيمتها عبارة عن مجموعة قيم خواص الـCSS ” يا رب تكون وصلت 🙂 ” .

هذه الطريقة غير مجدية بالتأكيد ، يستخدمها غالبًا مطوروا المواقع الَّذين يعملون على بيئة ASP.Net حيث يحصلون على أدواتٍ مباشرة وسهلة لإضافة خصائص CSS مباشرةً إلى وسوم HTML .

ميزتها الوحيدة ، هي الإستغناء عن خصائص HTML المغبرَّة !! .

الطريقة الثانية :

Enternal CSS Lines  ، وهي أن تكتب جميع أسطر الـCSS في ذات ملف الـHTML ، وبالتحديد في منطقة الـ <head>بحيث نستخدم الوسم الثنائي Style لتحديد منطقة الـCSS في رأس صفحة الـHTML .

للتوضيح :

l<style type=”text/css”>
selector
{
..

}
selector2

{
..

}

</style>l

أسطر الـcss هي تلك التي وضعتُها باللون الأحمر .

هذه الطريقة مجدية بعض الشيء ومفيدة ، لكنها تتعارض مع المبدأ التطويري : فرق تسد 🙂 ، يجب علينا دائمًا أن نفصل بين المحتوى والتصميم عند العمل على مواقع الويب ، وقد فصَّل في هذا الأمر وشرح المدون توقيع في هذه  التدوينة المفيدة .

الطريقة الثالثة :

هذه هي الطريقة الأفضل للتعامل مع الـCSS ، تسمى بـ External CSS Files ، حيث تقوم بفصل خصائص الـcss تمامًا في ملفٍ مستقل بامتداد css ، ثمَّ تقوم بربطها مع العدد الذي تريده من ملفات الـHTML ، وسوف نستخدمها إن شاء الله في هذه الدورة .

للتوضيح :

طريقة الربط :

أعد كتابة هذا السطر في جزء الـhead من ملف الـHTML :

<“link rel=”stylesheet” type=”text/css” href=”example1.css” media=”screen>

التفصيل :

“rel=”stylesheet

هذا السطر يحدد نوع العلاقة relation بين مستند الـHTML والملف الذي سوف نربطه به ، حددنا نوع العلاقة بـ stylesheet لاستخدامنا لـCSS .

“type=”text/css

تحديد نوع الملف .

“href=”CSS_Folder/example1.css

وضع امتداد الملف المطلوب واسمه .

“media=”screen

الـCSS تستخدم لأغراض كثيرة ، عرض مستند الويب بطريقة منسقة ودقيقة ، عرض مستند الويب ليصبح جاهزًا للطباعة ، عرض مستند الويب ليتناسب مع الأجهزة النقالة …. ، باختصار الـmedia هي التي تحدد للمطور أو المصمم الغرض من استخدام الـCSS .

.

.

SELECTORS :

الآن سوف أتحدث عن الـselector الذي ذكرته في بداية مقالي .

تعريفه :

ببساطة هو اسم الجزء الَّذي تريد تحديد بعض خصائص الCSS عليه .

أنواعه :

1- Universal selector  .

المحدد العالمي ، أي تعيين خصائص لجميع وسوم الـHTML دون استثناء .

ونكتبه ببساطة : ( * ) !.

مثال :

*
}
attribute1:value1;
attribute2:value2;l
.
.
{

2– وسم من وسوم الـHTML .

نستخدم عادةً 3 وسوم بشكلٍ رئيسي :

1- <div>

لبناء هيكل التصميم ، لن نعتمد أبدًا على الجداول ، لقد وُضعت الجداول فقط لترتيب البيانات ، أما الـdiv فهي المسؤولة عن تقسيم هيكل الموقع إلى جزء للـheader وجزء للقائمة الجانبية ، وجزء للمحتوى ،و … إلخ .

استخدامك لوسم div يعطي موقعك سرعة عالية ، ويؤهله لأن يطابق معايير w3c  ، يمكنك التعامل مع وسوم الـdiv كما تتعامل مع الجداول ، يمكنك مثلاً استبدال هذا الجدول :

l<table> <tr> <td></td> <td></td> </tr> </tablel>l

بهذه المجموعة المتداخلة من وسوم div :

l<div> <div></div> <div></div> </div>l

سوف أقوم إن شاء الله بوضع أكواد الـHTML باللون الأورنجي ، وأكواد الـCSS باللون الأزرق .

2- <span>

إذا كانت لديك خلفية ولو بسيطة في لغة html ، فلا شك في أنك تعرف الوسم <font> المسؤول عن تحديد خصائص النصوص ، الألوان وأنواع الخطوط وحجم الخط وغيرها … .

لا أعرف لماذا لا يحبذون في w3c استخدام هذه الخاصية ، عمومًا هي مملة ، ولا تمنحك مرونةً عالية ، وتضطرك إلى استخدام وسوم أخرى كثيرة بشكل ” يغثي ” كي تنسق نصوصك .

إذا استخدمت وسم <span> فأنتَ فقط سوف تقوم بتحديده كـ selector ، وتعين كل الخصائص التي ترغب بها في ملف الـCSS .

إذاً ، هو وسم يستخدم فقط لتحديد النصوص الَّتي نرغب بتنسيقها .

3- <ul>

صناعة القوائم والروابط في css تعتمد جدًا على وسم الترقيم <ul> حيث يعين كل وسم داخلي له <li> كعنصر في القائمة ، وسوف تشاهد إن شاء الله أنَّ أغلب القوائم في الـcss تعتمد على هذا الوسم بشكلٍ رئيسي .

وغيرها من وسوم لغة HTML …

لتحديد خواص معينة لوسمٍ ما ، نضع اسم هذا الوسم مجردًا قبل قوسين معقوقين يحتويان على الخصائص .

مثال :

div

}

;attribute1:value1

;attribute2:value2

.

.

{

3-تحديد الخصائص بواسطة قيمة خاصية الـid:

لكلِّ إنسان ” معرَّفه ” الخاص الَّذي يميزه تمامًا عن غيره ، ولا يشاركه فيه أحد ، بصمة العين .. بصمة الصوت .. رقم الهوية .. وغيرها ، ويمكن للـ حكومة ” الله يعز الحكومة ” أن تصل إلى أيٍّ منا عن طريق معرفة معرفه ، ومن ثم الوصول إلى جميع خصائصه مثل مستواه التعليمي ، أين يعمل ؟! ، أين يقيم ؟! ، كم مرة سافر إلى ألاسكا ، كم مرة لم يسافر فيها إلى الطائف … إلخ .

وسوم الـHTML أيضًا تمتلك معرفًا خاصًا وهو الخاصية ID ، تحدد اسمًا معيناً للوسم لا يشاركه فه وسم آخر – من المفترض يعني – ويمكنك الوصول إلى هذا الوسم وتعديل خصائص الـCSS له عن طريق معرفه .

افرض مثلاً أنك تريد أن تعطي للنص في قسم الهيدر نوعًا مختلفًا عن بقية نصوص المستند كلها ، تتعامل وقتها مع معرف قسم الهيدر ، ويتميز الـ ID عن بقية أنواع الـselectors في أنه يسبق بعلامة # عند وضعه في ملف الـCSS .

مثال :

XHTML Code

l<div   id=”header”>
i luv CSS .. BiG BiG BiG luv !
</div>
l

CSS Code

l#header
{
attribute1:value1;
attribute2:value2;l
.
.
{

4- الفئات Classes .

ذكرنا بأنَّه يمكنك تحديد خصائص الـCSS لوسمٍ بعينه ، وذلك بمعرفة اسم الـ ID الَّذي يحمله ، فلنفرض مثلاً بأننا رغبنا بتحديد ذات الخصائص على غيره ، ليس من المعقول أن نقوم بنسخ هذه الخصائص لكل وسم ، إذًا .. نستخدم الـclasses ، نحدد مجموعة من الخصائص لكل class وعند رغبتنا في استخدامها ، نقوم فقط باستدعاءها في وسم الـHTML ، بهذا يمكننا استخدام الـClass في أكثر من وسم .

ونستبدل الرمز # ، بالنقطة ( . ) في الـcss .

مثال :

XHTML Code

l<div   class=”Gray-class”>
i luv CSS .. BiG BiG BiG luv !
</div>
l

CSS Code

l. Gray-class
{
attribute1:value1;
attribute2:value2;l
.
.
{

5- وقد تكون الـselector مزيجًا ممَّا سبق .

تستطيع أن تحدد مجموعة من الخصائص للوسم span إذا جاء ضمن وسم div ، أو أن تحدد خصائص وسم p إذا عُيَّن له class اسمه main-menu ، وهكذا … .

بمعنى : أنتَ مثلاً تريد تصميم القائمة الجانبية ، الوسم الأساسي لها هو <div> وتحمل id قيمته sidebar ، ضمن هذا الوسم فتحت وسمًا آخرًا من نوع <ul> ، تريد تحديد خصائص لهذا الوسم ul بالذات ، أنتَ لا ترغب بتعميم هذه الخواص على جميع الوسوم التي من هذا النوع ، ترغب فقط بوسم ul ضمن قسم div معرفه sidebar .

تكتبها هكذا :

XHTML Code

l<div id=”sidebar”>
<ul><li>main page</i><li>content me</li></ul>
</div>
l

CSS Code

l#sidebar   ul
{
attribute1:value1;
attribute2:value2;l
.
.

{

وهذا هو نوعٌ من أنواع الوراثة في الـCSS يطول شرحها .

6- تحديد مجموعة خصائص لأكثر من class ولأكثر من وسم html .

بحيث تكون هذه الوسوم والفئات لا تربطها ببعضها أي رابط ، بمعنى أنها لا ترث من بعضها .

يعني أنا مثلاً أريد أن ألغي من وسوم العناوين h1,h2,h3,h4,h5,h6 خاصية تعريض الخط ، لا أريد لعناويني أن يكون خطها كما هو في الـHTML عريضًا .

أكتب :

CSS Code

h1,h2,h3,h4,h5,h6
{
attribute1:value1;
attribute2:value2;l
.
.
{

.

.

عالم الـselector عالمٌ واسعٌ جدًا ومتداخل ، ويكفي هنا بأن أضع لك أهم أنواعه الَّتي يستخدمها المصمم عادة .

لفهم أكبر للـselectors يمكنكم قراءة هذا الدرس للأخ توقيع اضغط هنا .

نستكمل درسنا في وقتِ لاحق إن شاء الله ..

يوم طيب 🙂

إحســـان …

Advertisements

13 responses »

  1. السلام عليكم ..

    انا عندي بعض المعلومات مما سبق ! , ولكنني لم اكن اعرف ما هو سبب وجود النقطة في اماكن ووجود الرمز”#” .. ما اعتقد ان في فرق بين طريقة الclass او الid او الspan .. اللي متعود عليه امشي ! , صح ؟؟

    شكرا لك على الدرس الرائع والواضح !!

    موفقة ان شاء الله …

  2. أخي / حسين

    لا يوجد اختلاف من ناحية التنسيق في ما ذكرته ، يعني النتيجة واحدة ، لكن الفرق في الإستخدام جوهري .

    طريقة الـclass : تستطيع فيها أن تعين خصائص لعدة وسوم ، يعني كأنك تضع الخصائص في صندوق وتنقله بين الوسوم .

    طريقة الـ id : عندما تريد أن تحدد خصائص لوسم معين ، يعني بشكل متفرد لهذا الوسم ، وهو غالبًا يستخدم في هيكل الموقع ، لأن جزء الهيدر ما يتكرر مثلاً فما في حاجة لاستخدام الـclass .

    طريقة الـspan : أعتقد بأنك تعني طريقة الـinline ، هذي أكيد عندك خلفية عنها لأنك تستخدم دريمويفر ، لكنها غير محبذة ، لأنها تدمج المحتوى ، أي اللغة البرمجية ولغة html بالتصميم ، والواجب الفصل كما ذكر الأخ توقيع في مدونته .

    .
    .

    شكرًا لمتابعتك 🙂

    إن شاء الله تنتفع بالدروس ..

  3. ما شاء الله أخي حسين ، تصميم مدونتك الجديد رائع جدًا جدًا ..

    بالتوفيق 🙂

  4. والله شرح رائع
    انا كنت اعدل على ملف الإستايل حق القالب بالبركة 🙂
    ومع كل مرة كنت اكتشف دي الأأشياء الي ذكرتيها

    عندي سؤال اش الفرق بين id و الفئات ؟؟؟

  5. أهلين أخي إعصار 🙂

    الفرق بين الـid والفئات ( classes ) أنَّ الأولى تكون خاصة بجزء لا يتكرر في الموقع .

    يعني مثلاً ، الهيدر .. هل يتكرر ؟ .. لا .. بعد ما تقسم التصميم إلى هيدر ومحتوى وقوائم جانبية وفوتر ، تعطي جزء الهيدر اسم معين خاص فيه ، الي هو الـid .. وتبدأ تحدد خصائصه في ملف الـCSS .

    لكن الفئات نستخدمها للأجزاء الي تتكرر في الموقع ، مثلاً عندكـ المواضيع في المدونة ، لها تنسيق يتكرر في كل موضوع ، تحط خصائص هالمواضيع في class ، بحيث يستدعى هالكلاس في كل مرة تكتب فيها موضوع .

    أتمنى تكون الفكرة وصلت ..

  6. السلام عليكم

    شكرا لك يا مبدع

    بس عندي طلب صغير انه تضع في نهايت الدرس روابط للدروس التي سوف تطرحها لكي يتم النقر عليها والإنتقال الى الدروس التي تليها

    موفق يا رب وانا صراحه عن نفسي استفدت فائده كبيره مما تقدم

    ابوشوق

  7. الله يبارك بعمرك والدروس

    جميلة جداً

    لماذا لانرى بينكم تعاملات

    http://www.cliprz-php.com

    فانتي مدرسة وهو مدرس

    ولو اندمجتوا بموقع واحد ستفجرون الدنيا

    والله ولي التوفيق

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s