एचटीएमएल शैलियाँ - सीएसएस
सीएसएस = शैलियाँ और रंग
पाठ में हेरफेर
रंग,
बक्से
सीएसएस के साथ HTML स्टाइल
सीएसएस के लिए खड़ा है सी ascading एस tyle एस heets।सीएसएस का वर्णन HTML तत्वों को कैसे स्क्रीन, कागज, या अन्य मीडिया में पर प्रदर्शित हो रहे हैं ।
सीएसएस बहुत काम की बचत होती है । यह कई वेब पृष्ठों के लेआउट सभी को एक बार नियंत्रित कर सकते हैं।
सीएसएस 3 तरीकों से HTML तत्वों को जोड़ा जा सकता है:
- इनलाइन - HTML तत्वों में शैली विशेषता का उपयोग करके
- आंतरिक - एक का उपयोग करके
<style>में तत्व<head>अनुभाग - बाहरी - बाह्य CSS फ़ाइल का उपयोग करके
सुझाव: आप हमारे में सीएसएस के बारे में भी बहुत कुछ सीख सकते हैं सीएसएस ट्यूटोरियल ।
इनलाइन सीएसएस
एक इनलाइन सीएसएस एक HTML तत्व के लिए एक अनूठी शैली लागू करने के लिए प्रयोग किया जाता है।एक इनलाइन सीएसएस किसी HTML तत्व की शैली विशेषता का उपयोग करता है।
इस उदाहरण सेट के पाठ का रंग
<h1>नीले रंग के तत्व:उदाहरण
<h1 style="color:blue;">This is a Blue Heading</h1>
आंतरिक सीएसएस
एक अंदरूनी सीएसएस एक HTML पृष्ठ के लिए एक शैली को परिभाषित करने के लिए किया जाता है।एक अंदरूनी सीएसएस में परिभाषित किया गया है
<head>, एक HTML पृष्ठ की धारा एक के भीतर <style>तत्व:उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
बाहरी सीएसएस
किसी बाह्य शैली पत्रक कई HTML पृष्ठों के लिए शैली को परिभाषित करने के लिए किया जाता है।किसी बाह्य शैली पत्रक के साथ, आप एक पूरे वेब साइट के देखो, एक फ़ाइल को बदलने के द्वारा बदल सकते हैं!
किसी बाह्य शैली पत्रक का उपयोग करने के लिए, में इसे करने के लिए एक लिंक जोड़ने
<head>HTML पृष्ठ के अनुभाग:उदाहरण
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
यहां "styles.css" लग रहा है:
body {
background-color: powderblue;}
h1 {
color: blue;}
p {
color: red;}
सीएसएस फ़ॉन्ट्स
सीएसएसcolorसंपत्ति पाठ रंग प्रयोग की जाने वाली परिभाषित करता है।सीएसएस
font-familyसंपत्ति का इस्तेमाल किया जाने वाला फ़ॉन्ट परिभाषित करता है।सीएसएस
font-size संपत्ति पाठ का आकार प्रयोग की जाने वाली परिभाषित करता है।उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;}
p {
color: red;
font-family: courier;
font-size: 160%;}</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
सीएसएस सीमा
सीएसएसborderसंपत्ति किसी HTML तत्व के चारों ओर एक सीमा को परिभाषित करता है:उदाहरण
p {
border: 1px
solid powderblue;}
सीएसएस पैडिंग
सीएसएसpaddingसंपत्ति पाठ और सीमा के बीच एक गद्दी (स्थान) को परिभाषित करता है:उदाहरण
p {
border: 1px
solid powderblue;
padding: 30px;}
सीएसएस मार्जिन
सीएसएसmarginसंपत्ति सीमा के बाहर एक मार्जिन (स्थान) को परिभाषित करता है:उदाहरण
p {
border: 1px
solid powderblue;
margin: 50px;
}
आईडी गुण
एक विशेष तत्व के लिए एक विशिष्ट शैली को परिभाषित करने के लिए, एक जोड़ने केidतत्व को विशेषता:
<p id="p01">I am different</p>
उदाहरण
#p01 {
color: blue;}
ध्यान दें:
एक तत्व की आईडी, एक पृष्ठ के भीतर अद्वितीय होना चाहिए ताकि आईडी
चयनकर्ता एक अद्वितीय तत्व का चयन करने के लिए इस्तेमाल किया जाता है!
वर्ग विशेषता
तत्वों को विशिष्ट प्रकार के लिए एक शैली को परिभाषित करने के लिए, एक जोड़ने केclassतत्व को विशेषता:
<p class="error">I am different</p>
उदाहरण
p.error {
color: red;}
बाहरी संदर्भ
बाहरी स्टाइल शीट एक पूर्ण यूआरएल के साथ या वर्तमान वेब पेज के लिए एक रास्ता रिश्तेदार के साथ संदर्भित किया जा सकता।यह उदाहरण एक शैली पत्रक से जोड़ने के लिए एक पूर्ण URL उपयोग करता है:
उदाहरण
<link rel="stylesheet" href="https://teachincal web/html/styles.css">
उदाहरण
<link rel="stylesheet" href="/html/styles.css">
उदाहरण
<link rel="stylesheet" href="styles.css">
आप अध्याय में फ़ाइल पथ के बारे में अधिक पढ़ सकते हैं HTML फ़ाइल पथ ।
अध्याय का सारांश
- HTML का उपयोग
styleइनलाइन स्टाइल के लिए विशेषता - HTML का उपयोग
<style>आंतरिक सीएसएस परिभाषित करने के लिए तत्व - HTML का उपयोग करें
<link>बाह्य CSS फ़ाइल का उल्लेख करने के तत्व - HTML का उपयोग करें
<head><style> और <link> तत्व स्टोर करने के लिए तत्व - सीएसएस का उपयोग करें
colorपाठ रंग के लिए संपत्ति - सीएसएस का उपयोग करें
font-familyपाठ फोंट के लिए संपत्ति - सीएसएस का उपयोग करें
font-sizeपाठ आकार के लिए संपत्ति - सीएसएस का उपयोग
borderसीमाओं के लिए संपत्ति - सीएसएस का उपयोग
paddingसीमा के अंदर अंतरिक्ष के लिए संपत्ति - सीएसएस का उपयोग
marginसीमा के बाहर अंतरिक्ष के लिए संपत्ति
एचटीएमएल व्यायाम
एचटीएमएल शैली टैग
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
सभी उपलब्ध HTML टैग की एक पूरी सूची के लिए, हमारी यात्रा के HTML टैग संदर्भ ।
good sir j
ReplyDeletence
ReplyDelete