HTML
CSS के साथ HTML का उपयोग करना
खोज…
परिचय
CSS पृष्ठ पर HTML तत्वों को शैलियाँ प्रदान करता है। इनलाइन स्टाइलिंग में टैग में शैली विशेषता का उपयोग शामिल है, और यह अत्यधिक हतोत्साहित किया जाता है। आंतरिक स्टाइलशीट <style> टैग का उपयोग करती है और पृष्ठ के निर्देशित भागों के लिए नियमों की घोषणा करने के लिए उपयोग की जाती है। बाहरी स्टाइलशीट का उपयोग <link> टैग के माध्यम से किया जा सकता है जो सीएसएस की एक बाहरी फ़ाइल लेता है और दस्तावेज़ पर नियम लागू करता है। यह विषय अनुलग्नक के सभी तीन तरीकों के उपयोग को शामिल करता है।
वाक्य - विन्यास
-
<link rel="stylesheet" type="text/css" href="stylesheet.css"> -
<style></style>
बाहरी स्टाइलशीट उपयोग
दस्तावेज़ के head में link विशेषता का उपयोग करें:
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
आप सामग्री वितरण नेटवर्क या लघु के लिए CDN के माध्यम से वेबसाइटों से प्रदान की गई स्टाइलशीट का उपयोग कर सकते हैं। (उदाहरण के लिए, बूटस्ट्रैप):
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
आम तौर पर, आप इसकी वेबसाइट पर एक फ्रेमवर्क के लिए सीडीएन समर्थन पा सकते हैं।
आंतरिक स्टाइलशीट
आप <style> टैग का उपयोग करके आंतरिक रूप से CSS तत्वों को भी शामिल कर सकते हैं:
<head>
<style type="text/css">
body {
background-color: gray;
}
</style>
</head>
एकाधिक आंतरिक स्टाइलशीट को एक कार्यक्रम में भी शामिल किया जा सकता है।
<head>
<style type="text/css">
body {
background-color: gray;
}
</style>
<style type="text/css">
p {
background-color: blue;
}
</style>
</head>
इनलाइन स्टाइल
आप style विशेषता का उपयोग करके एक विशिष्ट तत्व को स्टाइल कर सकते हैं:
<span style="color: red">This text will appear in red.</span>
नोट: इससे बचने की कोशिश करें - CSS का मुद्दा प्रस्तुति से सामग्री को अलग करना है।
एकाधिक शैलियाँ
कई शैलियों को लोड करना संभव है:
<head>
<link rel="stylesheet" type="text/css" href="general.css">
<link rel="stylesheet" type="text/css" href="specific.css">
</head>
ध्यान दें कि बाद की फाइलें और घोषणाएं पहले वाले को ओवरराइड कर देंगी । तो अगर general.css में शामिल हैं:
body {
background-color: red;
}
और specific.css में शामिल हैं:
body {
background-color: blue;
}
यदि दोनों का उपयोग किया जाता है, तो दस्तावेज़ की पृष्ठभूमि नीली होगी।
