CSS OVERVIEW/सीएसएस अवलोकन
तो सीएसएस क्या है, वास्तव में? संपादित करें
HTML की तरह, सीएसएस वास्तव में एक प्रोग्रामिंग भाषा नहीं है यह एक मार्कअप लैंग्वेज भी नहीं है - यह एक स्टाइल शीट लैंग्वेज है, अर्थात, यह आपको एचटीएमएल दस्तावेजों के तत्वों पर चुनिंदा रूप से लागू करने देता है। उदाहरण के लिए, सभी पैराग्राफ तत्वों को एक HTML पृष्ठ पर चुनने के लिए और उनके भीतर पाठ को लाल करें, आप यह सीएसएस लिखेंगे:
2. Index.html को सहेजें और अपने ब्राउज़र में लोड करें। आपको ऐसा कुछ देखना चाहिए:
1.प्रत्येक नियम सेट (चयनकर्ता से अलग) को घुंघराले ब्रेसिज़ ({}) में लपेटा जाना चाहिए।
2.प्रत्येक घोषणापत्र के भीतर, आपको संपत्ति को अपने मूल्यों से अलग करने के लिए एक बृहदान्त्र (:) का उपयोग करना चाहिए
3.प्रत्येक नियम सेट के भीतर, आपको प्रत्येक घोषणा को अगले एक से अलग करने के लिए अर्धविराम (;) का उपयोग करना चाहिए।
तो एक बार में कई संपत्ति मूल्यों को संशोधित करने के लिए, आपको उन्हें अर्धविरामों से अलग करने की आवश्यकता है, जैसे कि:
p { color: red;
width: 500px;
border: 1px solid black;}
p,li,h1 {color: red;}
CSS (Cascading Style Sheets) is the code you use to style your webpage. CSS Basics takes you through what you need to get started. We'll answer questions like: How do I make my text black or red? How do I make my content show up in such-and-such a place on the screen? How do I decorate my webpage with background images and colors?
So what is CSS, really?
Like HTML, CSS is not really a programming language. It is not a markup language either — It is a style sheet language, that is, it lets you apply styles selectively to elements in HTML documents. For example, to select all the paragraph elements on an HTML page and turn the text within them red, you'd write this CSS:
सीएसएस (कैस्केडिंग स्टाइल शीट्स) वह कोड है, जिसका उपयोग आप अपने वेबपृष्ठ को स्टाइल करने के लिए करते हैं। सीएसएस मूल बातें आपको आरंभ करने की आवश्यकता के माध्यम से ले जाता है। हम इस तरह के सवालों का जवाब देंगे: मैं अपने टेक्स्ट को काला या लाल कैसे बनाऊं? स्क्रीन पर इस तरह और जगह में मैं अपनी सामग्री कैसे दिखाऊं? मैं पृष्ठभूमि छवियों और रंगों के साथ अपने वेबपेज को सजाने कैसे करूं?
तो सीएसएस क्या है, वास्तव में? संपादित करें
HTML की तरह, सीएसएस वास्तव में एक प्रोग्रामिंग भाषा नहीं है यह एक मार्कअप लैंग्वेज भी नहीं है - यह एक स्टाइल शीट लैंग्वेज है, अर्थात, यह आपको एचटीएमएल दस्तावेजों के तत्वों पर चुनिंदा रूप से लागू करने देता है। उदाहरण के लिए, सभी पैराग्राफ तत्वों को एक HTML पृष्ठ पर चुनने के लिए और उनके भीतर पाठ को लाल करें, आप यह सीएसएस लिखेंगे:
P {color: red; }
Let's try it out: paste those three lines of CSS into a new file in your text editor, and then save the file as
style.css in your styles directory.
But we still need to apply the CSS to your HTML document, otherwise the CSS styling won't affect how your browser displays the HTML document. (If you haven't been following on with our project, read Dealing with files and HTML basics to find out what you need to do first.)
आइए इसे आज़माएं: अपने टेक्स्ट एडिटर में एक नई फ़ाइल में इन तीन पंक्तियों की सीएसएस को पेस्ट करें, और फिर अपनी स्टाइल डायरेक्टरी में स्टाइल.css के रूप में फ़ाइल को सहेजें।
लेकिन हमें अब भी अपने HTML दस्तावेज़ को सीएसएस लागू करने की आवश्यकता है, अन्यथा सीएसएस स्टाइल प्रभावित नहीं होगा कि आपका ब्राउज़र HTML दस्तावेज़ कैसे दिखाता है। (यदि आप हमारे प्रोजेक्ट के साथ नहीं पालन कर रहे हैं, तो पहले आपको क्या करना है यह जानने के लिए फाइल और एचटीएमएल मूल बातें से निपटना पढ़ें।)
लेकिन हमें अब भी अपने HTML दस्तावेज़ को सीएसएस लागू करने की आवश्यकता है, अन्यथा सीएसएस स्टाइल प्रभावित नहीं होगा कि आपका ब्राउज़र HTML दस्तावेज़ कैसे दिखाता है। (यदि आप हमारे प्रोजेक्ट के साथ नहीं पालन कर रहे हैं, तो पहले आपको क्या करना है यह जानने के लिए फाइल और एचटीएमएल मूल बातें से निपटना पढ़ें।)
1.Open your index.html file and paste the following line somewhere in the head, that is, between the <head> and </head> tags:
1.अपनी index.html फ़ाइल खोलें और सिर में कहीं न कहीं, उस कुंजी को, <head> और </ head> टैग के बीच पेस्ट करें:
<link href="styles/style.css" rel="stylesheet" type="text/css">
2.Save index.html and load it in your browser. You should see something
like this:
2. Index.html को सहेजें और अपने ब्राउज़र में लोड करें। आपको ऐसा कुछ देखना चाहिए:
If your paragraph text is now red, congratulations, you've now written your first successful CSS!
Anatomy of a CSS ruleset
Let's look at the above CSS in a bit more detail:
यदि आपका पैराग्राफ टेक्स्ट अब लाल है, तो बधाई हो, अब आपने अपना पहला सफल सीएसएस लिखा है!
सीएसएस नियमों का एनाटॉमी
चलिए थोड़ी और विस्तार से ऊपर सीएसएस को देखें:
सीएसएस नियमों का एनाटॉमी
चलिए थोड़ी और विस्तार से ऊपर सीएसएस को देखें:
The whole structure is called a rule set (but often "rule" for short). Note also the names of the individual parts:
- Selector
- The HTML element name at the start of the rule set. It selects the element(s) to be styled (in this case,
pelements). To style a different element, just change the selector. - Declaration
- A single rule like
color: red;specifying which of the element's properties you want to style. - Properties
- Ways in which you can style a given HTML element. (In this case,
coloris a property of thepelements.) In CSS, you choose which properties you want to affect in your rule. - Property value
- To the right of the property, after the colon, we have the property value, to choose one out of many possible appearances for a given property (there are many
colorvalues besidesred).
Note the other important parts of the syntax:
पूरे ढांचे को एक नियम सेट कहा जाता है (लेकिन अक्सर "नियम" के लिए) नोट भी व्यक्तिगत भागों के नाम:
चयनकर्ता
नियम सेट की शुरुआत में HTML तत्व का नाम। यह स्टाइल करने के लिए तत्व (एस) का चयन करता है (इस मामले में, पी तत्व)। एक अलग तत्व शैली के लिए, बस चयनकर्ता को बदल दें
घोषणा
रंग का एक नियम: लाल; यह निर्दिष्ट करता है कि तत्व की गुणों में से कौन सा शैली आप चाहते हैं।
गुण
जिस तरीके से आप एक दिया HTML तत्व शैली कर सकते हैं (इस मामले में, रंग पी तत्वों की एक संपत्ति है।) सीएसएस में, आप यह चुनते हैं कि आप अपने नियम में जो गुणों को प्रभावित करना चाहते हैं
संपत्ति मूल्य
बृहदान्त्र के बाद, संपत्ति के दायीं ओर, हमारे पास संपत्ति के मूल्य हैं, किसी एक संपत्ति के लिए कई संभव आकृतियों में से एक का चयन करने के लिए (लाल के अलावा कई रंग मूल्य हैं)।
सिंटैक्स के अन्य महत्वपूर्ण भागों को नोट करें:
चयनकर्ता
नियम सेट की शुरुआत में HTML तत्व का नाम। यह स्टाइल करने के लिए तत्व (एस) का चयन करता है (इस मामले में, पी तत्व)। एक अलग तत्व शैली के लिए, बस चयनकर्ता को बदल दें
घोषणा
रंग का एक नियम: लाल; यह निर्दिष्ट करता है कि तत्व की गुणों में से कौन सा शैली आप चाहते हैं।
गुण
जिस तरीके से आप एक दिया HTML तत्व शैली कर सकते हैं (इस मामले में, रंग पी तत्वों की एक संपत्ति है।) सीएसएस में, आप यह चुनते हैं कि आप अपने नियम में जो गुणों को प्रभावित करना चाहते हैं
संपत्ति मूल्य
बृहदान्त्र के बाद, संपत्ति के दायीं ओर, हमारे पास संपत्ति के मूल्य हैं, किसी एक संपत्ति के लिए कई संभव आकृतियों में से एक का चयन करने के लिए (लाल के अलावा कई रंग मूल्य हैं)।
सिंटैक्स के अन्य महत्वपूर्ण भागों को नोट करें:
- Each rule set (apart from the selector) must be wrapped in curly braces ({}).
- Within each declaration, you must use a colon (:) to separate the property from its values.
- Within each rule set, you must use a semicolon (;) to separate each declaration from the next one.
So to modify multiple property values at once, you just need to write them separated by semicolons, like this:
2.प्रत्येक घोषणापत्र के भीतर, आपको संपत्ति को अपने मूल्यों से अलग करने के लिए एक बृहदान्त्र (:) का उपयोग करना चाहिए
3.प्रत्येक नियम सेट के भीतर, आपको प्रत्येक घोषणा को अगले एक से अलग करने के लिए अर्धविराम (;) का उपयोग करना चाहिए।
तो एक बार में कई संपत्ति मूल्यों को संशोधित करने के लिए, आपको उन्हें अर्धविरामों से अलग करने की आवश्यकता है, जैसे कि:
p { color: red;
width: 500px;
border: 1px solid black;}
Selecting multiple elements
You can also select multiple types of elements and apply a single rule set to all of them. Include multiple selectors separated by commas. For example:
एकाधिक तत्वों का चयन करना
आप अनेक प्रकार के तत्वों का चयन भी कर सकते हैं और उन सभी को एक ही नियम सेट कर सकते हैं। कॉमा द्वारा अलग किए गए कई चयनकर्ताओं को शामिल करें उदाहरण के लिए:
आप अनेक प्रकार के तत्वों का चयन भी कर सकते हैं और उन सभी को एक ही नियम सेट कर सकते हैं। कॉमा द्वारा अलग किए गए कई चयनकर्ताओं को शामिल करें उदाहरण के लिए:
p,li,h1 {color: red;}
Different types of selector
There are many different types of selector. Above, we only looked at element selectors, which select all elements of a given type in the given HTML documents. But we can make more specific selections than that. Here are some of the more common types of selector:
| Selector name | What does it select | Example |
|---|---|---|
| Element selector (sometimes called a tag or type selector) | All HTML element(s) of the specified type. | pSelects <p> |
| ID selector | The element on the page with the specified ID (on a given HTML page, you're only allowed one element per ID). | #my-idSelects <p id="my-id">or <a id="my-id"> |
| Class selector | The element(s) on the page with the specified class (multiple class instances can appear on a page). | .my-classSelects <p class="my-class"> and <a class="my-class"> |
| Attribute selector | The element(s) on the page with the specified attribute. | img[src]Selects <img src="myimage.png"> but not <img> |
| Pseudo class selector | The specified element(s), but only when in the specified state, e.g. being hovered over. | a:hoverSelects <a>, but only when the mouse pointer is hovering over the link. |
No comments:
Post a Comment