كيف تصنع خطًا لطيفًا في لغة تأشير النص الفائق: الأحجام والألوان وعلامات خطوط html. كيف تكتب النص تحت الصور في لغة تأشير النص الفائق لماذا يستخدم rgba

ظفري

ظفري

أكثر من المعتاد

أقل من المعتاد

مائل

مائل

مسطر

شطب

إمكانيات سمة النمط

بالإضافة إلى العلامات الموضحة ، هناك عدة طرق أخرى لتغيير الخط في html. واحد منهم هو استخدام سمة النمط العام. باستخدام قيم خصائصه ، يمكنك ضبط نمط عرض الخط:

1) font-family - تحدد الخاصية عائلة الخط. من الممكن تعداد عدة قيم.
سيحدث تغيير الخط في html إلى القيمة التالية إذا لم يتم تعيين العائلة السابقة على نظام التشغيلالمستعمل.

بناء جملة الكتابة:

عائلة الخطوط: اسم الخط [، اسم الخط [، ...]]

2) حجم الخط - يتم تعيين الحجم من 1 إلى 7. هذه إحدى الطرق الرئيسية التي يمكنك من خلالها زيادة الخط في html.
بناء جملة الكتابة:

حجم الخط: الحجم المطلق | الحجم النسبي | قيمة | الفائدة | يرث

يمكن أيضًا ضبط حجم الخط:

• بالبكسل
• بالقيمة المطلقة ( xx-small ، x-small ، صغير ، متوسط ​​، كبير);
• بالنسب المئوية
• بالنقاط (نقطة).

حجم الخط: 7

حجم الخط: 24 بكسل

حجم الخط: x-large

حجم الخط: 200٪

حجم الخط: 24 نقطة

3) نمط الخط - يحدد أسلوب كتابة الخط. بناء الجملة:

نمط الخط: عادي | مائل | منحرف | يرث

قيم:

• عادي - هجاء عادي
• مائل - مائل
• مائل - خط يميل إلى اليمين ؛
• يرث - يرث تهجئة العنصر الأصل.

مثال على كيفية تغيير الخط في html باستخدام هذه الخاصية:

نمط الخط: يرث

نمط الخط: مائل

نمط الخط: عادي

نمط الخط: منحرف

4) متغير الخط - يحول جميع الأحرف الكبيرة إلى أحرف كبيرة. بناء الجملة:

متغير الخط: عادي | قبعات صغيرة | يرث

مثال على كيفية تغيير الخط في html بهذه الخاصية:

متغير الخط: وراثة

متغير الخط: عادي

متغير الخط: أحرف صغيرة

5) وزن الخط - يسمح لك بتعيين سمك كتابة النص (التشبع). بناء الجملة:

وزن الخط: غامق | أكثر جرأة | أفتح | عادي | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

قيم:

• عريض - يحدد الخط الغامق html ؛
• أكثر جرأة - أكثر بدانة بالنسبة للطبيعي ؛
• أفتح - أقل تشبعًا بالنسبة إلى الوضع الطبيعي ؛
• عادي - هجاء عادي
• 100-900 - يحدد سُمك الخط بالمكافئ العددي.

وزن الخط: غامق

وزن الخط: أكثر جرأة

وزن الخط: أخف

وزن الخط: عادي

وزن الخط: 900

وزن الخط: 100

خاصية الخط ولون خط html

الخط هو خاصية حاوية أخرى. داخليًا ، قام بدمج قيم العديد من الخصائص المصممة لتغيير الخطوط. صيغة الخط هي:

الخط: font-size font-family | يرث

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

• التسمية التوضيحية - للأزرار ؛
• رمز - للرموز ؛
• القائمة - القائمة ؛
• مربع الرسائل - لمربعات الحوار ؛
• التسمية التوضيحية الصغيرة - لعناصر التحكم الصغيرة
• شريط الحالة - خط شريط الحالة.

الخط: أيقونة

الخط: التسمية التوضيحية

الخط: القائمة

الخط: صندوق الرسائل

التسمية التوضيحية الصغيرة

الخط: شريط الحالة

الخط: مائل 50 بكسل غامق "Times New Roman"، Times، serif

لتعيين لون الخط في html ، يمكنك استخدام خاصية اللون. يسمح لك بتعيين اللون كما هو الحال مع كلمة رئيسيةوبتنسيق RGB. وأيضًا في شكل رمز سداسي عشري.

علامات HTML التي تحدد محاذاة النص والمسافة البادئة

يتم استخدام النص المضبوط في الطباعة

يوضح المثال أدناه كيفية المحاذاة نص لعرضهالصفحات:

تضمن قيمة التبرير التوحيد محاذاة النص الأيمن والأيسر، هذا هو في العرض... تستخدم هذه الطريقة على نطاق واسع في الطباعة.

محاذاة النص في مركز HTML والعرض

قم بمحاذاة النص إلى الوسط بتنسيق HTML ، والنص إلى اليمين:

نتيجة:

السمات والقيم

• محاذاة = "يسار" - يحدد محاذاة النص إلى اليسار(إفتراضي).
• محاذاة = "مركز" - يحاذي النص إلى المركز.
• محاذاة = "يمين" - يحاذي النص إلى اليمين.

المحاذاة | مسافة بادئة لنص HTML

نص HTMLوالمسافة البادئة إلى يسار الصفحة

سوف ننتج نص المسافة البادئةعلى اليسار بطريقتين:

نتيجة:

عرض في نافذة جديدة.

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

محاذاة = "top" - محاذاة النص أعلى الصورة.
محاذاة = "أسفل" - محاذاة النص إلى الأسفل.
محاذاة = "منتصف" - محاذاة النص في المركز.

يوجد أدناه الكود الذي يوضح كيفية عمل المعلمات الموصوفة أعلاه.

نحلة جميلة

لطيف جدا النحل

لا شيء أيضا.

لنرى الآن كيفية عرض صورة بكمية كبيرة من النص.
هناك نوعان من المعلمات:

محاذاة = "يسار" - الصورة "تلتف حول النص" إلى اليسار.
محاذاة = "يمين" - الصورة "تلتف حول النص" إلى اليمين.

للتوضيح ، اكتب الكود التالي:

شكل الشمس قريب من كرة مثالية يبلغ قطرها 1،392،000 كم. يحتوي على مدار القمر ، ولا يزال هناك متسع كبير. في الواقع ، يمكن لأكثر من مليون كوكب مثل الأرض أن تتلاءم بحرية مع الشمس. بالإضافة إلى ذلك ، إذا كان بإمكانك قيادة سيارة على سطحها بسرعة 88 كم / ساعة ، فسوف يستغرق الأمر 5 سنوات ونصف لتتجول حول الشمس مرة واحدة (دون توقف). لكن حجم الشمس ليس ثابتًا. تظهر الأبحاث الحديثة أن قطر الشمس يتناقص بنحو متر واحد في الساعة. إذا حدثت هذه الظاهرة أيضًا في القرن الماضي ، فإن الشمس التي نراها الآن تقل بمقدار 800 كيلومتر عن تلك التي رآها أسلافنا. ربما يكون هذا الانكماش الشمسي جزءًا من تذبذب طويل الأمد يساعد على استقرار التدفق الهائل للطاقة.

قمر

إنه القمر الصناعي الطبيعي الوحيد للأرض. كتلة القمر هي 0.0123 كتلة أرضية (1/81 تقريبًا) أو 7.6.1022 كجم. قطر القمر يزيد قليلاً عن ربع قطر الأرض (0.273) أو 3476 كم. يضيء القمر الأرض أكثر خفوتًا بمقدار 500000 مرة من الشمس). على القمر ليس هناك جو مألوف لنا ، لا توجد أنهار وبحيرات ونباتات وكائنات حية. قوة الجاذبية على القمر أقل بست مرات من قوة الجاذبية على الأرض. ليلا ونهارا مع تغيرات في درجات الحرارة تصل إلى 300 درجة تستمر لمدة أسبوعين.

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

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

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

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

مخطط المستند

ترميز HTML

فيلم في الحديقة:
الكونغ فو باندا

بالطبع ، سيكون من الأسهل استخدام div لتقديم الصورة كخلفية ، ولكن في هذه الحالة أفترض أن الصورة هي محتوى المستند وبالتالي تنتمي إلى HTML. سيتم استخدام عنصر div كحاوية للوضع المطلق للنص فيه.

CSS

وهكذا وضعنا النص فوق الصورة مباشرة. مهمتنا التالية هي إنشاء خلفية للنص. منذ العنصر

هو عنصر كتلة ، لا يمكننا استخدامه لهذه الأغراض. دعنا نستخدم العنصر المضمن ... دعنا نلف النص داخل العنوان فيه.

فيلم في الحديقة:
الكونغ فو باندا

سنستخدم هذا الامتداد لتصميم النص والخلفية:

H2 span (color: white؛ font: bold 24px / 45px Helvetica، Sans-Serif ؛ تباعد الأحرف: -1 بكسل ؛ الخلفية: rgb (0 ، 0 ، 0) ؛ / * في حالة عدم عمل السطر التالي * / الخلفية: rgba (0 ، 0 ، 0 ، 0.7) ؛ الحشو: 10 بكسل ؛)

مشاكل

كما ترى من الشكل ، في نهاية السطر ، تنتهي كتلة نصية مباشرة بعد الحرف الأخير في السطر ، وتبدأ على الفور بمحاذاة اليسار عند السطر التالي... لن تساعدنا خاصية الحشوة للمدى ، في هذه الحالة.

لحل المشكلة ، تحتاج إلى استخدام مسافات إضافية على جانبي العلامة.
، في هذه الحالة يمكننا بالفعل استخدام المساحة المتروكة.

فيلم في الحديقة:
الكونغ فو باندا

باستخدام هذه الامتدادات الجديدة ، سنقوم بتعيين خاصية المساحة المتروكة:

H2 span.spacer (المساحة المتروكة: 0 5 بكسل ؛)

ماذا عن الدلالات؟

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

فيلم في الحديقة:
الكونغ فو باندا

$ (function () ($ ("h2"). wrapInner (" ")؛ $ (" h2 br "). before (" ") .بعد، بعدما (" "); });