تعليم لغة الهتمل html تقنية css ,طريقة عمل ورقة css
أسير الصمت
® عضو مميّز ®
رسالة sms :
عدد المساهمات : 1101
نوسا البحر :
2013-09-01, 2:59 pm
دورة html l متقدم تقنية الـ 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 ثورة في عالم تصميم المواقع، وفوائدها الأساسية هي:
• التحكم بالتصميم من خلال ملف واحد. • إمكانية أكبر وأدق للتحكم بتفاصيل التصميم. • إنشاء تصاميم خاصة لمختلف وسائل عرض الموقع مثل الشاشات والطابعات والهواتف النقالة .. إلخ • العديد من التقنيات والأساليب المتقدمة في التحكم بالتصميم . درس 2 في هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول ، ستتعلم أساسيات CSS وما هي الوسوم اللازمة لتستخدم CSS في وثيقة HTML . الكثير من خصائص CSS تشبه تلك المستخدمة في HTML ، لذلك إذا تعلمت HTML واستخدامتها لإنشاء التصاميم فأنت في الغالب ستتمكن من تعلم CSS بسهولة ، لنلقي نظرة على هذا المثال الأساسي .
القواعد الأساسية لكتابة CSS
لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة: باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة: كود:
<body bgcolor="#FF0000">
مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر : كود:
body { background-color: #FF0000; }
تفعيل 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 ، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم
المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css) ، مثل هذا الرابط يمكن إنشائه من خلال سطر واحد في HTML :
هذا الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML . الجميل هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد ، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML .
هذه الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهد ، إذا أردت مثلاً أن تغير لون خلفية موقع يحوي 100 صفحة فملف التصميم يمكنه أن يوفر عليك الوقت فلا تحتاج إلى تعديل 100 ملف بنفسك ، باستخدام CSS يمكن تغيير ما تريد خلال ثواني بتغيير سطر واحد في ملف التصميم. لنتدرب على ما تعلمناه حتى الآن .
جرب بنفسك
قم بتشغيل برنامج المفكرة ( Notepad ) أو أي محرر نصي ، وقم بإنشاء ملفين ، أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات: إسم الملف default.htm
الآن قم بوضع الملفين في نفس المجلد ، تذكر أن تحفظ الملفين باستخدام اللاحقة الصحيحة لكل ملف . قم بفتح ملف default.htm في متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية ،
تهانينا ! لقد قمت بإنشاء ملف التصميم الأول !
_________________
أسير الصمت
تعليم لغة الهتمل html تقنية css ,طريقة عمل ورقة css
2013-09-01, 2:59 pm
