مدونة بلوجر من الصفر

واليوم الحديث عن الأوسمه Div و Span 1 ) الوسم  Div  أحد أوسمه لغه html وهو إختصار للكلمة Division وتعنى تقسيم او توزيع ـ وعموما يستخدم هذا الوسم في الصفحات التى تعتمد في التنسيق على css لتقسيم الصفحات بدلاً من الجدوال. ويكون بهذا الشكل لو حددنا به فقرتين مثلا .. وهذا الوسم يصنف ضمن الـ Block Elements   تـــــابع هنا وتابع فى هذا المثال ـ يوجد 3 فقرات وقد وضعت فئه class لإثنين منهم تحتوى على أمر تلوين والأخرى بدون ـ ثم قمت بوضع وسم div جديد يحتوى على الـ 3 فقرات وبه class يحتوى على امر تلوين وكذلك لون للخلفيه وتسميك للخط . لو شاهدت النتيجه على المتصفح ستظهر لك بالشكل التالي : لاحظنا هنا انه تم تطبيق أمر التلوين الموجود بـ class الـ div المسمى بـ test على آخر فقرة فقط بينما الفقرتين الأخريين لم يطبق عليهم ... والسبب يرجع الى ان الفقرات لها تعريف خاص بها بأمر تلوين أخر ولن تستجيب لأى تعديل بالـ div راجع  الدرس التالي .. اما الخلفيه وسمك الخط فقط تم تطبيقه على كافه الفقرات لانها لا تحتوى على أوامر مسبقه تمنع التطبيق . 2 ) الوسم  Span  أحد اوسمه لغه html ـ والأك...

بعد ماتكلمنا بالدرس السابق عن مايسمى  بتسلسل الأوسمه   هنـــــــــــا  وكيف يتم تطبيق أوامر css عليها . في هذا الدرس سنتكلم فيه عن  مجموعات الاوسمه  ـ وكيف نطبق أوامر الـ css على اكثر من وسم بنفس الوقت وله نفس القيمة بمعنى اخر لدينا صفحه تحتوى على فقرات p وعناوين مختلفة h1 و h2 و h3 مثلا ـ  ونريد ان نحدد لتلك الوسوم كلها لون معين او اى أمر آخر يطبق عليهم بنفس الوقت ـ والصيغه تكتب بالشكل التالي :  هذا مع أوسمه html وايضا يمكن ان نطبقها مع الفئات والمعرّفات بنفس الطريقه  كما ترى تم وضع الأوسمه بجانب بعض ـ وفصلنا بينهم فقط بفاصلة ( , )  تابع مع المثال التالي ، وهو نفس المثال الموجود بدرس تعريف كل من id و class  هنــــــا  ولكن مع إضافة عنوان جديد أصغر h3 3 فقرات وعنوانين مطبق على فقرتين منهم فئه تحتوى على أمر تلوين وعلى عنوان واحد معرّف أيضا للتلوين  شاهد على المتصفح .. سنحدد الان ونضيف للمعرف id # وسم جديد له للفقرة p والعنوان h3 نظريا وعند المشاهده على المتصفح سنقول ان الـ 3 فقرات والعناوين ستتلون كلها باللون الاحمر  ولكن ش...

نواصل مابدأنا من تعريف لتقنيه css ـ وقد تكلمنا فى الدرس السابق  هنــــا  وعرفنا كل من الـ class والـ id والفرق بينهم  واليوم سنعرّف مايسمى بتسلسل الأوسمه داخل css ـ وللتوضيح أكثر ساضرب لك مثال بالفقرة التالية :  وعلى المتصفح تظهر بالشكل التالي ..  كما ترى هناك فقرة واحده وعنوان لها وبداخل كل منهم اضفت وسم em حتى يظهر الخط المحدد بينها ( مائل ) كما شاهدت  وعلى فكرة الوسم (em) هو أحد اوسمه html التى تنتمى لـ phrase elements وهو له نفس تأثير الوسم (i) على الخط إذن نحن لدينا فقرة والوسم الخاص بها p وتحتوى بداخلها علي خط مائل بالوسم em  ,وايضا في العنوان h2 اضفت كلمة مائله وتأخذ الوسم em  حلو !  الان أنا أريد عن طريق css ان أجعل الكلمات المائله فقط بلون معين او بخط معين مثلاً وهذا هو التسلسل الذى اتكلم عنه  تابع معى هنا ..  قمت بإضافة أمر تلوين للوسم em الموجود بداخل الفقرة بالوسم p وبهذا كل الكلمات المائله الموجودة داخل الفقرة تتلون باللون الأحمر .. الامر نفسه مع العنوان وسنقوم بإضافة أمر تلوين جديد للكلمات المائله بداخل الوسم h2  ...

درس اليوم سنتعرف فيه على كل من class و id فهى الفئات و المعرفات الأساسيه التى توضع بداخل أوسمه html حتى تتعرف على أوامر css المختلفة .. وهى تعرف نظريا بالشكل التالي :  id = معرّف يتم تحديدة ويمكن تندرج تحدتها عنده فئات ـ وتعرّف بوضع علامة ( # ) قبلها ويمكن ان تضع لها اى اسم ، ويتم تطبيقه على عنصر واحد فقط داخل الصفحه . class = الفئات وهى يمكن ان تكرر اكثر من مرة بنفس الصفحة ، على عكس المعرّفات id ـ وتعرّف بوضع نقطه ( . ) قبلها ويمكن ان تضع لها اى اسم. وتعال نوضح ذلك بالتفصيل بالأمثلة التاليه : الفئات class  قمت بإضافة فئه جديدة بإسم bold لتسميك الخط خاصة بالفقرة p كما ظهر بالصيغه التاليه ( p.bold ) ومن داخل html وبداخل الوسم p أضفت الـ class ويوضع بالصيغه التالية وظهرت كما بالصورة السابقه وتم تطبيق أمر تسميك الخط على الفقرة .  تابع معى مرة أخري المثال التالي متعدد الفقرات  المثال يحتوى على 3 فقرات وعنوان واحد وقمت فيه بوضع فئه جديد بإسم blue تحتوى على أمر تلوين  وطبقتها على فقرتين منهم والعنوان ـ وإن شاهدها على المتصفح ستظهر لك هكذا .. لاحظ تم تلوين الفقرتين الأ...

فى هذا الدرس سنبدأ معاً بتعريف اولى القواعد الأساسيه في كتابة وتعريف الأكواد التى تعتمد عليها هذه التقنيه وكما ذكرنا في موضوع التعريف العام  هنـــــا  ان لدينا عده طرق يعرفه بها المتصفح > راجع التعريف  المحرر الذى سيتم التطبيق والكتابه من خلالة برنامج Dreamweaver 8 ـ ولا شك أنك يمكن ان تكتب قيم وتعريفات الـ css عن طريق برنامج Notepad البسيط الملحق مع ويندوز او برنامج TopStyle كما نوهنا في المقدمة . ونبدأ مع مثال بسيط جدا لصفحه ويب كما نشاهدها هنا ـ صفحه عادية بلغه XHTML بعنوان ( الأنماط الإنسابية CSS ) وتحتوى على فقرة وحيدة بداخل الوسم body لو شاهدتها على المتصفح تظهر لك بهذا الشكل  سنضيف الان بنفس الصفحه تعريف لتلك الفقرة حتى يتم تلوين الخط بداخلها مثلا ـ وشاهد معى الصفحه والكود مرة أخري أصبحت الفقرة مكتوبة بلون أحمر ـ والجديد هو هذا الكود المضاف في رأس الصفحه  كود: <style type="text/css"> <!-- p {color:red;} --> </style> style : هو الوسم الذى من خلالة يتعرف المتصفح على قيم css المختلفة المكتوبة بداخله ويكتب بهذا الشكل  كود: <style ...

معنى كلمة CSS ؟ الكلمة CSS اختصار للجملة  C ascading  S tyle  S heets والتي معناها باللغة العربية ( صفحات الأنماط الإنسابية )  وهي "ليست لغه برمجه" ولكنها تقنية تتهتم بتحديد شكل وتصميم المواقع ، وينطبق ذلك على الألوان والخطوط والصور والخلفيات التى تستخدم فى الصفحات ، بمرونة وسهولة تامه . وهذه التقنيه تساعدك جدا على إنشاء وإدارة صفحات المواقع بشكل فريد يتميز عن من يعتمد في التصميم على HTML التى تسبب مشكله وهى ان الموقع لا ينفصل عن محتوياته .. وتعال نتخيل سوياً على أنك قبلت تنفيذ موقع متوسط الحجم لأحد العملاء ، و بطبيعة الحال تحتاج لبرمجة ما يزيد عن العشر صفحات ـ وفرضاً أيضاً أنك انتهيت من الموقع بعد عمل متواصل ـ وعرضت الموقع على العميل وتعتقد أنه أصبح جاهز للاستخدام الآن . ماذا لو فاجأك العميل بطلب تغيير حجم الخط من القيمة "2" إلى القيمة "3" مثلاً هل ستضطر لفتح كل صفحة و التعديل في كل فقرة من فقراتها لتغير هذه القيمة !  ماذا لو كان الموقع مكوناً من 50 صفحة ؟!    و ماذا لو كان يعمل على المشروع أكثر من شخص بشكل منفصل ؟    في الواقع هذه القصه وال...