الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

مقدمة في لغة صفحات الانماط الانسيابية CSS-Cascading Style Sheets

مغلق
بدأه walidov في 28 يوليو 2007 · 4 رد · 1,013 مشاهدة · في منتدى تصميم صفحات الويب
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

بسم الله الرحمن الرحيم

إن عصر تصميم المواقع بلغة HTML قد ولى ، والآن من يصمم المواقع بدون استخدام صفحات الانماط الانسيابية CSS هو باعتقادي “أمّي” في علم تصميم المواقع ، لذلك على جميع مصممي المواقع بالطريقة التقليدية تعلم هذه التقنية لمواكبة التطور السريع في علم تصميم المواقع.

ماهي لغة CSS؟

إن كلمة CSS قادمة من الحروف الأولى للجملة : Cascading Style Sheets ، والتي تعني باللغة العربية : صفحات الانماط الانسيابية ، تم اختراع لغة CSS عام 1995 لكن كان أول ظهور رسمي للغة CSS عام 1996 عبر منظمة W3C وهي الإصدارة CSS1 ، ثم في عام 1998 أصدرت الإصدارة CSS2 ، ثم صدرت آخر إصدارة عام 2003 وهي CSS2.1 وهي اللغة المتداولة الآن ..

توجد هناك إصدارة جديدة تحت الإنشاء ولا يعرف موعد إطلاقها وهي CSS3.

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

باختصار ، لغة CSS هي مجموعة من الأوامر المكتوبة في ملف مستقل-عادة-تتحكم بخصائص HTML والتي تحدد مظهر الصفحة المصممة ، كلون الخط ونوعه وخلفية الصفحة وشكل الجداول والإطارات، إلخ..

ماذا تعني صفحات الانماط الانسيابية؟

انظر إلى الصورة التالية :

cascading1.gif

يمكن بسهولة أن تفهم الجملة “صفحات الانماط الانسيابية” أو “Cascading Style Sheets” إذا عرفت الأنواع الثلاثة للـ CSS ألا وهي :

1. صفحة نمط المتصفح :

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

2. صفحة نمط المستخدم :

وهي الشكل الافتراضي للمستخدم ، يعني مثلا لو قمت بتحميل ثيم معين للويندوز ، سوف تعرض صفحات المواقع بشكل مختلف

3. صفحة نمط المحرر :

ؤهي الشكل الذي يقوم مصمم الموقع بتحديده وحفظه على شكل صفحة .css ويتحكم بشكل الموقع من خلاله.

والآن نأتي للمصطلح (صفحات الانماط الانسيابية) لنقم بشرحه .. إن الأنواع الثلاثة السابقة لها أولوية للظهور ، فالنوع الثالث (صفحة نمط المحرر) له الأولوية الأولى للظهور ، فمهما كان نمط المستخدم والمتصفح ، سيظهر الشكل المحدد في (صفحة نمط المحرر) ، ولكن ماذا لو كانت هناك خيارات لم يقم مصمم الموقع بتحديدها في (صفحة نمط المحرر) ، سيقوم المتصفح بالقفز إلى (صفحة نمط المستخدم) وعرض الشكل المحدد فيها بغض النظر عن نمط المتصفح ، لأن للمستخدم الأولوية الثانية بعد المحرر ، ويأتي أخيرا (صفحة نمط المتصفح) فلو كانت هناك خيارات غير محددة في أنماط المحرر والمستخدم ، ستعرض خيارات نمط المتصفح.

ولذلك سميت (صفحات الانماط الانسيابية) ، لأن الشكل الصفحة المعروضة تأخذ الشكل المحدد في الصفحات الثلاث المذكورة بشكل متعاقب ، تأخذ خيارات (صفحة نمط المحرر) فإن لم تكن محددة تأخذ (صفحة نمط المستخدم) فإن لم تكن محددة تأخذ (صفحة نمط المتصفح).

ماهي فوائد لغة CSS؟

هناك خمسة أسباب رئيسية تجبرك على التصميم بتقنية CSS:

1. سهولة التعديل والصيانة :

إن أهم ميزة لـcss هي أنك تستطيع تعديل أو صيانة عدد كبير جدا من ملفات HTML من خلال تعديل ملف واحد فقط هو ملف css.

2. سهولة الوصول :

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

3. تغيير بيئة العرض :

أعني بذلك أن بيئة المتصفح تختلف عن بيئة الطباعة وتختلف عن بيئة الكمبيوتر الكفي ، فأنت تحتاج لعرض نفس الصفحة والمحتويات ولكن في عدة بيئات مختلفة ، فبدلا من تغيير محتويات html يمكنك تغيير فقط طريقة العرض لتوائم البيئة المستهدفة.

4. تقليل حجم الملفات :

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

5. سيطرة أكثر على الكتابة :

يمكنك التحكم بالكتابة والنصوص في صفحات html بشكل أوسع من خلال css ، فيمكنك التحكم بالفراغات بين السطور والكلمات والحروف ، وتغيير أنماط الحروف من كبيرة إلى صغيرة والعكس.

في المقال القادم ، سنشرح إن شاء الله كيفية استخدام هذه التقنية بشكل مبسط.

ودمتم بود ،،

المصدر:

http://www.walidov.com/web-development/cli...hat-is-css.html

لا تبخلوا علي بزيارة المدونة ..

#2

اهلا بك اخي وليد معنا نتمنى ان تتحفنا بمزيد من موضوعات الشيقه مثل هاذا الموضوع

هناك سبب سادس اعتقد انك لم تذكره وهو ملائمة المتصفحات المختلفه واظهار الصفحات بشكل لائق على جميع متصفحات

مثلا هناك بعض تعليمات تستخدمها لايقرأها الا ie وهناك بعض التعليمات لايقراها ie ومخصصه للفيرفوكس و غيره من متصفحات

#3

حياك الله أخي أحمد ..

يشرفني مرورك الكريم على الموضوع ..

وإن شاء الله ستجد المزيد من المقالات بإذن الله تعالى ..

وفعلا .. ملاحظة ممتازة جدا .. أشكرك على الإضافة المفيدة ..

ودمت بود ،،

#4

جزاك الله خيرا اخ وليد من زمان عايز احول موقعى الشخصى الى هذة الانماط بس انت عارف الكسل

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

والسلام ختام

#5

السلام عليكم

مشكور على الموضوع

بس ممكن لما تضيف شرح عن

css

تعطيني فكرة ملمة عن

pseudo class

لأنو حاولت أفهمن و ما فهمتن

جزاك الله خيرا

تم تعديل هذه المشاركة بواسطة avril في 1 أغسطس 2007 في 01:07

هذا الموضوع مغلق.

مواضيع مشابهة