][ مفاهيم لغة الأنماط][ تصميم الصفحات الالكترونية W e b بلغة CSS

تم تحميل الصفحة في 0,1961337 ثانية
][ مفاهيم لغة الأنماط][ تصميم الصفحات الالكترونية W e b بلغة CSS

Steam X3

ExpErt DeveloPer
إنضم
14 أغسطس 2010
المشاركات
6,916
الإعجابات
723
النقاط
0




ليوم جبتلكم مشان تفهمو بعض المفاهيم و تصميم الصفحات



حول الغة و ما ههي من هنا
Css
لمحة عن لغة css ماهي اللغة css؟

:) نبداء هاذي مقدمة في لغة الصفحات :13:
صفحات الانماط الانسيابية


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


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



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

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




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

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

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

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


ملاحظة:الان هاذا الشرح طلتو من Googel من وحدة المعرفة
تصميم صفحات الويب بإستخدام لغة CSS


العنوان الفرعيّ




الملخّص


تركيب ورموز لغة الـ(CSS)
المصطلحات اللغوية لـ(CSS)بسيطة و تستخدم الانجليزية في عدد من الكلمات الرئيسية لتحديد أسماء مختلف خصائص النمط. كل صفحة من صفحات الأنماط تتكون من قائمة من القواعد. كل قاعدة أو مجموعة قواعد تتكون من واحد أو أكثر من المحددات "SELECTORS" و جزء التوضيح "Declaration-Block" وفيما يلي شرح لكل منهما:
<b>

  • المحددات "SELECTORS": وهي في الغالب العناصر اللأساسية للغة الـ (HTML) مثل:
    (H1, P, BODY, TABLE,....)
  • جزء التوضيح "Declaration-Block": و يكون محصوراً بين القوسين { }ومحتوياً على واحد أو أكثر من التوضيحات التي يفصل بينها بفواصل منقوطة (؛) ويتألف كل توضيحمن خانتين أساسيتين وهما الخاصية "PROPERTY" والقيمة "VALUE" ويفصل بينها بإستخدام النقطتين الرأسيتين :)) كما هو موضح في الصورة (1).
    • الخاصية "PROPERTY": وهي أسماء الخصائص التي تصف العنصر. مثل :
      (color, text, font-face, font-size,….)
    • القيمة "VALUE": وهي القيم التي تعرف الخصائص مثل:
      (color: yellow, font-face: arial, .…)
(1) قاعدة (صفحات الأنماط التعاقبية)
- يشرح هذا الفيديو مثال بسيط لكتابة قاعدة (صفحات الأنماط التعاقبية) (المحتوى باللغة الإنجليزية)
http://www.youtube.com/watch?v=N9rfnv5ndxM&feature=player_embedded </b>
- هنا مثال آخر يعرض مجموعة من الأنماط المختلفة لصفحة ويب. (المحتوى باللغة الإنجليزية)

ماذا يقصد بـ " التعاقبية" في لغة (CSS)؟
صفحات الأنماط التعاقبية تم إعداها بطريقة تمكنك من الحصول على عدة خصائص لنفس العنصر من عدة مصادر, بحيث تؤثر جميعها في هذا العنصر. ويمكن أن يحصل العنصر على نمط أو أكثر من المصادر التالية, مع العلم أن المصدر رقم (3) يملك الأولوية الأعلى:

  • نمط المتصفح:
    لكل متصفح أنماط الصفحات الخاصة به يحدد من خلالها النمط الإفتراضي لكل عنصر من عناصر الـ
    HTML(X), وتظهر على العنصر في حالته الإفتراضية مالم يتأثر بنمط من مصدر آخر, مثال على ذلك اللون الأزرق للروابط في متصفح الإنترنت إكسبلورر.
  • نمط المستخدم:
    يمكن لمستخدم الويب ضبط إعدادات أنماط الصفحات للتحكم في نمط العرض لكل أو بعض من صفحات الويب, ولهذا النمط أولوية أعلى من نمط المتصفح حيث أنه يتم تطبيقه على العنصر في حال وجد تعارض مع نمط المتصفح.
  • نمط المحرر:
    نمط صفحات المحرر هي التي تعد بواسطة محرر أو مصمم الصفحة والتي يحاول من خلالها التغلب على نمط صفحات المتصفح ونمط صفحات المستخدم, بمعنى أن نمط المحرر يملك الأولوية الأعلى بين هذة المصادر الثلاثة. يمكن أن يكون لصفحة الويب الواحدة عدة أنماط من أنماط صفحات المحرر, وقد تأخذ أحد الحالات التالية:

    • أنماط خارجية: (وتكون قواعد الأنماط فيها مكتوبة في مستند مستقل عن المسنتد الذي يحتوي على مضمون الصفحة) ويتم إستيراداها بعمل رابط داخل صفحة المحتوى يشير لمستند أنماط الصفحة ويكتب الرابط بهذا الشكل داخل وسم <HEAD>:
<LINK rel=“stylesheet” href=“./path/file_name.css” type=“txt/css">

    • أنماط داخلية: (وتكون مكتوبة ضمن صفحة المحتوى داخل وسم <HEAD> في الصفحات المكتوبة مثلاً بـلغة (html) مثال على ذلك:

    • نمط السطر: وهذا النوع هو ما يكتب داخل نمط عنصر في صفحة المحتوى كالتالي:
<P style=“color: #FF0000”>Text</P>
إذا لم يكن هناك تعارض بين أي من قواعد الأنماط لأي من هذه المصادر ، فإنه يمكن تطبيقها جميعاً. ولكن عندما عندما يكون هناك تعارض كأن يوجد مثلاً قاعدة في نمط المتصفح تحدد لون الخط بالأسود على وسم الفقرة <p> ، ثم في وقت لاحق تأتي قاعدة في نمط المحرر تحدد لون الخط لوسم الفقرة <P> إيضاً باللون الأحمر, فإنه سوف يتم تحديد أي اللونين يطبق بإستخدام ما يسمى بـ"التعاقبية" والتي ستسمح لهذه الأنماط المتعددة بأن "تتعاقب إلى الأسفل" لكل عنصر من العناصر حيث أن النمط الأقل أولوية يظهر قبل النمط الأعلى أولوية, بمعنى أنه سيتم تطبيق قواعد نمط المتصفح وفي حال وجدت أنماط متعارضة معها في نمط المستخدم فإن الأنماط ستتعاقب في التطبيق إلى الأسفل ليتم تطبيق نمط المستخدم الذي يملك الأولوية الأعلى, والصورة (2) تبين ترتيب تعاقبية الأنماط من المصادر المختلفة.
التعاقبية إذاً هي النظام التي يدير الأنماط القادمة من مصادر متعددة، وتحددأي لأنماط تطبق عندما يكون هناك تعارض.
<b>
(2)- مستويات الأنماط التعاقبية

ماذا قدمت لغة (CSS)؟
1.السهولة والمرونة العالية في تعديل تنسيق الصفحات:
إمكانية فصل الصفحة التي تحتوي على التنسيقات بإستخدام لغة (CSS) (إسم الملف.css) عن الصفحات المحتوية على المضمون (صفحات HTML مثلاُ) وهو الهدف الرئيسي من إختراع لغة (CSS), من شأنه أن يحسن إمكانية الوصول إلى المحتوى مع توفير المزيد من المرونة والتحكم في تحديد الأنماط والتنسيقات. حيث ستصبح هناك إمكانية لتغيير نمط الصفحة دون المساس بالصفحة المتضمنة للمحتوى. كما يساعد ذلك في تسهيل عملية تغيير النمط لعدة صفحات ويب بإجراء عملية التعديل مرة واحدة.
2.الحد من التعقيد والتكرار في هيكلية المحتوى:
يساعد إستخدام لغة صفحات الأنماط التعاقبية (CSS) إيضاً في الحد من التعقيد والتكرار في هيكلية المحتوى وذلك بتصميم تنسيق موحد لتقسيم وشكل صفحات الموقع مكتوباً في ملف وحيد بلغة (CSS) وتتشارك فيه جميع صفحات الموقع دون الحاجة لتكرار قواعد صفحات الأنماط في كل صفحات الموقع.
3.حل مشاكل التعامل مع الجداول في تصميم الصفحات:
وجدت جداول (HTML) لعرض البيانات بشكل منظم على هيئة صفوف وأعمدة تسهل على المستخدم قرائتها وإيجاد العلاقات بينها, ولكن تعدى إستخدامها ذلك إلى تقسيم وتخطيط صفحات الويب وفيما يلي بعض إستخدامات الجدوال في تصميم صفحات الويب:

  • تقسيم صفحة الويب إلى جزء للافتة الموقع وجزء لقائمة الروابط الرئيسية وجزء للمحتوى الرئيسي وجزء آخر لخانة التذييل.
  • ترتيب عرض النماذج التي يمكن أن تعبأ من قبل زوار الموقع.
  • فصل محتويات لموقع عن بعضها البعض بإدراج خلايا فارغة والتي قد تكون غير ظاهرة للمستخدم.
  • استخدام الجداول المتداخلة بحيث يوضع جدول داخل خلية جدول آخر مما يؤدي إلى تعقيد الصفحة وإن كان ذلك غير ظاهر للمستخدم إيضاً.
يمكن أن يكون هذا التحايل في إستخدام الجداول محبباً لدى معظم المصممين ولكن في الحقيقة سيء جداً فهو يميل إلى التعقيد ويفقد المرونة في عملية التعديل, أيضاً فإن الجدوال توصف لدى الكثيرين بأنها "غدراة" فخطأ بسيط من المصمم قد يفسد التصميم بأكملة, كما أن استخدام الجداول في تخطيط مظهر صفحات الموقع توجد صعوبة لدى محركات البحث في إيجاد مؤشرات لهذة المواقع.
أتت لغة صفحات الأنماط التعاقبية(CSS) لتحل مشاكل التعامل مع الجداول وتساعد في تقسيم وتخطيط صفحات الويب, بالإضافة إلى تقديمها إمكانية إعطاء وصف دقيق لخصائص كل عنصر من العناصر مع تسهيل عملية البحث على محتويات الموقع عبر محركات البحث المختلفة.
4.الدقة في التنسيق والكتابة:
من خلال (CSS) يمكن إخراج البيانات بدقة عالية بإستخدام وحدة البيكسل كما تسمح بالتحكم في الفراغات بين السطور والكلمات والحروف ، وتغيير أنماط الحروف من كبيرة إلى صغيرة والعكس.
5.عرض البيانات في بيئات عرض مختلفة:
تملك (CSS) عدد من القواعد التي تسمح بعرض محتويات الصفحة في بيئات عرض مختلفة فطريقة العرضعلى الشاشة تختلف عن طريقة عرض الطباعة مثلاً وهكذا.
خاتمة
حين تصمم صفحة ويب أو موقع بإستخدام لغة صفحات الأنماط التعاقبية (CSS)،فإن هذا الامر سيستغرق منك بعض الوقت والجهد ، ولكن النتائج التي يمكن أن تحصل عليها ستكون رائعة وذات ميزات عالية ومتوافقة مع المعايير .


</b>


 

Saw Dz

Beginner Developer
rankrankrankrankrank
إنضم
14 أغسطس 2010
المشاركات
2,389
الإعجابات
476
النقاط
0
رد: ][ مفاهيم لغة الأنماط][ تصميم الصفحات الالكترونية W e b بلغة CSS

مشكووور اخي العققرب بارك الله فيك


جاري التقييم :32:
 

Saw Dz

Beginner Developer
rankrankrankrankrank
إنضم
14 أغسطس 2010
المشاركات
2,389
الإعجابات
476
النقاط
0
رد: ][ مفاهيم لغة الأنماط][ تصميم الصفحات الالكترونية W e b بلغة CSS

تم التقييم بنجاح


من 4791 >>>> إلى >>>>> 4833


في آمان الله :15:
 

Steam X3

ExpErt DeveloPer
إنضم
14 أغسطس 2010
المشاركات
6,916
الإعجابات
723
النقاط
0
رد: ][ مفاهيم لغة الأنماط][ تصميم الصفحات الالكترونية W e b بلغة CSS

:13:تم ترجيعة من عدد النقاط : 3963 الى عدد النقاط : 4017

:15: هاد بيصير ديون علي :10: و سلفه

هههه أمز ح

على راسي تسلم يدك :30:
و مبروك 4017
 

SOKON

.:: Legends DeveloPer ::.
rankrankrankrank
إنضم
5 نوفمبر 2006
المشاركات
1,620
الإعجابات
407
النقاط
83
الإقامة
PS
رد: ][ مفاهيم لغة الأنماط][ تصميم الصفحات الالكترونية W e b بلغة CSS

100%

تسلم إيدكْ
 

Mr.Dr

ExpErt DeveloPer
rankrankrankrank
إنضم
5 يناير 2010
المشاركات
1,063
الإعجابات
288
النقاط
83
الإقامة
أŒأڈأ‰
رد: ][ مفاهيم لغة الأنماط][ تصميم الصفحات الالكترونية W e b بلغة CSS

جميل جدا جاري التقييم
 
إنضم
10 نوفمبر 2009
المشاركات
8,817
الإعجابات
2,391
النقاط
0
رد: ][ مفاهيم لغة الأنماط][ تصميم الصفحات الالكترونية W e b بلغة CSS

آلـــف مشكــور سلمـ‘ـت يمنـآك تقـبـلُ مُرٍوٍريًٍ




:32::32::32::32:
 
إنضم
26 ديسمبر 2009
المشاركات
8,093
الإعجابات
951
النقاط
113
رد: ][ مفاهيم لغة الأنماط][ تصميم الصفحات الالكترونية W e b بلغة CSS

تِسلم يمينك يالغالي ولاعدمنا اناملك في هذا الطَرح الرآئع اخوي العَقرب سكآي
:32:
:13:
 

dz.ismail

Beginner Developer
rankrank
إنضم
18 مارس 2011
المشاركات
299
الإعجابات
36
النقاط
0
رد: ][ مفاهيم لغة الأنماط][ تصميم الصفحات الالكترونية W e b بلغة CSS

مشكور يااخي بارك الله فيك
 
إنضم
24 أغسطس 2010
المشاركات
2,121
الإعجابات
95
النقاط
0
رد: ][ مفاهيم لغة الأنماط][ تصميم الصفحات الالكترونية W e b بلغة CSS

روعه اخوي

يعطيك الف عافيه
 

DreaMer

ExpErt DeveloPer
rankrankrankrankrankrank
إنضم
14 أغسطس 2010
المشاركات
3,668
الإعجابات
364
النقاط
83
رد: ][ مفاهيم لغة الأنماط][ تصميم الصفحات الالكترونية W e b بلغة CSS

آلله يعطيك آلف عآفية ،

تسـلم آيدك ع آلمجهود ،!

:9:
 
إنضم
19 يونيو 2007
المشاركات
939
الإعجابات
547
النقاط
93
رد: ][ مفاهيم لغة الأنماط][ تصميم الصفحات الالكترونية W e b بلغة CSS

مــشـٌكوووور ويـعـُـطيك العافيه
:32::9::32:
 
إنضم
5 أغسطس 2011
المشاركات
2,948
الإعجابات
679
النقاط
113
رد: ][ مفاهيم لغة الأنماط][ تصميم الصفحات الالكترونية W e b بلغة CSS

بآرك الله فيـك خيوِ
 

الأعضاء النشطين حاليآ الذين يشاهدون هذا الموضوع (1 عضو و 0 ضيف)

خيارات الاستايل

نوع الخط
مودك
اخفاء السايدر بار OFF
توسيط المنتدى OFF
فصل الأقسام OFF
الأقسام الفرعية OFF
عرض المشاركات
حجم الخط
معلومات العضو OFF
إخفاء التوقيع OFF

إرجاع خيارات الإستايل