مدخلكيفية جعل خط جميل في HTML: الأحجام والألوان وعلامات خط HTML. كيفية الكتابة في نص HTML تحت الصور لماذا يتم استخدام RGBA
في حجم الخط 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. وكذلك في شكل رمز سداسي عشري.
علامات HTML تحديد محاذاة النص، المسافة البادئة
عرض النص المستخدمة في منزل الطباعة
في المثال أدناه، يظهر كيفية محاذاة النص في العرض الصفحات:
| محاذاة \u003d "اليسار" | align \u003d "الحق" |
|---|---|
كل يوم ينمو عدد الموظفين العاملين في قطاع الخدمات ونشر المعلومات. إذا كانت رموز القرون الماضية مزرعة ومصنع، فإن رمز القرن XXI الحالي هو مكتب مزود بأجهزة الكمبيوتر التي يمكنها الوصول إلى تدفق المعلومات. |
|
| محاذاة \u003d "تبرير" | align \u003d "Center" |
كل يوم ينمو عدد الموظفين العاملين في قطاع الخدمات ونشر المعلومات. إذا كانت رموز القرون الماضية مزرعة ومصنع، فإن رمز القرن XXI الحالي هو مكتب مزود بأجهزة الكمبيوتر التي يمكنها الوصول إلى تدفق المعلومات. |
كل يوم ينمو عدد الموظفين العاملين في قطاع الخدمات ونشر المعلومات. إذا كانت رموز القرون الماضية مزرعة ومصنع، فإن رمز القرن XXI الحالي هو مكتب مزود بأجهزة الكمبيوتر التي يمكنها الوصول إلى تدفق المعلومات. |
تبرير القيمة يوفر الزي الرسمي نص التسوية على اليمين واليسار، بمعنى آخر بعرضوبعد تستخدم هذه الطريقة على نطاق واسع في الطباعة.
نص التسوية في HTML في المركز والعرض
نص التسوية في HTML تركز، نص على اليمين:
نتيجة:
السمات والقيم
- align \u003d "اليسار" - يحدد نص التسوية اليسار (إفتراضي).
- align \u003d "Center" - مستويات النص في المركز.
- align \u003d "right" - خطوط النص على اليمين.
المحاذاة |. أتش تي أم أل نصر النص
نص HTML وتراجعه على يسار الصفحة
ينتج مسافة البادئة نص ترك بطريقتين:
نتيجة:
عرض في نافذة جديدة.
يحدث ذلك تحتاج إلى سحب الصورة ونسب الاسم (عبارة قصيرة). لهذا هناك معلمات:
align \u003d "TOP" - أسطر النص في الجزء العلوي من الصورة.
align \u003d "أسفل" - نص خطوط في الأسفل.
align \u003d "منتصف" - محاذاة النص في الوسط.
فيما يلي رمز يدل على العملية فوق المعلمات الموصوفة.
النحل الجميل
نحلة جميلة جدا
لا شيء أيضا.
الآن دعونا نرى كيف تحتاج إلى عرض صورة بعدد كبير من النص.
هناك اثنين من المعلمات:
align \u003d "اليسار" - الصورة "تدفق النص" على اليسار.
align \u003d "الحق" - الصورة "تدفق النص" إلى اليمين.
للوضوح، اكتب هذا الرمز:
<أتش تي أم أل\u003e <رئيس\u003e <العنوان\u003eصورة HTML على اليسار - النص على اليمينالعنوان\u003e رئيس\u003e <الجسم\u003e <img. SRC \u003d "الصور / htmlsun.jpg" محاذاة \u003d. "غادر" عرض \u003d. "140" الارتفاع \u003d. "124" /> <كبير\u003eالشمسكبير\u003e <bR\u003e <p\u003e \u003e قد يكون هناك نص يحتوي على معلومات حول الشمس.p\u003e <bR\u003e<bR\u003e <img. SRC \u003d "الصور / htmlmoon.jpg" محاذاة \u003d. "حق" عرض \u003d. "140" الارتفاع \u003d. "124" /> <كبير\u003eالقمركبير\u003e <bR\u003e <p\u003e هنا يمكنك إدراج مقال علمي عن القمر.p\u003e الجسم\u003e أتش تي أم أل\u003e
الشمس شكل الشمس بالقرب من المجال المثالي الذي يبلغ قطره 1392000 كم. يستوعب مدار القمر، ولا يزال هناك الكثير من الفضاء. في الواقع، أكثر من مليون كواكب مثل الأرض ستناسب بحرية داخل الشمس. بالإضافة إلى ذلك، إذا كنت قادرا على قيادة سيارة على سطحها بسرعة 88 كم / ساعة، فستترك 5 سنوات ونصف للقيادة حول الشمس مرة واحدة (دون توقف). لكن حجم الشمس ليس ثابتا. تشير الدراسات الحديثة إلى أن قطر الشمس ينقص حوالي 1 متر في الساعة. إذا تم عقد هذه الظاهرة في القرن الماضي، فإن الشمس، والتي نرىها الآن 800 كم أقل مما رأى أسلافنا. ربما يكون هذا الضغط الشمسي جزءا من التذبذب على المدى الطويل يساعد على تثبيت انبعاثات هائلة من الطاقة.
القمر
هذا هو القمر الصناعي الطبيعي الوحيد للأرض. كتلة القمر هي 0.0123 كتل من الأرض (حوالي 1/81) أو 7.6.1022 كجم. يبلغ قطر القمر أكثر من ربع الأرض (0.273) أو 3 476 كم. القمر يضيء أرض 500000 مرة أضعف من الشمس). لا توجد أجواء مألوفة بالنسبة لنا على سطح القمر، لا توجد أنهار والبحيرات والنباتات والكائنات الحية. قوة الجاذبية على القمر هي ست مرات أقل من الأرض. ليلا ونهارا مع درجة الحرارة يسقط ما يصل إلى 300 درجة الماضي أسبوعين.
لكن كما ترى قد تكون حتى يكون النص والصورة قريبا جدا من بعضها البعض. لتصحيحها، تحتاج فقط إلى تعيين بعض الحجم المطلوب سمك الإطار واللون، مثل الخلفية الخلفية.
<أتش تي أم أل\u003e <رئيس\u003e <العنوان\u003eإخراج الصورة من قبل أتش تي أم أل الصفحة العنوان\u003e رئيس\u003e <الجسم\u003e <img. SRC \u003d "الصور // htmleclipse.jpg" Alt \u003d محاذاة \u003d "غادر" عرض \u003d. "160" الارتفاع \u003d. "130" نمط \u003d "الحدود: 8px الصلبة #fffffff؛"/> <كبير\u003eكبير\u003e <bR\u003e <p\u003e مقال حول الكسوف المشمس.p\u003e الجسم\u003e أتش تي أم أل\u003e
هذه الظاهرة الفلكية تكمن في حقيقة أن القمر يغلق الشمس تماما أو جزئيا من المراقب على الأرض. الكسوف الشمسي ممكن فقط في القمر الجديد، عندما لا يتم تغطية جانب القمر الذي يواجه الأرض، والقمر نفسه غير مرئي. من الممكن كسوفات فقط إذا حدث القمر الجديد بالقرب من أحد العقدتين القمرين (نقاط تقاطع المدارات المرئية للقمر والشمس)، لا يزيد عن 12 درجة من واحد منهم.
بشكل عام، السؤال نفسه سهل. لا يوجد شيء الماكرة لترتيب كتلة واحدة، على رأس آخر. ولكن لا يزال، هناك عدة لحظات جديرة بالمناقشة في هذا الشأن. أعتقد أنه سيكون هناك أشخاص يهتمون.
هذه الفكرة هي ببساطة تطبيق بعض النصوص على الصورة. يتم تقديم النص في شكل كتل ذات الطول المتغير، فمن المفترض أنه سيتم تحديد موقعه على الجانب الأيسر، مع ملء سلس حول النص. على سبيل المثال، كما هو الحال في هذه الصورة:
مخطط الوثائق
HTML ترميز
فيلم في الحديقة:
الكونغ فو باندا.
بالطبع، سيكون من الأسهل استخدام عنصر DIV لإخراج الصورة كأنما نمط خلفية، ولكن في هذه الحالة أفترض أن الصورة هي محتوى المستند، وبالتالي، فإنه ينتمي إلى HTML. سيتم استخدام عنصر DIV كحاوية لتحديد المواقع المطلقة للنص فيه.
CSS.
.Image (الموقف: قريب؛ العرض: 100٪؛ / * ل IE 6 * /) H2 (الموقف: مطلق؛ أعلى: 200 بكسل؛ اليسار: 0؛ العرض: 100٪؛وبالتالي، وضعنا النص مباشرة على الصورة. التالي مهمتنا تجعل الخلفية للنص. منذ العنصر
إنه عنصر كتلة، لا يمكننا استخدامه لهذه الأغراض. نحن نستخدم العنصر المضمنة وبعد التفاف في نصها داخل العنوان.
فيلم في الحديقة:
الكونغ فو باندا.
سوف نستخدم هذه الفلاف لتصميم النص والخلفية:
H2 SPAN (اللون: أبيض؛ الخط: Bold 24px / 45px Helvetica، Sans-serif؛ جدولي الحركة: -1px؛ خلفية: RGB (0، 0، 0)؛ / * في حالة السطر التالي لا يعمل * / الخلفية : RGBA (0، 0، 0، 0.7)؛ الحشو: 10 بكسل؛)
مشاكل
كما يتضح من الشكل، في نهاية السطر، تنتهي كتلة النص مباشرة بعد الرمز الأخير في السلسلة، ويبدأ على الفور في الحافة اليسرى على السطر التاليوبعد الحشو الممتلكات لمدة سبان، في هذه الحالة، لن يساعدنا.
لحل المشكلة، تحتاج إلى استخدام تمديدات إضافية على جانبي العلامة
في هذه الحالة، يمكننا بسهولة استخدام الحشو.
فيلم في الحديقة:
الكونغ فو باندا.
ستقوم هذه الأمان الجديدة بمراجعة خاصية الحشو:
H2 Span.Spacer (الحشو: 0 5 بكسل؛)
ما هي الدلالات؟
على ال هذه المرحلة اكتمال التصميم، ولكن ظلت مشكلة واحدة. يسمى، كمية كبيرة أضافت عناصر HTML إضافية للتصميم فقط. أقصد span-s. لحل هذه المشكلة، نحن نستخدم jQuery. للقيام بذلك، احذف جميع تمديدات في العلامات، وإضافها ديناميكيا:
فيلم في الحديقة:
الكونغ فو باندا.
$ (وظيفة () ($ ("H2"). التفاف (" ")؛ $ (" H2 BR "). قبل (" ") .بعد (" ");
});
الكونغ فو باندا.
في هذه الحالة، يمكننا بسهولة استخدام الحشو.
الكونغ فو باندا.
الكونغ فو باندا.