सीएसएस इटैलिक्स: फ़ॉन्ट शैली बदलें। एचटीएमएल 5: पुराना टैग नया असाइनमेंट जो टैग को इटैलिक करता है

इस लेख में, हम टेक्स्ट का चयन करने के तरीके के बारे में बात करेंगे। इटैलिक में एचटीएमएल। बोल्ड टेक्स्ट के साथ, इटैलिकाइज़्ड टेक्स्ट को तीन तरीकों से बनाया जा सकता है:

  • टैग मैं एचटीएमएल;
  • टैग एम एचटीएमएल;
  • सीएसएस संपत्ति फ़ॉन्ट शैली.

आइए HTML में आप इटैलिक कैसे बना सकते हैं, इसके तीनों विकल्पों पर विचार करें, इस मुद्दे की सूक्ष्मताओं पर चर्चा करें और कुछ स्थितियों में उपयोग करने के लिए कौन से तरीके अधिक सुविधाजनक और अधिक सही हैं।

इटैलिक पाठ: टैग

टैग मैं (इटैलिक), टैग के समान ख बोल्ड टेक्स्ट के लिए, इसका उपयोग शारीरिक रूप से इटैलिक टेक्स्ट को हाइलाइट करने के लिए किया जाता है (इसका मतलब है कि केवल टेक्स्ट की शैली बदल जाती है)। टैग एप्लिकेशन मैं:

वेबसाइट निर्माता "Nubex"

इस प्रकार, पाठ का आवश्यक भाग टैग के बीच रखा गया है .

इटैलिक पाठ: टैग

हालांकि टैग मैं साइट ऑप्टिमाइज़ेशन के दृष्टिकोण से मान्य है, टैग का उपयोग करना बेहतर है एम पाठ के तार्किक रूप से महत्वपूर्ण वर्गों को उजागर करने के लिए। इसका मतलब है कि खोज रोबोट टैग के बीच रखे गए पाठ के महत्व को ध्यान में रखते हैं। :

वेबसाइट निर्माता "Nubex"

परिणाम:

वेबसाइट निर्माता "Nubex"

लेकिन यह मत भूलो कि पाठ टैग में संलग्न है मैं तथा एम, हालांकि वे लगभग सभी (सभी आधुनिक ब्राउज़रों में) प्रदर्शित होते हैं, उनके सार में वे काफी समान नहीं हैं, जैसा कि ऊपर उल्लेख किया गया है। इसलिए, आपको आवश्यकतानुसार टैग का उपयोग करने की आवश्यकता है: टैग एम HTML पाठ के महत्वपूर्ण खंडों को फ्रेम करता है, और टैग का उपयोग करके दृश्य इटैलिक डिज़ाइन लागू करता है मैं या सीएसएस शैलियों। अब आइए इटैलिक टेक्स्ट सेलेक्शन के लिए CSS स्टाइल्स का इस्तेमाल करते हैं।

सीएसएस द्वारा संचालित इटैलिक पाठ

CSS में फोंट प्रदर्शित करने के लिए शैलियों को सेट करने के लिए, संपत्ति का उपयोग करें फ़ॉन्ट शैली, जो निम्नलिखित मूल्यों पर ले जा सकते हैं: परोक्ष (इटैलिक टेक्स्ट), तिरछा (इटैलिक) और साधारण (नियमित फ़ॉन्ट)।

यह याद रखने योग्य है तिरछा फ़ॉन्ट और इच्छुक, उनके सार में, समान नहीं हैं। इटैलिक एक विशेष फ़ॉन्ट है जो हस्तलिखित पाठ के अनुरूप है, और इच्छुक नियमित फ़ॉन्ट को दाईं ओर झुकाने से बनता है।

एप्लिकेशन को अट्रैक्ट करें फ़ॉन्ट शैली अभ्यास पर:

सीएसएस के साथ इटैलिक - "नूबेक्स"

हमारी साइटें वास्तव में हैं, बहुत बड़ा कदम वेब विकास में।

हम असली के लिए करते हैं गुणवत्ता साइटों।

लेकिन यह याद रखना चाहिए कि कुछ ब्राउज़र संपत्ति के साथ पाठ करते हैं फ़ॉन्ट-शैली: तिरछा; इसे इटैलिक टेक्स्ट के रूप में नहीं, बल्कि इटैलिक के रूप में व्याख्यायित किया जा सकता है।

विवरण

टाइपफेस को निर्दिष्ट करता है - नियमित, इटैलिक या इटैलिक। जब पाठ इटैलिक या इटैलिक पर सेट होता है, तो ब्राउज़र सिस्टम को एक उपयुक्त फ़ॉन्ट खोजने के लिए तैयार करता है। यदि निर्दिष्ट फ़ॉन्ट नहीं मिला है, तो ब्राउज़र वांछित प्रकार के पाठ का अनुकरण करने के लिए एक विशेष एल्गोरिथ्म का उपयोग करता है। परिणाम और गुणवत्ता संतोषजनक नहीं हो सकती है, खासकर जब कोई दस्तावेज़ मुद्रित करता है।

वाक्य - विन्यास

फ़ॉन्ट-शैली: सामान्य | इटैलिक | तिरछा | इनहेरिट

मूल्य

सामान्य सामान्य पाठ शैली। इटैलिक इटैलिक शैली। तिरछा इटैलिक शैली। इटैलिक और इटैलिक, हालांकि समान, समान चीज नहीं हैं। इटैलिक एक विशेष टाइपफेस है जो लिखावट की नकल करता है, जबकि तिरछे को साधारण पात्रों को दाईं ओर झुकाकर बनाया जाता है। इनहेरिट पैरेंट से वैल्यू इनहेरिट करता है।

एचटीएमएल 5 सीएसएस 2.1 आईई सीआर ओप सा एफएक्स

फ़ॉन्ट शैली

डुइस ते फ्यूगिफैसिलिसी

लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट, सेड डायम नॉनमी निब युरिस्मोड टिंसीडंट यूट लैरीटरी डोलोर मैग्ना एलीगाम एराट वुल्लेट। यूट वाइजिस एनिम एड मिनिमम वेनियम, क्विस नॉस्ट्रुड एक्सर्सि टेंशन ullamcorper suscipit lobortis nisl ut aliquip ex eaodo resultat।

इस उदाहरण का परिणाम अंजीर में दिखाया गया है। 1।

चित्र: 1. फ़ॉन्ट-शैली की संपत्ति को लागू करना

ऑब्जेक्ट मॉडल

document.getElementById ("elementID") .style.fontStyle

ब्राउज़र्स

Internet Explorer 7.0 या बाद के संस्करण का समर्थन नहीं करता है।

ब्राउज़र हमेशा इटैलिक के रूप में मूल्य तिरछा के साथ पाठ प्रस्तुत करते हैं।

Html में, फॉन्ट साइज़ एक महत्वपूर्ण भूमिका निभाता है। यह आपको वेबसाइट पेज पर पोस्ट की गई महत्वपूर्ण जानकारी के लिए उपयोगकर्ता का ध्यान आकर्षित करने की अनुमति देता है। हालांकि न केवल अक्षरों का आकार महत्वपूर्ण है, बल्कि उनका रंग, मोटाई और यहां तक \u200b\u200bकि परिवार भी है।

HTML फोंट के साथ रोबोट जब टैग और विशेषताएँ

हाइपरटेक्स्ट भाषा में फोंट के साथ काम करने के लिए उपकरणों का एक बड़ा सेट है। आखिरकार, यह टेक्स्ट फॉर्मेटिंग है जो html का मुख्य कार्य है।

HTML भाषा के निर्माण का कारण ब्राउज़रों में पाठ स्वरूपण नियमों को प्रदर्शित करने की समस्या थी।


HTML में फोंट और उनकी विशेषताओं के साथ काम करने के लिए उपयोग किए जाने वाले टैगों पर विचार करें। मुख्य एक टैग है ... इसकी विशेषताओं के मूल्यों का उपयोग करते हुए, आप फ़ॉन्ट की कई विशेषताएं निर्धारित कर सकते हैं:

  • रंग - पाठ का रंग सेट करता है;
  • आकार - पारंपरिक इकाइयों में फ़ॉन्ट आकार।

1 से 7 तक सकारात्मक विशेषता मान समर्थित हैं।

  • चेहरा - पाठ के फ़ॉन्ट परिवार को टैग के अंदर उपयोग करने के लिए सेट किया जाता है ... कई मान एक साथ समर्थित हैं, अल्पविराम द्वारा अलग किए गए हैं।

केवल युग्मित फ़ॉन्ट टैग के भागों के बीच का पाठ स्वरूपित किया गया है। शेष पाठ मानक डिफ़ॉल्ट फ़ॉन्ट में प्रदर्शित होता है।

Html में भी कई युग्म टैग हैं जो केवल एक प्रारूपण नियम को निर्दिष्ट करते हैं। इसमें शामिल है:

  • - HTML में बोल्ड फ़ॉन्ट सेट करता है। टैग कार्रवाई पिछले एक के समान है;
  • - आकार डिफ़ॉल्ट से बड़ा है;
  • - छोटे फ़ॉन्ट आकार;
  • - इटैलिकाइज़्ड टेक्स्ट। इसी तरह का टैग ;
  • - रेखांकित पाठ;
  • - मिटा देना;
  • - केवल निचले मामले में प्रदर्शन पाठ;
  • - ऊपरी मामले में।

सादे पाठ

थंबनेल

थंबनेल

सामान्य से अधिक

सामान्य से कम

इटैलिक

इटैलिक

रेखांकित

मिटा देना

शैली विशेषता क्षमताओं

वर्णित टैग के अलावा, HTML में फ़ॉन्ट बदलने के कई और तरीके हैं। उनमें से एक सामान्य शैली विशेषता का उपयोग कर रहा है। इसके गुणों के मूल्यों का उपयोग करके, आप फ़ॉन्ट प्रदर्शन शैली सेट कर सकते हैं:

1) फ़ॉन्ट-परिवार - संपत्ति फ़ॉन्ट परिवार सेट करती है। कई मूल्यों की गणना संभव है।
एचटीएमएल में फॉन्ट को अगले मान में बदलने से होगा यदि पिछले परिवार को उपयोगकर्ता के ऑपरेटिंग सिस्टम पर स्थापित नहीं किया गया है.

लेखन वाक्य रचना:

font-family: font name [, font name [, ...]]

2) फ़ॉन्ट-आकार - आकार 1 से 7 तक सेट किया गया है। यह उन मुख्य तरीकों में से एक है जिनसे आप HTML में फ़ॉन्ट बढ़ा सकते हैं।
लेखन वाक्य रचना:

फ़ॉन्ट-आकार: पूर्ण आकार | सापेक्ष आकार | मूल्य | ब्याज | इनहेरिट

आप फ़ॉन्ट का आकार भी निर्धारित कर सकते हैं:

  • पिक्सेल में;
  • निरपेक्ष मूल्य में ( xx- छोटा, x- छोटा, छोटा, मध्यम, बड़ा);
  • पर्केंट्स में;
  • अंक (pt) में।

फ़ॉन्ट-आकार: 7

फ़ॉन्ट-आकार: जीपीएक्स

फ़ॉन्ट-आकार: x- बड़ा

फ़ॉन्ट-आकार: 200%

फ़ॉन्ट-आकार: 24pt

3) फ़ॉन्ट-शैली - फ़ॉन्ट लिखने की शैली सेट करता है। वाक्य - विन्यास:

फ़ॉन्ट-शैली: सामान्य | इटैलिक | तिरछा | इनहेरिट

मान:

  • सामान्य - सामान्य वर्तनी;
  • इटैलिक - इटैलिक;
  • तिरछा - दाहिना-झुकाव वाला फ़ॉन्ट;
  • विरासत - मूल तत्व की वर्तनी विरासत में मिलती है।

इस संपत्ति का उपयोग करके html में फ़ॉन्ट को बदलने का एक उदाहरण:

फ़ॉन्ट-शैली: विरासत

फ़ॉन्ट-शैली: इटैलिक

फ़ॉन्ट-शैली: सामान्य

फ़ॉन्ट-शैली: तिरछा

4) फॉन्ट-वेरिएंट - सभी अपरकेस अक्षरों को अपरकेस में कनवर्ट करता है। वाक्य - विन्यास:

फ़ॉन्ट-प्रकार: सामान्य | छोटी टोपी | इनहेरिट

इस संपत्ति के साथ HTML में फ़ॉन्ट को बदलने का एक उदाहरण:

फ़ॉन्ट-प्रकार: वंशानुक्रम

फ़ॉन्ट-प्रकार: सामान्य

font-variant: छोटे-कैप

5) फॉन्ट-वेट - आपको पाठ (संतृप्ति) के लेखन की मोटाई निर्धारित करने की अनुमति देता है। वाक्य - विन्यास:

फ़ॉन्ट-वजन: बोल्ड | बोल्डर | हल्का | सामान्य | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 700 | 800 | 900 |

मान:

  • बोल्ड - HTML बोल्ड फ़ॉन्ट सेट करता है;
  • bolder - सामान्य के सापेक्ष चापलूसी;
  • हल्का - सामान्य के सापेक्ष कम संतृप्त;
  • सामान्य - सामान्य वर्तनी;
  • 100-900 - फ़ॉन्ट मोटाई को संख्यात्मक समकक्ष में सेट करता है।

फोंट की मोटाई: बोल्ड

फ़ॉन्ट-वजन: फ़ोल्डर

फ़ॉन्ट-वजन: हल्का

फ़ॉन्ट-वजन: सामान्य

फ़ॉन्ट-वजन: 900

फ़ॉन्ट-वजन: १००

फ़ॉन्ट गुण और HTML फ़ॉन्ट रंग

फ़ॉन्ट एक अन्य कंटेनर गुण है। आंतरिक रूप से, इसने फोंट को बदलने के लिए डिज़ाइन किए गए कई गुणों के मूल्यों को मिला दिया। फ़ॉन्ट सिंटैक्स है:

फ़ॉन्ट: फ़ॉन्ट-आकार फ़ॉन्ट-परिवार | इनहेरिट

इसके अलावा, विभिन्न नियंत्रणों पर शिलालेखों में प्रणाली द्वारा उपयोग किए जाने वाले फोंट को मूल्य के रूप में सेट किया जा सकता है:

  • कैप्शन - बटन के लिए;
  • आइकन - आइकन के लिए;
  • मेनू - मेनू;
  • संदेश-बॉक्स - संवाद बॉक्स के लिए;
  • छोटे-कैप्शन - छोटे नियंत्रण के लिए
  • स्टेटस-बार - स्टेटस बार फॉन्ट।

फ़ॉन्ट: आइकन

फ़ॉन्ट: कैप्शन

फ़ॉन्ट: मेनू

फ़ॉन्ट: संदेश-बॉक्स

छोटे-कैप्शन

फ़ॉन्ट: स्थिति-बार

फ़ॉन्ट: इटैलिक 50 पीएक्स बोल्ड "टाइम्स न्यू रोमन", टाइम्स, सेरिफ़

Html में फॉन्ट कलर सेट करने के लिए, आप कलर प्रॉपर्टी का उपयोग कर सकते हैं। यह आपको कीवर्ड और आरजीबी प्रारूप दोनों का उपयोग करके रंग सेट करने की अनुमति देता है। और एक हेक्साडेसिमल कोड के रूप में भी।

अब हम मुख्य टैग का अध्ययन करने जा रहे हैं। आइए पृष्ठ पर कौन से टैग आवश्यक हैं, इसकी संरचना बनाते हुए शुरू करें।

खंड मैथा। सबसे सरल पृष्ठ की संरचना

एक साइट पृष्ठ विस्तार के साथ एक सादा पाठ फ़ाइल है .html... इस फ़ाइल में टैग्स के साथ HTML पेज का टेक्स्ट है। इस फ़ाइल में निम्न टैग होने चाहिए: टैग , जिसमें संपूर्ण साइट का पाठ होना चाहिए (इस टैग के बाहर लिखी गई सभी चीज़ों को ब्राउज़र द्वारा अनदेखा किया जाएगा), और इसके अंदर दो और टैग होने चाहिए: टैग पृष्ठ और टैग की सेवा सामग्री के लिए - मुख्य पाठ के लिए, जो ब्राउज़र स्क्रीन पर दिखाई देता है।

सामग्री को सेवा के लिए जो टैग के अंदर स्थित है , कई अलग-अलग चीजें आती हैं, लेकिन अभी के लिए हमें उनमें से केवल दो की आवश्यकता है। यह एक टैग है , जो पेज का नाम सेट करता है, जो ब्राउज़र टैब और टैग में दिखाई देगा <meta> , जो पृष्ठ एन्कोडिंग सेट करता है (यह विशेषता में सेट है <b>चारसेट</b> और आमतौर पर मायने रखता है <b>utf-8</b>, वीडियो में इस पर अधिक, जो नीचे पैराग्राफ की एक जोड़ी होगी)।</p> <p>इसके अलावा, टैग से पहले <html> निर्माण आमतौर पर लिखा जाता है <b>doctype</b>, जो HTML भाषा के संस्करण को इंगित करता है जिसमें साइट बनाई गई है। भाषा का वर्तमान संस्करण संख्या पांच है और इसके लिए सिद्धांत इस तरह दिखना चाहिए -<!DOCTYPE html> .</p> <p>तो चलिए पृष्ठ की मूल संरचना पर एक नज़र डालते हैं (एक ब्राउज़र में इस उदाहरण को चलाने के लिए, इसे एक्सटेंशन वाली टेक्स्ट फ़ाइल में कॉपी करें <b>.html</b> और अगर आपको इसमें कोई समस्या है तो ब्राउज़र में खोलें - उदाहरण के नीचे वीडियो देखें):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>यह टाइटल टाइटल है यह पृष्ठ की मुख्य सामग्री है।

किसी ब्राउज़र में यह उदाहरण कैसा दिखता है, इसके लिए यह लिंक देखें।

मुझे लगता है कि पृष्ठ की मूल संरचना के बारे में पढ़ने के बाद, आपको अभी भी कुछ भ्रम है कि यह सब कैसे व्यवहार में दिखता है। इसलिए, मैंने एक विशेष वीडियो बनाया, जिसमें मैं आपको अपना पहला HTML पृष्ठ बनाने और इसे ब्राउज़र में चलाने का तरीका दिखाऊंगा (इसमें मैं आपको पृष्ठ शीर्षक के बारे में, एन्कोडिंग के बारे में, कोड डिज़ाइन के बारे में भी बताऊंगा)। इसे देखें और उसके बाद ही आगे पढ़ने के लिए आगे बढ़ें:

खैर, अब जब हमने सीख लिया है कि सरलतम पेज कैसे बनाए जाते हैं, तो हम उन उपयोगी टैगों की खोज में आगे बढ़ेंगे जिन्हें एक टैग के अंदर इस्तेमाल किया जाना चाहिए ... ये पैराग्राफ, शीर्षकों, सूचियों, लिंक और अन्य उपयोगी चीजों के लिए टैग होंगे। तो चलो शुरू करते है।

खंड मैथा। पैराग्राफ

पृष्ठ के मुख्य तत्वों में से एक हैं पैराग्राफ... उनकी तुलना एक पुस्तक में पैराग्राफ से की जा सकती है - प्रत्येक पैराग्राफ एक नई लाइन पर शुरू होता है और इसमें एक तथाकथित लाल रेखा होती है (यह तब होता है जब पैराग्राफ के पाठ की पहली पंक्ति दाईं ओर थोड़ी सी झुकी होती है)। डिफ़ॉल्ट रूप से कोई लाल रेखा नहीं है, लेकिन यह करना आसान है (बाद में उस पर अधिक)।

टैग का उपयोग करके एक पैराग्राफ बनाया गया है

इस प्रकार:

यह टाइटल टाइटल है

यह एक पैराग्राफ है।

यह एक और पैराग्राफ है।

और एक और पैराग्राफ।

यह एक पैराग्राफ है।

यह एक और पैराग्राफ है।

और एक और पैराग्राफ।

खंड मैथा। हेडिंग एच 1, एच 2, एच 3, एच 4, एच 5, एच 6

पैराग्राफ के अलावा, पृष्ठ पर महत्वपूर्ण हैं मुख्य बातें... उनकी तुलना किसी पुस्तक के शीर्षक से भी की जा सकती है - प्रत्येक अध्याय का अपना शीर्षक (इस अध्याय का शीर्षक) है और इसे पैराग्राफ में विभाजित किया गया है, जिसका अपना शीर्षक भी है। खैर, और पृष्ठ का मुख्य पाठ पैराग्राफ में है।

हेडर्स बनाए जाते हैं टैग का उपयोग करना

,

,

,

,

,
... उनके पास अलग-अलग डिग्री का महत्व है। शीर्षक में h1 होना चाहिए संपूर्ण HTML पृष्ठ का शीर्षक, में h2 - नाम ब्लॉक पृष्ठों में h3 - सबब्लॉक का नाम, और इसी तरह।

सभी शीर्षक डिफ़ॉल्ट रूप से बोल्ड हैं और विभिन्न आकार हैं (इसे सीएसएस के माध्यम से बदला जा सकता है, लेकिन बाद में और अधिक)। उदाहरण देखें:

यह टाइटल टाइटल है

एच 1 हेडिंग

H2 शीर्षक

एच 3 हेडिंग

एच 4 हेडिंग

H5 शीर्षक
एच 6 हेडिंग

यह पहला पैराग्राफ है।

यह दूसरा पैराग्राफ है।

यह तीसरा पैराग्राफ है।

यह ब्राउज़र में कोड कैसे दिखेगा:

एच 1 हेडिंग

H2 शीर्षक

एच 3 हेडिंग

एच 4 हेडिंग

H5 शीर्षक
एच 6 हेडिंग

यह पहला पैराग्राफ है।

यह दूसरा पैराग्राफ है।

यह तीसरा पैराग्राफ है।

खंड मैथा। मोटे

आप पहले से ही जानते हैं कि डिफ़ॉल्ट हेडर हैं मोटे... हालांकि, आप सादे पाठ को भी बोल्ड बना सकते हैं - बस इसे टैग में ले जाएं ... उदाहरण देखें:

यह टाइटल टाइटल है

यह सामान्य पाठ है, और यह है मोटे पाठ।

यह ब्राउज़र में कोड कैसे दिखेगा:

यह सामान्य पाठ है, और यह है मोटे पाठ।

किसी अन्य टैग के अंदर उपयोग किया जाना चाहिए, जैसे कि एक पैराग्राफ। इस स्थिति में, पैराग्राफ पृष्ठ (पैराग्राफ और हेडिंग), और टैग की समग्र संरचना बनाते हैं ख पाठ के अलग-अलग टुकड़ों को बोल्ड बनाता है।

खंड मैथा। इटैलिक

फैटी के अलावा, आप भी बना सकते हैं इटैलिक टैग का उपयोग करना :

यह टाइटल टाइटल है

यह सामान्य पाठ है, और यह है तिरछा पाठ।

यह ब्राउज़र में कोड कैसे दिखेगा:

खंड मैथा। सूचियाँ

पैराग्राफ और हेडिंग के साथ, पेज का एक और महत्वपूर्ण तत्व है - यह है सूचियों... ऐसे तत्व शायद सभी इंटरनेट उपयोगकर्ताओं से परिचित हैं। वे किसी चीज़ की सूची (एक सूची) बिंदु द्वारा इंगित करते हैं। आमतौर पर सूची में प्रत्येक आइटम के बगल में एक भरा हुआ सर्कल होता है (इसे कहा जाता है निशान सूची)।

टैग का उपयोग करके सूची बनाई जाती है

© 2020 मोबाइल और कंप्यूटर गैजेट्स