अपरकेस HTML टैग। छद्म तत्वों का उपयोग करके सीएसएस शैलियों पर पूंजीकरण। मध्य युग का सांस्कृतिक स्मारक
दिन अच्छा है, साइट बिल्डिंग के geeks। आज के प्रकाशन में, हम पाठ्य सामग्री के डिजाइन से संबंधित विषय पर विचार करेंगे। यही कारण है कि आप सीखेंगे कि सीएसएस द्वारा कैपिटल अक्षरों को कैसे सेट किया जाए - मतलब है, ड्रॉप कैप बनाने के लिए कई विकल्पों से परिचित हों और निश्चित रूप से आप अभ्यास में सब कुछ आज़मा सकते हैं। अब चलो मज़ा भाग के लिए नीचे उतरो!
पाठ को रूपांतरित करते हैं
कैस्केडिंग स्टाइल शीट के साथ, आप ब्लॉक के पहले चरित्र और पूरे पाठ को बदल सकते हैं। मैं आपको दिखाता हूँ कि आप दोनों कैसे कर सकते हैं। इसके अलावा, इस लेख में नामित सभी उपकरण तीन भाषा स्तरों में समर्थित हैं: css1, css2, css2.1 और css3।
मैं एक दिलचस्प संपत्ति के साथ शुरू करता हूं जो चयन में सभी पाठ सामग्री को संशोधित करता है। यह पाठ बदलना.
नामित तत्व वर्णों को अपरकेस, लोअरकेस में परिवर्तित कर सकता है, और शब्द के प्रत्येक पहले वर्ण को कैपिटलाइज़ भी कर सकता है। मैंने तालिका में मूल्यों के बारे में अधिक लिखा।
अब, सैद्धांतिक सामग्री को मजबूत करने के लिए, एक उदाहरण लें।
ध्यान!
कल सभी सौंदर्य उत्पादों पर छूट!
पदोन्नति आपके शहर में स्थित सभी शाखाओं में मान्य है।
एक ड्रॉप कैप बनाएँ
यदि आप नहीं जानते हैं कि "ड्रॉप कैप" शब्द का क्या अर्थ है, तो यह पता लगाने का समय है, क्योंकि यह सीधे वर्तमान विषय से संबंधित है।
प्रारंभिक पत्र (या कभी-कभी वे प्रारंभिक कहते हैं) अध्याय का पहला अक्षर है, जो बाकी हिस्सों से अपने बड़े आकार, रंग और कुछ मामलों में, यहां तक \u200b\u200bकि फ़ॉन्ट डिजाइन से भिन्न होता है। वास्तविक जीवन में, इस तरह के पत्र का एक उदाहरण पुरानी पांडुलिपियों और पुस्तकों में पाया जा सकता है।
एक प्रारंभिक बनाने के कई तरीके हैं। अक्सर एक चरित्र मार्कअप भाषा टैग के साथ प्रतिष्ठित होता है और उसके बाद, कुछ गुण शैलियों में निर्धारित किए गए हैं जो इसे संशोधित करते हैं। यह एक अच्छा तरीका है, लेकिन यह प्रकाशन सीएसएस तंत्र के बारे में बात करता है (जो, मेरी राय में, इस मामले में बहुत अधिक तार्किक और उपयोग करने के लिए सुविधाजनक है)।
समस्या को हल करने के लिए, आप इस तरह के एक उपकरण का उपयोग कर सकते हैं।
तो, इस मामले में: पहले-अक्षर का उपयोग किया जाता है। सभी छद्म तत्वों की तरह, यह चयनकर्ता को सौंपा गया है, जो कॉलन द्वारा अलग किया गया है। बाद में, स्टाइल शीट के सभी नियमों के अनुसार, गुण निर्दिष्ट किए जाते हैं। हालाँकि, आप केवल एडिटिंग फोंट, पैडिंग, कलर, बैकग्राउंड, मार्जिन और बॉर्डर से संबंधित गुण ही लागू कर सकते हैं।
मैं एक विशिष्ट उदाहरण पर विचार करने का प्रस्ताव करता हूं। प्रस्तुत छोटे कार्यक्रम को लागू करते हुए, मैंने न केवल एक रंगीन ड्रॉप कैप बनाने का फैसला किया, बल्कि इसे फूलों से भरने के लिए। ऐसा करने के लिए, आपको पारदर्शी फ़ॉन्ट रंग सेट करने और चयनित छवि के साथ पत्र भरने के साथ कुछ मुश्किल ट्रिक्स का उपयोग करने की आवश्यकता है।
इस अनुच्छेद में बहुत ही रोचक सामग्री के साथ एक वाक्य है।
आइए अगले पैराग्राफ में एक दिलचस्प कहानी जारी रखें।
परिणाम बहुत ही आकर्षक और असामान्य लगता है, जो इसके लिए सही समाधान है।
जैसा कि आप देख सकते हैं, यह विषय बहुत सरल है। आप अपने वेब संसाधनों के लिए मेरे द्वारा दिए गए कोड का उपयोग आसानी से कर सकते हैं, अपनी शैली को संशोधित और समायोजित कर सकते हैं।
यदि उपरोक्त सामग्री आपके लिए उपयोगी थी, तो मेरे ब्लॉग पर अपडेट की सदस्यता लें और अपने दोस्तों के साथ प्राप्त ज्ञान (और निश्चित रूप से मेरे ब्लॉग के लिए एक लिंक) को साझा करना न भूलें। सौभाग्य!
अलविदा!
सबसे अच्छा संबंध है, रोमन चुशोव
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 में फॉन्ट कलर सेट करने के लिए, आप कलर प्रॉपर्टी का उपयोग कर सकते हैं। यह आपको कीवर्ड और आरजीबी प्रारूप दोनों का उपयोग करके रंग सेट करने की अनुमति देता है। और एक हेक्साडेसिमल कोड के रूप में भी।
तत्वों के पाठ को अपरकेस या लोअरकेस में बदलने पर नियंत्रण करता है। जब मान कोई नहीं है, तो स्रोत पाठ का मामला बदल दिया जाएगा।
कम जानकारी
पदनाम
| विवरण | उदाहरण | |
|---|---|---|
| <тип> | मूल्य के प्रकार को दर्शाता है। | <размер> |
| A && बी | दिखाए गए क्रम में मान प्रदर्शित किए जाने चाहिए। | <размер> && <цвет> |
| ए | बी | इंगित करता है कि सुझाए गए मूल्यों में से केवल एक का चयन किया जाना चाहिए (ए या बी)। | सामान्य | छोटी टोपियाँ |
| ए || बी | प्रत्येक मूल्य का उपयोग अकेले या किसी भी क्रम में दूसरों के साथ मिलकर किया जा सकता है। | चौड़ाई || गिनती |
| समूह मूल्य। | [फसल || पार करना] | |
| * | शून्य या अधिक बार दोहराएं। | [,<время>]* |
| + | एक या अधिक बार दोहराएं। | <число>+ |
| ? | निर्दिष्ट प्रकार, शब्द या समूह वैकल्पिक है। | इनसेट? |
| (ए, बी) | कम से कम A दोहराएं, लेकिन B समय से अधिक नहीं। | <радиус>{1,4} |
| # | कॉमा द्वारा अलग किए गए एक या अधिक बार दोहराएं। | <время># |
मूल्य
कैपिटलाइज़ करें वाक्य में प्रत्येक शब्द का पहला वर्ण कैपिटल होगा। बाकी प्रतीक अपनी उपस्थिति नहीं बदलते हैं। लोअरकेस सभी टेक्स्ट कैरेक्टर लोअरकेस (लोअरकेस) बन जाते हैं। अपरकेस सभी टेक्स्ट अक्षर अपरकेस (अपरकेस) हैं। कोई भी मामला बदलता नहीं है।
सैंडबॉक्स
विनी द पूह हमेशा थोड़ा ताज़ा होने का विरोध नहीं करता था, विशेष रूप से सुबह ग्यारह बजे, क्योंकि इस समय नाश्ते का समय समाप्त हो गया था, और रात का खाना शुरू करने के बारे में सोचा भी नहीं था। और, ज़ाहिर है, वह खरगोशों को कप और प्लेटों को देखकर बहुत खुश था।
div (पाठ-परिवर्तन: बड़ा करना;)
उदाहरण
मध्य युग का सांस्कृतिक स्मारक
अमेजोनियन तराई क्षेत्रों में बिल्लियों और कुत्तों का एक छोटा परिवहन है, और हेओश बे अपनी लाल मदिरा के लिए प्रसिद्ध है।
इस उदाहरण का परिणाम अंजीर में दिखाया गया है। 1।
चित्र: 1. पाठ-परिवर्तनशील संपत्ति को लागू करना
ऑब्जेक्ट मॉडल
एक वस्तु.style.textTransform
विशिष्टता
प्रत्येक विनिर्देश अनुमोदन के कई चरणों से गुजरता है।
- सिफारिश - यह विनिर्देश W3C द्वारा अनुमोदित किया गया है और एक मानक के रूप में अनुशंसित है।
- उम्मीदवार की सिफारिश ( संभावित सिफारिश) - मानक के लिए जिम्मेदार समूह संतुष्ट है क्योंकि यह अपने उद्देश्यों के साथ फिट बैठता है, लेकिन मानक को लागू करने के लिए डेवलपर समुदाय की मदद की आवश्यकता होती है।
- प्रस्तावित सिफारिश ( सुझाए गए सुझाव) - इस बिंदु पर, अंतिम अनुमोदन के लिए डब्ल्यू 3 सी सलाहकार परिषद को दस्तावेज प्रस्तुत किया जाता है।
- वर्किंग ड्राफ्ट - समुदाय की समीक्षा के लिए चर्चा और संशोधन के बाद ड्राफ्ट का एक अधिक परिपक्व संस्करण।
- संपादक का मसौदा ( संपादकीय का मसौदा) - परियोजना संपादकों द्वारा संपादन के बाद मानक का एक मसौदा संस्करण।
- प्रारूप ( ड्राफ्ट विनिर्देश) मानक का पहला मसौदा है।
अक्सर साइट पर सामग्री जोड़ते समय या जल्दी में, उदाहरण के लिए, मंच पर एक नया विषय बनाते समय, उपयोगकर्ता एक छोटे (लोअरकेस) अक्षर के साथ एक वाक्य (शीर्षक) लिखना शुरू कर सकता है। यह कुछ हद तक एक गलती है।
मैं आपको इस समस्या को हल करने के लिए कई विकल्प दिखाऊंगा: PHP और CSS पहले से प्रकाशित सामग्रियों के लिए अधिक उपयुक्त हैं, जब jQuery प्रकाशन से पहले ही स्थिति को कैसे ठीक कर सकता है।
एक स्ट्रिंग का पहला अक्षर PHP में अपरकेस है
PHP में एक फ़ंक्शन होता है जिसे "कहा जाता है" ucfirst", जो सिर्फ स्ट्रिंग के पहले चरित्र को अपरकेस में परिवर्तित करता है, लेकिन इसका माइनस यह है कि यह सिरिलिक के साथ सही ढंग से काम नहीं करता है।
इसके लिए, हम अपने स्वयं के छोटे कार्य लिखेंगे। कार्यान्वयन इस तरह दिखेगा:
इस संस्करण में, हम एक वाक्य प्राप्त करेंगे जो कि एक बड़े अक्षर से शुरू होता है, जो वास्तव में, हमारी आवश्यकता है।
सीएसएस में स्ट्रिंग का पहला अक्षर अपरकेस
यह विधि नेत्रहीन (जो कि साइट के स्रोत कोड में है, ऑफ़र दिखेंगे जैसा कि है) भी पहले वर्ण को अपरकेस में कनवर्ट करता है।
उपयोग निम्नानुसार है:
पहला वाक्य
दूसरा वाक्य
तीसरा वाक्य
चौथा वाक्य
छद्म तत्व का उपयोग " प्रथम अक्षर"और" पाठ बदलना»हमने पैराग्राफ के प्रत्येक पहले अक्षर के लिए उपस्थिति निर्धारित की है।
JQuery के बड़े अक्षर का पहला अक्षर
जैसा कि मैंने पहले कहा था, यह रूपांतरण विधि उन सामग्रियों के लिए सबसे उपयुक्त है जिन्हें अभी तक प्रकाशित नहीं किया गया है।
उदाहरण के लिए, हम एक पाठ क्षेत्र लेंगे (यह हमारे लिए एक शीर्षक में प्रवेश करने के लिए एक क्षेत्र के रूप में कार्य करेगा) और इसके लिए एक छोटी सी स्क्रिप्ट लिखेंगे, जो एक लोअरकेस अक्षर के साथ एक वाक्य में प्रवेश करते समय, इसे एक कैपिटलाइज़ेशन के साथ बनाता है:
पाठ लिखते समय और बस इसे चिपकाने के दौरान स्क्रिप्ट दोनों काम करती है। यह मत भूलो कि स्क्रिप्ट के लिए आपकी साइट पर काम करने के लिए, आपके पास jQuery लाइब्रेरी जुड़ा होना चाहिए।
एक ड्रॉप कैप एक पैराग्राफ का पहला अक्षर है जो बाकी की तुलना में बड़ा है और इसे रखा गया है ताकि इसका शीर्ष पैराग्राफ की पहली पंक्ति के स्तर पर हो। छवि में, आप पाठ में एम्बेडेड ड्रॉप कैप का एक उदाहरण देख सकते हैं।
वैसे, वर्डप्रेस में एक विशेष प्लगइन है (wordpress.org/extend/plugins/drop-caps) जो आपको पाठ में एम्बेडेड बनाने (और ऑफसेट करने) की अनुमति देता है बड़े अक्षर... आश्चर्यजनक! हालाँकि, क्या होगा यदि आप एक प्लगइन का उपयोग नहीं करना चाहते हैं (मुझे यकीन है कि आप नहीं कर रहे हैं) और आपको बस कई पदों के लिए ड्रॉप कैप बनाने की आवश्यकता है, और शायद एक विशिष्ट स्थान पर?
अच्छी खबर: आपको बड़े अक्षरों को बनाने के लिए एक प्लगइन का उपयोग करने की आवश्यकता नहीं है, बस आपको थोड़ा सीएसएस और एक स्पैन टैग की आवश्यकता है। अपनी सीएसएस फ़ाइल खोलें और निम्नलिखित कोड जोड़ें:
Span.dropcaps (फ़ॉन्ट-परिवार: जॉर्जिया, सेरिफ़; रंग: #ccc; फ़ॉन्ट-आकार: 46px; फ़्लोट: बाएँ; फ़ॉन्ट-भार: 400; पंक्ति-ऊंचाई: 1em; मार्जिन-निचला: -0.4em; मार्जिन-राइट : 0.09em; स्थिति: रिश्तेदार;)
कुछ इस तरह। बेशक, आपको एक शैली की आवश्यकता होगी जो आपके डिजाइन और पाठ से मेल खाती हो। उदाहरण के लिए, संपत्ति के मूल्य: फ़ॉन्ट-आकार, मार्जिन और रेखा-ऊंचाई को आपके डिजाइन और पाठ के आधार पर चुना जाना चाहिए।
स्पैन टैग
शैली को टेक्स्ट के कैपिटल लेटर पर लागू करने के लिए, आपको स्पैन टैग में कैपिटल लेटर को "रैप" करना होगा और उपयुक्त क्लास लिखना होगा।
ए
छद्म तत्व: पहला अक्षर
आप पाठ में पहले अक्षर को भी शैली दे सकते हैं: पहला अक्षर छद्म तत्व। हालाँकि, सीमित संख्या में गुणों पर लागू किया जा सकता है: पहला अक्षर छद्म तत्व: ये फ़ॉन्ट, रंग, पृष्ठभूमि, सीमाओं, मार्जिन और गद्दी से संबंधित गुण हैं। यह भी ध्यान दिया जाना चाहिए कि: पहले अक्षर का छद्म तत्व पुराने ब्राउज़रों में काम नहीं करेगा।
पी: पहला अक्षर (फ़ॉन्ट-परिवार: जॉर्जिया, सेरिफ़; रंग: #ccc; फ़ॉन्ट-आकार: 46 कार्डबोर्ड। थॉट: बाएँ; फ़ॉन्ट-वजन: 400; लाइन-ऊंचाई: 1em; मार्जिन-निचला: -0.4em; मार्जिन सटीक: 0.09em; स्थिति: रिश्तेदार;)
यहाँ संपादन विधियों के एक जोड़े हैं। बड़े अक्षर CSS का उपयोग करना।