CSS ट्यूटोरियल
CSS के साथ शुरुआत करना
खोज…
टिप्पणियों
जब वे स्रोत HTML दस्तावेज़ में निर्दिष्ट होते हैं, तो पुन: उपयोग और दायरे की अलग-अलग डिग्री की अनुमति देते हुए, शैलियों को कई तरीकों से लिखा जा सकता है। बाहरी स्टाइलशीट का पुन: उपयोग HTML दस्तावेजों में किया जा सकता है। एंबेडेड स्टाइलशीट पूरे दस्तावेज़ पर लागू होते हैं जिसमें वे निर्दिष्ट हैं। इनलाइन शैलियाँ केवल उस व्यक्तिगत HTML तत्व पर लागू होती हैं जिस पर वे निर्दिष्ट हैं।
संस्करण
बाहरी शैली
एक बाहरी सीएसएस स्टाइलशीट को प्रत्येक HTML दस्तावेज़ में <link> तत्व रखकर किसी भी HTML दस्तावेज़ में लागू किया जा सकता है।
विशेषता rel की <link> टैग करने के लिए सेट किया जाना है "stylesheet" , और href स्टाइलशीट के सापेक्ष या निरपेक्ष पथ के लिए गुण। रिश्तेदार URL पथों का उपयोग करते समय आमतौर पर अच्छा अभ्यास माना जाता है, निरपेक्ष पथों का भी उपयोग किया जा सकता है। HTML5 में type विशेषता को छोड़ा जा सकता है ।
यह अनुशंसा की जाती है कि <link> टैग को HTML फ़ाइल के <head> टैग में रखा जाए ताकि शैलियों को उन तत्वों से पहले लोड किया जाए जो वे शैली करते हैं। अन्यथा, उपयोगकर्ताओं को अस्थिर सामग्री का एक फ्लैश दिखाई देगा ।
उदाहरण
हैलो-world.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
</html>
style.css
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
सुनिश्चित करें कि आपने अपनी CSS फ़ाइल में href में सही पथ शामिल किया है। यदि सीएसएस फ़ाइल आपकी HTML फ़ाइल के समान फ़ोल्डर में है, तो किसी भी पथ की आवश्यकता नहीं है (जैसे ऊपर उदाहरण) लेकिन यदि यह किसी फ़ोल्डर में सहेजा गया है, तो इसे इस href="foldername/style.css" तरह निर्दिष्ट करें।
<link rel="stylesheet" type="text/css" href="foldername/style.css">
बाहरी स्टाइलशीट आपके सीएसएस को संभालने का सबसे अच्छा तरीका माना जाता है। इसका एक बहुत ही सरल कारण है: जब आप एक साइट का प्रबंधन कर रहे हों, तो कहें, 100 पेज, सभी एक ही स्टाइलशीट द्वारा नियंत्रित, और आप अपने लिंक रंगों को नीले से हरे रंग में बदलना चाहते हैं, यह बदलाव करना बहुत आसान है अपनी सीएसएस फ़ाइल में और सभी 100 पृष्ठों में "कैस्केड" में बदलाव करने दें, क्योंकि यह 100 अलग-अलग पेजों में जाना है और इसे 100 गुना करना है। फिर, यदि आप अपनी वेबसाइट के रूप को पूरी तरह से बदलना चाहते हैं, तो आपको केवल इस एक फ़ाइल को अपडेट करने की आवश्यकता है।
आप अपने HTML पेज में जितनी जरूरत हो उतनी सीएसएस फाइलें लोड कर सकते हैं।
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">
सीएसएस नियम कुछ बुनियादी नियमों के साथ लागू होते हैं, और आदेश मायने रखता है। उदाहरण के लिए, यदि आपके पास कुछ कोड के साथ एक main.css फ़ाइल है:
p.green { color: #00FF00; }
'ग्रीन ’वर्ग के साथ आपके सभी पैराग्राफ हल्के हरे रंग में लिखे जाएंगे, लेकिन आप इसे अन्य .css फ़ाइल के साथ ओवरराइड कर सकते हैं। इसे main.css के बाद ही शामिल करें। आप निम्न कोड के साथ ओवरराइड कर सकते हैं। उदाहरण के लिए, मुख्य कोड का पालन करें:
p.green { color: #006600; }
अब 'ग्रीन' क्लास के साथ आपके सभी पैराग्राफ हल्के हरे रंग की बजाय गहरे हरे रंग में लिखे जाएंगे।
अन्य सिद्धांत लागू होते हैं, जैसे 'महत्वपूर्ण' नियम, विशिष्टता और विरासत।
जब कोई पहली बार आपकी वेबसाइट पर जाता है, तो उसका ब्राउज़र वर्तमान पृष्ठ का HTML और लिंक की गई सीएसएस फ़ाइल डाउनलोड करता है। फिर जब वे दूसरे पृष्ठ पर जाते हैं, तो उनके ब्राउज़र को केवल उस पृष्ठ का HTML डाउनलोड करना होगा; CSS फ़ाइल कैश की गई है, इसलिए इसे फिर से डाउनलोड करने की आवश्यकता नहीं है। चूंकि ब्राउज़र बाहरी स्टाइलशीट को कैश करते हैं, इसलिए आपके पृष्ठ तेजी से लोड होते हैं।
आंतरिक शैलियाँ
CSS <style></style> HTML <style></style> में संलग्न है, HTML दस्तावेज़ के भीतर टैग बाहरी स्टाइलशीट की तरह काम करता है, सिवाय इसके कि यह HTML दस्तावेज़ में रहता है यह एक अलग फ़ाइल के बजाय शैलियों में है, और इसलिए इसे केवल उस दस्तावेज़ में लागू किया जा सकता है जिसमें यह रहता है। ध्यान दें कि यह तत्व HTML सत्यापन के लिए <head> तत्व के अंदर होना चाहिए (हालांकि यह सभी वर्तमान ब्राउज़रों में काम करेगा यदि body में रखा गया body )।
<head>
<style>
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
इनलाइन स्टाइल्स
एक विशिष्ट तत्व को स्टाइल लागू करने के लिए इनलाइन शैलियों का उपयोग करें। ध्यान दें कि यह इष्टतम नहीं है। सामग्री शैली और प्रस्तुति के बीच एक अंतर बनाए रखने के लिए स्टाइल नियमों को एक <style> टैग या बाहरी सीएसएस फ़ाइल में प्रोत्साहित किया जाता है।
इनलाइन शैलियाँ <style> CSS <style> टैग या बाहरी शैली पत्रक में किसी भी CSS को ओवरराइड करती हैं। हालांकि यह कुछ परिस्थितियों में उपयोगी हो सकता है, इस तथ्य से अधिक बार एक परियोजना की स्थिरता को कम नहीं करता है।
निम्नलिखित उदाहरण की शैलियाँ उन तत्वों पर सीधे लागू होती हैं जिनसे वे जुड़ी हुई हैं।
<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>
इनलाइन शैलियों आम तौर पर विभिन्न ईमेल क्लाइंट, कार्यक्रमों और उपकरणों में संगतता प्रदान करने के लिए सबसे सुरक्षित तरीका है, लेकिन लिखने के लिए समय लेने और प्रबंधन करने के लिए थोड़ा चुनौतीपूर्ण हो सकता है।
CSS @import rule (सीएसएस एट-रूल में से एक)
@Import CSS at-rule का उपयोग अन्य स्टाइल शीट से शैली के नियमों को आयात करने के लिए किया जाता है। इन नियमों को @charset नियमों को छोड़कर अन्य सभी प्रकार के नियमों से पहले होना चाहिए; जैसा कि यह एक नेस्टेड कथन नहीं है, @import का उपयोग सशर्त समूह के नियमों में नहीं किया जा सकता है। @import ।
@Import का उपयोग कैसे करें
आप निम्नलिखित तरीकों से @import नियम का उपयोग कर सकते हैं:
A. आंतरिक शैली टैग के साथ
<style>
@import url('/css/styles.css');
</style>
बी बाहरी स्टाइलशीट के साथ
निम्न पंक्ति additional-styles.css फाइल में रूट-डायरेक्टरी में additional-styles.css फाइल में सीएसएस फ़ाइल आयात करती है, जिसमें यह दिखाई देती है:
@import '/additional-styles.css';
बाहरी CSS को इम्पोर्ट करना भी संभव है। एक सामान्य उपयोग मामला फ़ॉन्ट फ़ाइलें हैं।
@import 'https://fonts.googleapis.com/css?family=Lato';
@import नियम का एक वैकल्पिक दूसरा तर्क मीडिया प्रश्नों की एक सूची है:
@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);
जावास्क्रिप्ट के साथ सीएसएस बदलना
शुद्ध जावास्क्रिप्ट
किसी तत्व की style संपत्ति के माध्यम से जावास्क्रिप्ट के साथ सीएसएस संपत्ति मूल्यों को जोड़ना, हटाना या बदलना संभव है।
var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';
ध्यान दें कि शैली के गुणों को कम ऊँट केस शैली में नामित किया गया है। उदाहरण में आप देखते हैं कि जावास्क्रिप्ट में सीएसएस संपत्ति font-family fontFamily बन जाती है।
तत्वों पर सीधे काम करने के विकल्प के रूप में, आप जावास्क्रिप्ट में <style> या <link> तत्व बना सकते हैं और इसे HTML दस्तावेज़ के <body> या <head> में जोड़ सकते हैं।
jQuery
JQuery के साथ सीएसएस गुणों को संशोधित करना और भी सरल है।
$('#element').css('margin', '5px');
यदि आपको एक से अधिक शैली नियम बदलने की आवश्यकता है:
$('#element').css({
margin: "5px",
padding: "10px",
color: "black"
});
jQuery में सीएसएस नियमों को बदलने के दो तरीके शामिल हैं जो उनमें हाइफ़न हैं (यानी font-size )। आप उन्हें उद्धरण या ऊंट-केस शैली नियम नाम में रख सकते हैं।
$('.example-class').css({
"background-color": "blue",
fontSize: "10px"
});
यह सभी देखें
CSS के साथ स्टाइलिंग सूची
list-style-type लिए तीन अलग-अलग गुण हैं: list-style-type , list-style-image और list-style-position , जिसे उस क्रम में घोषित किया जाना चाहिए। डिफ़ॉल्ट मान क्रमशः, बाहर, और कोई भी नहीं हैं। प्रत्येक संपत्ति को अलग से, या list-style आशुलिपि संपत्ति का उपयोग करके घोषित किया जा सकता है।
list-style-type प्रत्येक सूची-आइटम के लिए उपयोग किए गए बुलेट बिंदु के आकार या प्रकार को परिभाषित करता है।
list-style-type लिए कुछ स्वीकार्य मूल्य:
- डिस्क
- वृत्त
- वर्ग
- दशमलव
- कम रोमन
- ऊपरी-रोमन
- कोई नहीं
(एक विस्तृत सूची के लिए, W3C विनिर्देश विकी देखें )
उदाहरण के लिए, प्रत्येक सूची-आइटम के लिए वर्गाकार बुलेट बिंदुओं का उपयोग करने के लिए, आप निम्नलिखित संपत्ति-मूल्य जोड़ी का उपयोग करेंगे:
li {
list-style-type: square;
}
list-style-image गुण यह निर्धारित करता है कि क्या सूची-आइटम आइकन छवि के साथ सेट है, और none या किसी URL का मान स्वीकार none करता है जो छवि को इंगित करता है।
li {
list-style-image: url(images/bullet.png);
}
list-style-position गुण परिभाषित करता है कि सूची-आइटम मार्कर को कहां रखा जाए, और यह दो में से एक मान को स्वीकार करता है: "अंदर" या "बाहर"।
li {
list-style-position: inside;
}