زخرفة صفحة الويب وحجم الخط في HTML

سيكون من المفيد لمصممي الويب المبتدئين معرفة طرق تصميم نص صفحة الويب. يتضمن ذلك المحاذاة واللون وحجم الخط والمزيد.

هناك العديد من العلامات المرتبطة بالتنسيق. الأكثر استخدامًا "p" - فقرة. يحتوي على معلمات اختيارية تحدد مظهر النص.

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

ثم تتبع معلمات "class" و "id" ، وهي تحدد الفئة التي ينتمي إليها الكائن المحدد ومعرفه ، ويمكن أن يتضمن هذا أيضًا سمة "style". - يقوم بتعيين نمط الكتلة المضمنة. كل هذه الخصائص مرتبطة بـ CSS ، والتي سيتم مناقشتها أدناه.

العلامة "p" هناك عيب واحد - لا يمكنك استخدامهاضبط مظهر الخط ، على سبيل المثال ، لونه أو حجمه. علامة أخرى مخصصة لهذا الغرض - "الخط". تحدد جميع معلماته كيف سيبدو النص.

السمة الأولى لهذه العلامة هي "اللون". كما كنت قد خمنت ، فإنه يحدد اللون. يمكن أن تأخذ هذه المعلمة كلا الاسمين ("أبيض" ، "أصفر" ، "أرجواني") والقيم في نظام RGB. يتم ذلك على النحو التالي: أولاً ، يتم وضع علامة # ، ثم تتم الإشارة إلى ثلاثة أرقام في النظام الست عشري من 00 إلى ff أو من 0 إلى 255 - في النظام العشري - مقدار الأحمر والأخضر والأزرق في اللون النهائي. على سبيل المثال ، لاستخدام اللون الأحمر ، اكتب "# ff0000" ، أصفر - "# ffff00".

السمة التالية هي "الوجه". يحدد الخط. على سبيل المثال ، يمكن ضبطه على "Times New Roman" أو "Tahoma".

وأخيرًا ، فإن معلمة "size" مسؤولة عن حجم الخط في HTML. يأخذ قيمة عددية - الحجم.

على سبيل المثال ، لعرض النص باللون الأزرق الفاتح والخط "Comic Sans MS" بحجم النقطة الخامسة عشرة ، تحتاج إلى تعريف العلامة "p" بالمعلمات:

color = "# 6666ff" face = "Comic Sans MS" الحجم = "15"

هناك أيضًا العديد من العلامات التي تسمح لك بتحديد نوع معين من التنسيق: "b" - غامق ، "i" - مائل ، "u" - تسطير. كلهم ليس لديهم معايير.

تعيين سمات النص في HTML - حجم الخط ،سماعة الرأس غير مريحة إلى حد ما. تخيل أنك بحاجة إلى تبديل الكتل بتصميمات نصية مختلفة. ثم عليك تحديد نفس السمات لكل علامة. يمكن القيام بذلك بسهولة أكبر باستخدام CSS Cascading Style Sheets. على سبيل المثال ، لإنشاء فئة صورة تسمى "myclass" بنفس التصميم كما في المثال السابق ، أضف السطر التالي إلى علامة "style":

#myclass {font: rgb (102،102،255) "Comic Sans MS" 15pt؛}

هنا يحدد "rgb (102102255)" اللون ، "ComicSans MS "هو محرف الكتابة ، و" 15pt "هو حجم الخط. يمكن أيضًا تحديد اللون بالاسم والخط - سواء بالحجم أو بالبكسل (لهذا تحتاج إلى كتابة ، على سبيل المثال ،" 20px ").

لتطبيق هذا التصميم ، يجب أن تكتب في علامة "p":

class = "myclass"

يمكنك تنسيق أي نص آخر بنفس الطريقة. يكفي تعيين معلمة "الفئة" بقيمة الفئة التي تريد استخدامها.

ولإنشاء معرف باسم "myid" ، عليك أن تكتب في "style":

#myid {font: rgb (102،102،255) "Comic Sans MS" 15pt؛}،

وفي العلامة "p" ، قم بتعيين سمة "id" بقيمة "myid".

الفئة والمعرف هما نفس الشيء إلى حد كبير. في هذه الحالة ، يمكن أن تحتوي علامة واحدة على كلاً من الأول والثاني:

class = "myclass" id = "myid"

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

كما ترى ، فإن تغيير حجم الخط في HTML أمر سريع. مفتاح البرمجة هو الممارسة ، لذا تدرب بجد وستنجح!