المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : درس(1) مقدمة فى دورة تعلم لغة css


محمود عفيفى
25-02-2010, 10:14 PM
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

(( دورة تعليم لغة CSS))



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

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

CSS هي اختصار لي Cascading Style Sheets.


ماذا يمكن أن أفعل بتقنية CSS؟

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

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

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


ما الفرق بين CSS وHTML؟

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

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

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

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

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

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


كيف ستفيدني CSS؟

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


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



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




المصدر:-
http://ar.html.net/tutorials

abo_yousra
25-02-2010, 11:48 PM
السلام عليكم ورحمة الله وبركاته

مشكور اخى محمود على البدأ فى هذه الدروس

وبالفعل تقنية CSS ليست صعبة كما يتخيل البعض بل هى قريبة الشبه جدا

بتقنية html واختلاف الأكواد بينهم بسيط جدا بمعنى أنه من تدرب على html من اليسير

عليه الإلمام بأكواد CSS وهى بالطبع أجمل وأكثر مرونة من لغة html

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

abohmam
26-02-2010, 01:02 AM
جزاك الله خيرا أخى الفاضل محمود على البدء فى هذه الدورة المفيدة

فعلا نحتاج مثل هذه الدورات لأخذ فكرة شاملة عن هذه التقنية

ولسهولة النقل منها للرد على الأسئلة

بارك الله فيك وسنتابع معك إن شاء الله حتى الإحتراف

واليوم تم وضع محرر أكواد css الرائع بإصدارته الحديثة بعد ماحولته الى بورتابل

http://img269.imageshack.us/img269/9864/abc4webrapidcss.jpg

http://www.abc4web.net/vb/showthread.php?t=7027

أبو يوسف
26-02-2010, 12:51 PM
بارك الله فيك أخي محمود للبدأ في هذه الدروس وهي دروس مهمة للمبرمجين

وأتمنى تجميع المواضيع التي تتحدث عن نفس الموضوع في كل موضوع

أي يوضع رابط المواضيع السابقة أو التي تتحدث عن نفس الموضوع

تحياتي لك

.

سالي الفلسطينية
26-02-2010, 02:53 PM
بسم الله الرحمن الرحيم

شـكــ وبارك الله فيك ـــرا لك ..
. لك مني أجمل تحية .

محمود عفيفى
26-02-2010, 03:41 PM
جزاكم الله خيرا جميعا على المرور والتعقيب
أخى أبو يسرا نورت الموضوع
أخى أبو همام بإنتظار البرنامج الرائع بإذن الله
أخى أبو يوسف بإذن الله هعمل فهرس للدوره :abc_051:
أختنا سالى بارك الله فيكم

كينج نت
27-02-2010, 05:23 PM
السلام عليكم ورحمة الله وبركاته

مشكور اخي العزيز محمود العفيفي

جزاك الله كل خير على هذه الدوره الجميله والمفيده

مأكد سنتابع بشغف للاستفاده ولنتعلم تلك اللغه الجميله والمفيده

بالتوفيق

.

رائد ابو فيصل
27-02-2010, 05:28 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

موفق بإذن الله ... لك مني أجمل تحية .

الوردة الجورية
09-03-2010, 10:45 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .
جزاك الله كل خير
فى امان الله
:abc_152::abc_152:

محمود عفيفى
16-03-2010, 01:49 AM
السلام عليكم ورحمة الله وبركاته

مشكور اخي العزيز محمود العفيفي

جزاك الله كل خير على هذه الدوره الجميله والمفيده

مأكد سنتابع بشغف للاستفاده ولنتعلم تلك اللغه الجميله والمفيده

بالتوفيق

.
وعليكم السلام ورحمة الله وبركاته
حياك الله أخى وليد نروت الموضوع
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

موفق بإذن الله ... لك مني أجمل تحية .
حياك الله أخى أبو فيصل وبارك الله فيك
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .
جزاك الله كل خير
فى امان الله
:abc_152::abc_152:
حياكم الله أختنا الفاضله وبارك الله فيكم

ذوالجناح
18-03-2010, 11:01 AM
جزاك الله خيرا
موفق بإذن الله ... لك مني أجمل تحية .

سليمان الفحلي
20-05-2013, 09:53 AM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

أبو فارس
21-05-2013, 05:45 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .