हम सीएसएस में अपर केस बनाते हैं। एचटीएमएल है - टेक्स्ट को अपरकेस सीएसएस सुपरस्क्रिप्ट एचटीएमएल कैसे बनाएं

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

उद्देश्य

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

सभी संपत्तियों के विवरण के साथ एक अलग फ़ाइल। कौन सी असाइनमेंट विधि का उपयोग करना है यह आप पर निर्भर है। "टेक्स्ट-ट्रांसफ़ॉर्म" निम्नलिखित मान ले सकता है:

• अपरकेस। सभी चयनित वर्णों को बड़े अक्षरों में लिखता है। CSS में अपरकेस एक सामान्य मान है क्योंकि यह पाठ से संबंधित कई जटिल समस्याओं को हल करने में मदद करता है।
• लोअरकेस. यह प्रॉपर्टी अपरकेस कमांड के बिल्कुल विपरीत है।
• पूंजीकरण करें। पहले अक्षर के केस को अपर केस में बदलता है। बाकी अक्षर नहीं बदलेंगे.
• कोई नहीं। आपको सभी निर्दिष्ट मानों को पूर्ववत करने की अनुमति देता है (किसी संपत्ति को पूर्वनिर्धारित करने के लिए आवश्यक)। आमतौर पर, यह मान डिफ़ॉल्ट रूप से सेट होता है।
• विरासत. से सभी संपत्तियां विरासत में मिलती हैं मूल तत्व. यह ध्यान दिया जाना चाहिए कि IE इस संपत्ति का समर्थन नहीं करता है।

आवेदन

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

peculiarities

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

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

पिछले वीडियो पाठ में हमने सीखा कि कैसे हटाएं और नई जानकारी कैसे जोड़ें नया संस्करणइसकी रिपोर्ट करते समय HTML दस्तावेज़ खोज इंजनऔर दृश्य रूप से हाइलाइट करना ताकि आगंतुक भी परिवर्तन देख सकें। इसके लिए हमने डेल और इन्स टैग का इस्तेमाल किया।

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

HTML टैग को HTML में टेक्स्ट के सुपरस्क्रिप्ट को इंगित करने के लिए डिज़ाइन किया गया है। कुछ वेबसाइट विषयों में, यह टैग बिल्कुल अपूरणीय होगा। उदाहरण के लिए, यदि आपके पास किसी सूत्र, गणितीय या रसायन से संबंधित कोई वेबसाइट है या आप योजना बना रहे हैं। या, यदि आपके पास एक निर्माण-संबंधित साइट है, तो टैग बहुत उपयोगी होगा और लेखों को प्रारूपित करते समय, सूत्र या कोई मात्रा लिखते समय, उदाहरण के लिए, निर्माण विषयों में वर्ग मीटर, मदद करेगा।

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

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

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

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

उदाहरण 1: एक सुपरस्क्रिप्ट और एक सबस्क्रिप्ट बनाना

सुपरस्क्रिप्ट और सबस्क्रिप्ट .फॉर्मूला (फ़ॉन्ट-आकार: 1.4em; /* फॉर्मूला टेक्स्ट आकार */ ) सुपर, सब (फ़ॉन्ट-शैली: इटैलिक; /* इटैलिक */ रंग: लाल; /* अक्षरों का लाल रंग */ ) सब (रंग: नीला; /* वर्णों का नीला रंग*/)

दूसरी डिग्री की सतह का अभिलक्षणिक समीकरण

λ3 - I1λ2 + I2λ - I3 = 0

उदाहरण में, सबस्क्रिप्ट और सुपरस्क्रिप्ट दोनों एक साथ दिखाई देते हैं। इंडेक्स फ़ॉन्ट शैली को बदलने के लिए, शैलियों का उपयोग किया जाता है जो एक समान डिज़ाइन सेट करते हैं (चित्र 1)।

चावल। 1. शैलियों को लागू करने के बाद अनुक्रमित का दृश्य

आप शैलियों के पक्ष में उनका उपयोग करने से पूरी तरह इनकार कर सकते हैं। इन तत्वों का एक एनालॉग वर्टिकल-एलाइन प्रॉपर्टी है, जो टेक्स्ट को एक निर्दिष्ट दूरी तक लंबवत रूप से स्थानांतरित करने का कारण बनता है। विशेष रूप से, उदाहरण 2 में सुपरस्क्रिप्ट के लिए मान 0.8em और सबस्क्रिप्ट के लिए -0.5em है। Em वर्तमान फ़ॉन्ट के आकार के बराबर एक सापेक्ष इकाई है। उदाहरण के लिए, 0.5em इंगित करता है कि टेक्स्ट को आधे फ़ॉन्ट आकार से स्थानांतरित किया जाना चाहिए।

उदाहरण 2: अनुक्रमणिका को प्रबंधित करने के लिए शैलियों का उपयोग करना

सुपरस्क्रिप्ट और सबस्क्रिप्ट .फॉर्मूला (फ़ॉन्ट-आकार: 1.6em; /* टेक्स्ट आकार */ फ़ॉन्ट-शैली: इटैलिक; /* इटैलिक शैली */ ) .sup, .sub (फ़ॉन्ट-शैली: सामान्य; /* सामान्य शैली * / फ़ॉन्ट-आकार: 0.6em; /* सूचकांक आकार */ रंग: लाल; /* सुपरस्क्रिप्ट रंग */ लंबवत-संरेखण: 0.8em; /* पाठ को ऊपर शिफ्ट करें */ .sub (रंग: नीला; /* रंग सबस्क्रिप्ट */ लंबवत-संरेखण: -0.5em; /* टेक्स्ट को नीचे ले जाएं */ )

घात n का बहुपद

f(x) = a0 + a1 x + ... + an-1 xn-1 + an xn

उदाहरण में, सूत्र स्वयं बड़े आकार में प्रदर्शित होता है, सुपरस्क्रिप्ट प्रतीक लाल रंग में सेट होते हैं, और निचले वाले नीले रंग में सेट होते हैं (चित्र 2)।

नमस्ते। कभी-कभी वेब पेज बनाते समय आपको कुछ शब्दों का उपयोग निर्दिष्ट करने की आवश्यकता होती है सीएसएस शीर्षकेस या सुपरस्क्रिप्ट. आइए देखें कि यह कैसे किया जाता है।

सामान्य तौर पर, आज आप वांछित टेक्स्ट को टैग में संलग्न कर सकते हैं और वांछित डिस्प्ले प्राप्त कर सकते हैं, लेकिन आइए यह भी देखें कि सीएसएस का उपयोग करके यह कैसे किया जा सकता है, क्योंकि तकनीक थोड़ी अलग है।

उदाहरण के लिए, आपको HTML दस्तावेज़ में सूत्र H 2 O लिखना होगा। यह इस प्रकार किया जाता है:

• सूत्र स्वयं लिखा है
• वे शब्द और संख्याएँ जिन्हें ऊपरी या निचले सूचकांक में प्रदर्शित करने की आवश्यकता होती है, एक स्पैन टैग में संलग्न होते हैं, जिन्हें कुछ वर्ग निर्दिष्ट करने की आवश्यकता होती है। उदाहरण के लिए: आउटपुट होने वाले अक्षर
• सीएसएस में आपको यह तत्व सेट करना होगा:

  शीर्ष-सूचकांक(
  लंबवत-संरेखण: सुपर;
  }

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

संपत्ति इसी प्रकार काम करती है। तदनुसार, सबस्क्रिप्ट में आउटपुट के लिए आपको इस तरह लिखना होगा:

शीर्ष-सूचकांक(
लंबवत-संरेखण: उप;
}

समान HTML टैग्स से अंतर यह है कि ये नियम फ़ॉन्ट आकार नहीं बदलते हैं, इसलिए यदि आपको ऐसा करने की आवश्यकता है, तो आपको स्टाइल शीट में एक नया आकार लिखना होगा।

सीएसएस में सुपरस्क्रिप्ट और सबस्क्रिप्ट के बारे में आपको बस इतना ही जानना है। कोई नहीं अतिरिक्त सुविधाओंसंपत्ति प्रदान नहीं करती है, और उनकी आवश्यकता नहीं है। आप चाहें तो इस टेक्स्ट को खास तरीके से डिजाइन कर सकते हैं, लेकिन इसकी जरूरत कम ही पड़ती है।

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

संपत्ति पूरी तरह से क्रॉस-ब्राउज़र है और सीएसएस के सभी संस्करणों में समर्थित है।

CSS में कोई कैप क्लॉज़ विकल्प नहीं है। टेक्स्ट-ट्रांसफॉर्म: कैपिटलाइज़ का सुझाव देने वाले अन्य उत्तर गलत हैं क्योंकि यह विकल्प उपयोग करता है हर शब्द के लिए हर शब्द .

यहाँ अशिष्टऐसा करने का एक तरीका यह है कि यदि आप चाहते हैं कि प्रत्येक तत्व का पहला अक्षर अपरकेस हो, लेकिन यह निश्चित रूप से वास्तविक प्रतिबंधों के करीब नहीं है:

पी (टेक्स्ट-ट्रांसफॉर्म: लोअरकेस;) पी: पहला अक्षर (टेक्स्ट-ट्रांसफॉर्म: अपरकेस;)

यह एक उदाहरण वाक्य है.

यह एक और उदाहरण वाक्य है. और यह दूसरा है, लेकिन यह पूरी तरह से लोअरकेस होगा।

जैसा कि नीचे दिखाया गया है, प्रत्येक वाक्य के लिए अपरकेस अक्षर को लोअरकेस में और अपरकेस के पहले अक्षर को कैसे परिवर्तित करें, केवल इसके साथ सीएसएस का उपयोग करना?

प्रेषक: यह एक उदाहरण एप्लिकेशन है।

प्रति: यह एक अनुमानित वाक्य है.

अद्यतन: जब मैं टेक्स्ट-ट्रांसफॉर्म का उपयोग करता हूं: कैपाइज़; नतीजा अब भी वही है.

आप इसे केवल सीएसएस के साथ नहीं कर सकते। एक टेक्स्ट-ट्रांसफ़ॉर्म विशेषता है, लेकिन यह केवल कुछ भी स्वीकार नहीं करती है, बड़े अक्षरों में अपरकेस, अपरकेस, लोअरकेस और इनहेरिट करती है।

हो सकता है कि आप JS समाधान या सर्वर-साइड समाधान पर गौर करना चाहें।

यदि आप सर्वर पर सभी वर्णों को लोअरकेस बना सकते हैं, तो आप आवेदन कर सकते हैं:

पाठ-रूपांतरण: पूंजीकरण करें

मुझे नहीं लगता कि टेक्स्ट ट्रांसफ़ॉर्म इनपुट के रूप में बड़े अक्षरों के साथ काम करेगा।

यदि आप for का उपयोग करना चाहते हैं तो यह काम नहीं करेगा, for या textarea के लिए आपको जावास्क्रिप्ट का उपयोग करना होगा

function CapitaliseName() ( var str = document.getElementById("name").value; document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1); )

जो या के लिए अच्छा काम करना चाहिए