كيفية جعل الحروف الكبيرة في HTML. كيفية جعل خط جميل في HTML: الأحجام والألوان وعلامات خط HTML. رسائل HTML و CSS المسافة بينهما

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

العلامات والسمات مع الروبوت مع خطوط HTML

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

سبب الخلق لغة HTML مشكلة عرض متصفحات قواعد تنسيق النص.


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

  • اللون - يحدد لون النص؛
  • حجم - حجم الخط في الوحدات الشرطية.

يتم دعم قيمة السمة الإيجابية من 1 إلى 7.

  • الوجه - يستخدم لتثبيت أسر خط النص لاستخدامها داخل العلامة وبعد يتم دعم بعض القيم المدرجة من خلال الفاصلة على الفور.

يتم تنسيق النص الموجود فقط بين جزء علامة زوج الخط. يتم عرض النص المتبقي عن طريق الخط القياسي المثبت افتراضيا.

أيضا في HTML هناك عدد من علامات الزوج التي تحدد قاعدة تنسيق واحدة فقط. وتشمل هذه:

  • - يحدد خط غامق ل HTML. بطاقة شعار عن طريق العمل مماثلة للآخر السابق؛
  • - الحجم أكبر من المجموعة الافتراضية؛
  • - حجم الخط أصغر؛
  • - النص المائل (مائل). علامة مماثلة ;
  • - نص مع الشرطة السفلية؛
  • - مضغوط؛
  • - عرض النص فقط في حالة صغيرة؛
  • - في الحالة العليا.

النص العادي

ظفري

ظفري

أكثر عادية

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

مائل

مائل

مع التركيز

سحق

ميزات سمة النمط

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

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

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

font-Family: اسم الخط [، اسم الخط [، ...]]

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

الخط الحجم: الحجم المطلق | الحجم النسبي | القيمة |. مصلحة | يرث.

يمكن أيضا تعيين حجم الخط:

  • في بكسل؛
  • في القيمة المطلقة ( xX صغير، X- صغير، صغير، متوسط، كبير);
  • في النسب المئوية؛
  • النقاط (PT).

الخط الحجم: 7

الخط الحجم: 24px

الخط الحجم: X-Large

الخط الحجم: 200٪

الخط الحجم: 24pt

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

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

قيم:

  • الكتابة الطبيعية غير الطبيعية؛
  • مائل مائل؛
  • مائل - الخط مع منحدر إلى اليمين؛
  • ورث - يرث كتابة العنصر الأصل.

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

نمط الخط: ورث

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

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

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

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

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

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

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

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

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

5) Wond-Wink - يسمح لك بتعيين سمك كتابة النص (التشبع). بناء الجملة:

font-Wintoint: Bold | أكثر جرأة | أخف وزنا | عادي | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |

قيم:

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

خط الوزن: جريئة

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

خط الوزن: أخف وزنا

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

خط الوزن: 900

خط الوزن: 100

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

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

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

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

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

الخط: أيقونة

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

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

الخط: مربع الرسالة

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

الخط: الحالة

الخط: مائل 50px جريئة "Times New Roman"، Times، Serif

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

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

سأظهر بعض الخيارات لحل هذه المهمة: PHP و CSS أكثر من المواد المنشورة بالفعل عندما تكون jQuery ستكون قادرا على تصحيح الموضع قبل النشر.

الحرف الأول من السلسلة في الحالة العليا على PHP

على PHP هناك وظيفة تسمى " ucfirst."، مما يؤدي فقط إلى تحويل رمز السلسلة الأول إلى الحالة العليا، ولكن ناقص هو أنه لا يعمل بشكل صحيح تماما مع السيريلية.

للقيام بذلك، سوف نكتب لدينا وظيفة صغيرةوبعد سوف ينظر التنفيذ مثل هذا:

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

الحرف الأول من السلسلة في الحالة العليا على CSS

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

استخدم ما يلي:

الجملة الأولى

العرض الثاني

العرض الثالث

الجملة الرابعة

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

الحرف الأول من السلسلة في الحالة العليا على جيس

كما قلت في وقت سابق، فإن هذه الطريقة من التحول هي الأنسب للمواد التي ستظل تنشر.

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

يتم تشغيل البرنامج النصي عند كتابة النص وسهولة إدراجها. لا تنس ذلك لعمل البرامج النصية على موقعك تحتاج إلى مكتبة مسج متصلة.

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

بالمناسبة، يحتوي WordPress على مكون إضافي خاص (WordPress.org/extend/plugins/drop-caps)، والذي يسمح لك بإنشاء متضمن تلقائيا في نص (وانزل) الحروف الكبيرةوبعد رائع! ومع ذلك، أنه إذا كنت لا ترغب في استخدام البرنامج المساعد (أنا متأكد من أنك لا تريد)، فأنت بحاجة فقط إلى إنشاء غطاء إسقاط لعدة مشاركات، وربما في مكان معين؟

الأخبار الجيدة: من أجل إنشاء الحروف الكبيرة لا تحتاج إلى تطبيق البرنامج المساعد، كل ما هو مطلوب هو بعض CSS و SPAN TAG. افتح ملف CSS الخاص بك وإضافة التعليمات البرمجية التالية:

span.dropcaps (font-family: georgia، serif؛ اللون: #ccc؛ حجم الخط: 46px؛ تعويم: اليسار؛ خط الوزن: 400؛ خط الارتفاع: 1EM؛ الهامش أسفل: -0.4M؛ الهامش الصحيح : 0.09EM؛ موقف: قريب؛)

شيء من هذا القبيل. بالطبع، سوف تحتاج إلى نمط من شأنه أن يأتي إلى التصميم والنص الخاص بك. على سبيل المثال، ستحتاج قيم الممتلكات: حجم الخط والهوامش والطريق إلى الارتفاع إلى التقاط أساس التصميم والنص.

علامة تمتد.

من أجل استخدام النمط لسماعة نص النص، تحتاج إلى "لف" حرف العنوان في علامة SPAN وتسجيل الفئة المناسبة.

أ.

العنصر الزائدي: الحرف الأول

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

P: الحرف الأول (Font-Family: Georgia، Serif؛ اللون: #CCC؛ font-size: 46px؛ تعويم: اليسار؛ خط الوزن: 400؛ خط الارتفاع: 1EM؛ الهامش أسفل: -0.4EM؛ الهامش -إنجاز: 0.09EM؛ موقف: قريب؛)

هنا، في الواقع، زوج من أساليب التحرير الحروف الكبيرة من عند باستخدام CSS..

يدير تحويل النص للعنصر إلى رأس المال أو أحرف رأس المال. عندما تختلف القيمة عن أي شيء، سيتم تغيير سجل التعليمات البرمجية المصدر.

معلومات مختصرة

التسميات

وصفمثال
<тип> يحدد نوع القيمة.<размер>
A && B.يجب عرض القيم بالترتيب المحدد.<размер> && <цвет>
A | ب.يشير إلى أنه يجب تحديد قيمة واحدة فقط من المقترحين (A أو B).طبيعي | قبعات صغيرة.
A ||. ب.يمكن استخدام كل قيمة بشكل مستقل أو مع الآخرين في ترتيب تعسفي.العرض ||. عدد
مجموعات المجموعات.[المحاصيل ||. تعبر]
* كرر صفر أو أكثر.[,<время>]*
+ كرر مرة واحدة أو أكثر.<число>+
? النوع المحدد أو الكلمة أو المجموعة ليس إلزاميا.أقحم؟
(أ، ب)كرر على الأقل، ولكن ليس أكثر من أوقات ب.<радиус>{1,4}
# كرر مرة واحدة أو أكثر من خلال الفاصلة.<время>#
×

قيم

الاستفادة من الطابع الأول لكل كلمة في الاقتراح سيكون رأس المال. الرموز المتبقية لا تغير نوعك. صغيرة تصبح جميع الأحرف النصية صغيرة (الحالة الصغيرة). الأحرف الكبيرة تصبح جميع الأحرف النصية كبيرة (سجل أعلى). لا شيء لا يغير تسجيل الرمز.

رمل

Winnie The Poh لم يكن دائما لا يمثل إعادة بناء، خاصة ساعات في أحد عشر صباحا، لأنه في ذلك الوقت قد انتهى الإفطار، ولم يفكر العشاء في ذلك. وبالطبع، كان يسعده بشكل رهيب، ورؤية أن الأرنب يأخذ الكؤوس والألواح.

dIV (تحويل النص: الاستفادة؛)

مثال

تحويل النص

النصب الثقافي للأعمار الوسطى

يأخذ Amazon Lowland بشكل موحد لاسلكيا صغيرا للقطط والكلاب، وتشتهر Hyosh Baya بالنبيذ الأحمر.

نتيجة هذا المثال يظهر في الشكل. واحد.

تين. 1. تطبيق خاصية تحويل النص

نموذج كائن

شيء.style.texttransform.

تخصيص

كل مواصفات تمر عدة مراحل الموافقة.

  • توصية - المواصفات المعتمدة W3C وأوصت بالمعيار.
  • توصية المرشح ( التوصية الممكنة) - إن مجموعة مسؤولة عن المعيار راضية حيث تلبي أهدافها، لكن مساعدة مجتمع التنمية لتنفيذ المعيار مطلوب.
  • التوصية المقترحة ( عرضت التوصية) - في هذه المرحلة، يتم تقديم المستند إلى المجلس الاستشاري W3C للموافقة النهائية.
  • مشروع العمل (مشروع العمل) هو نسخة أكثر نضجا من المسودة بعد المناقشة والتعديلات لتنظر فيها المجتمع.
  • مسودة المحرر ( افتتاحية Chernovik.) - الإصدار الخام من المعيار بعد إجراء المحررين بمحرر المشروع.
  • مسودة ( مواصفات تشيرنوفيك) - أول نسخة سوداء من المعيار.
×

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

تأخذ تحويل النص

بفضل جداول نمط المتتالية، يمكنك تغيير كل من الرمز الأول للكتلة والنص بأكمله. سأخبرك كيف يمكنك القيام بكلتا الخيارين. في الوقت نفسه، يتم دعم جميع الأدوات المذكورة في هذه المقالة في ثلاثة مستويات من اللغة: CSS1، CSS2، CSS2.1 و CSS3.

سأبدأ بممتلكات مثيرة للاهتمام تعدل محتوى النص بأكمله في واحد المحدد. هو - هي تحويل النص.

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

الآن، لتأمين المواد النظرية، تفكيك مثال.

تحويل النص

انتباه!

! غدا لجميع منتجات منتجات التجميل!

الإجراء صالح في جميع الفروع الموجودة في مدينتك.

إنشاء مبادرة

إذا كنت لا تعرف ما الذي ينطوي على مصطلح "الحروف"، فقد حان الوقت لمعرفة ذلك، حيث يرتبط مباشرة بالموضوع الحالي.

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

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

لحل المهمة، يمكنك استخدام مثل هذه الأداة كما.

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

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

المتحدث الأولي

تقول هذه الفقرة اقتراحا بمحتوى مثير للاهتمام للغاية.

سنواصل قصة مثيرة للاهتمام في الفقرة التالية.

النتيجة التي تم الحصول عليها تبدو جذابة للغاية وغير عادية، وهذا هو الحل الأمثل ل.

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

إذا كانت المواد المذكورة مفيدة لك، فقم بالاشتراك في تحديث مدونتي ولا تنسى مشاركة المعرفة المكتسبة (وبالطبع إشارة إلى مدونتي) مع الأصدقاء. حظا سعيدا!

مع السلامة!

مع خالص التقدير، روماني تشويريف