معهد آفاق التيسير للتعليم عن بعد - (3) الدرس الثالث: تنسيق الخطوط باستخدام css

معهد آفاق التيسير للتعليم عن بعد (http://afaqattaiseer.net/vb/index.php)

- دورة أسس (html) (http://afaqattaiseer.net/vb/forumdisplay.php?f=652)

- - (3) الدرس الثالث: تنسيق الخطوط باستخدام css (http://afaqattaiseer.net/vb/showthread.php?t=19374)

(3) الدرس الثالث: تنسيق الخطوط باستخدام css

بسم الله الرحمن الرحيم

الحمدلله والصلاة والسلام على رسول الله

بعض خصائص الوسم font :
font-style
font-weight
font-size
font-family

* خاصية font-family وتقابل face وتأخذ القيم:
family-name

http://www.afaqattaiseer.com/vb/uplo...1349840407.png

مثال:

كود بلغة HTML:

<p style="font-family:arial, helvetica;">

* خاصية font-size وتقابل fontsize وقيمها:
xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger,%

تستطيع أن ترى الصورة بحجمها الطبيعي بعد الضغط عليها

مثال:

كود بلغة HTML:

<p  style="font-size:14px;">

<p  style="font-size:14pt;">

<p  style="font-size:xx-small;">

<p  style="font-size:medium;">

<p  style="font-size:75%;">

* خاصية font-weight وتأخذ القيم:
normal,bold,bolder,lighter,(100-900)
(100-900)للمتصفحات التي تدعم الأرقام.

مثال:

كود بلغة HTML:

<p  style="font-weight:bold;">

<p  style="font-weight:250;">

* خاصية font-style
normal,italic,oblique

مثال:

كود بلغة HTML:

<p style="font-style:oblique;">

كيف تكتب خصائص الوسم font في الكود؟
يجب مراعاة الترتيب التالي من اليسار إلى اليمين:

font-style ; font-weight ; font-size ; font-family

كود بلغة HTML:

<b style="font-weight:bold; font-size:12px; font-family:arial, helvetica;">

تنبيه:
عند كتابة قيمة تحتوي على فراغات مثل أسماء بعض الخطوط ، يجب أن تكتب بين علامتي تنصيص "" . مثال: " Traditional Arabic" ؛ حتى نبين أنه قيمة واحدة وليس قيمتين مختلفتين.

الواجب التطبيقي (4):
استخدام الأنماط :
font-style
font-weight
font-size
font-family

غفر الله لنا ولكم وللمسلمين والمسلمات الأحياء منهم والأموات
والحمدلله
وصلى الله وسلم على نبينا محمد وعلى آله وصحبه أجمعين

بسم الله الرحمن الرحيم

قائمة بأسماء الخطوط:

‘American Typewriter’, ‘Courier New’, Courier, Monaco, mono
‘Arial Rounded MT Bold’, Helvetica, Arial, sans-serif
Baskerville, Georgia, Garamond, ‘Times New Roman’, Times, serif
‘Book Antiqua’, Georgia, Garamond, ‘Times New Roman’, Times, serif
‘Bookman Old Style’, Georgia, Garamond, ‘Times New Roman’, Times, serif
‘Brush Script MT’, ‘Comic Sans’, sans-serif
Chalkboard, ‘Comic Sans’, sans-serif
Didot, Georgia, Garamond, ‘Times New Roman’, Times, serif
Futura, Impact, Helvetica, Arial, sans-serif
‘Gill Sans’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Helvetica, Arial, sans-serif
‘Helvetica Neue’, Helvetica, Arial, sans-serif
‘Hoefler Text’, Garamond, Georgia, ‘Times New Roman’, Times, serif
‘Lucida Grande’, ‘Lucida Sans Unicode’, Lucida, Verdana, Helvetica, Arial, sans-serif
‘Marker Felt’, ‘Comic Sans’ sans-serif
Myriad, Helvetica, Arial, sans-serif
Optima, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Helvetica, Arial, sans-serif
Palatino, ‘Book Antiqua’, Georgia, Garamond, ‘Times New Roman’, Times, serif
Cochin, Georgia, Garamond, ‘Times New Roman’, Times, serif
‘Goudy Old Style’, garamond, ‘book antiqua’, ‘Times New Roman’, Times, serif sequence