منتديات إجلجلي Agelgele
حللتم اهلا ونزلتم سهلا في مؤسسة فينكس تكنالوجي
منتديات إجلجلي Agelgele
حللتم اهلا ونزلتم سهلا في مؤسسة فينكس تكنالوجي
مؤسسة فينكس تكنالوجي ® Phoenix Technology
                      

العودة مؤسسة فينكس تكنالوجي ®



أهلا وسهلا بك في مؤسسة فينكس تكنالوجي ®
أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا. كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.


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

شاطر|


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

مستخدم مجتهد

الرتبه:
مستخدم مجتهد
الصورة الرمزية

énergie
البيانات
عدد المشاركات : 200

الإتصالات
الحالة:
وسائل الإتصال:

موضوع: درس 2: كيف تعمل تقنية CSS؟ درس 2: كيف تعمل تقنية CSS؟ Empty16/11/2014, 17:36

اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي




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

القواعد الأساسية لكتابة CSS

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

الكود:

   <body bgcolor="#FF0000">
   


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

الكود:

   body {background-color: #FF0000;}
   


كما تلاحظ، أوامر CSS تتشابه كثيراً مع HTML، والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS:
درس 2: كيف تعمل تقنية 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، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم
درس 2: كيف تعمل تقنية 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.
درس 2: كيف تعمل تقنية 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 في متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، تهانينا! لقد قمت بإنشاء ملف التصميم الأول!















 الموضوع الأصلي : درس 2: كيف تعمل تقنية CSS؟ // المصدر : منتديات إجلجلي Agelgele // الكاتب:énergie


énergie ; توقيع العضو




المعلومات
الكاتب:
اللقب:
مؤسس الموقع
الرتبه:
مؤسس الموقع
الصورة الرمزية

Ǥlamorous
البيانات
رسالة SMS : الحمد لله علي كل حال
ذكر
الجمهورية الجزائرية الديموقراطية الشعبية
العمر : 33
عدد المشاركات : 1609

الإتصالات
الحالة:
وسائل الإتصال:
http://www.altwer.com

موضوع: رد: درس 2: كيف تعمل تقنية CSS؟ درس 2: كيف تعمل تقنية CSS؟ Empty2/12/2014, 19:14

اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي




بوركت علي الموضوع















 الموضوع الأصلي : درس 2: كيف تعمل تقنية CSS؟ // المصدر : منتديات إجلجلي Agelgele // الكاتب:Ǥlamorous


Ǥlamorous ; توقيع العضو




المعلومات
الكاتب:
اللقب:
عضو موقوف
الرتبه:
عضو موقوف
الصورة الرمزية

احلى سياسة
البيانات
عدد المشاركات : 526

الإتصالات
الحالة:
وسائل الإتصال:

موضوع: رد: درس 2: كيف تعمل تقنية CSS؟ درس 2: كيف تعمل تقنية CSS؟ Empty10/12/2014, 17:12

اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي




شكرا لك















 الموضوع الأصلي : درس 2: كيف تعمل تقنية CSS؟ // المصدر : منتديات إجلجلي Agelgele // الكاتب:احلى سياسة


احلى سياسة ; توقيع العضو




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

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة

مواضيع مماثلة

» كيف تعمل الانترنت
» درس 1: ما هي تقنية CSS؟
» مايكروسوفت تعمل على هاتف ويندوز فون جديد يضم شاشة بحجم 5.7 إنش
» مايكروسوفت تعمل على ثلاثة هواتف لوميا بجانب الـ Cityman و Talkman
» شركة تكشف عن ساعة تعمل كشاحن محمول للأجهزة الذكية



الــرد الســـريـع
..
الرد السريع
هام جداً: قوانين المساهمة في المواضيع. انقر هنا للمعاينة



●[ جميع حقوق النشر للمواضيع الحصرية محفوظة © phoenix™ 2015 ]●
●[ جميع المواضيع تعبر عن رؤية صاحبها ولا تمت للإدارة بصلة ]●

تحويل وبرمجة الرسام