تنسيق النص
الأن وصلنا إلى فقرة مهمة جدا والتي سنتعرف فيها على كيفية تنسيق النص عن طريق ال CSS.
وسنبدأ بالتعرف على كيفية تحديد حجم النص، ولهذا الغرض فهناك طريقتان لتحديد حجم النص. الطريقة الأولى تتمثل في إعطائه قيمة مطلقة والتانية تتمثل في إعطائه قيمة نسبية وسنبدأ بشرح الطريقة الأولى رغم أنني أنصحكم بإستعمال الطريقة الثانية.
الدرس السابق: تعلم لغة CSS: المحددات والتعليقات و id و class
الدرس التالي: تعلم CSS: الألوان والوراثة
أولا قبل التعرف على هاتين الطريقتين يجب أولا قبل دلك أن نتعرف على الخاصية التي ستمكننا من تحديد حجم النص عن طريق ال CSS وهي font size وتكتب في ملف ال CSS كالتالي :
font-size {
}
والأن سنتحدت عن الطريقة الأولى التي قلنا بأنها تكون بإعطاء النص حجما مطلقا ويكون هذا عن طريق إستعمال البكسل px كوحدة مع العلم أنه يمكن كذالك إستعمال السنتمترcm أو المليمتر mm وإليكم الكود التالي كمثال:
P {
font-size: 17px;
}
هذا الكود سيجعل جميع النصوص المجودة في الصفحة بحجم 17px
وكما قلت لكم فيمكن إستعمال وحدات أخرى غير البيكسل مثل السنتمتر أو الملمتر فيكفي فقط تعويض px بcm أو mm.
والأن نمر إلى الطريقة الثانية والتي قلنا أن حجم النص فيها يكون نسبيا. ولذلك أنصحكم بإستعمالها حيت أن حجم النص يتلأم مع جميع زوار الموقع، أما الطريقة الأولى فقد يكون النص صغيرا لبعض الناس.
والوحدة التي نستعملها لهذه الطريقة فهي em وهي وحدة خاصة بالcss وإليكم المتال التالي :
P {
Font-size: 1em;
}
في هذا المثال إستعملنا 1em أي أن حجم النص سيكون عاديا أما إذا أردنا أن يكون كبيرا فسنكتب قيمة أكبر من واحد مثلا 1.4em وإدا أردنا أن يكون أصغر فسنختار قيمة أصغلر من واحد مثلا 0.7em.
يمكننا أيضا تحديد حجم النص عن طريق كتابة الحجم باللغة الإنجليزية عوض إستعمال الوحدة وإليكم المثال التالي والذي يوضح ذلك:
p {
font-size: medium;
}
في هذا المثال إستعملنا كلمة medium التي ستجعل حجم النص متوسطا وهناك كلمات أخرى وهي كالتالي:
xx-small: صغير جدا جدا
x-small: صغير جدا
Small: صغير
Medium: متوسط
Large: كبير
x-large: كبير جدا
xx-large: كبير جدا جدا
رغم أن هذه الطريقة ليست دقيقة جدا إلا أنها قد تفي بالغرض في بعض الأحيان.
نوع الخط
الأن بعد أن تعرفنا على كيفية تحديد حجم الخط سوف نتعرف الأن على كيفية تحديد نوعه.
والخاصية التي تمكننا من تحديد نوع الخط هي font-family وأمامها نكتب إسم الخط الذي نريده كما في المثال التالي:
P{
font-family: arial;
}
ويمكننا أن نحدد مجموعة من الخطوط عوض خط واحد وذلك لأننا إن حددنا خطا واحدا فقط قد لا يكون متوفرا في حاسوب زائر الموقع ولتفهم أكتر إليكم المثال التالي:
p {
font-family: Arial, Comic Sans MS, Arial Black, Serif;
}
هنا وضعنا ثلاثة خطوط وهذا يعني أنه إن لم يكن الخط الأول موجودا فإن المتصفح يستعمل الخط الثاني وإن لم يوجد فإنه يستعمل الخط الثالث وهكذا.
لكن هناك من منكم يريد إستعمال خطوط أخرى غير الخطوط العادية وإظهارها في المتصفح حتى وإن لم تكن موجودة من قبل في متصفح الزائر، طبعا هذا ممكن ولكن لم يكن كذالك إلا بعد ظهور ال CSS3 والتي جاءت بخاصية تمكننا من تحميل أي خط إلى متصفح الزائر والخاصية التي تمكننا من ذلك هي @font-face ويمكن إستعمالها كما في المتال التالي:
@font-face {
font-family: 'nomdepolice';
src: url ('nomdepolice.eot');
}
حيت أمام font-family نقوم بكتابة إسم ملف الخط وأمام src: url نقوم بكتابة عنوان مكان وجود ملف الخط على الحاسوب تماتما مثلما فعلنا مع الصور كما سبق وأن رأينا في فقرة سابقة.
هناك بعض العيوب في هذه الطريقة الأولى هي أن متصفح الزائر سيقوم بتحميل ملف الخط الذي قد يساوي حجمه 1Mo أو أكثر والعيب التاني هو أن بعض الخطوط تكون محفوظة الحقوق مما يعني أنه من غير العادل إستعمالها لذلك وجب البحث عن خطوط حرة المصدر والعيب الثالث يكمن في إختلاف النسق الذي تكون عليه الخطوط مما يعني عدم توافقها مع جميع المتصفحات أي أن هذه الخطوط لا تشتغل على جميع المتصفحات.
فمتلا النسق .eot فهو لا يعمل إلا على متصفح الأنترنت إكسبلورر وهناك النسقان .woff و .ttf وهذان النسقان يعملان على جميع المتصفحات أما بالنسبة للإنترنت إكسبلورر فهما يعملان على الإنترنت إكسبلورر 9 (IE9) فقط، وهناك أيضا النسق .otf الذي لا يعمل على متصفح الإنترنت إكسبلورر وهناك النسق .svg المعروف على الأيفون والأيباد.
لدلك يجب التوفر على مختلف الأنماط التي يمكن أن تكون عليها الخطوط وإدراج كل واحد في ملف ال CSS كما في المثال التالي:
@font-face {
Font-family: 'nomdepolice';
src: url(' nomdepolice.eot') format ('eot'),
url(' nomdepolice.woff') format('woff'),
url(' nomdepolice.ttf') format('truetype'),
url(' nomdepolice.svg') format ('svg');
}
بعد تحميل الخط بأنساقه المختلفة وبعد إدراجها داخل ملف الCSS حينها نستطيع إستعمال هذا الخط في صفحتنا وذلك عن طريق خاصية الCSS التي تعرفنا عليها من قبل وهي font-family والمثال التالي سيوضح لكم هذا أكثر:
@font-face {
Font-family: 'nomdepolice';
src: url(' nomdepolice.eot') format ('eot'),
url(' nomdepolice.woff') format('woff'),
url(' nomdepolice.ttf') format('truetype'),
url(' nomdepolice.svg') format ('svg');
}
h1 {
font-family: 'nomdepolice', Arial, serif;
}
التعديل على النص
الأن سنتعرف على كيفية جعل النص مائل أو مسطر أو غامق.
والخاصية التي تمكننا من ذلك فهي font-style وإليكم الكود التالي لتفهمو أكتر:
h1 {
font-style: italic;
}
يمكن أيضا تعويض italic ب oblique والتي تجعل النص أيضا مائلا ولكن بطريقة مختلفة شيئا ما، أما لجعل النص عاديا فإننا نستعمل كلمة normal.
أما لجعل الخط غليظا فإننا نستعمل الخاصية font-weight وهي تحتمل قيمتين الأولى هي bold والتي تجعل النص غليظا والثانية هي normal والتي تجعل النص عاديا.
إتجاه النص
الأن سنتعرف على كيفية تغيير إتجاه النص وأول شيء سنبدأ به هو الخاصية التي تمكننا من ذلك وهي text-align والتي يمكن أن تتخد أربعة قيم وهي left أي أن النص سيكون من اليسار إلى اليمين أو القيمة right أي أن النص سيكون من اليمين إلى اليسار وهناك أيضا القيمة center أي أن النص سيوضع في الوسط وأخيرا هناك القيمة justify أي أن النص سيوضع بطريقة ليملأ جميع الفراغات التي قد تكون في الصفحة.
والكود يكتب كالتالي:
p {
text-align: justify;
}
تغيير موضع عناصر الصفحة
تغيير موضع بعض العناصر من الأمور المهمة والتي يمكننا الCSS من القيام بها فمثلا لو أن صفحتنا تتوفر على صورة ونص وأردنا أن نضع الصورة على يمين أو يسار النص هناك خاصية float التي تمكننا من تغيير تموضع العناصر في الصفحة وهي تقبل قيمتين وهما left التي تمكن من جعل العنصر على اليمين والقيمة right التي تمكننا من جعل العنصر على اليسار.
وسناخد المثال التالي للتطبيق:
<p><img src="image.jpg" class="imageagauch" alt="Image a gauch" /> وهنا يوجد النص وسنملأه الأن بالكثير من الكتابة والبلابلا وهنا يوجد النص وسنملأه الأن بالكثير من الكتابة والبلابلا وهنا يوجد النص وسنملأه الأن بالكثير من الكتابة والبلابلا وهنا يوجد النص وسنملأه الأن بالكثير من الكتابة والبلابلا
وهنا يوجد النص وسنملأه الأن بالكثير من الكتابة والبلابلا وهنا يوجد النص وسنملأه الأن بالكثير من الكتابة والبلابلا وهنا يوجد النص وسنملأه الأن بالكثير من الكتابة والبلابلا وهنا يوجد النص وسنملأه الأن بالكثير من الكتابة والبلابلا وهنا يوجد النص وسنملأه الأن بالكثير من الكتابة والبلابلا.</p>
وإذا إختبرتم هذا الكود سوف ترون أن الوصورة تكون أعلى النص ولجعلها في يمينه فإننا نضيف خاصية الCSS كما في المثال التالي:
.imageagauch {
float: right;
}
ملاحظة: نلاحظ أن المتصفح يختار إتجاه النص من اليسار إلى اليمين، وبما أن العربية تكتب من اليمين إلى اليسار فإننا قد نحتاج إلى تغيير هذا بإضافة خاصية لتحديد إتجاه النص. وقد ذكرنا في فقرة سابقة أننا نحدد إتجاه النص في الصفحة كاملة عن طريق الوسم <html> الذي نكتبه هكذا <html dir="rtl"> وrtl تعني أن إتجاه النص سيكون من اليمين إلى اليسار (right to left) وبما أن هذا المتال ليس إلا للتطبيق وليس فيه هذا الوسم فإننا سنضيفه في كود الCSS بإستخدام الخاصية direction ويصبح الكود كالتالي:
.imageagauch {
float: right;
direction: rtl;
}
لكن ماذا لو أردنا أن يكون نصف النص يمين الصورة والنصف الأخر تحتها مباشرة؟
لذالك فهناك خاصية تمكننا من ذلك وهي clear التي تحتمل تلات قيم وهي left أي أن النص سيكتب أسفل بعد إستعمال خاصية float بالقيمة left ونفس الشيء بالنسبة للقيمة right أما القيمة الثالثة فهي both وهي تستعمل في كلتا الحالتين السابقتين إدا سنقتصر على إستعمالها وحدها فقط وإليكم المثال التالي للتوضيح أكثر:
<p><img src="image.jpg" class="imageagauch" alt="Image a gauch" /></p>
<p> هذا النص سيكتب على يمين الصورة</p>
<p class="textdessous">وهذا النص سيكتب تحت الصورة</p>
وكود الCSS سيكون كالتالي:
.imageagauch {
float: right;
direction: rtl;
}
.textdessous {
Clear: both;
مرحبا اخي ، هل تستطيع ان تخبرني اي كود استخدم لتغير لون او كلمة النص لكلمة اخرى عند الضغط عليها ، انا لدي مدونة انمي واحتاج كود بحيث عند الضغط على الحلقة 1 تتغير لتصبح تمت المشاهدة ... وهكذا
ردحذف