सीसीएस र छविहरू प्रयोग गरेर फैंसी प्रारम्भिक क्याप्सन कसरी सिर्जना गर्ने सिक्नुहोस्
तपाइँको अनुच्छेदहरूको लागि फ्यान्ट प्रारम्भिक क्याप्सहरू सिर्जना गर्न CSS प्रयोग कसरी गर्ने सिक्नुहोस्। तपाईंको प्रारम्भिक क्यापको लागि ग्राफिक छवि प्रयोग गर्न एक साधारण छवि प्रतिस्थापन प्रविधि पनि छ।
आधारभूत क्याप्सन को मूल शैली
कागजातहरूमा प्रारम्भिक क्याप्सनको तीन आधारभूत शैलीहरू छन्:
- उठाइयो - सबैभन्दा सामान्य, पहिलो अक्षर ठूलो छ र हालको पाठको रूपमा एकै रेखामा।
- गिराएको - सामान्यतया सामान्यतया, जहाँ पहिलो अक्षर ठूलो छ र पाठको पहिलो रेखा तल तलको तल। त्यसपछि निम्न पाठ यसको वरिपरि उभिएको छ।
- आसन्न - जहाँ बाँकी अक्षर पाठको बाहेक एक स्तम्भमा छ। यो वेब डिजाइन भन्दा मुद्रणमा अधिक सामान्य छ।
प्रारम्भिक क्यापहरू वा ड्रप क्याप्सहरू धेरै परिचित छन्। तिनीहरू अन्यथा लामो र पाठको बोरिंग स्पान्न्स ड्रेस गर्ने उत्कृष्ट तरिका हुन्। र सीएसएस सम्पत्तिको साथ: पहिलो-पत्र, तपाइँ सजिलै कसरी तपाइँको पहिलो पत्र fancier बनाउन कसरी परिभाषित गर्न सक्नुहुन्छ।
एक साधारण प्रारम्भिक क्याप सिर्जना गर्नुहोस्
तपाइँलाई सरल उठाएको प्रारम्भिक क्याप्शन सिर्जना गर्न सबै आवश्यक छ पहिलो अनुच्छेद छद्म तत्वको साथ आकारमा तपाईंको अनुच्छेदको पहिलो अक्षर बनाउन:
p: पहिलो अक्षर {फन्ट-साइज: 3em; }तर धेरै ब्राउजरहरूले पहिलो अक्षर लाइनको बाँकी पाठ भन्दा ठूलो छ भनेर देख्दछन्, त्यसैले तिनीहरू पहिलो अक्षरको लागि अर्थ बनाउनेछन्, बाँकी रेखा होइन। सौभाग्य देखि, यो पहिलो-लाइन छद्म तत्व र लाइन-उचाइ सम्पत्तिसँग समाधान गर्न सजिलो छ:
p: पहिलो अक्षर {फन्ट-साइज: 3em; } p: पहिलो लाइन {line-height: 1em; }तपाईंको कागजात भित्र रेखा उचाइको साथ खेल्नुहोस् जब सम्म तपाई आफ्नो पाठको लागि सही आकार फेला पार्नु हुन्छ।
तपाईंको प्रारम्भिक क्यापसँग खेल्नुहोस्
एकपटक तपाइँ एक प्रारम्भिक क्याप्शन कसरी बनाउने भनेर बुझ्न सक्नुहुन्छ, तपाईं फैंसी कपडाहरूमा यसलाई खडा गर्न तयार पार्न सक्नुहुन्छ। रङ, पृष्ठभूमि रङ, सीमानाहरू, वा तपाईंको फैंसी जुनसुकै स्ट्राइकहरूसँग प्ले गर्नुहोस्। एउटा साधारण सरल शैली पहिलो अक्षरको लागि तपाईंको फन्ट र पृष्ठभूमि रङको रङहरू उल्टाउन छ:
p: पहिलो अक्षर {फन्ट-साइज: 300%; पृष्ठभूमि रंग: # 000; रंग: #fff; } p: पहिलो-लाइन {line-height: 100%; }अर्को चाल पहिलो लाइन केन्द्रित छ। यो सीएसएससँग कठिनाई हुन सक्छ, जस्तै पाठ रेखाको बीचमा फरक हुन सक्छ यदि तपाईंको लेआउट लचीला छ। तर केहि संग मूल्यहरु संग खेल को साथ, तपाईं आफ्नो पहिलो लाइन को लागि पर्याप्त गर्न सक्छन् पहिलो पत्र को बीच मा प्रकट हुन सक्छ। केवल अनुच्छेदको पाठ इन इन्डेन्टमा प्रतिशतसँग खेल्नुहोस् जब सम्म यो सही देखिन्छ:
p: पहिलो अक्षर {फन्ट-साइज: 300%; पृष्ठभूमि रंग: # 000; रंग: #fff; } p: पहिलो-लाइन {line-height: 100%; } p {पाठ इन्डेन्ट: 45% ; }समायोजन प्रारम्भिक क्याप्सन सीएसएससँग हार्ड छ
सम्पादकीय प्रारम्भिक क्यापहरू सीएसएसको साथमा गाह्रो हुन सक्छ किनकि फरक ब्राउजरले फन्टहरू फरक फरक पार्छ। CSS मा एक आसन्न टोप सिर्जना पछि विचार पहिलो लाइनमा पाठ-इन्डेन्ट सम्पत्ति प्रयोग गर्न यो बाहिर (बाँयामा) नकारात्मक मान। तपाइँले पनि केही अनुच्छेदको बायाँ पङ्क्ति परिवर्तन गर्न आवश्यक छ। यी संख्याहरूसँग प्ले गर्नुहोस् अनुच्छेद राम्रो देखिन्छ।
p {text-indent: -2.5em; मार्जिन-बायाँ: 3em; } p: पहिलो अक्षर {फन्ट-साइज: 3em; } p: पहिलो-लाइन {line-height: 100%; }वास्तवमा फैंसी प्रारम्भिक क्याप्सन प्राप्त गर्दै
फैंसी प्रारम्भिक क्याप्शन सिर्जना गर्ने सबैभन्दा राम्रो तरिका फन्टलाई थप सजावटी फन्ट परिवारमा बदल्नु हो। यदि तपाईले फन्ट फन्टको प्रयोग गरेमा सामान्य फन्ट प्रयोग गर्नुहोला, यसले ग्यारेन्टीलाई मद्दत गर्नेछ कि तपाईंको प्रारम्भिक क्याप राम्रो देखाउँछ जसले तपाईंको ग्राहकहरूले यसलाई देख्न सक्दछ, पहुँच र प्रयत्न समस्याहरू बिना।
p: पहिलो अक्षर {फन्ट-साइज: 3em; फन्ट-परिवार: "एडवर्ड्स लिपि आईटीसी", "ब्रश स्क्रिप्ट एमटी", कर्सिभ; } p: पहिलो-लाइन {line-height: 100%; }र, सामान्य रूपमा, तपाइँ यी सबै सुझावहरू एक साथ राख्न सक्नुहुने प्रारम्भिक क्याप्सन जुन विज्ञापन शैली तपाईंको अनुच्छेदमा।
ग्राफिक प्रारम्भिक कैप प्रयोग गर्दै
यदि, सबै पछि, तपाइँ अझै पनि आफ्नो प्रारम्भिक टोपहरू पृष्ठमा कसरी देख्न चाहानुहुन्छ, तपाईं सटीक प्रभाव प्राप्त गर्न ग्राफिक्स लाई रिसोर्ट गर्न सक्नुहुन्छ जुन तपाईं खोज्दै हुनुहुन्छ। तर तपाईंले ग्राफिक्समा सिधै सार्न निर्णय गर्नु अघि, तपाईं यो विधिको खतराबाट सजग हुनुपर्दछ:
- तस्बिरहरू बिना फोटोहरू प्रारम्भिक क्याप्टि देख्न सकिदैन, र लुकेका पाठ देख्न सकिँदैन जुन छवि प्रतिस्थापन गर्दछ। यसले अनुच्छेदलाई पहुँचयोग्य बनाउँदछ वा पढ्न गाह्रो बनाउन सक्दछ।
- छविहरू सधैँ पृष्ठको डाउनलोड समयमा थपिन्छन्। यदि तपाइँसँग धेरै प्रारम्भिक क्यापहरू छन् भने, तपाईं धेरै समय असंख्य महसुस गर्ने केही कुराको लागि डाउनलोड समय बढाउन सक्नुहुन्छ।
- केही ब्राउजरहरू लुकेका पहिलो अक्षर र छवि दुवै प्रदर्शन हुनेछ - जुन अनुच्छेद पाठ लग अजीब बनाउन सक्छ।
- यस विकल्पलाई स्वचालित गर्न यो गाह्रो छ, किनकि तपाइँलाई थाहा छ कि पहिलो अक्षर भनेको सही ग्राफिक प्रयोग गर्नुहोला। त्यसैले, हरेक पटक अनुच्छेद सम्पादन गरिएको छ, तपाईले नयाँ ग्राफिक सिर्जना गर्न आवश्यक पर्दछ।
पहिलो, तपाईंलाई पहिलो अक्षरको ग्राफिक बनाउन आवश्यक छ। मैले फोटोशपलाई फन्ट "एडवर्डियन स्क्रिप्ट आईटीसी" सँग पत्र एल सिर्जना गर्न प्रयोग गरें। मैले यसलाई ठूलो - आकारमा 300pt बनायो। त्यसपछि मैले छविलाई चारैतिरको अङ्कमा चारैतिरको टुक्रामा राखे र छविको चौडाई र उचाइलाई चित्रण गर्यो।
त्यसपछि मैले मेरो अनुच्छेदको लागि एक क्लास "क्याप्ल" बनाएँ। यो जहाँ मैले कुन छविलाई प्रयोग गर्न परिभाषित गर्छु, प्रमुख (रेखा-उचाई), र यति।
तपाईँले अनुच्छेदको पाठ-इन्डेन्ट र प्याडिङ-शीर्ष सेट गर्न छवि चौडाइ र उचाइ प्रयोग गर्न आवश्यक छ। मेरो एल छविको लागि, मलाई 95px इन्डेन्ट र 72px प्याडिंग चाहिन्छ।
p.capL {line-height: 1em; पृष्ठभूमि छवि: url (capL.gif); पृष्ठभूमि-दोहोरो: दोहोरो; पाठ-इन्डेन्ट: 95px; padding-top: 72px; }तर यो सबै होइन। यदि तपाइँ त्यहाँ त्यहाँ जानुहुन्छ भने, त्यसपछि पहिलो अक्षर अनुच्छेदमा नक्कल गरिनेछ - पहिलो ग्राफिकसँग, त्यसपछि पाठमा। त्यसोभए, मैले पहिलो तत्त्वको कक्षामा "प्रारम्भिक" वर्गको वरिपरि एक अवधि थप्नुभयो - र उक्त अक्षर प्रदर्शन गर्न ब्राउजरलाई बोलाइयो:
span.initial {display: none; }र ग्राफिक त्यसपछि सही रूपमा प्रदर्शित गर्दछ। तपाईं पाठमा सँधै पाठ सङ्ग्रह प्राप्त गर्न अनुच्छेदमा पाठ-ईन्टसँग खेल्न सक्नुहुन्छ, तर तपाइँ यसलाई प्रदर्शन गर्न चाहानुहुन्छ।