مناقشة / CSS (الدرس الثاني) : الألوان والخلفيات والروابط

زهرة البيلسان · 05-10-2009, 11:35 PM

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

سنناقش هنا الدرس الثاني من الـ CSS

رابط الدرس /
http://forum.ma3ali.net/t396562.html

بسم الله ..

سَـنَـــا · 06-10-2009, 12:22 PM

"

دروس سهلة الحمدلله . .

س1 /متى يتم إستخدام الفئات classes و متى يتم إستخدام المعرفات id ? (مالفرق)

classes يستخدم لتنسيق أكثر من عنصر . .

id يستخدم لتنسيق عنصر واحد فقط . .

السؤالين الأخيرة ماعرفت لها . . !

بأرجع للدروس مرة ثانية يمكن أعرف . .

لي عودة . .

"

نُورة يحيَى · 06-10-2009, 10:43 PM

وصلت لدرس الألوان والخلفيات ..
مآ قدرت أكمّل ..
أبكمل الدرس بكرآ <~~ برآآآ ..

هذا اللي إستفدته من الدروس ..

علشآن نستخدم طريقة ملف style.css ( التنسيقات خارج ملف الهتمل )
نكتب في صفحة الـ .html
بين <head> و </head>

كود PHP:

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

وعلشان نتحكم في تنسيقات كلّ وسم نكتب كذا بملف الـ .css

مثال :

كود PHP:

   
body {

    background-color: #FFCC66;

}

 
h2 {

    color: #000000;

}

^

لأول مرة أتفسلف ذذ ..

* أبحلّ الواجب بكرا لأن نص عيوني نوم ولا قدرت أكمل الدروس ..

عاليا · 07-10-2009, 04:30 AM

السلام عليكم

:: الواجب ::

س1 /
متى يتم إستخدام الفئات classes و متى يتم إستخدام المعرفات id ? (مالفرق)

class : لتفعيل انماط ما على مجموعة من العناصر
id : لتحديد انماط معينة لعناصر مختارة
الفرق : لا يمكن لعنصرين استخدام معرف واحد فى نفس الملف بعكس الفئات فممكن جمع اكثر من عنصر وتفعيل نفس الانماط عليهم

س2/
مالفريق بين أشباه الفئات التاليـة :

active: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) *
focus: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) *

The active pseudo class : تطبيق نمط على العنصرخلال ضغط المستخدم عليه ويظل هذا النمط على العنصر حتى ان انتقل المستخدم فى اى مكان اخر بالصفحة

The focus Pseudo Class : تطبيق نمط على عنصر نشط وبعد ان ينتقل المستخدم لاى مكان اخر بالصفحة يزول تاثير هذا النمط عن العنصر

س3/
أشرح عمل شبه الفئة التالية :
first-child

first-child and : يستخدم لتحديد نمط خاص لعنصر اول فى عنصر يحتوى على عنصرين او اكثر ولن يعمل الا بوجود الاعلان فى اول الصفحة <!DOCTYPE>

مثال :

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<style type="text/css">
input:first-child 
{ 
  color: white; 
  background-color: blue; 
} 

</style>
 </head> 
  <body> 
    <form> 
      <input type="text" /> 
      <p></p> 
      <input type="text" /> 
    </form> 
  </body> 
</html>

هذا ما استطعت ان افهمه بعد قراءة الدروس وبحث فى بعض المواقع المتخصصة فى هذه اللغة واثناء بحثى وجدت ايضا تعريف ل last-child وهو عكس تعريف first-child وحاولت تجربة الاثنان معا لكن ما ظبط لا اعرف لما ؟

هذا هو

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<style type="text/css">
input:first-child 
{ 
  color: white; 
  background-color: blue; 
} 
input:last-child 
{ 
  color: white; 
  background-color: red; 
} 
</style>
</head>

<body>
<form> 
      <input type="text" /> 
      <p>
</p> 
      <input type="text" /> 
    </form> 
</body>
</html>

سَـنَـــا · 07-10-2009, 05:45 AM

"

تطبيقي

ملف الـ css

ماكان في بالي كلام فنسخت الدرس الأول . .!

عندي لنبدأ . .

مسويتها بهذه الطريقة . .

كود:

<p id="1">لنبدأ!</p>

وفي ملف الـ css

كود:

#1 {
 font : bold 20px Traditional Arabic,Aril,Tahoma," Time New roman ",serif ;
  color : #B8D152 ;
}

ماعرفت ليش ماضبط . . !

"

نُورة يحيَى · 07-10-2009, 01:40 PM

س1 /
متى يتم إستخدام الفئات classes و متى يتم إستخدام المعرفات id ? (مالفرق)

classes تستخدم لـ كم عنصر بمجرد أنّي أكتب كوده في ملف الـhtml ..
أما معرف id يستخدم مرة واحدة ولا يمكن إستخدامه مرة ثانية في هذه الصفحة ..

س2/
مالفريق بين أشباه الفئات التاليـة :

active: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) *
focus: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) *

اللي أعرفه ..
active فئة مزيّفة يظهر لون للخلفية أثناء الضغط على الكلام ..
أما focus مآ فهمته ..

س3/
أشرح عمل شبه الفئة التالية :
first-child

مآ فهمته ..

نُورة يحيَى · 07-10-2009, 01:42 PM

^

أختي سنا
إستخدمتي المعرف من قبل في نفس الصفحة ؟

سَـنَـــا · 07-10-2009, 10:06 PM

"

لا مااستخدمته . .

"

زهرة البيلسان · 08-10-2009, 02:18 AM

سنا /
ننتظر باقي الإجابات =)

كيوكو /
جيّد ..
أكملي فلسلفة =)
فهي نقاط ملخصة و مهمة للبقية ..

عالية /
أحسنتِ ,

بالنسبة للـ first-child و last-child
طبقتي كل واحد بمفرده و ضبط ؟

كيوكو /

active = إذا كان العنصر عليه تأثير لأنه منشّط يستمر هذا التأثير حتى لو انتقلنا عن هذا العنصر ..
أما focus = فالتأثير يُزال بمجرد الانتقال و الابتعاد عنه ..

سأعود للبقيّة ..

زهرة البيلسان · 08-10-2009, 02:22 AM

سنؤجل الدرس القادم قليلاً حتى يتم التطبيق و إتمام مناقشة هذا الدرس ..

نُورة يحيَى · 08-10-2009, 12:07 PM

كيوكو /

active = إذا كان العنصر عليه تأثير لأنه منشّط يستمر هذا التأثير حتى لو انتقلنا عن هذا العنصر ..
أما focus = فالتأثير يُزال بمجرد الانتقال و الابتعاد عنه ..

آهآ .. فهمت

باقي السؤال الثالث أببحث عن إجابته ..

نُورة يحيَى · 08-10-2009, 12:10 PM

^

سنآ ..
همممم .. طيّب جرّبي تغيرين أسم المعرف لحروف

سَـنَـــا · 08-10-2009, 08:15 PM

"

كيوكو إن شاء الله أجرب . .

س2/
مالفرق بين أشباه الفئات التاليـة :

active: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) *
focus: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) *

active يتوقف التأثير بإنتهاء فترة الضغط عليه . .
focus التأثير لايتوقف حتى مع توقف الضغط عليه . .

س3/
أشرح عمل شبه الفئة التالية :
first-child

يطبق التأثير على العنصر الأول فقط . .

"

عاليا · 09-10-2009, 07:27 AM

المشاركة الأصلية كتبت بواسطة زهرة البيلسان

بالنسبة للـ first-child و last-child
طبقتي كل واحد بمفرده و ضبط ؟

[

السلام عليكم

بارك الله فيكِ زهرة

ظبط معى first-child لوحده

و ما ظبط last-child كمان لوحده بس بدى اعرف هل ما ظبط عندى بس ولا الكود اللى حطيته ناقص شى

سَـنَـــا · 09-10-2009, 02:19 PM

"

كيوكو . .

ضبط =) . .

"

نُورة يحيَى · 09-10-2009, 05:19 PM

^

حلو ..

======

فهمت السؤال الثالث يعني مثل هذا المثال :

كود PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html>

<head>

<style type="text/css">

p:first-child

{

color:blue;

} 

</style>

</head>

 
<body>

<p>This is some text.</p>

<p>This is some text.</p>

<p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p>

</body>

</html>

على الفقرة الأولى

نُورَان ، · 10-10-2009, 01:45 AM

صباحكم css !

س1 /
متى يتم إستخدام الفئات classes و متى يتم إستخدام المعرفات id ? (مالفرق)

classes لتفعيل مجموعة تنسيقات على عنصر أو مجموعة عناصر .
id تستخدم مرة واحدة فقط أي لا يمكن أن يكون هناك عنصرين لهما نفس " المعرف " id في نفس الصفحة .
يمثل محدد id العلامة # في ملف css .

س2/
مالفريق بين أشباه الفئات التاليـة :

active: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) *
focus: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) *
active تصف الرابط بأنه نشيط !
focus ما فهمته إلى الآن !
اللي عرفته عنها أنه لا تعمل في internet explorer .

س3/
أشرح عمل شبه الفئة التالية :
first-child
1. لا تعمل إلا بوجود الإعلان في أعلى الصفحة <!DOCTYPE> .
2. تضيف ستايل خاص للعنصر الأول .

عالية
جربت last-child ما ضبطت معاي !

نسمـة فجـر · 10-10-2009, 03:25 PM

:: الواجب ::
س1 /
متى يتم إستخدام الفئات classes و متى يتم إستخدام المعرفات id ? (مالفرق)

تستخدم الـ classes
لتقسيم العناصر إلى مجموعات تحمل خصائص محددة
ويستخدم أكثر من مرة

ويستخدم الـ id

لتحديد معرف خاص لعنصر محدد
ومايستخدم الا مره واحده
س2/
مالفريق بين أشباه الفئات التاليـة :

active: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) *
focus: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) *

تستخدمان للعنصر المنشط
إلا أن active:
يبقى التأثير على العنصر حتى لو أبتعد مؤشر الفأرة عن الرابط.

أما focus:
ينتهي التأثير بمجرد إبتعاد مؤشر الفأرة عن الرابط.

س3/
أشرح عمل شبه الفئة التالية :
first-child

اللي فهمته أنها ماتأثر الا على العنصر الاول

عاليا · 11-10-2009, 03:59 AM

جربت last-child ما ضبطت معاي !

جزاك الله خيرا لهفة حنين

بجرب بكود اخر ونشوف باذن الله

نسمـة فجـر · 11-10-2009, 02:02 PM

تطبيق بسيط أتمنى يكون صح

هنــــــــــا


Ma3ali Tube	Be Happy	الجـوال	Ma3ali flickr	الغرفة الصوتية	البطاقات	الصـوتيـات	مركز التحميل	مجلة أجيال

06-10-2009, 10:43 PM	#3
نُورة يحيَى اوسمتي مجموع الاوسمة: 1	وصلت لدرس الألوان والخلفيات .. مآ قدرت أكمّل .. أبكمل الدرس بكرآ <~~ برآآآ .. هذا اللي إستفدته من الدروس .. علشآن نستخدم طريقة ملف style.css ( التنسيقات خارج ملف الهتمل ) نكتب في صفحة الـ .html بين <head> و </head> كود PHP: `<link rel="stylesheet" type="text/css" href="style.css" />` وعلشان نتحكم في تنسيقات كلّ وسم نكتب كذا بملف الـ .css مثال : كود PHP: `body { background-color: #FFCC66; } h2 { color: #000000; }` ^ لأول مرة أتفسلف ذذ .. * أبحلّ الواجب بكرا لأن نص عيوني نوم ولا قدرت أكمل الدروس ..
نُورة يحيَى اوسمتي مجموع الاوسمة: 1
1

07-10-2009, 04:30 AM	#4
عاليا مشرفة فريق التعلم الذاتي	السلام عليكم :: الواجب :: س1 / متى يتم إستخدام الفئات classes و متى يتم إستخدام المعرفات id ? (مالفرق) class : لتفعيل انماط ما على مجموعة من العناصر id : لتحديد انماط معينة لعناصر مختارة الفرق : لا يمكن لعنصرين استخدام معرف واحد فى نفس الملف بعكس الفئات فممكن جمع اكثر من عنصر وتفعيل نفس الانماط عليهم س2/ مالفريق بين أشباه الفئات التاليـة : active: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) * focus: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) * The active pseudo class : تطبيق نمط على العنصرخلال ضغط المستخدم عليه ويظل هذا النمط على العنصر حتى ان انتقل المستخدم فى اى مكان اخر بالصفحة The focus Pseudo Class : تطبيق نمط على عنصر نشط وبعد ان ينتقل المستخدم لاى مكان اخر بالصفحة يزول تاثير هذا النمط عن العنصر س3/ أشرح عمل شبه الفئة التالية : first-child first-child and : يستخدم لتحديد نمط خاص لعنصر اول فى عنصر يحتوى على عنصرين او اكثر ولن يعمل الا بوجود الاعلان فى اول الصفحة <!DOCTYPE> مثال : كود: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> input:first-child { color: white; background-color: blue; } </style> </head> <body> <form> <input type="text" /> <p></p> <input type="text" /> </form> </body> </html> هذا ما استطعت ان افهمه بعد قراءة الدروس وبحث فى بعض المواقع المتخصصة فى هذه اللغة واثناء بحثى وجدت ايضا تعريف ل last-child وهو عكس تعريف first-child وحاولت تجربة الاثنان معا لكن ما ظبط لا اعرف لما ؟ هذا هو كود: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> input:first-child { color: white; background-color: blue; } input:last-child { color: white; background-color: red; } </style> </head> <body> <form> <input type="text" /> <p> </p> <input type="text" /> </form> </body> </html>
عاليا مشرفة فريق التعلم الذاتي
1

07-10-2009, 01:42 PM	#7
نُورة يحيَى اوسمتي مجموع الاوسمة: 1	^ أختي سنا إستخدمتي المعرف من قبل في نفس الصفحة ؟
نُورة يحيَى اوسمتي مجموع الاوسمة: 1

08-10-2009, 12:10 PM	#12
نُورة يحيَى اوسمتي مجموع الاوسمة: 1	^ سنآ .. همممم .. طيّب جرّبي تغيرين أسم المعرف لحروف
نُورة يحيَى اوسمتي مجموع الاوسمة: 1

05-10-2009, 11:35 PM	#1
زهرة البيلسان	مناقشة / CSS (الدرس الثاني) : الألوان والخلفيات والروابط السلام عليكم ورحمة الله سنناقش هنا الدرس الثاني من الـ CSS رابط الدرس / http://forum.ma3ali.net/t396562.html بسم الله ..
زهرة البيلسان


منتديات مسلمة النسائية	مساحة إعلانيه

06-10-2009, 12:22 PM	#2
سَـنَـــا	" دروس سهلة الحمدلله . . س1 /متى يتم إستخدام الفئات classes و متى يتم إستخدام المعرفات id ? (مالفرق) classes يستخدم لتنسيق أكثر من عنصر . . id يستخدم لتنسيق عنصر واحد فقط . . السؤالين الأخيرة ماعرفت لها . . ! بأرجع للدروس مرة ثانية يمكن أعرف . . لي عودة . . "
سَـنَـــا	التعديل الأخير تم بواسطة سَـنَـــا ; 06-10-2009 الساعة 12:25 PM. سبب آخر: رد على سريع . . لي عودة بعد مراجعة الدروس مرة ثانية . .
1

07-10-2009, 05:45 AM	#5
سَـنَـــا	" تطبيقي ملف الـ css ماكان في بالي كلام فنسخت الدرس الأول . .! عندي لنبدأ . . مسويتها بهذه الطريقة . . كود: <p id="1">لنبدأ!</p> وفي ملف الـ css كود: #1 { font : bold 20px Traditional Arabic,Aril,Tahoma," Time New roman ",serif ; color : #B8D152 ; } ماعرفت ليش ماضبط . . ! "
سَـنَـــا
1

07-10-2009, 10:06 PM	#8
سَـنَـــا	" لا مااستخدمته . . "
سَـنَـــا

08-10-2009, 02:18 AM	#9
زهرة البيلسان	سنا / ننتظر باقي الإجابات =) كيوكو / جيّد .. أكملي فلسلفة =) فهي نقاط ملخصة و مهمة للبقية .. عالية / أحسنتِ , بالنسبة للـ first-child و last-child طبقتي كل واحد بمفرده و ضبط ؟ كيوكو / active = إذا كان العنصر عليه تأثير لأنه منشّط يستمر هذا التأثير حتى لو انتقلنا عن هذا العنصر .. أما focus = فالتأثير يُزال بمجرد الانتقال و الابتعاد عنه .. سأعود للبقيّة ..
زهرة البيلسان

08-10-2009, 02:22 AM	#10
زهرة البيلسان	سنؤجل الدرس القادم قليلاً حتى يتم التطبيق و إتمام مناقشة هذا الدرس ..
زهرة البيلسان

09-10-2009, 02:19 PM	#15
سَـنَـــا	" كيوكو . . ضبط =) . . "
سَـنَـــا

09-10-2009, 05:19 PM	#16
نُورة يحيَى اوسمتي مجموع الاوسمة: 1	^ حلو .. ====== فهمت السؤال الثالث يعني مثل هذا المثال : كود PHP: `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> p:first-child { color:blue; } </style> </head> <body> <p>This is some text.</p> <p>This is some text.</p> <p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p> </body> </html>` على الفقرة الأولى
نُورة يحيَى اوسمتي مجموع الاوسمة: 1
1

10-10-2009, 01:45 AM	#17
نُورَان ، الله كريم ❤	صباحكم css ! س1 / متى يتم إستخدام الفئات classes و متى يتم إستخدام المعرفات id ? (مالفرق) classes لتفعيل مجموعة تنسيقات على عنصر أو مجموعة عناصر . id تستخدم مرة واحدة فقط أي لا يمكن أن يكون هناك عنصرين لهما نفس " المعرف " id في نفس الصفحة . يمثل محدد id العلامة # في ملف css . س2/ مالفريق بين أشباه الفئات التاليـة : active: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) * focus: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) * active تصف الرابط بأنه نشيط ! focus ما فهمته إلى الآن ! اللي عرفته عنها أنه لا تعمل في internet explorer . س3/ أشرح عمل شبه الفئة التالية : first-child 1. لا تعمل إلا بوجود الإعلان في أعلى الصفحة <!DOCTYPE> . 2. تضيف ستايل خاص للعنصر الأول . عالية جربت last-child ما ضبطت معاي !
نُورَان ، الله كريم ❤	التعديل الأخير تم بواسطة نُورَان ، ; 10-10-2009 الساعة 02:17 AM.
1

10-10-2009, 03:25 PM	#18
نسمـة فجـر	:: الواجب :: س1 / متى يتم إستخدام الفئات classes و متى يتم إستخدام المعرفات id ? (مالفرق) تستخدم الـ classes لتقسيم العناصر إلى مجموعات تحمل خصائص محددة ويستخدم أكثر من مرة ويستخدم الـ id لتحديد معرف خاص لعنصر محدد ومايستخدم الا مره واحده س2/ مالفريق بين أشباه الفئات التاليـة : active: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) * focus: وهو خاص بعنصر الروابط a و هو يخص الرابط النشيط ( أي فترة الضغط عليه ) * تستخدمان للعنصر المنشط إلا أن active: يبقى التأثير على العنصر حتى لو أبتعد مؤشر الفأرة عن الرابط. أما focus: ينتهي التأثير بمجرد إبتعاد مؤشر الفأرة عن الرابط. س3/ أشرح عمل شبه الفئة التالية : first-child اللي فهمته أنها ماتأثر الا على العنصر الاول
نسمـة فجـر	التعديل الأخير تم بواسطة نسمـة فجـر ; 10-10-2009 الساعة 03:49 PM.
1

11-10-2009, 02:02 PM	#20
نسمـة فجـر	تطبيق بسيط أتمنى يكون صح هنــــــــــا
نسمـة فجـر	التعديل الأخير تم بواسطة نسمـة فجـر ; 11-10-2009 الساعة 02:23 PM.
1

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

الأعضاء الذين قرؤوا الموضوع منذ 30 يوم ( أيام ) : 0 .
الموضوع لم يُقرأ بعد

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

مناقشة / CSS (الدرس الثاني) : الألوان والخلفيات والروابط

مسار الواعدين