CSS (الدرس الثالث) : الخطوط - النصوص - تجميع العناصر

[ريفــــــــــــــــان]

،

عوداً حميداً . .

إجازة . . مباركة بإذن الله

معطرة بنجاح . . باهر

. . .


إلى الدرس الثالث من دروس . . الـ CSS

يحمل المواضيع التالية:

الخطوط

النصوص

تجميع العناصر باستخدام span وdiv

. . .

تجب قراءتها وفهمها . .

ثم الإجابة على التمارين . .

تمرين (1)

h1 {font-family: arial, verdana, sans-serif;}

الطلوب شرح عمل السطر السابق . .

. .

تمرين (2)

ماهي وحدات قياس الخط

القابلة للتغيير من قبل المستخدم؟

وما هي الوحدات الغير قابلة للتغير ؟

. . .

تمرين (3)

ماهي القيمة . . التي تقوم بتحويل . .

جميع الحروف إلى صغيرة . .

للخاصية text-transform ؟

. . .

تمرين (4)

اكتب فقرة . . باستخدام <p>

ثم قم بالتجميع باستخدام

<span>

كي نعطي بعض الكلمات . . المهمة

لون أحمر . .

ثم ضع تطبيقك هنا . .


[ سبحان الله وبحمده ،، سبحان الله العظيم ]
،

[ريفــــــــــــــــان]

،

التطبيق يكون . . كصفحة . .

فيها الفقرة . . التي تحتوي على كلمات حمراء . .

مــثـــال

[ سبحان الله وبحمده ،، سبحان الله العظيم ]
،

[شادل]

.

(:

بإذن الله لي عودة بعد القراءة ..

.

[aroma]

جاري القراءة ,,

بوركتم ,,

[محمد جبلي]

الله يعطيك العافية أختي ريفان

بإذن الله نرجع أفضـل من أول

جاري على العمل على قراءة الدرس

بالتوفيق للجميع

[شادل]

تمرين (1) كود: h1 {font-family: arial, verdana, sans-serif;} المطلوب شرح عمل السطر السابق . .

الإجابة :

الخاصية font-family تستخدم لكتابة قائمة خطوط يطبقها المتصفح على عنصر أو صفحةٍ ما .. على حسب الترتيب ،

في هذا المثال نوع الخط الذي سَيُكْتَب به العنوان هو arial ( الخط الأول ) .. فإذا إذا لم يجده المتصفح ضمن قائمة

الخطوط سيستخدم الخط الثاني verdana .. فإذا إذا لم يجده المتصفح ضمن قائمة الخطوط سيتم اختيار

و استخدام أحد الخطوط التي تنتمي إلى المجموعة sans-serif و هي : arial, verdana , trebuchet

( و هي مجموعة من الخطوط لا تحوي زوائد على الأحرف ) .. و بذلك تضمن ظهور العناوين بنفس نوع الخط الذي تريده .

..

لي عودة بالبقية - بإذن الله -

[ريفــــــــــــــــان]

،

مبدعة . . ماشاء الله

واصلي . .

البقية . . بانتظار واجباتكم . .

[ سبحان الله وبحمده ،، سبحان الله العظيم ]
،

[شادل]

.

تمرين (2) ماهي وحدات قياس الخط القابلة للتغيير من قبل المستخدم؟ وما هي الوحدات الغير قابلة للتغير ؟

الإجابة :

وحدات قياس الخط القابلة للتغيير من قبل المستخدم : % وَ em

و الوحدات الغير قابلة للتغيير : px وَ pt

سؤال بعد إذنكم : ماذا يقصد بالـ em \ pt ؟

تمرين (3) ماهي القيمة . . التي تقوم بتحويل . . جميع الحروف إلى صغيرة . . للخاصية text-transform ؟

الإجابة :

هي القيمة : lowercase

::

- بقي التطبيق -

[ريفــــــــــــــــان]

،

رائع . . شادل

em ارتفاع خط العناصر

pt نقطة وتساوي 1/72 انش

[ سبحان الله وبحمده ،، سبحان الله العظيم ]
،

[شادل]

.

تمرين (4) اكتب فقرة . . باستخدام <p> ،ثم قم بالتجميع باستخدام <span> ،كي نعطي بعض الكلمات . . المهمة لون أحمر . .

::

تطبيقي

::

تم الواجب بحمد الله

[زهرة البيلسان]

تمرين (1) كود PHP: h1 {font-family: arial, verdana, sans-serif;}  الطلوب شرح عمل السطر السابق . .

العناوين و النصوص التي حددت باستخدام العنصر <h1> ستعرض باستخدام خط "Arial"،
إذا لم يكن هذا الخط مثبتاً في حاسوب المستخدم سيعرض بدلاً منه خط "Verdana"
وإذا لم يكن الإثنان موجودان على حاسوب المستخدم سيتم اختيار خط من عائلة الخطوط sans-serif لعرض العناوين.

ماهي وحدات قياس الخط القابلة للتغيير من قبل المستخدم؟ وما هي الوحدات الغير قابلة للتغير ؟

'%' و'em' تسمح للمستخدم بتغيير حجم الخط إلى المستوى المناسب له،

'px' و'pt' تجعل حجم الخط محدداً بدقة وثابت و غير قابلة للتغيير ..

ماهي القيمة . . التي تقوم بتحويل . . جميع الحروف إلى صغيرة . . للخاصية text-transform ؟

lowercase

ستجعل كل الحروف صغيرة



التطبيق

[ريفــــــــــــــــان]

،

شادل . . راائع جداً

زهرة البيلسان . . بارك الله فيك . .

رائع . . لكن لو وضعتِ وسم الميتا . .

ووضعتِ الترميز عربي . .

[ سبحان الله وبحمده ،، سبحان الله العظيم ]
،

[aroma]

تمرين (1) كود: كود PHP: h1 {font-family: arial, verdana, sans-serif;}  الطلوب شرح عمل السطر السابق . .

العناوين التي حددت باستخدام العنصر <h1> ستعرض باستخدام خط "Arial"، إذا لم يكن هذا الخط مثبتاً في حاسوب المستخدم سيعرض بدلاً منه خط "Verdana" وإذا لم يكن الإثنان موجودان على حاسوب المستخدم سيتم اختيار خط من عائلة الخطوط sans-serif لعرض العناوين

تمرين (2) ماهي وحدات قياس الخط القابلة للتغيير من قبل المستخدم؟ وما هي الوحدات الغير قابلة للتغير ؟

القابلة للتغيير '%' و'em' تسمح للمستخدم بتغيير حجم الخط إلى المستوى المناسب له.

الغير قابلة للتغيير 'px' و'pt' تجعل حجم الخط محدداً بدقة وثابت .

تمرين (3) ماهي القيمة . . التي تقوم بتحويل . . جميع الحروف إلى صغيرة . . للخاصية text-transform ؟

lowercase

تمرين (4) اكتب فقرة . . باستخدام <p> ثم قم بالتجميع باستخدام <span> كي نعطي بعض الكلمات . . المهمة لون أحمر . . ثم ضع تطبيقك هنا .

تعقدت من شيء اسمه

سأعود به في وقت لاحق بحول الله ,,

[محمد جبلي]

أختـي الكريمة زهرة البيلسان

مـاشـاء الله تطبيق رائـع

ولا أستطيع أن أزيد على كـلام الأخت ريفان

سوى :
أن ..

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="rtl">

لو كـانت :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar" dir="rtl">

لأن صفحتك عربيـة

وشكـراً

[محمد جبلي]

بالنسبـة لدرس الخطوط ..

(1)
ما رأيكـم
مـاهو الخط الأفضـل بين الخطوط للمواقـع ؟
بحيث يكون سهل القراءة و جميل وغير متعب
أم أنه لا فرق بينهـا .. !

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

وشكراً

[محمد جبلي]

بالنسبـة لدرس تجميع العناصر باستخدام span وdiv

لمن فهم الدرس جيداً

مالفرق بين span و div ?

أنـا قرأت :

العنصر <span> يستخدم في العناصر كما رأيت في المثال السابق، العنصر <div> يستخدم لتجميع العناصر. هذا هو الاختلاف الوحيد

لكن أريد توضيح أكبـر للفرق ...

و شكراً

[ريفــــــــــــــــان]

،

<div>

يضم داخله أكثر من عنصر

بحيث يعطيها خاصية محددة

أي يحيط بها من الخارج

أما

<span>

فهو يستخدم داخل عنصر معين

فالعنصر هو الذي يحيط بـ <span>

وليس العكس

ووظيفته هنا

إعطاء بعض المحتويات خاصية محددة

أي تجمعها صفحة محددة . .

[ سبحان الله وبحمده ،، سبحان الله العظيم ]
،

[ريفــــــــــــــــان]

،

aroma

ممتاز بانتظار التطبيق

[ سبحان الله وبحمده ،، سبحان الله العظيم ]
،

[محمد جبلي]

;

;

;

أختـي ريفـــان

جزاكِ الله خيـر الجزاء

على هذا التوضيح المهم لي

[محمد جبلي]

بإذن الله اليوم أحط تطبيقي
وراح يكون فيه بإذن الله
تناغم بين الـXHTML و CSS و PHP

أنتظرونــي
^_^