دورة تعليم تقنية css

مقدمة

CSS هي لغة تصميم تحدد شكل وثائق HTMLCSS هي أداة رائعة لإضافة تصميم لمواقعك، ويمكنها أن توفر عليك الكثير من الوقت باستخدامها في تصميم المواقع بطريقة جديدة تماماً، وهي لغة يجب أن تستخدم من قبل كل شخص يعمل في تصميم المواقع.

في هذا الدرس ستبدأ في تعلم هذه التقنية خلال ساعات قليلة، CSS يسهل فهمها ويمكنك أن تتعلم كل الطرق العملية للتحكم بتصميم موقعك.

تعلم CSS عملية ممتعة، وأنت تقرأ هذا الدرس تذكر أ ن تأخذ وقتاً لتجري بعض التجارب وترى ماذا تعلمت من كل درس.

استخدام CSS يتطلب معرفة أساسيات HTML،إذا لم تكن تعرف HTML فيمكنك أن تبدأ بدرس HTML قبل أن تتعلم CSS.
ما هي البرامج التي أحتاجها؟

تجنب استخدام برامج مثل فرونت بيج أو دريمويفر أو مايكروسوفت وورد عند قراءة وتطبيق هذا الدرس، هذه البرامج لن تساعدك على تعلم CSS، بدلاً من ذلك ستعيقك وتؤخر تعلمك للتقنية.

كل ما تحتاجه هو محرر نصي.

مثلاً مايكروسوفت ويندوز يأتي مع برنامج يسمى Notepad (المفكرة)، وهو غالباً ما يوضع في قسم Accessories (أدوات) الذي تجده في قسم Programs (برامج)، وبإمكانك استخدام برامج مماثلة في أنظمة التشغيل الأخرى مثل Pico في لينكس وSimple text لنظام ماك.

المحرر النصي البسيط هو أداة مثالية لتعلم HTML وCSS لأنه لا يؤثر أو يغير ما كتبته من أوامر، بهذه الطريقة نجاحك وأخطائك تعتمد عليك وحدك وليس على البرنامج، وهذا يبسط عملية التعلم لأنك تستطيع كشف الأخطاء بسرعة وسهولة.

يمكنك أن تستخدم أي متصفح لهذا الدرس، ونحن نشجع على أن تستخدم أحدث المتصفحات وتقوم بتحديث متصفحك دائماً.

متصفح ومحرر نصي، هذا كل ما تحتاجه.

لنبدأ!

درس 1: ما هي تقنية CSS؟

لعلك سمعت عن CSS من قبل لكن لا تعرف حقاً ما هي، في هذا الدرس ستتعلم المزيد عن CSS وماذا يمكن لهذه التقنية أن تقدم لك.

CSS هي اختصار لي Cascading Style Sheets.
ماذا يمكن أن أفعل بتقنية CSS؟

CSS هي لغة تصميم تحدد شكل وثيقة HTML، فهي تهتم بالخطوط، الألوان، الهامش، والعرض والارتفاع، صورة خلفية الموقع، وكيفية توزيع المساحات وأشياء أخرى كثيرة، انتظر فقط وسترى!

HTML يمكن أن تستخدم بشكل خاطئ لإضافة تصميم للمواقع، لكن CSS توفر المزيد من الخيارات وهي أكثر دقة وعملية، وهي مدعومة من قبل المتصفحات الرئيسية اليوم.

بعد أجزاء قليلة في هذا الدرس ستتمكن من إنشاء ملف CSS الأول لكي تعطي موقعك مظهراً رائعاً.
ما الفرق بين CSS وHTML؟

تستخدم لوضع هيكلية ونظام منطقي للمحتويات، أما CSS فهي تستخدم لإضافة تصميم لهذه المحتويات.

حسناً، قد يبدو هذا مربكاً لكن أكمل القراءة وستفهم ما قرأته قريباً.

في الماضي القريب اخترع رجل اسمه تيم بيرنرز لي شبكة الويب، في ذلك الوقت كانت HTML تستخدم فقط لإضافة هيكلية للنص، الكاتب يمكنه أن يقوم بإضافة معنى للنص بأن يقول مثلاً "هذا عنوان" أو "هذه فقرة" ويستخدم وسوم HTML مثل <h1> و<p>.

مع ازدياد شهرة شبكة الويب بدأ المصممون في البحث عن طرق لإضافة تصميم للوثائق، ولتلبية رغباتهم قام مبرمجوا المتصفحات - نيتكسيب ومايكروسوفت - باختراع وسوم HTML جديدة مثل <font> الذي يختلف عن وسوم HTML الأصلية بأنه يهتم بالشكل لا بالهيكلية.

أدى ذلك إلى أن تستخدم وسوم هيكلية مثل <table> بشكل خاطئ، حيث استخدام هذا الوسم لتحديد تصميم الصفحة بدلاً من إضافة معنى للنص، والكثير من الوسوم التي اخترعت مثل <blink> كانت فقط مدعومة من قبل متصفح واحد، أصبحت جملة "ستحتاج إلى المتصفح الفلاني لرؤية هذه الصفحة" مألوفة في مواقع الشبكة.

ابتكرت CSS لعلاج هذه المشكلة لأنها توفر للمصممين طرقاً فعالة وعملية لإنشاء التصاميم وهذه التصاميم ستكون مدعومة من قبل جميع المتصفحات في نفس الوقت، والفصل بين شكل الصفحة ومحتوياتها يبسط عملية إدارة الموقع بشكل كبير.
كيف ستفيدني CSS؟

تعتبر CSS ثورة في عالم تصميم المواقع، وفوائدها الأساسية هي:

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

في الدرس اللاحق سننظر عن قرب إلى كيفية عمل CSS وكيف نبدأ باستخدامها.

الرئيسية » دروس » CSS » درس 2: كيف تعمل تقنية CSS؟
درس 2: كيف تعمل تقنية CSS؟

في هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول، ستتعلم أساسيات CSS وما هي الوسوم اللازمة لتستخدم CSS في وثيقة HTML.

الكثير من خصائص CSS تشبه تلك المستخدمة في HTML، لذلك إذا تعلمت HTML واستخدامتها لإنشاء التصاميم فأنت في الغالب ستتمكن من تعلم CSS بسهولة، لنلقي نظرة على هذا المثال الأساسي.
القواعد الأساسية لكتابة CSS

لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة:

باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة:

<body bgcolor="#FF0000">

مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر:

body {background-color: #FF0000;}

كما تلاحظ، أوامر CSS تتشابه كثيراً مع HTML، والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS:

دورة تعليم تقنية css Figure001.ar

لكن أين نضع أوامر CSS؟ هذا هو ما سنتعلمه الآن.
تفعيل CSS في صفحة HTML

هناك ثلاث طرق يمكن أن تستخدمها لتفعيل CSS في صفحة HTML، هذه الطرق مشروحة أدناه، ونحن ننصح بأن تركز وتستخدم الطريقة الثالثة، وهي أن تضع CSS في ملف منفصل.
الطريقة 1: ضمن وسوم HTML باستخدام خاصية style

إحدى الطرق لتفعيل CSS في HTML هي باستخدام خاصية style، لنأخذ مثالاً على أساس المثال أعلاه الذي أردنا فيه استخدام اللون الأحمر كلخفية للصفحة، يمكن تطبيق هذا الأمر بهذا الشكل

<html>
<head>
<title>Example<title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>

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

هذه طريقة مختلفة بأنها تستخدم وسم <style>، وهذا مثال لكيفية تطبيق هذه الطريقة:

<html>
<head>
<title>Example<title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>

الطريقة 3: ملف خارجي

هذه هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS، خلال هذا الدرس سنقوم باستخدام هذه الطريقة لجميع الأمثلة.

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

مثلاً، لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه style، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم

دورة تعليم تقنية css Figure002

لمهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css)، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML:

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

لاحظ كيف أن مسار الملف حددناه باستخدام خاصية href.

هذا الأمر يجب أن يوضع في قسم رأس الصفحة، أي بين وسمي <head> و</head> كما في المثال الآتي:

<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...

هذا الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML.
الجميل هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML.

دورة تعليم تقنية css Figure003.ar

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

لنتدرب على ما تعلمناه حتى الآن.
جرب بنفسك

قم بتشغيل برنامج المفكرة (Notepad) أو أي محرر نصي، وقم بإنشاء ملفين، أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات:
default.htm

<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
</body>
</html>

style.css

body {
background-color: #FF0000;
}

الآن قم بوضع الملفين في نفس المجلد، تذكر أن تحفظ الملفين باستخدام اللاحقة الصحيحة لكل ملف.

قم بفتح ملف default.htm في متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، تهانينا! لقد قمت بإنشاء ملف التصميم الأول!

أسرع واقرأ الدرس اللاحق حيث سنلقي نظرة على بعض خصائص CSS.

**عازف الكلام** مراقب تاريخ التسجيل : 04/06/2012

**فرح** المراقبة العامة تاريخ التسجيل : 26/08/2011

السلام عليكم ورحمة الله تعالى وبركاته
كل الشكر والتقدير لكم على هذا الموضوع القيــم

بإنتظار كل ماهو جديد
تقبلوا مروري هذا المتواضع

**بنوتة** عضو فعال تاريخ التسجيل : 13/07/2012

شكرا لك

اشكرك جزيل الشكر على الموضوع الرائع والقيم بما يحمل
وفقك الله والله يعطيك الف عافية دائما مواضع مميزة ورائعه
شكرا جزيلا لك ولك مني اجمل تحية وود وافر لشخصك

مشاركة مميزة
جزاك الله خير
يعطيك العافية

**العاشق** عضو فعال تاريخ التسجيل : 16/01/2013

جزاك الله خيرا
شكرا على الموضوع

مشكورين على المجــــهود
و الموضــوع الرائع و المفيد
واصـــلوا نشاطاكم ولا تحرمونا من جديدكـم ..
القيم والمبدع ..
ودمتـم بألــــف خيـــــر

ڪڵ آڵڜڪر ۅآڵآمٍٺڹآڹ عڵى رۅعھٍـ پۅحـڪـ ..
ۅرۅعھٍـ مٍآڹــٹٍرٺ .. ۅچمٍآڵۑھٍـ طرحڪـ ..
ډآئمٍآ مٍٺمٍۑڒٍ ڣۑ آڵآڹٺقآء
ڛڵمٍٺ ۑآڵۼآڵۑ عڵى رۅعھٍ طرحڪ
ڹٺرقپ آڵمٍڒٍۑډ مٍڹ چډۑډڪ آڵرآئع
ډمٍٺ ۅډآمٍ ڵڹآ رۅعھٍ مٍۅآضۑعڪ

جزاك الله الف خير على كل ما تقدمه لهذا المنتدى

ننتظر إبداعاتك الجميلة بفارغ الصبر

**امووله** عضو فعال تاريخ التسجيل : 14/06/2014

جزاك الله خيرا

شكرا لك

**ساعة صفاء** مشرفة تاريخ التسجيل : 26/08/2011

السلام عليكم ورحمة الله تعالى و بركاته
لك كل الشكر والتقدير على مجهودك الرائع والمميز

دورة تعليم تقنية css

دورة تعليم تقنية css

رد: دورة تعليم تقنية css

رد: دورة تعليم تقنية css

رد: دورة تعليم تقنية css

رد: دورة تعليم تقنية css

رد: دورة تعليم تقنية css

رد: دورة تعليم تقنية css

رد: دورة تعليم تقنية css

رد: دورة تعليم تقنية css

رد: دورة تعليم تقنية css

رد: دورة تعليم تقنية css

رد: دورة تعليم تقنية css

رد: دورة تعليم تقنية css

رد: دورة تعليم تقنية css

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

انشئ حساب

تسجيل الدخول