تعلم اساسيات css واحترف مجلة جملة

programe

عضو جديد
9 ديسمبر 2008
2,002
4
0
دورة تعلم أساسيات لغة ال CSS>> طريقك لاحتراف قولبة جوملا

css-icon.png
من المعروف لكل مستخدم لجوملا ان قولبتها تقوم على عدة لغات من اهمها هى لغة ال css وتكمن اهمية هذه اللغة فى تحديد المظهر الذى سيظهر به موقعك.. والشكل النهائى له.. وكما سيتم ذكره فى الدرس تستخدم هذه الخاصية من اجل توفير الباندويث.. فنحن الآن فى جيل ال web 2.0 التصميم الهادىء والتصفح السريع.., ولذلك وايمانا منا باهمية ان يطلع كل عربى على هذه الدروس بحثنا عن هذا الدرس ووضعناه بموقعنا لتكون بادئة خير للمصمم العربى فى جوملا.

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

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

PHP:
[/RIGHT]
p.you {
	color: #FFFFFF;
	background-color: #333;
	border: 2px solid #666;
	font-family: Tahoma;
	width: 100px;
}[RIGHT]

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

أدوات : قبل أن تبدأ لتعلم تلك التقنية تحتاج فقط لهذه الأدوات..

  • Notepad برنامج صغير ملحق مع كل نسخ الويندوز أو أي محرر متقدم لصفحات الويب سوف نستخدمة في كتابة الأوامر. أنا استخدم Notepad
  • متصفح ويب قياسي، أنا أستخدم Mozilla Firefox.

يتبع
 

programe

عضو جديد
9 ديسمبر 2008
2,002
4
0
سنبدأ بتوضيح أولى القواعد الأساسية في كتابة وتعريف الأكواد التى تعتمد عليها هذه التقنيه ونبدأ مع مثال بسيط جدا لصفحه ويب كما نشاهدها هنا:
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" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS الأنماط الإنسابية</title>
</head>
<body>

<p>قواعد أساسية في تعريف وكتابة الأوامر</p>

</body>
</html>

صفحه عادية بلغه xhtml كما يتضح من أول سطر في الوسم <!DOCTYPE> وبعنوان "css الأنماط الإنسابية" وتحتوى على فقرة وحيدة بداخل الوسم <body> , عدلنا أيضاً إتجاه الصفحة من اليمين الى اليسار حتى تناسب طبيعة صفحات مواقعنا العربية.
لو شاهدتها على المتصفح تظهر لك بالشكل التالي
css001.gif

تعال وشاهد نفس الصفحة ولكن مضاف اليها تعريف للفقرة حتى يتم تلوين الخط بداخلها ، وشاهد معى الصفحه والكود مرة أخرى
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" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS الأنماط الإنسابية</title>

<style type="text/css">
<!--
p { color:red; }
-->
</style>

</head>
<body>

<p>قواعد أساسية في تعريف وكتابة الأوامر</p>

</body>
</html>
css02.gif

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

css03.gif

Selector : المكان الذى تريد تطبيق الخصائص عليه ، ويمكن ان تختار اى من وسوم html مثل الروابط <a> والفقرات <p> والجدوال <table> , <td> , <tr> وجسم الصفحه <body>وغيرها.
Property : الخصائص التى سوف تتحكم من خلالها في الوسوم المختلفة وهى تنتهي بنقطتين [ : ].
Value : القيم المختلفة لكل خاصية فلكل خاصية مجموعة قيم تحددها وهى تنتهي بفاصلة منقوطة [ ; ].
Declaration block : المكان المحتوي على كل من الخواص والقيم ومن خلاله يتم التصريح ببدء العمل أو الفعالية ويبدأ وينتهي بأقواس معقوفة [ { } ].
طريقة كتابة الامر نفسها لا تفرق إن كتبت بهذا الشكل
PHP:
p { color:red; background-color: #333; }
أو هذا الشكل
PHP:
p {
color:red;
background-color: #333;
}
او كانت كذلك
PHP:
p
{
color:red;
background-color: #333;
}
ولكن لمزيد من التنسيق راعي أن تكون الأمر والخصائص مرتبه بشكل جيد حتى تتمكن بعد ذلك من التعديل عليها ومراجعتها بسهولة
 

programe

عضو جديد
9 ديسمبر 2008
2,002
4
0
http://joomlarab.net/lessons/lessons2.htmlتعريف لكل من class , id وماهو الفرق بينهم​
class و id هى الفئات و المعرفات الأساسية التى توضع بداخل أوسمة html حتى تتعرف على أوامر css المختلفة .. وهى تعرف نظريا بـ
id معرّف يتم تحديدة ويمكن أن يندرج تحته عنده فئات ، وتعرّف بوضع علامة [ # ] قبلها ويمكن أن تضع لها اى اسم ، ويتم تطبيقه على عنصر واحد فقط داخل الصفحه .
class الفئات وهى يمكن أن تتكرر اكثر من مرة بنفس الصفحة على عكس المعرّفات id ، وتعرّف بوضع نقطه [ . ] قبلها ويمكن أن تضع لها أي إسم. وتعال نوضح ذلك بالتفصيل مباشرة مع الأمثلة التالية :
PHP:
 #ahmed {
	background-color: #ccc;
	padding: 10px;
}
.you {
	color: green;
	font-size: 12px;
}[B]الفئات class[/B]

ويضاف الـ class ويوضع بالصيغه التالية داخل أوسمة html المختلفة
<p class="you">الفئات يمكن تتكررها بنفس الصفحة</p>تابع معى المثال التالي متعدد الفقرات..
<!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" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS الأنماط الإنسابية</title>

<style type="text/css">
<!--
p.blue { color:blue; }
-->
</style>

</head>
<body>

<h1 class="blue">فوائد إستخدام الأنماط الإنسابية</h1>
<p class="blue">فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد</p>
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p>
<p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p>

</body>
</html>
المثال يحتوى على 3 فقرات وعنوان واحد وقمت فيه بوضع فئه جديد بإسم blue تحتوى على أمر تلوين وطبقتها على فقرتين منهم والعنوان ـ وإن شاهدها على المتصفح ستظهر لك هكذا ..
css04.gif

لاحظ تم تلوين الفقرتين الأولى والثانيه كما جاء فى امر تلوين الـ css ولكن العنوان لم يتم تلوينه مع انه أخذ تعريف لنفس الفئه !؟ .. السبب هنا اننا حددنا الوسم p قبل الفئه ولهذا لا تتعرف تلك الفئه ويتم تنفيذ ما بداخلها الا إذا كانت بداخل الفقرة او الوسم p “الأمر نفسه مع كل أوسمه html إذا تم تحدديها قبل الفئه”
PHP:
p.blue { color: blue; }
وفى حالة ان اردت تطبيق نفس الفئه على العنوان علينا الا نحدد قبل الفئه الوسم الذى نريد التطبيق عليه ـ وبهذا يمكننا بحريه تطبيقها على كافة الأوسمة وباكثر من مكان بنفس الصفحة .
PHP:
.blue { color: blue; }
المعرّفات id

المعرفات id لها نفس قواعد الفئات class ولكن مع إختلاف ان المعرف يتم تطبيقه مرة واحده فقط في الصفحه أى لا يمكنك تطبيق نفس المعرّف على أكثر من وسم بذات الصفحه .. وشاهد معي نفس المثال السابق ولكن مع إضافة معرف جديد خاص بالعنوان
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" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS الأنماط الإنسابية</title>

<style type="text/css">
<!--
p.blue { color:blue; }
h1#red { color: red; }
-->
</style>

</head>
<body>

<h1 id="red">فوائد إستخدام الأنماط الإنسابية</h1>
<p class="blue">فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد</p>
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p>
<p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p>

</body>
</html>
وبالمتصفح تم تطبيق أمر التلوين على العنوان h1 فقط كما تشاهد هنا بدون التأثير على البقيه ، وغالبا مانستخدم المعرّفات id في تحديد الهيدر او الفوتر للصفحه او للعناوين الفريدة مثلا ومن داخله نضع فئات class
css05.gif
 

programe

عضو جديد
9 ديسمبر 2008
2,002
4
0
تسلسل الأوسمه ‘إضافة قيم css خاصة لأوسمة معينة’


في هذا الدرس سنعرّف مايسمى بتسلسل الأوسمه داخل css ، وهى طريقة مميزة جدا لتطبيق الأنماط داخل أوسمة معينه في الصفحة وذلك عندما تقتضي الحاجة الى تقليل عدد الفئات class الكثيرة وكذلك لتمييز كلمات معينه بداخل الفقرات الطويلة والعناوين وغيرها الكثير.
وللتوضيح أكثر ساضرب لك مثال بالفقرة التالية :
PHP:
<h2>cascading <em>style</em> sheets</h2>
<p>تقنية <em>تهتم بتحديد شكل وتصميم المواقع</em> بمرونه وسهولة تامة</p>
فقرة واحده وعنوان لها وبداخل كل منهم اضفت وسم em حتى يظهر الخط المحدد بينها مائل .. الان أنا أريد عن طريق css ان أجعل الكلمات المائله فقط بلون معين او بخط معين مثلاً وهذا هو التسلسل الذى اتكلم عنه.
css06.gif

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" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS الأنماط الإنسابية</title>

<style type="text/css">
<!--
h2 em { color : red; }
p em { color : green; }
-->
</style>

</head>
<body>

<h2>cascading <em>style</em> sheets</h2>
<p>تقنية <em>تهتم بتحديد شكل وتصميم المواقع</em> بمرونه وسهولة تامة</p>

</body>
</html>

المثال السابق يتضح عبر الرسم التالي
css07.gif

ويظهر على المتصفح بالشكل التالي
css07b.gif

اخيراً تسلسل الأوسمة لها نفس القواعد في حالة تطبيقها على المعرّفات id# والفئات class. لا يوجد إختلاف، بل يمكنك عمل تحكمات أكثر بالأوسمة لو أرتبطت بمعرّف ما
 

programe

عضو جديد
9 ديسمبر 2008
2,002
4
0
المجموعات ‘التطبيق على أكثر من وسم وفئة بنفس الوقت’

المجموعات تستخدم للإنجاز في العمل بمعنى أن لو كان لديك أكثر من "فئة" أو "معرّف" أو "وسم" بالصفحة مشتركين في نفس أوامر css من خصائص فبدلاً من تقوم بكتابة كل منهم بشكل مستقل يتم تجميعها لتأخذ نفس القيم وتتخذ الشكل التالي مع الفصل بين كل وسم والآخر بفاصلة.
PHP:
h1, h2, h3, h4, h5, h6 {
font-family: Arial; margin: 0;
}

هناك أخطاء يجب ألا تقع فيها عند التطبيق على المعرّفات id أو الفئات class ولها علاقة بالدرس السابق الخاص بتسلسل الأوسمة فإن أردت مثلا تطبيق نفس الخصائص على الوسم <ul> والوسم <p> بداخل معرّف معين لا تضعه هكذا
PHP:
#ahmed p, ul {
color: #F00; padding: 10px; margin: 0px;
}

الصحيح ان يكتب هكذا
PHP:
#ahmed p, #ahmed ul {
color: #F00; padding: 10px; margin: 0px;
}

هناك خطأ آخر يجب الا تقع فيه وهو وضع فاصلة أو نسيانها بنهاية الكود هكذا لانه ذلك يجعل المتصفح يتجاهل الأمر
PHP:
.you p, .you ul, {
padding: 10px; margin: 0px;
}
مثال يحتوى على 3 فقرات وعنوانين مطبق على فقرتين منهم فئه تحتوى على أمر تلوين وعلى عنوان واحد معرّف أيضا للتلوين
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" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS الأنماط الإنسابية</title>

<style type="text/css">
<!--
p.blue { color: blue; }
h1#red, p, h3 { color: red; }
-->
</style>

</head>
<body>

<h1 id="red">فوائد إستخدام الأنماط الإنسابية</h1>
<h3>إحتراف ـ مرونة ـ سهولة</h3>
<p class="blue">فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد</p>
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p>
<p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p>

</body>
</html>

شاهد على المتصفح ..
css07c.gif

تم تلوين العناوين كما طلبنا من الأمر باللون الأحمر ولكنه لم يلون كل الفقرات بل قام بتلوين آخر فقرة فقط !! السبب فى ذلك ان الفقرتين باللون الأزرق يحتوى كل منهم على فئه class تحدد لكل منهم بشكل خاص لون معين ولهذا لا تتأثر عندما وضعنا الوسم <p> وحده وظهر اللون فقط على الفقرة <p> الاخيرة التى لا تحتوي على أي فئات class .. إذن يمكننا القول ان مجموعات الفئات والأوسمة تطبق فقط في حاله إن كان الوسم لا يتحتوى على فئه أخرى تعطى له أمر آخر
 

programe

عضو جديد
9 ديسمبر 2008
2,002
4
0
الأوسمة والعناصر ـ وكيفية التحكم بعرضهم


جميع أوسمة html تتخذ لنفسها وتظهر إفتراضياَ على شكل واحدة من 3 طرق تالية :
Block: يفصل كل عنصر بشكل مستقل عموديا واحد تلو الآخر ويترك قبلة وبعده سطر أي أن الوسم الذى ينتمي لهذه المجموعة سيكون مابداخله عبارة عن كتله واحده في سطر مستقل ممتد العرض.
Inline: يتخذ له عرض حسب مايحتوي فقط ودون أن يظهر بسطر مستقل .
Not displayed: لاتظهر على المتصفح مثال على ذلك أوسمة <style>و </ meta>

وقبل أن نعرض الأمثلة تابع معي الصورة التاليه للتوضح عن الوسم وما هو مجال العناصر
css09.gif
Block Elements

يمكن لهذا العناصر أن تحتوى بداخلها عناصر inline elements علاوة عن عناصر من نفس فئتها ، أوسمة تنتمى الى block elements
PHP:
<div>
صناديق تقسم المحتوى
<h1> ... <h6>
جميع العناوين
<p>
الفقرات
<ul>, <ol>, <dl>
القوائم المسلسلة والغير مسلسلة والقوائم المعنونة
<li>, <dt>, <dd>
بنود القوائم المسلسلة والغير مسلسلة والقوائم المعنونة
<table>
الجدوال
<blockquote>
الإقتباس ولتنسيق الفقرات ويترك مسافات بين جانبي الفقرة
<pre>
يحتفظ بالمسافات والتنسيق الأصلي للأكواد كماوردت في برامج التحرير
<form>
النماذج

كيف يظهر على المتصفح ..
PHP:
<p>أنا الأن أكتب فقرة</p><p>ولكن هذه فقرة جديدة</p>
css012.gif
Inline Elements

وهى لا يمكن أن تحتوى على عناصر من block elements فقط يمكن أن تحتوى بداخلها على عناصر من نفس فئتها ، أوسمة تنتمى الى inline elements
PHP:
<span>

<a>
الوصلات
<strong>
السمك أو تقوية الخط
<em>
تأكيد النص أو تركيزة وعادة يظهر بشكل مائل
<img />
صورة
<input>
مدخلات ازرار أو حقل نص
<abbr>
إختصار CSS
كيف يظهر على المتصفح ..
PHP:
<p>
ماهى الأنماط الإنسابية ؟
<span>تقنيه تساعدك</span>
<strong>على إدارة صفحات موقعك</strong>
</p>

css013.gif

وهنا نجد توضيح لكل من block و inline
css010.gif
تغير طريقة العرض من Block الى Inline والعكس

ذكرت في بداية الموضوع أن الوسوم طبيعياَ في html لها 3 أشكال للظهور ـ ولكن في نفس الوقت أنت يمكنك أن تغير في هذه الطريقة حسب إحتياجات موقعك عن طريق أكواد css وبالتحديد بواسطة الأمر display وتتفرع منه عده خصائص وما يهمنا منها الأن:
css011.gif

وستتعرف لاحقاً كيف يتم إستخدمها مع الأوسمة وخاصة بكثرة مع القوائ
 

programe

عضو جديد
9 ديسمبر 2008
2,002
4
0
تعريف للوسوم span , div والفرق بينهم

حديثي بهذا الدرس عن وسم هو الأكثر شيوعاً في الإستخدام وجزء لا يتجزأ عندما تريد توزيع وتخطيط صفحتك عن طريق css
الوسم <div>

أحد أوسمه لغه html وهو إختصار للكلمة Division وتعنى تقسيم او توزيع ـ وعموما يستخدم هذا الوسم في الصفحات التى تعتمد في التنسيق على css لتقسيم الصفحات بدلاً من الجدوال ويكون بهذا الشكل لو حددنا به فقرة مثلا..
PHP:
<div>
<p>مرحبا بكم</p>
</div>
ويصنف ضمن عناصر الـ Block Elements ويتميز ان المتصفح يفهمه بسرعه ويعرض محتوياته مباشرة بدون إنتظار تحميلة بالكامل عكس الجدوال بالإضافة انك يمكنك التحكم بكل div بشكل منفصل وتعطى لها خصائص عرض خاصة.
تابع فى هذا المثال ـ يوجد 3 فقرات وقد وضعت فئه class لإثنين منهم بإسم blue معرّف بها لون للخط أزرق والفقرة الأخيرة بدون ـ ثم قمت بوضع وسم <span> جديد يحتوى على الـ 3 فقرات وبه class آخر يحتوى على العرض الكلي ولون للخط أحمر وكذلك لون للخلفية.
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" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
p.blue { color: blue; }
.test { color: red; background: #CFEDFC; width:300px; }
-->
</style>
</head>
<body>
<div class="test">
<p class="blue">فصل محتويات الموقع عن التصميم</p>
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات</p>
<p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p>
</div>
</body>
</html>
شاهد على المتصفح ..
css014.gif

اريدك الأن أن تلاحظ كيف أن عرض الـ div قد ظهر تأثيرة على الـ 3 فقرات وكذلك لون الخلفية .. تم تطبيق أمر التلوين الموجود بـ class الـ div المسمى بـ test على آخر فقرة فقط بينما الفقرتين الأخريين لم يطبق عليهم … والسبب يرجع الى ان الفقرات لها تعريف خاص بها بأمر تلوين أخر ولن تستجيب لأى تعديل بالـ div راجع درس مجموعات الأوسمة.
الوسم <span>

الوسم أحد اوسمه لغه html ـ والأكثر إستخدما وشيوعاً مع الصفحات الإنسابيه css وغالباً مايستخدم فقط في النصوص لتحديد نص مثلا او للتلوين او لتميزية في فقرة مــا والصيغه تكون بهذا الشكل لو وضعنها بداخل فقرة.
PHP:
<p>مزيد من<span>الإحترافية والسهولة</span>لتصميم المواقع</p>
والوسم يصنف ضمن عناصر الـ Inline Elements لذا لن تجد اى أختلاف او إنحراف على الفقرة لو اضفت الوسم <span> لكلمه أو جمله منها.
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" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
p.blue { color: blue; }
.test { color: red; background: #CFEDFC; width:300px; }
.in { color: #00CC33; }
-->
</style>
</head>
<body>
<div class="test">
<p class="blue">فصل محتويات الموقع عن التصميم</p>
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات</p>
<p>إضافة مزيد من <span class="in">الأحترافية والسهولة</span> لتصميم المواقع</p>
</div>
</body>
</html>
شاهد على المتصفح ..
css015.gif

كما ترى تم تطبيق أمر التلوين الموجود بـ class الموجود بداخل span على الكلمة المحاطة بها فقط دون التأثير على الأخرى ، ومن هذا يمكننا أن نستخدم ونستفيد من ذلك في العديد من التطبيقات داخل الفقرات بسهوله تامة وإحتراف.
 

programe

عضو جديد
9 ديسمبر 2008
2,002
4
0
الألوان في css وطرق التعامل معها

الألوان في CSS وطرق التعامل معها

تُقسم الألوان في css الى ألوان خطوط "foreground color" وخلفيات "background-color" ويتم تعريف اللون في كل مهم بـ 4 طرق مختلفه .. وسابقاً بـ html في حالة تلوين كلمات داخل الفقرات كنا نضع وسم جديد وهو <font> بين الكلمات المراد تلوينها كما تشاهد هنا :​

PHP:
<p>
PHP:
[center][b][color=#13568A]<font color="#FF0000">[/color][/b]
[b][color=#13568A]يتم تعريف اللون في css بـ 4 طرق مختلفه[/color][/b]
[b][color=#13568A]</font>[/color][/b]
[b][color=#13568A]</p>[/color][/b][/center]

وعندما نريد وضع لون لخلفيه الصفحه كنا نضعها بهذا الشكل داخل الوسم <body>
PHP:
<html>
PHP:
[center][b][color=#13568A]<body bgcolor="#CCCCCC">[/color][/b]
[b][color=#13568A]<p> [/color][/b]
[b][color=#13568A]<font color="#FF0000">[/color][/b]
[b][color=#13568A]يتم تعريف اللون في css بـ 4 طرق مختلفه[/color][/b]
[b][color=#13568A]</font>[/color][/b]
[b][color=#13568A]</p>[/color][/b]
[b][color=#13568A]</body>[/color][/b]
[b][color=#13568A]</html>[/color][/b][/center]

وهذا الامر مرهق لاننا فى كل مرة نريد فيها تلوين جمله أو كلمه ما علينا الذهاب اليها والتلوين عن طريق الوسم <font> علاوة اننا نحدد في كل صفحه لونها .
.. اما داخل css كما تعلمنا يمكننا نطبق الأمر الواحد على كل الفقرات او فقرات محدده فقط ـ أمر اللون سهل جدا وكل ماعليك ان تكتبه فقط بهذا الشكل color راجع الدرس التالي لتتذكر الصيغه العامه لكتابه أكواد css واللون طريقه تعريقه تقسم الى 4 صيغ كما نوهنا بالشكل التالي:
attachment.php

- color keyword وفيها يتم تعريف اللون بأسمه وعدد الالوان المعروفه هم 17 فقط كالتالي :
PHP:
aqua, black, blue, fuchsia, gray, green, lime, maroon
PHP:
[center]navy, olive, orange, purple, red, silver, teal, white
and yellow.[/center]

ويكتب هكذا..
PHP:
p { color: green; }
كذلك يمكننا ان نجعل الخلفيه شفاشه عن طريق كتابه transparent فهو صالح ايضا.
2- #rrggbb الطريقه المعتادة لوضع اللون وهى تسمى Hexadecimal سداسي عشري وتبدأ بعلامة هاش (#) وبعد ذلك تكتب القيمه المكونة من 6 ارقام او حروف هكذا :
PHP:
p { color: #00FF00; }
وهذه الطريقه ايضا يمكن ان تختصر فبدلا من كتابه 6 أرقام او حروف تختصر فقط الى 3 ارقام كما بالأمثله التاليه :
PHP:
color: #00FF00; ››› color: #0F0;
PHP:
[center]color: #FF0000; ››› color: #F00;
color: #0000FF; ››› color: #00F;[/center]

لاحظ كيف تم الأختصار ـ وهذه الطريقه توفر عليك الحفظ ـ ولاكنها ايضا رغم ذلك لا تناسب تدرجات الالوان المختلفة.
3- rgb(rrr,ggg,bbb) وهى تحدد عن طريق القنوات rgb وذلك بوضع قيمه لكل منهم تبدأ من 0 الى 255.
PHP:
p { color: rgb(0,255,0); }
4- rgb(rrr%,ggg%,bbb%) وبنفس الصيغه السابقه يمكن ان تحدد القيمه بالنسب المئوية.
PHP:
p { color: rgb(0%,100%,0%); }
إذن يمكن القول أن اللون يمكن ان يعرّف بـ4 صيغ مختلفه كلها تؤدي نفس الغرض.
كما حددنا بالأمر السابق color يبقى لنا تلوين الخلفيات وتكون عن طريق الامر background-color والخواص وطريقه كتابه الاوامر لن تختلف فقط ماتغير هو الأمر والذى من خلاله يمكننا تلون خلفيات الصفحات او الأوسمه بسهوله ..
PHP:
p { background-color: transparent; }




 

المرفقات

  • 1.jpg
    1.jpg
    16.5 KB · المشاهدات: 1,822

programe

عضو جديد
9 ديسمبر 2008
2,002
4
0
رد: Layout التخطيط ـ شرح للـmargin, padding, border

Layout التخطيط ـ شرح للـmargin, padding, border

Layout وتعنى التخطيط او تقسيم الصفحات، وقبل ان نبدأ لابد من تذكر كيف كان يتم التخطيط في html .. فعندما كنا نريد تخطيط الموقع كنا نعتمد إعتماد كلي على الجدوال في ذلك وبالشكل الذى نراه مناسب، ولكن بعد أن ظهرت المتصفحات التى تدعم المعايير القياسيه مثل Firefox بشكل سليم ومتوافق مع منظمة الويب التى تدعو للإستغناء عن الجداول في التصميم والتحول الى css الى جانب الكثير من المواقع والمنظمات التى تدعو لإتباع المعايير القياسية في التصميم، كانت الحاجه للإستخدام طريقه جديدة في التخطيط اكثر مرونه وسهوله توافق المعايير القياسية وتظهر بشكل سليم على كافه المتصفحات.
ولمعلوماتك الجداول عندما ظهرت أول مرة في html كانت لغرض واحد فقط هو عرض البيانات المجدولة كالإحصائيات، ثم بعدها ظهرت خاصيه إخفاء الحدود <table border="0"> وإستعان بذلك المصممون وإستخدمت الجداول بشكل جديد وادرج فيها الصور والرسوم…الخ ولازالت حتى اليوم تستخدم الجدول بشكل كبير في التخطيط وبالمواقع التى تستخدم الصور بشكل كبير.
لن أفرد أكثر من ذلك حول عيوب التصميم عن طريق الجدوال ومزيا الطرق الحديثه لنعطي المجال أكثر حول التطبيق ولكن أنصحكم بزيارة هذه الصفحه "الطريق إلى تصاميم خالية من الجداول" فهى تتكلم عن المزايا والعيوب.
حديثنا اليوم يتلخص في الصورة التاليه :
css0016.gif

وهو تخطيط يوضح شكل الصفحه وحدودها
content edge: المحتوى وهو كل ماتحويه الصفحه من نصوص او صور …الخ وتحيط بها البطانة من كافة الجوانب.
padding edge: وهى البطانة وتحيط بها الحدود من كامل الجهات ، لتترك مسافة بين الجسم والمحتوى الداخلي ـ وإذا تم تعينها الى 0 سوف يلتصق محتوى الصندوق بالحافة ( وهو بدايه الهامش ) بدون اى فرغات.
border edge: الحدود وتحيط بها الهوامش او الحواف من كافة الجهات ـ وإذا تم تعينها الى صفر 0 يبقى فقط منها حافة البطانة وبدون أثر.
margin edge: الهوامش أو الحواف عندما تحدد يظهر هذا الهامش بين التصميم وبين حافة الصفحه داخل المتصفح ـ وفي حاله تعيين هذه الهوامش الى صفر 0 سوف يلتصق التصميم بكامل صفحه العرض وما نطلق عليه التصميم المتمدد بكامل الصفحه.
وبالامثلة سنوضح الان الـ margin و padding
css017.gif

كما شاهدت فالـ margin إذا حُددت لأحد عناصر الصفحه ستكون هى المساحه التى تحيط بالصندوق من كافة الجهات وتفصلها عن بقيه العناصر الأخرى ـ ويعرّف داخل css و يكتب بالشكل التالي :


attachment.php

:​
PHP:
#new { margin: 10px 10px 5px 10px; }
/* OR */
#new {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
/* OR */
#new { margin: 10px 10px 5px; }

/*******************************************/

#new2 { margin: 10px 10px 10px 10px; }
/* OR */
#new2 { margin: 10px; }
اما الـ padding عند تحدديها تكون هى المساحه الداخلية التى تحيط بالمحتوى لتفصل بينه وبين الجسم.
css018.gif

وتعرّف الخاصية داخل css و تكتب بالشكل التالي

attachment.php

PHP:
#new { padding: 10px 10px 5px 10px; }
/* OR */
#new {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
/* OR */
#new { padding: 10px 10px 5px; }

/*******************************************/

#new2 { padding: 10px 10px 10px 10px; }
/* OR */
#new2 { padding: 10px; }
نأتي الأن الى الـ border وهى الحدود ـ وتعيين عن طريق 3 خواص فرعية لها (السمك ـ النمط او شكل الحد ـ اللون)
- border-width السمك ويعين بالشكل التالي:
css019.gif

ويعرّف داخل css ويكتب هكذا

attachment.php

PHP:
#new { border-width: 10px 10px 5px 10px; }
/* OR */
#new {
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 5px;
border-left-width: 10px;
}
/* OR */
#new { border-width: 10px 10px 5px; }

/*******************************************/

#new2 { border-width: 10px 10px 10px 10px; }
/* OR */
#new2 { border-width: 10px; }
- border-color اللون ولن يختلف في طريقة الكتابة عما سبق راجع فقط الدرس السابق لتتذكر خواص الألوان في css
- border-style وهو شكل الحد نفسه وما يلي جميع الأشكال التى يمكن ان تجدها في css2
css020.gif

وتكتب ايضا داخل css بنفس القواعد السابقة والإختصارات.
إذن ومما سبق فعند الطبيق على أحد العناصر يجب ان نحدد ( السمك واللون والشكل ) والكود النهائي يصبح بهذا الشكل:
PHP:
#new {
border-style: solid;
border-width: 5px;
border-color: red;
}
/* OR */
#new {
border-top-style: solid;
border-top-color: red;
border-top-width: 5px;
border-right-style: solid;
border-right-color: red;
border-right-width: 5px;
border-bottom-style: solid;
border-bottom-color: red;
border-bottom-width: 5px;
border-left-style: solid;
border-left-color: red;
border-left-width: 5px;
}
ولكن لاحظ ان الكتابة بهذا الشكل غير عملية وتجعلنا نكتب الكثير من الأوامر ـ ولهذا توجد طريقة أخيرة مختصرة تجعلنا ندمج 3 خصائص في سطر واحد هكذا:
PHP:
#new { border: 5px solid red; }
وبنفس الوقت يمكن ان تحدد لكل طرف سمك وشكل معين كما بالكود التالي :
PHP:
#new {
border-top: 20px solid red;
border-right: 10px solid red;
border-bottom: 2px solid red;
border-left: 7px solid red;
}



وبهذا تنتهى الدورة عسى ان تكون قد افادت كل مستخدم عربى ل جومــلا

حتى يعطى كل ذى حق حقه

هذه الدورة ليست من صنعنا ولكن منقولة للافاده فقط
 

المرفقات

  • 1.jpg
    1.jpg
    31.9 KB · المشاهدات: 1,880
  • 2.jpg
    2.jpg
    30.1 KB · المشاهدات: 1,909
  • 3.jpg
    3.jpg
    37.2 KB · المشاهدات: 1,896

mjrem

عضو جديد
4 أكتوبر 2009
1
0
0
الله يعطيك العافيه

نفسي اتعلم هالتقنيه بس احس انها صعبه وانا ما اعرف لل html

احس بقهر :(

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