مقدمة عن CSS وبعض الامثلة

السلام عليكم ورحمة الله وبركاته

مرحبا بك فى موقع بالمجان

موقع بالمجان يساعدك فى الحصول على احدث المعلومات والتفاصيل وكل ما هو جديد

فى عالم التصميم والبرمجة

 

مقدمة وبعض التعديلات باستخدام css

فى البداية سوف نتعرف على stylesheet ما ه وكيفيه استخدامه ومدى تأثيره فى شكل وتصميم الموقع

ما هو stylesheet ؟

CSS هى اختصار  Cascading Style Sheet  وهى تعنى صفحات الانماط الانسيابيه وتستخدم فى تصميم صفحات الويب من حيث نوع الخط وحجمه وحجم الصوره وخلفية كل عنصر داخل الصفحة من حيث اللون والحجم وموقعه بالنسبه لغيره .ويتم كتابة كل هذا فى صفحة واحده دون الحاجه الى تكرارها فى كل صفحة من صفحات الويب ويكون امتداد هذه الصفحة .css فعلى سبيل المثال إذا كنت قد صممت موقعك باستخدام لغة الـ HTML ، و هذا الموقع يتكون من سبع صفحات، ثم أردت بتطوير و تعديل شكل وطريقة عرض  هذا الموقع … هنا سوف يتوجب عليك إعادة تصميم الصفحات الخمس من جديد ، هذا أمر سهل جداً أما على فرض أن موقعك هذا يحتوي على عدد أكبر من الصفحات و ليكن 100 صفحة فمن المؤكد انه سوف يكون عمل شاق ومجهد ويحتاج الى الكثير من الوقت  … أما إذا كنت قد صممت موقعك منذ البداية باستخدام تقنية CSS ، فكل ما عليك هو تعديل ملف واحداً فقط .
فملفات CSS  تلغي الحاجة إلى استخدام الكثير من أوامر HTML ، كأمر FONT الذي يحدد نوع الخط أو حجمه أو لونه، و بمعنى آخر يستطيع أي شخص باستخدام CSS أن يصمم موقعه بالكامل .

 

لماذا نستخدم صفحات stylesheet  ؟

  1. فصل المحتوي عن التصميم، وهذا يؤدي إلى تبسيط عملية إدارة الموقع، لأننى بذلك استطيع التحكم فى التصميم من خلال ملف واحد فقط ، فيمكن إضافة و تعديل بعض العناصر في تصميم الموقع دون الحاجة إلى تعديل كل الملفات .

  2. جعل ملفات الموقع اصغر ما يمكن وبالتالى يسهل رفعها على الاستضافة وايضا يكون الموقع سريع فى تحميله بغض النظر عن سرعة الانترنت لدى الزائر .

  3.  صفحات CSS متوافقة مع الاجهزة والبرامج المستقبلية كمان انها تجعل من السهل التعديل فيها من قبل الغير .

كيفية ادراج CSS  داخل صفحات html  :

هناك ثلاث طرق لادراج CSS  داخل صفحات html  :

  • الطريق الاولى وهى عمل صفحة خارجية واعطائها امتداد .css  واستدعائها داخل ملف html  عن طريق هذا الكود

  • حيث href  هى المسار الموجود به ملف css   

  • الطريقة الثانية وهى عمل وسم style  داخل صفحة html   داخل head tagواختيار العنصر المراد التعديل عليه ووضعه

             

  • الطريقة الثالثة وهى وضع الstyle داخل وسم عنصر html  مثلا

     

 

لاحظ أن:

ملف الـ CSS يجب ألا يحتوي على أي وسم من وسوم  HTML .

 

امثله على استخدام css  :

عمل تدرج لونى باستخدام css

  • نقوم بعمل div ونعطيه id  او class  معين وليكن   test

 

  • داخل <style> نقوم بعمل الكود التالى

 

 

 

مشاركة

التعليقات

اكتب تعليق


مقالات ذات صلة

إضافات وردبريس رائعة ومهمة تحديث 2018

إضافات وردبريس رائعة و مهمة...

View more
قوالب ورد بريس مجانية

قوالب ووردبريس عربية مجانية 2018

قوالب ووردبريس عربية مجانية 2018...

View more
 أفضل برنامج لجعل الكمبيوتر راوتر موزع للأنترنت

 أفضل برنامج لجعل الكمبيوتر راوتر موزع للأنترنت

مقدمه عن موضوع  أفضل برنامج لجعل...

View more
افضل البدائل المجانية لبرنامج داونلود مانجر

افضل البدائل المجانية لبرنامج داونلود مانجر

مقدمه سريعه و منظمة لمعظم...

View more
كيف تجعل حاسوبك سريع من موقع بالمجان

تسريع الحاسوب و العوامل المؤثرة فى سرعته

إن الملفات الزائدة مثل ملفات...

View more
حلول فعالة للتخلص من فيروس recycle

حلول للتخلص من فيروس Recycle

فيرس عنيد جدا , و...

View more
تسعيرات الخدمات من بالمجان

كيف تقم بتسعير خدمتك او برنامجك !!

فى حالة عندك مشروع و...

View more
جلب زوار لموقعك من موقع بالمجان

جلب زوار لموقعك من عالم بالمجان للسيو

قضية الحصول على زوار او...

View more
كيف تتعامل مع موظفينك ؟ نصائح من موقع بالمجان

نصائح لتعرف كيف تتعامل مع موظفينك

يعتبر العنصر البشري بشكل عام...

View more
تعرف ما هو انترنت الاشياء مع موقع بالمجان

مصطلح انترنت الاشياء و مميزاته من موقع بالمجان

لنتعرف سويا على هذا المصطلح...

View more