منتدى الابداع العربي

للإبداع لمسات ! ... ولمسـات الإبــداع إختصاصـنا !
 
الرئيسيةالرئيسية  المنشوراتالمنشورات  البوابةالبوابة  التسجيلالتسجيل  دخولدخول  


تعلم الخطوط وكيف تفعلها باستخدام CSS
 

 تعلم الخطوط وكيف تفعلها باستخدام CSS

اذهب الى الأسفل 
كاتب الموضوعرسالة
JoryAbdallah
سوبر الإبداع 

JoryAbdallah

انثى
السمك
عدد المساهمات : 126400
نقاط النشاط : 142117
السٌّمعَة : 3006
بلد العضو : تعلم الخطوط وكيف تفعلها باستخدام CSS Saudi-10
العمر : 35

تعلم الخطوط وكيف تفعلها باستخدام CSS Empty
مُساهمةموضوع: تعلم الخطوط وكيف تفعلها باستخدام CSS   تعلم الخطوط وكيف تفعلها باستخدام CSS Emptyالإثنين نوفمبر 28, 2016 11:24 pm

في هذا الدرس ستتعلم الخطوط وكيف تفعلها باستخدام CSS، وسنقوم أيصاً بمعالجة مشكلة كيفية عرض بعض الخطوط التي لن تظهر بشكل صحيح ما لم تكن مثبتة على الحاسوب، سنتعلم هذه الخصائص في هذا الدرس:
•font-family
•font-style
•font-variant
•font-weight
•font-size
•font

نوع الخطوط "font-family"

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

هناك نوعان من أسماء الخطوط تستخدم لتصنيفها، خطوط بأسماء محددة أو أسماء عامة، المصطلحين سنشرحهما في الفقرات اللاحقة.
أسماء الخطوطأمثلة لخطوط بأسماء محددة هي "Arial" و"Times New Roman" أو "Tahoma".أسماء عامةالأسماء العامة للخطوط تحدد المجموعة من الخطوط التي لها شكل متماث، فمثلاً sans-serif هي مجموعة من الخطوط لا تحوي زوائد على الأحرف وهي خطوط مناسبة لعرض النص على الشاشة.
الاختلاف بين أنواع الخطوط يوضح في المثال التالي:

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

الكود:

   h1 {font-family: arial, verdana, sans-serif;}
   h2 {font-family: "Times New Roman", serif;}
   



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

طراز الخط "font-style"

الخاصية
الكود:
font-style
تحدد ما إذا كان الخط سيحمل القيمة normal أو italic أو oblique، في المثال أدناه كل عناوين
الكود:
<h2>
ستظهر بشكل مائل.

الكود:

   h1 {font-family: arial, verdana, sans-serif;}
   h2 {font-family: "Times New Roman", serif; font-style: italic;}
   



تباين الخط "font-variant"

الخاصية
الكود:
font-variant
تستخدم للاختيار بين القيمتين normal أو small-caps للخط وهي متعلقة فقط باللغات الأوروبية، القيمة small-caps تعني أن النص سيكتب بحروف كبيرة لكنها من ناحية الحجم صغيرة، ، يبدو الأمر مربكاً، عليك أن تشاهد المثال الآتي لكي تفهم أكثر:
تعلم الخطوط وكيف تفعلها باستخدام CSS Figure006
إذا اختيرت القيمة
الكود:
small-caps
للخاصية font-variant ولم يكن هناك خط يدعم هذه الخاصية سيقوم المتصفح بعرض النص بحروف كبيرة فقط.

الكود:

   h1 {font-variant: small-caps;}
   h2 {font-variant: normal;}
   

وزن الخط "font-weight"

الخاصية
الكود:
font-weight
تصف كم ستكون سماكة أو "ثقل" الخط، يمكن للخط أن يحمل القيمة normal أو bold، وهناك متصفحات تدعم استخدام الأرقام من 100 إلى 900 لوصف ثقل الخط.

الكود:

   p {font-family: arial, verdana, sans-serif;}
   td {font-family: arial, verdana, sans-serif; font-weight: bold;}
   



حجم الخط "font-size"

حجم الخط يمكن تحديده بالخاصية
الكود:
font-size
.
هناك العديد من الوحدات (مثال: بكسل، النسبة المؤية) التي يمكن استخدامها لوصف حجم الخط، في هذا المثال سنركز على الوحدات الأكثر استخداماً، والمثال يتضمن:

الكود:

   h1 {font-size: 30px;}
   h2 {font-size: 12pt;}
   h3 {font-size: 120%;}
   p {font-size: 1em;}
   


هناك فرق واحد بين وحدات القياس الأربع، وهي أن كل من 'px' و'pt' تجعل حجم الخط محدداً بدقة وثابت بينما '%' و'em' تسمح للمستخدم بتغيير حجم الخط إلى المستوى المناسب له، هناك العديد من المستخدمين من ذوي الاحتياجات الخاصة أو كبار السن أو من يعاني من ضعف في البصر أو يملك شاشة ذات جودة رديئة، ولكي نجعل الموقع قابلاً للوصول لهذه الفئات وللجميع لا بد من استخدام وحدات قياس يمكن تعديلها مثل '%' أو 'em'.
في المثال أدناه توضيح لكيفية تعديل حجم الخط في موزيلا فايرفوكس وإكسبلورر، خاصية رائعة، ألا تظن ذلك؟
تعلم الخطوط وكيف تفعلها باستخدام CSS Figure007

جمع كل خصائص الخط "font"

استخدام
الكود:
font
الخاصية التي يمكنها أن تختصر كل خصائص الخطوط في سطر واحد.
فمثلاً تصور هذه السطور الأربعة تصف خصائص خطوط للعنصر
الكود:
<p>
:

الكود:

   p {
      font-style: italic;
      font-weight: bold;
      font-size: 30px;
      font-family: arial, sans-serif;
   }
   

باستخدام الخاصية التي تختصر الخصائص الأخرى يمكن للسطور الأربعة أن تبسط بهذا الشكل:

الكود:

   p {
      font: italic bold 30px arial, sans-serif;
   }
   

قائمة قيم الخاصية
الكود:
font
ترتب بهذا الشكل:
الكود:
font-style
|
الكود:
font-variant
|
الكود:
font-weight
|
الكود:
font-size
|
الكود:
font-family

ملخص

تعلمت في هذا الدرس بعض الإمكانيات المتعلقة بالخطوط، تذكر أن أحد أهم مميزات استخدام CSS لتحديد الخطوط هو إمكانية تغيير الخط لكل صفحات الموقع خلال دقائق قليلة، CSS يمكنها أن توفر الوقت وتجعل حياتك أكثر سهولة،
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://taqnyiat.ahlamontada.com/
Âñå ÀsLń Môŝibă
عضو محترف 

Âñå ÀsLń Môŝibă

انثى
القوس
عدد المساهمات : 1202
نقاط النشاط : 1287
السٌّمعَة : 8
بلد العضو : تعلم الخطوط وكيف تفعلها باستخدام CSS Algeri10
العمر : 19

تعلم الخطوط وكيف تفعلها باستخدام CSS Empty
مُساهمةموضوع: رد: تعلم الخطوط وكيف تفعلها باستخدام CSS   تعلم الخطوط وكيف تفعلها باستخدام CSS Emptyالخميس ديسمبر 08, 2016 4:23 pm

بارك الله فيك
وشكرا عالافادة


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

Mr.Mohammed

ذكر
عدد المساهمات : 9674
نقاط النشاط : 10588
السٌّمعَة : 174
بلد العضو : تعلم الخطوط وكيف تفعلها باستخدام CSS Saudi-10

تعلم الخطوط وكيف تفعلها باستخدام CSS Empty
مُساهمةموضوع: رد: تعلم الخطوط وكيف تفعلها باستخدام CSS   تعلم الخطوط وكيف تفعلها باستخدام CSS Emptyالأحد ديسمبر 11, 2016 7:22 pm

شكرا لكـ على املوضوع الم
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://tatwer3araby.ahlamontada.com
Mr Robot
سوبر الإبداع 

Mr Robot

ذكر
القوس
عدد المساهمات : 35481
نقاط النشاط : 37581
السٌّمعَة : 108
بلد العضو : تعلم الخطوط وكيف تفعلها باستخدام CSS Lebano10
العمر : 35

تعلم الخطوط وكيف تفعلها باستخدام CSS Empty
مُساهمةموضوع: رد: تعلم الخطوط وكيف تفعلها باستخدام CSS   تعلم الخطوط وكيف تفعلها باستخدام CSS Emptyالثلاثاء مارس 21, 2017 1:59 am

بارك الله بيك
واصل
الرجوع الى أعلى الصفحة اذهب الى الأسفل
abuahmad
عضو محترف 

abuahmad

ذكر
السرطان
عدد المساهمات : 1485
نقاط النشاط : 1637
السٌّمعَة : 4
العمر : 54

تعلم الخطوط وكيف تفعلها باستخدام CSS Empty
مُساهمةموضوع: رد: تعلم الخطوط وكيف تفعلها باستخدام CSS   تعلم الخطوط وكيف تفعلها باستخدام CSS Emptyالأربعاء مايو 10, 2017 9:15 am

موضوع رائع



وطرح مميز



شكرا

الرجوع الى أعلى الصفحة اذهب الى الأسفل
murmasan
عضو فعال 

murmasan

ذكر
الدلو
عدد المساهمات : 272
نقاط النشاط : 336
السٌّمعَة : 1
بلد العضو : تعلم الخطوط وكيف تفعلها باستخدام CSS Sudan10
العمر : 19

تعلم الخطوط وكيف تفعلها باستخدام CSS Empty
مُساهمةموضوع: رد: تعلم الخطوط وكيف تفعلها باستخدام CSS   تعلم الخطوط وكيف تفعلها باستخدام CSS Emptyالإثنين مايو 22, 2017 8:12 am

شكرا على الدروس
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://murmasan.montadarabi.com
Picasso-Des
سوبر الإبداع 

Picasso-Des

ذكر
الجدي
عدد المساهمات : 10775
نقاط النشاط : 11119
السٌّمعَة : 136
بلد العضو : تعلم الخطوط وكيف تفعلها باستخدام CSS Ioao10
العمر : 37

تعلم الخطوط وكيف تفعلها باستخدام CSS Empty
مُساهمةموضوع: رد: تعلم الخطوط وكيف تفعلها باستخدام CSS   تعلم الخطوط وكيف تفعلها باستخدام CSS Emptyالسبت يونيو 16, 2018 11:15 pm

يعطيكم العافية على الطرح تعلم الخطوط وكيف تفعلها باستخدام CSS 837876428
كل الاحترام تعلم الخطوط وكيف تفعلها باستخدام CSS 433646733
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://medialive.pro
Mohamed Sobhi
عضو ذهبي 

Mohamed Sobhi

ذكر
الاسد
عدد المساهمات : 3330
نقاط النشاط : 3996
السٌّمعَة : 57
بلد العضو : تعلم الخطوط وكيف تفعلها باستخدام CSS Egypt10
العمر : 24

تعلم الخطوط وكيف تفعلها باستخدام CSS Empty
مُساهمةموضوع: رد: تعلم الخطوط وكيف تفعلها باستخدام CSS   تعلم الخطوط وكيف تفعلها باستخدام CSS Emptyالسبت يوليو 21, 2018 11:46 am

درس اكثر من رائع شكرا لك على الطرح
لا تحرمنا من جديدك وردة حمراء


تعلم الخطوط وكيف تفعلها باستخدام CSS P_947wjtlk1
الرجوع الى أعلى الصفحة اذهب الى الأسفل
مصطفى ستيتان
عضو محترف 

مصطفى ستيتان

ذكر
عدد المساهمات : 1130
نقاط النشاط : 1203
السٌّمعَة : 11
بلد العضو : تعلم الخطوط وكيف تفعلها باستخدام CSS Ioao10

تعلم الخطوط وكيف تفعلها باستخدام CSS Empty
مُساهمةموضوع: رد: تعلم الخطوط وكيف تفعلها باستخدام CSS   تعلم الخطوط وكيف تفعلها باستخدام CSS Emptyالإثنين يوليو 23, 2018 9:05 am

جزاكم الله كل خير 


سبحان الله والحمدلله ولا إله إلا الله 
 
تعلم الخطوط وكيف تفعلها باستخدام CSS Do
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.elmanal.com
D.YouSSef
سوبر الإبداع 

D.YouSSef

ذكر
الدلو
عدد المساهمات : 6124
نقاط النشاط : 7079
السٌّمعَة : 34
بلد العضو : تعلم الخطوط وكيف تفعلها باستخدام CSS Morocc10
العمر : 52

تعلم الخطوط وكيف تفعلها باستخدام CSS Empty
مُساهمةموضوع: رد: تعلم الخطوط وكيف تفعلها باستخدام CSS   تعلم الخطوط وكيف تفعلها باستخدام CSS Emptyالخميس أغسطس 30, 2018 3:53 am

جزاك الله خيراعلى العطاء
والدرس الجميل والمفيد
 واصل تالقك
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Abir_ Dj
عضو ذهبي 

Abir_ Dj

انثى
الثور
عدد المساهمات : 2032
نقاط النشاط : 2095
السٌّمعَة : 8
بلد العضو : تعلم الخطوط وكيف تفعلها باستخدام CSS Algeri10
العمر : 20

تعلم الخطوط وكيف تفعلها باستخدام CSS Empty
مُساهمةموضوع: رد: تعلم الخطوط وكيف تفعلها باستخدام CSS   تعلم الخطوط وكيف تفعلها باستخدام CSS Emptyالخميس أغسطس 30, 2018 4:11 am

موضوع رائع
يعطيك العافية
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.ibda3araby.com
SLGray
عضو التميز 

SLGray

ذكر
الجدي
عدد المساهمات : 5012
نقاط النشاط : 5097
السٌّمعَة : 12
بلد العضو : تعلم الخطوط وكيف تفعلها باستخدام CSS Egypt10
العمر : 21

تعلم الخطوط وكيف تفعلها باستخدام CSS Empty
مُساهمةموضوع: رد: تعلم الخطوط وكيف تفعلها باستخدام CSS   تعلم الخطوط وكيف تفعلها باستخدام CSS Emptyالأربعاء يناير 02, 2019 10:59 am

درس اكثر من رائع شكرا لك على الطرح
لا تحرمنا من جديدك
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
تعلم الخطوط وكيف تفعلها باستخدام CSS
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

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