محمد صبحي
رقم العضوية : 1 تاريخ التسجيل : 17/05/2016 المشاركات : 479 الدولة : مصر |
#1موضوع: ماهي تقنيات css وكيف استخدمها؟ الجمعة نوفمبر 24, 2017 9:56 pm | |
| سوف اشرح لكم ماهي تقنية (css) وكيف التعامل معاها.تعريف؟ cssتقنية Css مختصره من ” Cascading Style Sheets ” وتقنية css ليست بلغة برمجية أنما تقنيه كما يخطئ البعض انها لغة برمجية. تهتم بشكل كبير وبشكل أوسع على أشكال تصميم وأنسيابات صفحات الويب,كمثل أنماط الصفحه وشكلها من الألوان والخطوط والخلفيات والصور وغيرهم ..ما الفائدة منها؟يمكنك من خلاله تشخيص تصميم كامل لمنتداكتجعل منتداك خفيفا وفي غاية الدقة من الجمالِهل تعمل علي جميع المتصفحات؟للآسف لاتعمل هذه التقنية علي جميع المتصفحات ,, ليس السبب من القنيةالسبب ان بعض المتصفحات لاتقبلها ,, تعمل مع اشهر المتصفحات العالميةاين اجد مكانها في المنتدي الخاص بي؟احلي منتدي وفرت عليك مجهود كبير ولن تحتاج ان تكون خبير ِلكي تعرف مكانهالوحة الادارة - مظهر المنتدي -ألوان - ورقة تصميم cssهل استطيع وضع اكواد من نوع html بداخلها؟لايمكنك وضع اكواد هتميل بداخل هذه الورقة المشخصةيجب ان تربط بين الاكواد بطريقة صحيحة لكي تعمل بشكل سليمطريقة وضع css في اكواد html هناك الكثير ممن يريد انشاء صفحة html وتطبيق كود css فيها ولكنه لا يريد استخدام اعلى واسفل المنتدى (اي صفحة فارغة) ولكن اكواد ورقة css المذكورة لا تطبق الا على الصفحات المُستخدم فيها أعلى وأسفل المنتدى في هذه الحالة الحل موجود : ضع هذا الكود في الصفحة المرادة - الكود:
-
<style type="text/css""> هنا كود css المراد تعميمه على صفحة html</style> ماذا يحدث لو وضعت كود خطاء بداخلها؟الخطاء الشائع عندما مثلا تضع كود هتميل بداخلها يظهر لك هذا الخطاء - اقتباس :
- لقد تم تجديد ال CSS الخاص بك
ملاحظة: أكواد ال html قد تسبب أخطاء في أوراق ال CSS لقد تم القيام بعملية صيانة تم على إثرها حذف أكواد ال html التي قمت بإضافتها في ورقة ال CSS ليس مشكل كبيرا ِسهل التخطي منه كل ماعليك ان تذيل الكود الذي وضعتهفي اغلب الحالات الكود يتحذف تلقائي..الخطاء الثاني - اقتباس :
- تم العثور على خلل
لقد قمنا بإيجاد عدد مختلف من "{" و "}". هذا يعني أن CSS الخاص بك قد لا يعمل و لن يظهر بشكل لائق في منتداك.
ننصحك بمراجعة الكود المستعمل. ما هذا لاتقلق ِ هذا معناه انك وضعت كود غير كاملكيف غير كامل ؟ نعم غير كامل تقنية الانسابية يجب ان تغلق وتفتح في نهاية الكودمثالاذا وضعت هذا الكود سوف يعمل بدون خطاء - الكود:
-
.forum {تجريبي ;} عندما ننسه ونترك هذه العلامة} هذا معناه ان الكود ماذا مفتوح وليس مغلقونضع الكود هكذا - الكود:
-
.forum {تجريبي; هكذا يظهر لنا الخطاء ِكل ماعليك ان تعيد النظر في الكودوتحاول ان تضع الناقص .. اذا لم تعرف اكتب موضوع يوضح طلبكوان شاء الله خبرئنا لم يتئخروا عليكم بشئهل استطيع اكتب بجوار الكود اسمه عربي او انجليزي؟ نعم بالتاكد تسطيع ان تكتب فوق الكود اسمه لكي لاتنساه لكن بشروطان تعطية الامر كومنت ِ مثالعندي كود ِلحذف عبارة عدل سابقا من قبل ِالخهذا هواه الكود - الكود:
-
tr.post span.gensmall { display: none; } انا عايز دلوك احط اسم الكود ازاي بهذا الامر يارفاق تضع او الكود - الكود:
-
/*اسم الكود*/ يعني هيكون كده - الكود:
-
/*اكود ِلحذف عبارة عدل سابقا من قبل*/ tr.post span.gensmall { display: none; } وهكذا تستطيع ان تكتب اسماء جميع الاكواد في ورقة الانسابية كيف احول الكود من صورة الي رمز لون؟لم نفهمك !وضح اكتر لو سمحتمثال ِ علي كود :وضع خلفية داخلية للمنتدى هذا هواه الكود - الكود:
-
body{background-image:url('رابط الصوره');} انا دلوك مش مش عايز احط صورةعايز احول الكود ده تاني الي رمز لونهتقولي ازاي دا كود ماتقدرش تعدل عليه ِلاء تقدر تعدل عليهلكن تقدر بطرق الرابط والا اومرbackground اخذت امر image : urlيعني هنحط صورة ِ انا عايز اعطيها امر تاني ِينفع هنعطيها الامر لون color:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]يعني الكود هيكون كده - الكود:
-
body{background-color: #FF33CC;} هما هما الكودين زي بعض ونفس العملبس الاول تقدر تحط صورة التاني تقدر تحط رمز كاخلفية بدل الصورة[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]وهذا موقع يتح لكم اختيار اكواد الالوان code-couleur ..
بعض الاومر الهامة يمكنكم استخدامها ......... bodyline : هواه يستخدم في محاذة الصفحة وعمل لها حدودbody : هواه المتحكم في الصفحة مثل لون خلفية للصفحةa img : امر هام يستخدم لعمل امر للصورforumline: يستخدم في اعطاء اومر للفئاتcattitle : يتحكم في حجم اسم الفئاتforumlink : خاص بروابط الفئاتtopictitle,h1,h2 : يتحكم في اسماء المواضيعquote : خاص اقتبساتcopyright : خصاص بحقوق الملكية[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] : االوجهةpostbody : في المواضيع والمشاركاتpostdetails.poster-profile a img : صور البيانات الشخصية للاعضاءtable.forumline : لعمل اي شئ فوق الفئاتpostbody img : يستخدم في عمل اي شئ للصور في المواضيع.post-entry : المواضيع للنسخة invisiontr.post td : المواضيع للنسخة phpbb2.post : المواضيع للنسخة phpbb3........ما هي الفائدة من معرفتي هذه الاومر؟هذه الاومر تمكنك في التحكم بها وهذا شئ اساسيا في منتداك لايمكن تغيرمسار الاومر كيف استعمل هذه الاومر؟مثلا نستخدم الامر bodyيجب ان افتح واقفل الكود برموزمثال - الكود:
-
اسم الامر{الامر } مثال علي الكودهنعطية الامر صورة خليةbackgroundثم نحدد الخلفيةاذا اردنا ان تعطي امر الخلفية صورة نعطيها الامر -image:url('رابط الصورة')لكي تكون هكذاbackground-image:url('رابط الصورة)ثم نغلق الامر بهذا الرمز;تكون هكذاbackground-image:url('رابط الصورة');هكذا يسمي امر كامل مغلقثم نضع الامر الاقواسثم يبدو هكذ - الكود:
-
body { background-image:url('رابط الصورة'); } يمكنك تطبيق الامر علي جميع الاومر الاخريوهكذا نكون حصلنا علي كود خلفية الاومر التي يمكن استعمالهاBackground- لعمل خلفيةيمكن اعطائعا اي امر من الاومر التاليةColor او imageلتكون هكذا مثلاbackground-image:url('url imag');اوbackground-Color:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط];............. text-align: محاذة النصوص يمكن اعطائعا اي امر من الاومر التاليةCenter او Right او Leftتوسيط ويمين وشمال مثال text-align: center;text-align: Right ;text-align: Left ;مثال مثلا علي كود توسيط جميع المشاركاتهذا هواه الكود للنسخة الثانية - الكود:
-
tr.post td { text-align: center; } يمكنك اعطائة اي امر مثلا تعطية الامر Left يبدوا هكذا - الكود:
-
tr.post td { text-align: Left; } اذا وضعنا تصبح جميع المشاركات علي اليسار
.......... الرابط [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] |
|