ننتظر تسجيلك هـنـا



تطوير المواقع والمنتديات قسم يهتم بالمواقع وحمايتها وتطويرها \ هاكات , ستايلات , اكواد , سكربتات , شروحات.

الإهداءات

كيف تعمل تقنية css؟

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

موضوع مغلق
نسخ الرابط
نسخ للمنتديات
 
LinkBack أدوات الموضوع انواع عرض الموضوع
#1  
قديم 08-20-14, 06:47 PM
همس الحروف♔ غير متواجد حالياً
Saudi Arabia     Female
اوسمتي
وسام نشاط ملفت وسام عطاء مذهل وسام التكريم وسام مالنا غنى عنه 
لوني المفضل Darkred
 رقم العضوية : 33
 تاريخ التسجيل : 12 - 4 - 2014
 فترة الأقامة : 1928 يوم
 المشاركات : 59,630 [ + ]
 التقييم : 67024
 معدل التقييم : همس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكي
بيانات اضافيه [ + ]
كيف تعمل تقنية css؟



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

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


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

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


كيف تعمل تقنية css؟ i_ed62ffe70b1.png

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

كيف تعمل تقنية css؟ i_ed62ffe70b2.png

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

كيف تعمل تقنية css؟ i_ed62ffe70b10.png


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


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


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

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


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

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


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

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

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


كيف تعمل تقنية css؟ i_ed62ffe70b9.png
المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css)، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML
كيف تعمل تقنية css؟ i_ed62ffe70b5.png


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

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


كيف تعمل تقنية css؟ i_ed62ffe70b6.png

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


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

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


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


كيف تعمل تقنية css؟ i_ed62ffe70b8.png

style.css

كيف تعمل تقنية css؟ i_5f6aaec9b71.png


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

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


م/ن





;dt julg jrkdm css?




 توقيع : همس الحروف♔




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


قديم 09-28-15, 05:22 AM   #2


الصورة الرمزية حنين المشاعر
حنين المشاعر غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 155
 تاريخ التسجيل :  1 - 2 - 2015
 المشاركات : 2,880 [ + ]
 التقييم :  290
 معدل التقييم : حنين المشاعر مبدعحنين المشاعر مبدعحنين المشاعر مبدع
 الدولهـ
Saudi Arabia
 الجنس ~
Female
 اوسمتي
وسام المحبة وسام التكريم 
لوني المفضل : Darkkhaki
افتراضي



تسلم يمينكِ على جمال طرحــك

ب انتظار كل المتميز منك

تحيتيِ


 

قديم 12-04-15, 05:19 PM   #3


الصورة الرمزية همس الحروف♔
همس الحروف♔ غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 33
 تاريخ التسجيل :  12 - 4 - 2014
 المشاركات : 59,630 [ + ]
 التقييم :  67024
 معدل التقييم : همس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكي
 الدولهـ
Saudi Arabia
 الجنس ~
Female
 MMS ~
MMS ~
 SMS ~
الانكسار يَخلُفه ألمَ لاَيُداويه إلاّ الصَمت.
 اوسمتي
وسام نشاط ملفت وسام عطاء مذهل وسام التكريم وسام مالنا غنى عنه 
لوني المفضل : Darkred
افتراضي



اشكرك عالتواجد والحضور
لاتحرمني اطلالتك


 

قديم 01-28-16, 09:57 AM   #4


الصورة الرمزية أنفآسك تكفيني >>
أنفآسك تكفيني >> متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 1
 تاريخ التسجيل :  24 - 9 - 2013
 المشاركات : 29,017 [ + ]
 التقييم :  18800
 معدل التقييم : أنفآسك تكفيني >> ملكيأنفآسك تكفيني >> ملكيأنفآسك تكفيني >> ملكيأنفآسك تكفيني >> ملكيأنفآسك تكفيني >> ملكيأنفآسك تكفيني >> ملكيأنفآسك تكفيني >> ملكيأنفآسك تكفيني >> ملكيأنفآسك تكفيني >> ملكيأنفآسك تكفيني >> ملكيأنفآسك تكفيني >> ملكي
 الدولهـ
Saudi Arabia
 الجنس ~
Male
 MMS ~
MMS ~
 اوسمتي
وسام مالنا غنى عنه وسام شموع لاتنطفئ وسام التكريم وسام تألق مستمر 
لوني المفضل : Cornflowerblue
افتراضي



يعطيك العافية

على الطرح الرائع

لا حرمنا جديدك


 

قديم 08-29-16, 03:11 PM   #5


الصورة الرمزية المسافر
المسافر غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 484
 تاريخ التسجيل :  13 - 8 - 2016
 المشاركات : 2,383 [ + ]
 التقييم :  275
 معدل التقييم : المسافر مبدعالمسافر مبدعالمسافر مبدع
 الدولهـ
Saudi Arabia
 الجنس ~
Male
 اوسمتي
وسام المحبة اهلا وسهلا اهلا وسهلا وسام عطاء مذهل 
لوني المفضل : Darkgray
افتراضي



يعطيك العافية
طرح راائع كروعتك
جمال في الاختيارات
لاحرمناك ابداعك


 
 توقيع : المسافر



قديم 07-06-17, 10:37 PM   #6


الصورة الرمزية همس الحروف♔
همس الحروف♔ غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 33
 تاريخ التسجيل :  12 - 4 - 2014
 المشاركات : 59,630 [ + ]
 التقييم :  67024
 معدل التقييم : همس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكيهمس الحروف♔ ملكي
 الدولهـ
Saudi Arabia
 الجنس ~
Female
 MMS ~
MMS ~
 SMS ~
الانكسار يَخلُفه ألمَ لاَيُداويه إلاّ الصَمت.
 اوسمتي
وسام نشاط ملفت وسام عطاء مذهل وسام التكريم وسام مالنا غنى عنه 
لوني المفضل : Darkred
افتراضي



يسلموووو لمروركم العطر


 
 توقيع : همس الحروف♔




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



قديم 04-20-18, 04:28 PM   #7


الصورة الرمزية شيخة الزين
شيخة الزين غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 872
 تاريخ التسجيل :  19 - 2 - 2018
 المشاركات : 13,863 [ + ]
 التقييم :  16642
 معدل التقييم : شيخة الزين ملكيشيخة الزين ملكيشيخة الزين ملكيشيخة الزين ملكيشيخة الزين ملكيشيخة الزين ملكيشيخة الزين ملكيشيخة الزين ملكيشيخة الزين ملكيشيخة الزين ملكيشيخة الزين ملكي
 الدولهـ
Qatar
 الجنس ~
Female
 MMS ~
MMS ~
 اوسمتي
وسام المحبة اهلا وسهلا 
لوني المفضل : Crimson
افتراضي



طرٍح رٍآئع كَ ع ـآدتك ...
يتمـآيل آليـآسمين شذى بجمـآل متصفحك ..
ؤتترٍآقص آلـ ؤرٍؤد متعطرة برٍؤعة مَ طرحته أنـآملك
لرٍؤحك أطيب آلـ ؤرٍد ؤأكـآليل
آلـ زهرٍ
معطرٍة برٍقةرٍؤحك ..


 
 توقيع : شيخة الزين



موضوع مغلق

مواقع النشر (المفضلة)

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 

(عرض التفاصيل عدد الأعضاء الذين شاهدوا الموضوع : 0
لا توجد أسماء لعرضهـا.
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
ما هي تقنية css؟ همس الحروف♔ تطوير المواقع والمنتديات 5 04-20-18 04:27 PM
تعرف على فوائد الحلبة العظيمة همس الحروف♔ همس للطب والصحه والطب البديل 6 03-15-18 11:34 AM
هل تعلم أن الله يأمرك بالصلاة جريح الزمن همس للنفحات الإيمانيه 8 08-14-16 03:03 AM
( إلهي أنت تعلم ..و .. أناأعلم ) همسة مشاعر همس للنفحات الإيمانيه 8 08-14-16 03:03 AM
ما آروعها من لوحـة واحلا من فـن شموخ الحرف همس للقطوف العامه 5 01-28-16 11:10 AM


الساعة الآن 12:21 AM
أرشفه ودعم وتطوير استضافة تعاون


Powered by vBulletin® Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO By LjR7 Company
هذا الموقع يتسخدم منتجات Weblanca.com
HêĽм √ 3.2 OPS BY: ! ωαнαм ! © 2011-2012
vEhdaa 1.1 by NLP ©2009
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75