१० सरल सीएसएस कोड उदाहरण जो आप १० मिनट में सीख सकते हैं

१० सरल सीएसएस कोड उदाहरण जो आप १० मिनट में सीख सकते हैं

एक बार जब आप HTML में काम करना शुरू कर देते हैं, तो आप शायद अपने वेब पेजों में और अधिक विज़ुअल पंच जोड़ने में रुचि लेंगे। सीएसएस ऐसा करने का सबसे अच्छा तरीका है। CSS आपको इनलाइन स्टाइल पर भरोसा किए बिना अपने पूरे पृष्ठ पर परिवर्तन लागू करने देता है।





अपने वेब पेज पर स्टाइल में कुछ बुनियादी बदलाव कैसे करें, यह दिखाने के लिए यहां कई सरल सीएसएस उदाहरण दिए गए हैं।



1. आसान अनुच्छेद स्वरूपण के लिए मूल सीएसएस कोड

CSS के साथ स्टाइलिंग का मतलब है कि हर बार जब आप कोई तत्व बनाते हैं तो आपको एक शैली निर्दिष्ट करने की आवश्यकता नहीं होती है। आप बस इतना कह सकते हैं कि 'सभी अनुच्छेदों में यह विशेष शैली होनी चाहिए' और आप जाने के लिए तैयार हैं।





मान लीजिए कि आप हर पैराग्राफ चाहते हैं (

, HTML टैग्स में से एक जिसे सभी को पता होना चाहिए) सामान्य से थोड़ा बड़ा होना चाहिए। और काले रंग के बजाय गहरे भूरे रंग के पाठ के साथ।

सम्बंधित: HTML चीट शीट



इसके लिए सीएसएस कोड है:

p { font-size: 120%; color: dimgray; }

सरल! अब, जब भी ब्राउज़र किसी अनुच्छेद को प्रस्तुत करता है, तो पाठ आकार (सामान्य का 120 प्रतिशत) और रंग ('डिमग्रे') इनहेरिट करेगा।



यदि आप उत्सुक हैं कि आप किन सादे-पाठ रंगों का उपयोग कर सकते हैं, तो इसे देखें सीएसएस रंग सूची मोज़िला से।

2. CSS उदाहरण कैरेक्टर केस बदलने के लिए

पैराग्राफ के लिए एक पदनाम बनाना चाहते हैं जो छोटे अक्षरों में होना चाहिए? उसके लिए एक सीएसएस नमूना होगा:



p.smallcaps { font-variant: small-caps; }

एक पैराग्राफ बनाने के लिए जो पूरी तरह से छोटे अक्षरों में हो, थोड़ा अलग HTML टैग का उपयोग करें। यहाँ यह कैसा दिखता है:

Your paragraph here.

किसी तत्व में एक बिंदु और एक वर्ग का नाम जोड़ना एक वर्ग द्वारा परिभाषित उस तत्व के उप-प्रकार को निर्दिष्ट करता है। आप इसे टेक्स्ट, इमेज, लिंक, और लगभग किसी भी चीज़ के साथ कर सकते हैं।

यदि आप टेक्स्ट के सेट को किसी विशिष्ट मामले में बदलना चाहते हैं, तो इन CSS कोड उदाहरणों का उपयोग करें:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

आखिरी वाला हर वाक्य के पहले अक्षर को बड़ा करता है।

शैली परिवर्तन अनुच्छेदों तक सीमित नहीं हैं। चार अलग-अलग रंग हैं जिन्हें एक लिंक सौंपा जा सकता है: इसका मानक रंग, इसका दौरा किया गया रंग, इसका होवर रंग, और इसका सक्रिय रंग (जिसे आप उस पर क्लिक करते समय प्रदर्शित करते हैं)। इस नमूना सीएसएस कोड का प्रयोग करें:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

लिंक के साथ, प्रत्येक 'ए' के ​​बाद एक कोलन होता है, डॉट नहीं।

उनमें से प्रत्येक घोषणा एक विशिष्ट संदर्भ में एक लिंक का रंग बदलती है। किसी लिंक को रंग बदलने के लिए उसके वर्ग को बदलने की कोई आवश्यकता नहीं है।

जबकि रेखांकित पाठ स्पष्ट रूप से एक लिंक को इंगित करता है, कभी-कभी उस रेखांकन को स्क्रैप करना अच्छा लगता है। यह 'पाठ-सजावट' विशेषता के साथ पूरा किया जाता है। यह सीएसएस उदाहरण दिखाता है कि लिंक पर रेखांकन कैसे हटाया जाए:

a { text-decoration: none; }

लिंक ('ए') टैग वाली कोई भी चीज़ गैर-रेखांकित रहेगी। जब उपयोगकर्ता इस पर होवर करता है तो इसे रेखांकित करना चाहते हैं? बस जोड़ें:

a:hover { text-decoration: underline; }

आप इस टेक्स्ट-डेकोरेशन को सक्रिय लिंक में भी जोड़ सकते हैं ताकि यह सुनिश्चित हो सके कि लिंक पर क्लिक करने पर अंडरलाइन गायब न हो जाए।

अपने लिंक पर अधिक ध्यान आकर्षित करना चाहते हैं? इसके बारे में जाने के लिए एक लिंक बटन एक शानदार तरीका है। इसके लिए कुछ और पंक्तियों की आवश्यकता है:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

आइए इस CSS नमूना कोड की व्याख्या करें।

सभी चार लिंक राज्यों को शामिल करना यह सुनिश्चित करता है कि जब कोई उपयोगकर्ता होवर करता है या उस पर क्लिक करता है तो बटन गायब नहीं होता है। आप होवर और सक्रिय लिंक के लिए अलग-अलग पैरामीटर भी सेट कर सकते हैं, जैसे, बटन या टेक्स्ट का रंग बदलना।

पृष्ठभूमि का रंग पृष्ठभूमि-रंग के साथ सेट किया गया है, और रंग के साथ पाठ का रंग। पैडिंग बॉक्स के आकार को परिभाषित करता है --- टेक्स्ट को लंबवत रूप से 10px और क्षैतिज रूप से 25px तक पैड किया जाता है।

टेक्स्ट-एलाइन यह सुनिश्चित करता है कि टेक्स्ट एक तरफ बंद होने के बजाय बटन के केंद्र में प्रदर्शित हो। टेक्स्ट-डेकोरेशन, जैसा कि पिछले उदाहरण में है, अंडरलाइन को हटा देता है।

अपने वॉलपेपर के रूप में वीडियो कैसे लगाएं

CSS कोड 'डिस्प्ले: इनलाइन-ब्लॉक' थोड़ा अधिक जटिल है। संक्षेप में, यह आपको ऑब्जेक्ट की ऊंचाई और चौड़ाई निर्धारित करने देता है। यह यह भी सुनिश्चित करता है कि डालने पर यह एक नई लाइन शुरू करता है।

6. टेक्स्ट बॉक्स बनाने के लिए CSS उदाहरण कोड

एक सादा पैराग्राफ बहुत रोमांचक नहीं है। यदि आप अपने पृष्ठ पर किसी तत्व को हाइलाइट करना चाहते हैं, तो आप एक सीमा जोड़ना चाह सकते हैं। सरल सीएसएस कोड की एक स्ट्रिंग के साथ ऐसा करने का तरीका यहां दिया गया है:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

यह सीधा है। यह किसी भी महत्वपूर्ण-श्रेणी के पैराग्राफ के चारों ओर एक ठोस बैंगनी बॉर्डर, पाँच पिक्सेल चौड़ा बनाता है। एक पैराग्राफ को इन गुणों को प्राप्त करने के लिए, बस इसे इस तरह घोषित करें:

Your important paragraph here.

यह काम करेगा चाहे कितना भी बड़ा पैराग्राफ हो।

आप कई अलग-अलग सीमा शैलियों को लागू कर सकते हैं; 'सॉलिड' के बजाय 'डॉटेड' या 'डबल' ट्राई करें। इस बीच, चौड़ाई 'पतली', 'मध्यम' या 'मोटी' हो सकती है। सीएसएस कोड प्रत्येक सीमा की मोटाई को अलग-अलग परिभाषित कर सकता है, जैसे:

border-width: 5px 8px 3px 9px;

इसके परिणामस्वरूप पांच पिक्सेल की ऊपरी सीमा, आठ की दाहिनी सीमा, तीन के नीचे और नौ पिक्सेल की बाईं सीमा का आकार होता है।

7. बेसिक सीएसएस कोड के साथ तत्वों को केंद्र-संरेखित करें

एक सामान्य कार्य के लिए, सीएसएस कोड वाले तत्वों को केंद्रित करना आश्चर्यजनक रूप से अनजान है। एक बार जब आप इसे कुछ बार कर लेते हैं, तो यह बहुत आसान हो जाता है। आपके पास चीजों को केन्द्रित करने के दो अलग-अलग तरीके हैं।

एक ब्लॉक तत्व (आमतौर पर एक छवि) के लिए, मार्जिन विशेषता का उपयोग करें:

.center { display: block; margin: auto; }

यह सुनिश्चित करता है कि तत्व एक ब्लॉक के रूप में प्रदर्शित होता है और प्रत्येक तरफ मार्जिन स्वचालित रूप से सेट हो जाता है। यदि आप किसी दिए गए पृष्ठ पर सभी छवियों को केन्द्रित करना चाहते हैं, तो आप img टैग में 'मार्जिन: ऑटो' भी जोड़ सकते हैं:

img { margin: auto; }

यह जानने के लिए कि यह इस तरह क्यों काम करता है, देखें W3C पर CSS बॉक्स मॉडल की व्याख्या .

लेकिन क्या होगा यदि आप सीएसएस के साथ टेक्स्ट को केंद्र में रखना चाहते हैं? इस नमूना सीएसएस का प्रयोग करें:

.centertext { text-align: center; }

एक अनुच्छेद में पाठ को केन्द्रित करने के लिए 'सेंटरटेक्स्ट' वर्ग का उपयोग करना चाहते हैं? बस उस वर्ग को इसमें जोड़ें

उपनाम:

This text will be centered.

8. पैडिंग को एडजस्ट करने के लिए CSS उदाहरण

किसी तत्व की पैडिंग निर्दिष्ट करती है कि प्रत्येक तरफ कितनी जगह होनी चाहिए। उदाहरण के लिए, यदि आप किसी छवि के निचले भाग में 25 पिक्सेल की पैडिंग जोड़ते हैं, तो निम्न पाठ 25 पिक्सेल नीचे धकेल दिया जाएगा। केवल चित्र ही नहीं, कई तत्वों में पैडिंग हो सकती है।

मान लें कि आप चाहते हैं कि प्रत्येक छवि में बाईं और दाईं ओर 20 पिक्सेल की पैडिंग हो, और ऊपर और नीचे 40 पिक्सेल हो। इसके लिए सबसे बुनियादी सीएसएस कोड निष्पादन है:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

हालाँकि, एक छोटा CSS निर्देश है, जो इस सारी जानकारी को एक पंक्ति में प्रस्तुत करता है:

img { padding: 40px 25px 40px 25px; }

यह ऊपर, दाएँ, नीचे और बाएँ पैडिंग को दाएँ नंबर पर सेट करता है। उपयोग किए जा रहे केवल दो मानों (40 और 25) के लिए धन्यवाद, आप इसे और भी छोटा बना सकते हैं:

img { padding: 40px 25px }

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

9. सीएसएस कोडिंग के साथ तालिका पंक्तियों को हाइलाइट करें

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

tr:hover { background-color: #ddd; }

अब जब भी आप किसी टेबल सेल पर माउस ले जाएंगे, तो वह पंक्ति रंग बदल देगी। कुछ अन्य अच्छी चीजें देखने के लिए जो आप कर सकते हैं, देखें फैंसी CSS टेबल पर W3C पेज .

10. उदाहरण सीएसएस पारदर्शी और अपारदर्शी के बीच छवियों को स्थानांतरित करने के लिए

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

img { opacity: 0.5; filter: alpha(opacity=50); }

'फ़िल्टर' विशेषता 'अपारदर्शिता' के समान काम करती है, लेकिन Internet Explorer 8 और इससे पहले के संस्करण अस्पष्टता माप को नहीं पहचानते हैं। पुराने ब्राउज़र के लिए, इसे शामिल करना एक अच्छा विचार है।

अब जबकि छवियां थोड़ी पारदर्शी हैं, आप उन्हें माउसओवर पर पूरी तरह से अपारदर्शी बना सकते हैं:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

स्रोत कोड के साथ 10 सीएसएस उदाहरण

इन सीएसएस कोड उदाहरणों के साथ, आपको यह पता होना चाहिए कि सीएसएस कैसे काम करता है। सीएसएस टेम्पलेट्स मदद कर सकता है, लेकिन कच्चे तत्वों को समझना महत्वपूर्ण है।

उन 10 आसान सीएसएस कोड उदाहरणों को फिर से लिखा गया है:

  1. आसान अनुच्छेद स्वरूपण
  2. लेटर केस बदलें
  3. लिंक रंग बदलें
  4. लिंक रेखांकन हटाएं
  5. एक लिंक बनाएं बटन
  6. एक टेक्स्ट बॉक्स बनाएं
  7. केंद्र-संरेखित तत्व
  8. पैडिंग समायोजित करें
  9. तालिका पंक्तियों को हाइलाइट करें
  10. छवियों को अपारदर्शी बनाएं

उनकी फिर से समीक्षा करने पर, आप कई पैटर्न देखेंगे जिन्हें आप भविष्य के कोड पर लागू कर सकते हैं। और तभी आप जानते हैं कि आपने वास्तव में CSS मास्टर बनना शुरू कर दिया है। लेकिन इसे याद रखना कठिन हो सकता है। आप भविष्य के संदर्भ के लिए इस पृष्ठ को बुकमार्क करना चाह सकते हैं।

साझा करना साझा करना कलरव ईमेल आवश्यक CSS3 गुण पत्रक धोखा

हमारे CSS3 गुण चीट शीट के साथ मास्टर आवश्यक CSS सिंटैक्स।

आगे पढ़िए संबंधित विषय
  • प्रोग्रामिंग
  • वेब डिजाइन
  • सीएसएस
  • स्क्रिप्टिंग
लेखक के बारे में क्रिश्चियन कावली(१५१० लेख प्रकाशित)

डेस्कटॉप और सॉफ्टवेयर समर्थन में व्यापक अनुभव के साथ सुरक्षा, लिनक्स, DIY, प्रोग्रामिंग, और टेक समझाया, और वास्तव में उपयोगी पॉडकास्ट निर्माता के लिए उप संपादक। लिनक्स प्रारूप पत्रिका में योगदानकर्ता, ईसाई एक रास्पबेरी पाई टिंकरर, लेगो प्रेमी और रेट्रो गेमिंग प्रशंसक है।

क्रिस्चियन काउली की और फ़िल्में या टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें