تابع بوابة العرب على تويتر 


العودة   مركز بوابة العرب التعليمي > قسم البرمجة والبرمجيات > منتدى لغات الانترنت وتصميم المواقع

إضافة رد
 
أدوات الموضوع
  #1  
قديم 17-10-2008, 11:26 PM
الصورة الرمزية mo7med
mo7med mo7med غير متواجد حالياً
مشــرف ســابق
 
تاريخ التسجيل: Jul 2006
المشاركات: 12,590
Thumbs up مقدمة وتعريف عــام عن تقنية Css
















مقدمة وتعريف عــام عن تقنية CSS





CSS اختصار للجملة Cascading Style Sheets والتي معناها باللغة العربية صفحات الأنماط الإنسابية

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

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

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

وفرضاً أيضاً أنك انتهيت من الموقع بعد عمل متواصل ـ وعرضت الموقع على العميل وتعتقد أنه أصبح جاهز للاستخدام الآن .

ماذا لو فاجأك العميل بطلب تغيير حجم الخط من القيمة "2" إلى القيمة "3" مثلاً هل ستضطر لفتح كل صفحة و التعديل في كل فقرة من فقراتها لتغير هذه القيمة!

ماذا لو كان الموقع مكوناً من 50 صفحة ؟!

و ماذا لو كان يعمل على المشروع أكثر من شخص بشكل منفصل ؟

في الواقع هذه القصة والعملية المتعبة جدا فى التعديل ستواجهك كثيراً عند التعامل مع عملاءك وتجعلك تفكر في الإنتقال من استخدام لغة html وحدها

إلى أخرى تعطيك مرونة أكبر وتقدم لك الحل وتوفر الجهد

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

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

لتصميم المواقع والحريه في تصميم مواقع تزيد عن العشرة والعشرين صفحة.


لن ترهقك بعد اليوم طلبات العملاء والتعديلات الكثيرة التى يطلبوها ويروها سهله ولكنك تراها مرهقه مع كثرة الأعمال.

تقليل حجم صفحات الموقع، مما يعني أن المستخدم سيقضي وقتاً أقل لكي تظهر له صفحات الموقع بشكل كامل.

تقليل حجم الموقع الكلي بنسبة تصل إلى 50% مما يعني أن سعة الموجة bandwidth التي يحتاجها الموقع ستقل.

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

كيف يتعرف متصفح الإنترنت على هذه التقنية ؟

1- Browser Defaults

..في الحقيقة إننا نستخدم نوعاً من أنواع الأنماط الانسيابية في صفحاتنا دون أن ندري . و لنأخذ هذا المثال:

كود PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<
title>عنوان الصفحة</title>
</
head>
<
body>

<
p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>

</
body>
</
html
لاحظ فلم يتم تحديد أي تنسيق للنص و مع ذلك فإنه عند فتح الصفحة بإستخدام المتصفح ستجد تنسيقاً معيناً لنوع الخط و حجمه و لونه ـ

وهذا التنسيق قد يختلف من جهاز لآخر بحسب الإعدادات الافتراضية للعرض لدى الزائر.

هنا كأننا نقول بأن المتصفح يحتفظ بملف يحتوي أنماط معينة من التنسيق يستخدمها إذا لم تحدد التنسيق بشكل واضح في صفحتك او موقعك .

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

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

طرق تعريف CSS داخل الصفحات

2- External

ملف منفصل بإمتداد css تسمية بإي أسم يحتوى على كافة تنسيقات الموقع ومن ثم تربط به جميع صفحات الموقع كما في المثال التالي:

كود PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>عنوان الصفحة</title>

<
link href="css/style.css" rel="stylesheet" type="text/css" />

</
head>
<
body>

<
p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>

</
body>
</
html
الوسم <link /> يكتب فيه مسار ملف css سواء كان بمجلد خاص أو بنفس مكان الصفحات ومن ثم يوضع الكود بالكامل برأس كل الصفحات بين الوسم <head>

كود PHP:
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
وهذا الملف المنفصل المربوط به الصفحات تكتب فيه أكواد css مباشرة داخل ملف txt ومن ثم تحفظ بإمتداد css.

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

كود PHP:
.me {
    
color#FFFFFF;
    
background-color#333;
    
border2px solid #666;
    
font-familyTahoma;
    
width100px;
}
p.you {
    
color#EAEAEA;
    
background-color#333;
    
border2px solid #666;
    
font-familyTahoma;
    
width50px;

3- Internal
فيها يتم إضافة جميع قيم css برأس الصفحه بين وسمين <style> لتعريفهم على المتصفح ومن ثم توضع ايضا داخل برأس الصفحة بين الوسم <head>

كما في الحالة السابقة ومنه تطبق هذه الأوامر على جميع فقرات الصفحه.

كود PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>عنوان الصفحة</title>

<
style type="text/css">
<!--
p.you {
    
color#FFFFFF;
    
background-color#333;
    
border2px solid #666;
    
font-familyTahoma;
    
width100px;
}
-->
</
style>

</
head>
<
body>

<
p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>

</
body>
</
html
الوسم <style> وهو الوسم الذى من خلالة يتعرف المتصفح على قيم css المختلفة المكتوبة بداخله ويكتب بهذا الشكل برأس الصفحة

كود PHP:
<style type="text/css">

CSS styles here

</style
المتصفحات القديمة لا تفهم الوسم style ولا تدعم تقنيه CSS لذا فهى عادة تتجاهلة وتعرض مابين هذا الوسم من أوامر على أنه محتوى ضمن الصفحة!

ولتفادى هذه العملية في تلك المتصفحات التعيسة نقوم بوضع جميع أوامر css داخل تعليق comment element

حتى إن حدث لا قدر الله وظهر موقعك لأحد مستخدمي هذه المتصفحات لا تظهر له الأوامر كمحتويات بالصفحة

كود PHP:
<style type="text/css">
<!--

CSS styles here

-->
</
style
4- in-line
وفيها تطبق أوامر الـ css مباشرة داخل اوسمه html كما بالمثال التالي:

كود PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>عنوان الصفحة</title>
</
head>
<
body>

<
p style="font:normal 12px Tahoma; color:#FF0000; background:#FFDDFF;">تقنية تتهتم بتحديد شكل وتصميم المواقع</p>

</
body>
</
html



منقول للفائدة









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






__________________

_________________
نسألكم الدعاء بالرحمة والمغفرة لأخيكم ابومروان
{ رَبّ إِنِّي لِمَا أَنْزَلْت إِلَيَّ مِنْ خَيْر فَقِير } القصص 24
رد مع اقتباس
  #2  
قديم 18-10-2008, 01:03 AM
الصورة الرمزية mo7med
mo7med mo7med غير متواجد حالياً
مشــرف ســابق
 
تاريخ التسجيل: Jul 2006
المشاركات: 12,590
افتراضي




مقدمة وتعريف عــام عن تقنية Css
http://www.edu.arabsgate.com/showthread.php?t=533076




قواعد أساسيه في تعريف وكتابة الأوامر
http://www.edu.arabsgate.com/showthread.php?t=533077





تعريف لكل من class , id وماهو الفرق بينهم
http://www.edu.arabsgate.com/showthread.php?t=533079





تسلسل الأوسمه"إضافة قيم css خاصة لأوسمة معينة"
http://www.edu.arabsgate.com/showthread.php?t=533081





المجموعات "التطبيق على أكثر من وسم وفئة بنفس الوقت"
http://www.edu.arabsgate.com/showthread.php?t=533082





الأوسمة والعناصر ـ وكيفية التحكم بعرضهم
http://www.edu.arabsgate.com/showthread.php?t=533083





تعريف للوسوم span , div والفرق بينهم
http://www.edu.arabsgate.com/showthread.php?t=533085





الألوان في Css وطرق التعامل معها
http://www.edu.arabsgate.com/showthread.php?t=533086





التخطيط ـ شرح للـmargin, padding, border
http://www.edu.arabsgate.com/showthread.php?t=533087


__________________

_________________
نسألكم الدعاء بالرحمة والمغفرة لأخيكم ابومروان
{ رَبّ إِنِّي لِمَا أَنْزَلْت إِلَيَّ مِنْ خَيْر فَقِير } القصص 24
رد مع اقتباس
  #3  
قديم 18-10-2008, 01:09 AM
fofo_912 fofo_912 غير متواجد حالياً
 
تاريخ التسجيل: Aug 2005
المشاركات: 1,336
افتراضي

شكرا على الموضوع المفيد ..
رد مع اقتباس
  #4  
قديم 18-10-2008, 01:19 AM
الصورة الرمزية mo7med
mo7med mo7med غير متواجد حالياً
مشــرف ســابق
 
تاريخ التسجيل: Jul 2006
المشاركات: 12,590
افتراضي





__________________

_________________
نسألكم الدعاء بالرحمة والمغفرة لأخيكم ابومروان
{ رَبّ إِنِّي لِمَا أَنْزَلْت إِلَيَّ مِنْ خَيْر فَقِير } القصص 24
رد مع اقتباس
  #5  
قديم 22-01-2009, 09:53 PM
vg186499
 
المشاركات: n/a
Cool Hi! Thanks for the great advice..

Hi! Thanks for the great advice..







__________________________________________________ _________________
Runescape Gold
Runescape Money
Dofus Kamas
Lotro Gold
رد مع اقتباس
  #6  
قديم 04-03-2009, 01:56 PM
ميمونة4 ميمونة4 غير متواجد حالياً
 
تاريخ التسجيل: Mar 2009
المشاركات: 50
افتراضي

جزاك الله خير..
رد مع اقتباس
  #7  
قديم 19-05-2010, 06:04 AM
Gany2010 Gany2010 غير متواجد حالياً
 
تاريخ التسجيل: Apr 2009
المشاركات: 2
افتراضي

شكرا علي الاستفاده القيمه
www.egy4world.com/vb
رد مع اقتباس
  #8  
قديم 24-09-2010, 05:25 AM
Tiger_Hacking Tiger_Hacking غير متواجد حالياً
 
تاريخ التسجيل: Jun 2007
المشاركات: 69
افتراضي

مشكور
عمل رائع
موفق
__________________
رد مع اقتباس
  #9  
قديم 01-12-2010, 09:56 PM
HAWK_700 HAWK_700 غير متواجد حالياً
 
تاريخ التسجيل: Jan 2002
المشاركات: 138
افتراضي

الله يعطيك العافية برنامج css برنامج مفيد فى تصميم صفحات الانترنت المتوافقة مع المعايير القياسية
رد مع اقتباس
  #10  
قديم 11-12-2010, 11:42 AM
الصورة الرمزية حمزه الاماره
حمزه الاماره حمزه الاماره غير متواجد حالياً
 
تاريخ التسجيل: Mar 2009
المشاركات: 23
افتراضي

جزاك الله خير الجزاء
__________________
رد مع اقتباس
  #11  
قديم 07-06-2011, 06:25 AM
ويب ديازين ويب ديازين غير متواجد حالياً
 
تاريخ التسجيل: Jun 2011
المشاركات: 1
افتراضي

مقدمة رائعة اخي الكريم
__________________
مدونتي : عرب ويب ديازين

مدونة تهتم بتقنية css/html وقوالب بلوجر معربة
رد مع اقتباس
إضافة رد

أدوات الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
لنبداء معاٌ , تقنيات مكونات الجهاز , sabetst منتدى تبادل الخبرات 42 10-03-2012 06:46 PM
ال Silver Light آخر تقنية من تقنيات مايكروسوفت ( مقدمة ) khalil saleem منتدى الـفـلاش وال SILVERLIGHT 8 26-09-2009 02:56 AM


الساعة الآن 05:15 AM.


جميع الحقوق محفوظة لشبكة بوابة العرب
New Page 4
 المركز التعليمي منتديات الحوار تسجيل النطاقاتخدمات تصميم مواقع الإنترنت  إستضافة مواقع الإنترنت  الدعم الفني لإستضافة المواقع
   متجر مؤسسة شبكة بوابة العرب   الدردشة الصوتية والكتابية  مركـزنا الإعـلامي  مـن نـحــن  مقــرنـا  قسم إتفـاقيات الإستــخــدام
Copyright © 2000-2014 ArabsGate. All rights reserved
To report any abuse on this website please contact abuse@arabsgate.com