NEW LOVE
مـــؤسس المـــنتدى
تاريخ الميلاد : 13/03/1985
العمر : 39
العمل/الترفيه : البنك الأهلى
الجنسية : مصرى
عدد المســاهمــات : 3848
اعلام الدول : 
تاريخ التسجيل : 25/12/2008
نقاط التميز : 5353
 | موضوع: كيف تعمل تقنية CSS؟  السبت مايو 22, 2010 9:28 am | |
| كيف تعمل تقنية CSS؟في هذا الدرس ستتعلم كيف
تقوم بإنشاء ملف التصميم الأول، ستتعلم أساسيات
CSS وما هي الوسوم اللازمة لتستخدم CSS في وثيقة HTML.الكثير من خصائص CSS تشبه
تلك المستخدمة في HTML، لذلك إذا تعلمت HTML
واستخدامتها لإنشاء التصاميم فأنت في الغالب ستتمكن من تعلم CSS بسهولة،
لنلقي نظرة على هذا المثال الأساسي.القواعد الأساسية لكتابة
CSSلنقل أننا نريد اللون
الأحمر ليكون خلفية للصفحة:باستخدام HTML
يمكننا أن ننجز ذلك بهذه الطريقة:مع CSS
يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر:
body {background-color: #FF0000;}
كما تلاحظ، أوامر CSS
تتشابه كثيراً مع HTML، والمثال أعلاه يوضح لك
الأسلوب الأساسي لكتابة CSS: لكن أين نضع أوامر CSS؟ هذا
هو ما سنتعلمه الآن.تفعيل CSS في صفحة HTMLهناك ثلاث طرق يمكن أن
تستخدمها لتفعيل CSS في صفحة HTML، هذه الطرق
مشروحة أدناه، ونحن ننصح بأن تركز وتستخدم الطريقة الثالثة، وهي أن تضع CSS
في ملف منفصل.الطريقة 1: ضمن وسوم HTML
باستخدام خاصية styleإحدى الطرق لتفعيل CSS في
HTML هي باستخدام خاصية style،
لنأخذ مثالاً على أساس المثال أعلاه الذي أردنا فيه استخدام اللون الأحمر
كلخفية للصفحة، يمكن تطبيق هذا الأمر بهذا الشكل
...
هذا الرابط يخبر المتصفح
بأن عليه استخدام التصميم من ملف CSS عندما
يقوم بعرض ملف HTML.
الجميل هنا أنك تستطيع ربط العديد من ملفات HTML
بملف تصميم واحد، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم
العديد من ملفات HTML. هذه الفكرة يمكنها أن توفر
عليك الكثير من الوقت والجهد، إذا أردت مثلاً
أن تغير لون خلفية موقع يحوي 100 صفحة فملف التصميم يمكنه أن يوفر عليك
الوقت فلا تحتاج إلى تعديل 100 ملف بنفسك، باستخدام CSS يمكن تغيير ما تريد
خلال ثواني بتغيير سطر واحد في ملف التصميم.لنتدرب على ما تعلمناه حتى
الآن.جرب بنفسكقم بتشغيل برنامج المفكرة
(Notepad) أو أي محرر نصي، وقم بإنشاء ملفين،
أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات:default.htm
My first stylesheet
style.css
body {
background-color: #FF0000;
}
الآن قم بوضع الملفين في
نفس المجلد، تذكر أن تحفظ الملفين باستخدام
اللاحقة الصحيحة لكل ملف.قم بفتح ملف default.htmفي
متصفحك وانظر إلى الصفحة
وهي تحوي اللون الأحمر كخلفية، تهانينا! لقد قمت بإنشاء ملف التصميم الأول! | |
|
