تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: تنسيق النصوص


الصفحة السابقة

لا ، "تنسيق النص" لا علاقة له بتدمير جميع البيانات الموجودة على القرص الصلب الخاص بك! هذا يعني ببساطة أننا سنغير مظهر النص (نقول إنه "منسق").

لا مفاجأة خاصة: نحن لا نزال في CSS وسنعيد استخدام ما تعلمناه في الفصل السابق. سوف نعمل مباشرة داخل الملف .cssالذي أنشأناه.

سيكون هذا الفصل فرصة لاكتشاف العديد من خصائص CSS: سنرى كيفية تغيير حجم النص وتغيير الخط ومحاذاة النص ...

الحجم


لتغيير حجم النص ، استخدم خاصية CSS font-size. ولكن كيف تشير إلى حجم النص؟ هذا هو المكان الذي تصبح فيه الأمور صعبة بسبب توفر العديد من التقنيات:

  • حدد الحجم المطلق : بالبكسل أو السنتيمترات أو المليمترات. هذه الطريقة دقيقة للغاية ولكن يُنصح باستخدامها فقط إذا كانت ضرورية للغاية ، لأنها قد تشير إلى حجم صغير جدًا بالنسبة لبعض القراء.
  • حدد الحجم النسبي : في النسبة المئوية أو "em" أو "ex" ، تتمتع هذه التقنية بميزة كونها أكثر مرونة. يتكيف بسهولة أكبر مع حجم تفضيلات المستخدم
حجم مطلق

للإشارة إلى الحجم المطلق ، يتم استخدام البيكسلات عمومًا. للحصول على نص يبلغ ارتفاعه 16 بكسل ، يجب عليك كتابة:


font-size: 16px;

سيكون حجم الأحرف 16 بكسل ، كما هو موضح في الشكل التالي.

css html file

فيما يلي مثال للاستخدام ضع هذا الرمز في ملفك (.css)


p
{
    font-size: 14px ;
}
h1
{
    font-size: 40px; 
}            

والنتيجة واضحة في الشكل التالي.

css html file

إذا كنت ترغب في ذلك ، يمكنك أيضًا تحديد الأحجام بالسنتيمترات أو المليمترات. يستبدل "px" بـ "cm" أو "mm". هذه الوحدات هي أقل ملاءمة للشاشات.

القيمة النسبية

هذه هي الطريقة الموصى بها لأن النص يتم تكييفه بسهولة مع تفضيلات جميع الزوار.

هناك عدة طرق للإشارة إلى القيمة النسبية. على سبيل المثال ، يمكنك كتابة الحجم بالكلمات الإنجليزية مثل هذه:

  • xx-small: صغيرة ؛
  • x-small: صغير جدا
  • small: ضغير ؛
  • medium: متوسطة
  • large: كبير
  • x-large: كبير جدا
  • xx-large: اه ... عملاق.

يمكنك اختبار استخدام هذه القيم في كود CSS الخاص بك:


p
{
    font-size: small;
}
h1
{
    font-size: large;
}
                       

حسنًا ، هذه التقنية بها عيب: لا يوجد سوى سبعة أحجام متوفرة (لأن هناك سبعة أسماء فقط). لحسن الحظ ، هناك طرق أخرى. الأسلوب المفضل لدي هو الإشارة إلى الحجم في "em".

  • إذا كتبت 1em، يكون للنص حجم عادي.
  • إذا كنت تريد تكبير النص ، فيمكنك إدخال قيمة أكبر من 1 ، مثل 1.3em.
  • إذا كنت تريد تقليل النص ، فأدخل قيمة أقل من 1 ، مثل 0.8em.

كن حذرًا: بالنسبة للأعداد العشرية ، يجب عليك وضع نقطة وليس فاصلة. يجب أن تكتب "1.4 em" وليس "1,4" em

على سبيل المثال:


p
{
    font-size: 0.8em;
}
h1
{
    font-size: 1.3em;
}
                                   

وحدات أخرى متاحة. يمكنك تجربتها "ex" (والذي يعمل على نفس مبدأ em ولكن بحجم اصغر) والنسبة المئوية (80٪ ، 130٪ ...).

الخط


آه ... الخط ... نحن نلمس بقعة مؤلمة.

في الواقع ، هناك مشكلة: لكي يتم عرض الخط بشكل صحيح ، يجب أن يكون لدى جميع المستخدمين. إذا لم يكن لدى المستخدم نفس الخط الذي تستخدمه ، فسيتخذ المستعرض خطًا افتراضيًا (خط قياسي) قد لا يكون له أي علاقة بما كنت تتوقعه.

والخبر السار هو أنه منذ CSS 3 ، من الممكن أن يتم تنزيل الخط تلقائيًا إلى المتصفح. سأشرح كيفية القيام بذلك لاحقا

تغيير الخط المستخدم

الخاصية CSS التي تحدد الخط المراد استخدامه هي font-family. يجب أن تكتب اسم الخط مثل هذا:


tag
{
    font-family: الخط;
}                                          

فقط ، لتجنب المشكلات يمكنك وضع العديد من الخطوط التي يمكن استخدامها مفصولة بفواصل:


balise
{
    font-family: الخط1, الخط2, الخط3, الخط4;
}                                                     

سيحاول المتصفح أولاً استخدام الخط1 . إذا لم يكن لديه ، فسوف يحاول باستخدام الخط2 . إذا لم يكن لديه ، فسوف يذهب إلى الخط3، وهلم جرا. بشكل عام ، نشير في النهاية الى الخط serif إلى ما يتوافق مع الخط الافتراضي (والذي ينطبق فقط في حالة عدم العثور على خط آخر).

يوجد أيضًا خط افتراضي آخر يسمى sans-serif. الفرق بين الاثنين هو وجود علامات تبويب ربط صغيرة في الجزء السفلي من الحروف.

نعم ، ولكن ما هي الخطوط الأكثر شيوعًا التي لديك "الحق" في استخدامها ، هل ستقول؟ فيما يلي قائمة الخطوط التي تعمل بشكل جيد على معظم المتصفحات:

  • Arial ;
  • Arial Black ;
  • Comic Sans MS ;
  • Courier New ;
  • Georgia ;
  • Impact ;
  • Times New Roman ;
  • Trebuchet MS ;
  • Verdana.

بعض الخطوط العربية

  • Amiri
  • Droid Arabic Naskh
  • Lateef
  • Scheherazade
  • Thabit

يوضح الشكل التالي كيف تبدو هذه الخطوط.

css html file

لذلك ، إذا كتبت:


p
{
    font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}                                                     

... يعني ذلك: " ضع الخط Impact أو ، إذا لم يكن موجود ، Arial Black ، أو Arial بطريقة أخرى ، أو Verdana أو خلاف ذلك ، أو إذا لم يفلح أي شيء ، فضع خطًا قياسيًا (sans-serif) ".

بشكل عام ، من الجيد الإشارة إلى اختيار ثلاثة أو أربعة خطوط (+ serif أو sans-serif) للتأكد من العثور على واحد منهم على كمبيوتر الزائر.

إذا كان اسم الخط يحتوي على مسافات ، أقترح تضمينه بين علامات اقتباس ، كما فعلت مع "Arial Black".

استخدام خط مخصص مع@FONT-FACE

أجد أن اختيار الخطوط محدود للغاية. كيف يمكنني استخدام الخط المفضل على موقعي؟

لفترة طويلة ، كان هذا غير ممكن. اليوم ، مع CSS 3 ، هناك طريقة جيدة لاستخدام أي خط على موقعك. إنه يعمل بشكل جيد مع معظم المتصفحات.

لكن احذر ، فهناك بعض العيوب (ستكون جيدة جدًا إن لم تكن):

  • سيكون من الضروري أن يقوم متصفح زوارك بتنزيل ملف الخط تلقائيًا ، والذي يمكن أن يصل وزنه أو حتى يتجاوز 1 ميغابايت ...
  • تخضع معظم الخطوط لحقوق الطبع والنشر ، لذلك ليس من القانوني استخدامها على موقعك. لحسن الحظ ، هناك مواقع مثلfontsquirrel.com و dafont.com تقدم تنزيل عدد من الخطوط الخالية حقوق الاستعمال. أوصي بشكل خاصfontsquirrel.com لأنه يسمح لك بتنزيل حزم جاهزة للاستخدام لـ CSS 3.
  • هناك العديد من تنسيقات ملفات الخطوط وهذه لا تعمل على جميع المتصفحات.

فيما يلي تنسيقات ملفات الخطوط المختلفة والتي تحتاج إلى معرفتها:

  • .ttf: خط تروتايب . يعمل على IE9 وجميع المتصفحات الأخرى.
  • .eot: جزءا لا يتجزأ من OpenType . يعمل على برنامج Internet Explorer فقط ، جميع الإصدارات. هذا التنسيق مملوك من قِبل Microsoft.
  • .otf: OpenType الخط . لا يعمل على انترنت اكسبلورر.
  • .svg: SVG الخط . التنسيق الوحيد المعترف به على أجهزة iPhone و iPad في الوقت الحالي.
  • .woff: تنسيق ويب فتح الخط . تنسيق جديد مصمم للويب ، والذي يعمل على IE9 وجميع المتصفحات الأخرى.

في CSS ، لتحديد خط جديد ، يجب أن تعلنه هكذا:


@font-face {
    font-family: 'MaSuperPolice';
    src: url('MaSuperPolice.eot');
}                                                    

يجب أن يكون ملف الخطوط (هنا MaSuperPolice.eot ) موجودًا في نفس المجلد مثل ملف CSS (أو في مجلد فرعي ، إذا كنت تستخدم مسارًا نسبيًا).

اعتقدت أن هناك العديد من تنسيقات الخطوط؟

نعم ، إنها .eot تعمل فقط على Internet Explorer. المثل الأعلى هو تقديم عدة صيغ للخط: سيقوم المتصفح بتنزيل التنسيق الذي يمكنه قراءته. إليك كيفية تحديد تنسيقات متعددة:


@font-face {
        font-family: 'MaSuperPolice';
        src: url('MaSuperPolice.eot') format('eot'),
             url('MaSuperPolice.woff') format('woff'),
             url('MaSuperPolice.ttf') format('truetype'),
             url('MaSuperPolice.svg') format('svg');
}                                                     

لاختبار العملية ، أقترح عليك تنزيل خط Font Squirrel ، على سبيل المثال CAC Champagne . انقر فوق "Webfont Kit" ، سيتيح لك ذلك تنزيل مجموعة جاهزة للاستخدام مع جميع التنسيقات لهذا الخط. لا تنس التحقق من جميع المجلدات (WOFF ، TTF ، EOT و SVG).

اذا لم يعد خطCAC Champagne متاحًا ، يمكنك تنزيل أي خط آخر تريده!

للعثور على الخطوط التي تسمح لك بتنزيل "حزمة CSS" كما أصفها هنا ، قم بتنشيط مرشح "Webfont" في قائمة Font Filter.

سيبدو ملف CSS الخاص بك كما يلي:


@font-face { /* Définition d'une nouvelle police nommée CAC Champagne */
    font-family: 'cac_champagneregular';
    src: url('cac_champagne-webfont.eot');
    src: url('cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
         url('cac_champagne-webfont.woff') format('woff'),
         url('cac_champagne-webfont.ttf') format('truetype'),
         url('cac_champagne-webfont.svg#cac_champagneregular') format('svg');
}

h1 /* Utilisation de la police qu'on vient de définir sur les titres */
{
    font-family: 'cac_champagneregular', Arial, serif;
}                                                    

@font-face يعرّف القسم الأول (كبير) اسم خط جديد يمكن استخدامه في ملف CSS. ثم نستخدم اسم الخط هذا مع الخاصية font-familyالتي نعرفها لتغيير مظهر العناوين

<h1>. تستطيع أن ترى النتيجة في الشكل التالي.

css html file

ستلاحظ بعض المراوغات في CSS الناتجة عن موقع Font Squirrel. الهدف من ذلك هو التغلب على بعض الأخطاء في برنامج Internet Explorer لأن الإصدارات القديمة لا تفهم عندما نحدد العديد من التنسيقات. هذا ما يفسر وجود واحد ?#iefixفي الكود.

مائل ، غامق ، مسطر ...

في CSS ، توجد سلسلة من خصائص تنسيق النص الكلاسيكي. سنكتشف هنا كيفية عرض النص بخط غامق أو مائل أو تسطير ... وسنرى أنه من الممكن أن نذهب إلى أبعد من ذلك لجعله وميضًا!

مائل

انتظر قليلا! ظننت أن العلامة <em>سمحت بوضع النص بخط مائل ؟!

أنا لم أقل ذلك.

ارجع إلى الفصول السابقة إذا كانت لديك شكوك ، لكنني لم أقل أبدًا أن العلامة

<em>تم وضعها لوضع النص بخط مائل (كما لم أقل مطلقًا أن <strong> تضع الخط عريضا)

، ضع جيدًا في رأسك ،

<em> صنعت لتصر على الكلمات. هذا يعني أن الكلمات التي تحيط بها مهمة جدًا. لتمثيل هذه الأهمية ، تختار معظم المتصفحات عرض النص بخط مائل ، لكن هذا ليس شرطا.

يتيح CSS لك الحقً أن تقول: "أريد أن يكون هذا النص مائلًا". ليس هناك ما يمنعك ، على سبيل المثال ، من أن تقرر أن جميع ألقابك ستكون مائلة.

على وجه التحديد ، في CSS ، لوضع الحروف المائلة ، نستخدم font-styleالتي يمكن أن تأخذ ثلاث قيم:

  • italic: لوضع نص مائل.
  • oblique: سيتم تحريك النص (تكون الحروف مثنية ، والنتيجة مختلفة قليلاً عن الخط المائل الفعلي).
  • normal: النص سيكون طبيعيا (تلقائي). هذا يسمح لك بإلغاء الخط المائل. على سبيل المثال ، إذا كنت تريد أن <em>لا تضع النصوص مائلة ، فيجب عليك كتابة:

em
{
    font-style: normal;
}                                                     

لذلك ، في المثال التالي ، أستخدم font-style لجميع عناويني

<h2>: لجعلها مائلة


h2
{
    font-style: italic;
}                                                     
الخط العريض

ماذا لو تحولنا إلى تعريض النصوص؟

ماذا لو تحولنا إلى تعريض النصوص؟ لذلك ، مرة أخرى ، لا تنسَ أنه من غير

<strong>يمكننا وضع الخط عريض (دوره هو الإشارة إلى أن النص مهم ، وبالتالي فإن المتصفح يعرضه بالخط العريض عادة). على سبيل المثال ، يمكن تطبيق bold على العناوين وبعض الفقرات بأكملها وما إلى ذلك. الأمر متروك لك أن ترى.

الخاصية التي تضع النص عريض في CSS هي font-weightوتأخذ القيم التالية:

  • Bold : النص سيكون عريضا ؛
  • normal: سيتم كتابة النص بشكل طبيعي (تلقائي).

إليك على سبيل المثال كيفية كتابة العناوين بخط عريض:


h1
{
    font-weight: bold;
}    
التسطير والزخارف الأخرى

الخاصية CSS المرتبطة بذلك هي كما في اسمها: text-decoration. يسمح بتسطير النص اظافة الى أشياء أخرى ، بالتأكيد على النص فيما يلي القيم المختلفة التي يمكن أن نضعها:

  • underline: :التسطير.
  • line-through: مشطوبة.
  • overline: الخط فوق النص.
  • blink: وامض بمعنى يظهر و يختفي. لا يعمل على جميع المتصفحات (Internet Explorer و Google Chrome ، على وجه الخصوص).
  • none: عادي (تلقائي).

سيسمح لك الكود CSS الموالى باختبار تأثيرات text-decoration:

css html text
الانحياز (يمينا, يسارا ....)

تسمح لنا لغة CSS بالقيام بجميع المحاذاة المعروفة: اليسار الوسط واليمين والمبرر.

انها بسيطة. نستخدم text-align ونشير إلى المحاذاة المطلوبة:

  • left: سيتم ترك النص محاذيًا (هذا هو الإعداد التلقائي).
  • center: سيتم توسيط النص.
  • right: النص سيكون محاذاة إلى اليمين.
  • justify: النص سيكون "له ما يبرره". إن ضبط النص يجعل من الممكن عرضه على أوسع نطاق ممكن دون ترك أي مساحة بيضاء في نهاية الأسطر. نصوص الصحف ، على سبيل المثال ، لها ما يبررها دائمًا.

انظر إلى المحاذاة المختلفة في هذا المثال:


h1
{
    text-align: center;
}
p
{
    text-align: justify;
}

.signature
{
    text-align: right;
}        

النتيجة واضحة في الشكل التالي.

css html text

لا يمكنك تغيير المحاذاة على علامة النص المضمن مثل

<span>، <a>، <em>، <strong>.... المحاذاة تعمل فقط على العلامات من نوع كتلة مثل <p>، <div>، <h1>، <h2>، ... وهذه منطقية جدا عندما تفكر في ذلك: لا يمكنك تغيير محاذاة بضع كلمات في منتصف فقرة! لذلك عادة ما تكون الفقرة بأكملها يجب محاذاتها.

عنصر عائم

يتيح CSS تعويم عنصر حول النص. نقول أيضًا أننا نلبس العنصر

لكي ترى ما تتحدث عنه ، يوضح لك الشكل التالي ما سنتعلم القيام به.

css html text

أتصور أن السؤال الذي يحرق شفتيك الآن هو: " لكن ما هي الخاصية السحرية التي تجعل العنصر تطفو؟ ".

الجواب هو ... float("عائم" باللغة الإنجليزية). يمكن أن تأخذ هذه الخاصية قيمتين بسيطتين للغاية:

  • left: العنصر سوف يطفو إلى اليسار.
  • right: العنصر سوف يطفو ... أليس كذلك! نعم برافو

استخدام العناصر العائمة بسيط للغاية:

  1. يمكنك تطبيق float على علامة.
  2. ثم تواصل كتابة النص بطريقة عادية.
جعل صورة عائمة

سوف نتعلم هنا كيفية تعويم صورة. إليك كود HTML الذي يجب أن نكتبه أولاً:


        

Image flottante هذا هو نص فقرة عادي مكتوب بعد الصورة و سيحيط بها لانها عائمة.

يجب وضع العنصر العائم أولاً في كود HTML. إذا وضعت الصورة بعد الفقرة ، فلن يعمل التأثير.

هنا هو الجزء الوحيد من كود CSS الذي تحتاج إلى كتابته ، والذي يتيح لك تعويم الصورة إلى اليسار:


.imageflottante
{
    float: left;
}              

استمتع أيضًا بتعويم الصورة على اليمين ، كل ذلك بسيط: فقط ضع right في القيمة !

وقف العائمة

عندما تقوم بإعداد تعويم ، يرتدي النص المحيط به. ولكن ماذا لو كنت تريد ذلك بعد فترة يستمر النص أسفل التعويم؟ يمكننا وضع عدة
في صف واحد لكنه لن يكون أنيقا ولا نظيفا للغاية ... في الأساس ، نود أن نكون قادرين على الحصول على نفس النتيجة كما في الشكل التالي.

css img float

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

في الواقع هناك خاصية CSS تقول: " توقف ، يجب أن يكون هذا النص أقل من النقطة العائمة وألا يكون بجانبه ". هذه هي الخاصية clear، والتي يمكن أن تأخذ هذه القيم الثلاث:

  • left: يستمر النص أدناه بعدfloat: left;
  • right: يستمر النص أدناه بعدfloat: right;
  • both: يستمر النص أدناه ، سواء بعد واحد float: left;أو بعد واحد float: right;.

لتبسيط ، سوف نستخدم في كل وقت clear: both، من يمشي بعد يسار عائم وبعد تعويم يمين (لذلك يعمل في كل مرة). لتوضيح كيفية عمله ، سنأخذ كود HTML هذا:


Image flottante

هذا النص مكتوب بجانب الصورة العائمة.

هذا النص موجود تحت الصورة العائمة

وهذا كود CSS:


.imageflottante
{
    float: left;
}
.dessous
{
    clear: both;
}        

و هنا العمل.

نحن نطبق واحدة clear: both;على الفقرة التي نريد أن نرى استمرار تحت الصورة العائمة

الخلاصة


  • نقوم بتعديل حجم النص باستخدام خاصية CSS font-size. يمكننا من تحديد الحجم بالبكسل (16 بكسل) أو "em" (1.3em) أو بالنسبة المئوية (110٪) ، إلخ.
  • نستطيع تنغيير خط النص مع font-family. انتباه ، فقط عدد قليل من الخطوط معروفة من قبل جميع أجهزة الكمبيوتر. ومع ذلك ، يمكنك استخدام خط مخصص مع التوجيه @font-face: هذا سيجبر المتصفحات على تنزيل الخط الذي تختاره.
  • توجد العديد من خصائص تنسيق النص: font-styleمائل أو font-weightغامق أو text-decorationتسطير وما إلى ذلك.
  • يمكن محاذاة النص text-align.
  • يمكننا جعل صورة يرتديها ("يحيط بها") مع النص float.