من خلال موضوعنا اليوم سوف نعرض اليكم النصوص text من خلال حجم الخط ونوعه وكذلك الخط العريض والمائل وأيضا الفراغ بين السطور والكلمات والحروف
كيفية تحديد نوع الخط وحجمه
font-family
هذه هي الخاصية التي يتم استخدامها ليتم تحديد نوع الخط
المستخدم
وهنا قد قمنا باختيار نوع الخط
Arial ليتم تطبيقه على تلك الفقرة
p{
font-family:
Arial;
}
هنا تم استخدام أكثر من خط:
حيث يقوم هنا المتصفح بتجربة خط
Arial
وذلك حينما لا يكون الامر موجودا في حاسوب المستخدم و يقوم
بالمرور للخط الثاني وهو Times New
Roman
p{
font-family:
Arial, Times New Roman;
}
حجم الخط font-size
من الجدير بالذكر انه
يتم تحديد الخط بثلاث طرق وهي
pixel :
ويتم اختيار تلك القيمة بعدد يتبعه حروف pxكالتالي
h1{
font-size:
20px;
}
percentages :
يتم استخدام النسبة المئوية ومن الجدير بالذكر ان الخط العشوائي على المتصفح حينما لايتم تحديد الخط بنسبة 75 في المائة او مايعادل 12
px
h1{
font-size:
100%;
}
ومن الجدير بالذكر ان طريقة عمل النسبة المئوية مرتبطة بحجم
الخط فمثلا لو افترضنا حجم الخط هو 16px
لو مثلا اخترنا نسبة 100 في المائة لكل العناوينh1 h2
سيكون الخط 16 px
Ems:
وهي ماتعادل حرف
m او ام
يمنكم فهم العلاقة بين مختلف طرق قياس الخط من خلال هذه الشارة
استيراد الخطوط
يتم توفر الخطوط التي يتم اختيبارها بشكل خاص في المتصفح
الموجود بالحاسوب الخاص بك ولكن يمكنك تحميل خط غير موجود عن طريق قاعدة
font-face@
والتي تكون عناصرها كالتالي
Src
format
الكود
@font-face
{
font-family:
'ChunkFiveRegular';
src:
url('fonts/chunkfive.eot');}
h1,
h2 {
font-family:
ChunkFiveRegular, Georgia, serif;}
ومن خلال الجزء الاول يتم استرداد ذلك الخط ليتم تطبيقه على
العناوين في الجزء الثاني
شكل النص
يحتمل احدى القيمتين
Bold أو Normal
p{
font-weight:
bold;
}
p{
font-weight:
normal;
}
تزيين الخط او Text Decoration
يمكنك اختيار تلك القيمة لهذه
الخصوصية كما هو موضح :
p{
text-decoration:
underline;
}
none
- لا يتم استخدام أي تزيين
underline
وهو عبارة عن اضافة خط تحت النص
overline
عبارة عن اضافة خط فوق النص
line-through
هو عبارة عن خط عبر النص
أسلوب النص Font-style
وهنا
يحتمل ثلاث قيم Normal Italic
Oblique كما هو موضح
p{
font-style:
normal;
}
Line-height
p{
line-height:
1.5em;
}
اتجاه النص Text-align
وهو يحتمل ثلاث قيم عبارة عن
right
بمعنى يمين
left
بمعنى يسار
center
بمعنى وسط
p{
text-align:
right;
}
المساحة بين الحروف والكلمات
Letter-spacing
و word-spacing
p{
letter-spacing: 1em;
word-spacing: 2em;
}
ومن المعروف أن المساحة بين الحروف لا
يستدعي تطبيقها لى اللغة العربية لانه يتم كتابته بحروف ملتصقة
فراغ بداية الفقرة Text-indent
ومن المعروف ان هذه القاعدة تقوم بالمساعدة سواء في اضافة فراغ
أو اضافة مساحة في بداية السطر الأول من كل فققرة.
p{
text-indent: 10px;
}
الروابط Links
يمكنك التحكم في مظهر اوشكل الروابط عبر خيارات عدة وهي
link :
وهو عبارة عن التحكم في الروابط التي لم تقم بزيارتها بعد
visited:
وهي تلك الروابط التي يتم النقر عليها
hover:
ويحدث ذلك عنما يتم تمرير فأرة الحاسوب على رابط
focus:
ويكون عندما تحديد رابط أو استمارة ما
active:
ويحدث ذلك حينما تبقى في صفحة الرابط
link :
وهو عبارة عن التحكم في الروابط التي لم تقم بزيارتها بعد
visited:
وهي تلك الروابط التي يتم النقر عليها
hover:
ويحدث ذلك عنما يتم تمرير فأرة الحاسوب على رابط
focus:
ويكون عندما تحديد رابط أو استمارة ما
active:
ويحدث ذلك حينما تبقى في صفحة الرابط
