सीएसएस - त्वरित गाइड
Superior styles to HTML - सीएसएस में एचटीएमएल की तुलना में विशेषताओं का एक बहुत व्यापक सरणी है, जिससे आप एचटीएमएल विशेषताओं की तुलना में अपने HTML पेज को बेहतर रूप दे सकते हैं।
Multiple Device Compatibility- स्टाइल शीट एक से अधिक प्रकार के डिवाइस के लिए सामग्री को अनुकूलित करने की अनुमति देती है। एक ही HTML दस्तावेज़ का उपयोग करके, एक वेबसाइट के विभिन्न संस्करणों को हाथ में डिवाइस जैसे पीडीए और सेल फोन या प्रिंटिंग के लिए प्रस्तुत किया जा सकता है।
Global web standards- अब HTML विशेषताओं को अपदस्थ किया जा रहा है और इसे CSS का उपयोग करने की सिफारिश की जा रही है। तो यह सभी HTML पृष्ठों में सीएसएस का उपयोग शुरू करने के लिए एक अच्छा विचार है ताकि उन्हें भविष्य के ब्राउज़रों के अनुकूल बनाया जा सके।
सीएसएस कौन बनाता है और बनाए रखता है?
CSS को W3C के भीतर लोगों के एक समूह के माध्यम से बनाया और बनाए रखा जाता है जिसे CSS वर्किंग ग्रुप कहा जाता है। CSS वर्किंग ग्रुप विनिर्देशन नामक दस्तावेज बनाता है। जब एक विनिर्देश पर चर्चा की गई है और आधिकारिक तौर पर W3C सदस्यों द्वारा पुष्टि की गई है, तो यह एक सिफारिश बन जाती है।
इन अनुसमर्थित विनिर्देशों को सिफारिशें कहा जाता है क्योंकि W3C का भाषा के वास्तविक कार्यान्वयन पर कोई नियंत्रण नहीं है। स्वतंत्र कंपनियाँ और संगठन उस सॉफ़्टवेयर का निर्माण करते हैं।
NOTE - वर्ल्ड वाइड वेब कंसोर्टियम या डब्ल्यू 3 सी एक समूह है जो इंटरनेट कैसे काम करता है और इसे कैसे विकसित किया जाना चाहिए, इसके बारे में सिफारिशें करता है।
सीएसएस संस्करण
कैस्केडिंग स्टाइल शीट्स स्तर 1 (CSS1) दिसंबर 1996 में एक सिफारिश के रूप में W3C से बाहर आया। इस संस्करण में सीएसएस भाषा के साथ-साथ सभी HTML टैग के लिए एक सरल दृश्य स्वरूपण मॉडल का वर्णन किया गया है।
मई 1998 में CSS2 W3C की अनुशंसा बन गई और CSS1 पर निर्माण किया गया। यह संस्करण मीडिया-विशिष्ट शैली की शीट जैसे प्रिंटर और कर्ण उपकरण, डाउनलोड करने योग्य फ़ॉन्ट, तत्व स्थिति और तालिकाओं के लिए समर्थन जोड़ता है।
selector { property: value }
Example - आप एक टेबल बॉर्डर को इस प्रकार परिभाषित कर सकते हैं -
table{ border :1px solid #C00; }यहाँ तालिका एक चयनकर्ता है और सीमा एक संपत्ति है और दी गई 1px ठोस # C00 उस संपत्ति का मूल्य है।
आप अपने आराम के आधार पर चयनकर्ताओं को विभिन्न सरल तरीकों से परिभाषित कर सकते हैं। मुझे इन चयनकर्ताओं को एक-एक करके बताना चाहिए।
प्रकार चयनकर्ता
यह वही चयनकर्ता है जिसे हमने ऊपर देखा है। फिर से, सभी स्तरों 1 शीर्षकों को एक रंग देने के लिए एक और उदाहरण -
h1 {
color: #36CFFF;
}यूनिवर्सल चयनकर्ता
एक विशिष्ट प्रकार के तत्वों का चयन करने के बजाय, सार्वभौमिक चयनकर्ता किसी भी तत्व प्रकार के नाम से काफी मेल खाता है -
* {
color: #000000;
}यह नियम हमारे दस्तावेज़ के प्रत्येक तत्व की सामग्री को काले रंग में प्रस्तुत करता है।
वंशज चयनकर्ता
मान लीजिए कि आप किसी विशेष तत्व के लिए एक शैली नियम लागू करना चाहते हैं, जब वह किसी विशेष तत्व के अंदर होता है। जैसा कि निम्नलिखित उदाहरण में दिया गया है, स्टाइल नियम <em> तत्व पर लागू होगा जब यह <ul> टैग के अंदर होगा।
ul em {
color: #000000;
}द क्लास सिलेक्टर्स
आप तत्वों की वर्ग विशेषता के आधार पर शैली नियमों को परिभाषित कर सकते हैं। परिभाषित नियम के अनुसार उस वर्ग वाले सभी तत्वों को स्वरूपित किया जाएगा।
.black {
color: #000000;
}यह नियम हमारे दस्तावेज़ में काले रंग के वर्ग गुण के साथ हर तत्व के लिए काले रंग में सामग्री प्रदान करता है । आप इसे थोड़ा और विशेष बना सकते हैं। उदाहरण के लिए -
h1.black {
color: #000000;
}यह नियम केवल <h1> तत्वों के लिए काले रंग में सेट की गई क्लास विशेषता वाले तत्वों को प्रस्तुत करता है ।
आप दिए गए तत्व के लिए एक से अधिक वर्ग चयनकर्ताओं को आवेदन कर सकते हैं। निम्नलिखित उदाहरण पर विचार करें -
<p class = "center bold">
This para will be styled by the classes center and bold.
</p>आईडी चयनकर्ताओं
आप तत्वों की आईडी विशेषता के आधार पर शैली नियमों को परिभाषित कर सकते हैं । उस आईडी वाले सभी तत्व निर्धारित नियम के अनुसार स्वरूपित होंगे।
#black {
color: #000000;
}यह नियम हमारे तत्व में काले रंग की सामग्री को प्रदान करता है जिसमें आईडी विशेषता के साथ प्रत्येक तत्व काला है। आप इसे थोड़ा और विशेष बना सकते हैं। उदाहरण के लिए -
h1#black {
color: #000000;
}यह नियम केवल <h1> तत्वों के लिए काले रंग में सामग्री को प्रस्तुत करता है, जिसमें id विशेषता काली होती है ।
आईडी चयनकर्ताओं की असली शक्ति तब है, जब उनका उपयोग वंशज चयनकर्ताओं की नींव के रूप में किया जाता है, उदाहरण के लिए -
#black h2 {
color: #000000;
}इस उदाहरण में सभी स्तर 2 शीर्षकों काले रंग में प्रदर्शित किया जाएगा जब उन शीर्षकों टैग में होने के साथ झूठ होगा आईडी के लिए विशेषता सेट काला ।
द चाइल्ड सिलेक्टर्स
आपने वंशज चयनकर्ताओं को देखा है। एक और प्रकार का चयनकर्ता है, जो वंशजों के समान है लेकिन उनकी कार्यक्षमता अलग है। निम्नलिखित उदाहरण पर विचार करें -
body > p {
color: #000000;
}यह नियम काले रंग के सभी पैराग्राफ को प्रस्तुत करेगा यदि वे <body> तत्व के प्रत्यक्ष बच्चे हैं। अन्य पैराग्राफ <div> या <td> जैसे अन्य तत्वों के अंदर हैं, इस नियम का कोई प्रभाव नहीं होगा।
गुण चयनकर्ता
आप विशेष विशेषताओं के साथ HTML तत्वों में शैलियों को भी लागू कर सकते हैं। नीचे दी गई शैली का नियम पाठ के मान के साथ एक प्रकार की विशेषता वाले सभी इनपुट तत्वों से मेल खाएगा -
input[type = "text"] {
color: #000000;
}इस पद्धति का लाभ यह है कि <इनपुट प्रकार = "सबमिट" /> तत्व अप्रभावित है, और रंग केवल इच्छित वास्तविक फ़ील्ड पर लागू होता है।
चयनकर्ता के चयन के लिए निम्नलिखित नियम लागू होते हैं।
p[lang]- एक लैंग विशेषता के साथ सभी पैराग्राफ तत्वों का चयन करता है ।
p[lang="fr"]- उन सभी पैराग्राफ तत्वों का चयन करता है, जिनके लैंग गुण का मूल्य बिल्कुल "fr" है।
p[lang~="fr"]- सभी पैराग्राफ तत्वों का चयन करता है जिनके लैंग गुण में "फ्र" शब्द होता है।
p[lang|="en"]- उन सभी पैराग्राफ तत्वों का चयन करता है जिनके लैंग गुण में वे मान होते हैं जो वास्तव में "एन" हैं, या "एन-" से शुरू होते हैं।
एकाधिक शैली नियम
आपको एक ही तत्व के लिए कई शैली नियमों को परिभाषित करने की आवश्यकता हो सकती है। आप निम्न नियमों को परिभाषित करते हुए एक ही खंड में कई गुणों और संबंधित मूल्यों को संयोजित करने के लिए इन नियमों को परिभाषित कर सकते हैं -
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}यहां सभी संपत्ति और मूल्य जोड़े एक से अलग हो जाते हैं semicolon (;)। आप उन्हें एक लाइन या कई लाइनों में रख सकते हैं। बेहतर पठनीयता के लिए, हम उन्हें अलग-अलग लाइनों में रखते हैं।
थोड़ी देर के लिए, उपरोक्त ब्लॉक में वर्णित गुणों के बारे में परेशान न करें। आने वाले अध्यायों में इन गुणों की व्याख्या की जाएगी और आप CSS सन्दर्भों में गुणों के बारे में पूरी जानकारी पा सकते हैं
ग्रुपिंग सिलेक्टर्स
आप चाहें तो कई चयनकर्ताओं के लिए एक शैली लागू कर सकते हैं। सिलेक्टर्स को कॉमा के साथ अलग करें, जैसा कि निम्नलिखित उदाहरण में दिया गया है -
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}यह परिभाषित शैली नियम h1, h2 और h3 तत्व पर भी लागू होगा। सूची का क्रम अप्रासंगिक है। चयनकर्ता के सभी तत्वों के लिए उन पर लागू समान घोषणाएँ होंगी।
आप नीचे दिखाए गए अनुसार विभिन्न आईडी चयनकर्ताओं को एक साथ जोड़ सकते हैं -
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}यह निम्नलिखित परिणाम का उत्पादन करेगा -
गुण
<शैली> तत्वों से जुड़े गुण हैं -
| गुण | मूल्य | विवरण |
|---|---|---|
| प्रकार | text / css | शैली पत्रक भाषा को सामग्री-प्रकार (MIME प्रकार) के रूप में निर्दिष्ट करता है। यह आवश्यक विशेषता है। |
| मीडिया | स्क्रीन tty टीवी प्रक्षेपण हाथ में प्रिंट ब्रेल कर्ण-संबंधी सब |
वह उपकरण निर्दिष्ट करता है जिस पर दस्तावेज़ प्रदर्शित किया जाएगा। डिफ़ॉल्ट मान सभी है । यह एक वैकल्पिक विशेषता है। |
इनलाइन सीएसएस - शैली विशेषता
आप शैली नियमों को परिभाषित करने के लिए किसी भी HTML तत्व की शैली विशेषता का उपयोग कर सकते हैं । ये नियम उस तत्व पर ही लागू होंगे। यहाँ सामान्य वाक्यविन्यास है -
<element style = "...style rules....">गुण
| गुण | मूल्य | विवरण |
|---|---|---|
| अंदाज | शैली के नियम | शैली विशेषता का मूल्य अर्धविराम (;) द्वारा अलग किए गए शैली घोषणाओं का एक संयोजन है। |
उदाहरण
उपरोक्त सिंटैक्स पर आधारित इनलाइन CSS का उदाहरण निम्नलिखित है -
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
बाहरी सीएसएस - <लिंक> तत्व
आपके HTML दस्तावेज़ में बाहरी स्टाइलशीट फ़ाइल को शामिल करने के लिए <लिंक> तत्व का उपयोग किया जा सकता है।
एक बाहरी शैली शीट एक अलग पाठ फ़ाइल है .cssविस्तार। आप इस पाठ फ़ाइल के भीतर सभी शैली नियमों को परिभाषित करते हैं और फिर आप इस फ़ाइल को <लिंक> तत्व का उपयोग करके किसी भी HTML दस्तावेज़ में शामिल कर सकते हैं।
यहाँ बाह्य सीएसएस फ़ाइल सहित सामान्य वाक्यविन्यास है -
<head>
<link type = "text/css" href = "..." media = "..." />
</head>गुण
<शैली> तत्वों से जुड़े गुण हैं -
| गुण | मूल्य | विवरण |
|---|---|---|
| प्रकार | पाठ सीएसएस | शैली पत्रक भाषा को सामग्री-प्रकार (MIME प्रकार) के रूप में निर्दिष्ट करता है। यह विशेषता आवश्यक है। |
| href | यूआरएल | शैली नियम के साथ स्टाइल शीट फ़ाइल निर्दिष्ट करता है। यह विशेषता एक आवश्यक है। |
| मीडिया | स्क्रीन tty टीवी प्रक्षेपण हाथ में प्रिंट ब्रेल कर्ण-संबंधी सब |
वह उपकरण निर्दिष्ट करता है जिस पर दस्तावेज़ प्रदर्शित किया जाएगा। डिफ़ॉल्ट मान सभी है । यह वैकल्पिक विशेषता है। |
उदाहरण
एक साधारण स्टाइल शीट फ़ाइल पर विचार करें, जिसका नाम मिस्टाइल है । निम्नलिखित नियम हैं -
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}अब आप इस फाइल को शामिल कर सकते हैं mystyle.css किसी भी HTML प्रलेख के रूप में इस प्रकार में -
<head>
<link type = "text/css" href = "mystyle.css" media = " all" />
</head>आयातित सीएसएस - @ आयात नियम
@import का उपयोग बाहरी स्टाइलशीट को <लिंक> तत्व के समान तरीके से आयात करने के लिए किया जाता है। यहाँ @ नियम नियम का सामान्य वाक्य विन्यास है।
<head>
@import "URL";
</head>यहाँ URL शैली पत्रक फ़ाइल का URL है जिसमें शैली नियम हैं। आप एक और वाक्यविन्यास का उपयोग कर सकते हैं -
<head>
@import url("URL");
</head>उदाहरण
निम्नलिखित उदाहरण आपको दिखा रहा है कि HTML दस्तावेज़ में स्टाइल शीट फ़ाइल कैसे आयात करें -
<head>
@import "mystyle.css";
</head>सीएसएस नियम ओवरराइडिंग
हमने HTML दस्तावेज़ में स्टाइल शीट नियमों को शामिल करने के चार तरीकों पर चर्चा की है। यहां किसी भी स्टाइल शीट नियम को ओवरराइड करने का नियम है।
कोई भी इनलाइन स्टाइल शीट सर्वोच्च प्राथमिकता लेती है। तो, यह किसी भी नियम को ओवरराइड करेगा <style> ... </ style> टैग या नियम किसी भी बाहरी स्टाइल शीट फ़ाइल में परिभाषित।
<Style> ... </ style> टैग में परिभाषित कोई भी नियम किसी भी बाहरी शैली शीट फ़ाइल में परिभाषित नियमों को ओवरराइड करेगा।
बाहरी शैली शीट फ़ाइल में परिभाषित कोई भी नियम सबसे कम प्राथमिकता लेता है, और इस फ़ाइल में परिभाषित नियम केवल तभी लागू होंगे जब दो से ऊपर के नियम लागू नहीं होते हैं।
पुराने ब्राउज़रों को संभालना
अभी भी कई पुराने ब्राउज़र हैं जो CSS का समर्थन नहीं करते हैं। इसलिए, हमें HTML दस्तावेज़ में अपने एंबेडेड सीएसएस को लिखते समय ध्यान रखना चाहिए। निम्नलिखित स्निपेट दिखाता है कि आप पुराने ब्राउज़र से CSS को छिपाने के लिए टिप्पणी टैग का उपयोग कैसे कर सकते हैं -
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>सीएसएस टिप्पणियाँ
कई बार, आपको अपनी शैली पत्रक ब्लॉकों में अतिरिक्त टिप्पणियां डालने की आवश्यकता हो सकती है। इसलिए, स्टाइल शीट में किसी भी भाग पर टिप्पणी करना बहुत आसान है। आप अपनी टिप्पणियों को सरल रूप से /* के अंदर रख सकते हैं। यह स्टाइल शीट में एक टिप्पणी है ..... * /।
आप C / C ++ प्रोग्रामिंग भाषाओं में इसी तरह से मल्टी-लाइन ब्लॉक पर टिप्पणी करने के लिए / * .... * का उपयोग कर सकते हैं।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
| % | किसी अन्य मान के सापेक्ष प्रतिशत के रूप में माप को परिभाषित करता है, आमतौर पर एक संलग्नक तत्व। | p {फ़ॉन्ट-आकार: 16pt; लाइन-ऊंचाई: 125% ;; |
| से। मी | सेंटीमीटर में माप को परिभाषित करता है। | div {मार्जिन-बॉटम: 2cm ;; |
| एम | एम रिक्त स्थान में एक फ़ॉन्ट की ऊंचाई के लिए एक सापेक्ष माप। क्योंकि एक एम यूनिट किसी दिए गए फ़ॉन्ट के आकार के बराबर है, यदि आप एक फ़ॉन्ट को 12pt पर असाइन करते हैं, तो प्रत्येक "ईएम" इकाई 12pt होगी; इस प्रकार, 2em 24pt होगा। | पी {पत्र-रिक्ति: 7em ;; |
| भूतपूर्व | यह मान फ़ॉन्ट के x-ऊँचाई के सापेक्ष माप को परिभाषित करता है। X-height को फ़ॉन्ट के लोअरकेस अक्षर x की ऊंचाई से निर्धारित किया जाता है। | p {फ़ॉन्ट-आकार: 24pt; लाइन-ऊंचाई: 3ex ;; |
| में | इंच में एक माप को परिभाषित करता है। | p {शब्द-रिक्ति: .15in;} |
| मिमी | मिलीमीटर में माप को परिभाषित करता है। | पी {शब्द-रिक्ति: 15 मिमी ;; |
| पीसी | पैक्स में माप को परिभाषित करता है। एक पाइका 12 बिंदुओं के बराबर है; इस प्रकार, 6 इंच प्रति इंच हैं। | p {फ़ॉन्ट-आकार: 20pc ;; |
| pt | अंकों में माप को परिभाषित करता है। एक बिंदु को एक इंच के 1/72 वें रूप में परिभाषित किया गया है। | शरीर {फ़ॉन्ट-आकार: 18pt ;; |
| पिक्सल | स्क्रीन पिक्सल में माप को परिभाषित करता है। | पी {पैडिंग: 25 पीएक्स ;; |
| हेक्स कोड | #RRGGBB | p {रंग: # FF0000;} |
| शॉर्ट हेक्स कोड | #RGB | p {रंग: # 6A7;} |
| RGB% | rgb (RRR%, ggg%, bbb%) | p {color: rgb (50%, 50%, 50%);} |
| आरजीबी निरपेक्ष | rgb (RRR, ggg, bbb) | p {color: rgb (0,0,255);} |
| कीवर्ड | एक्वा, काला आदि। | p {रंग: चैती;} |
इन स्वरूपों को निम्नलिखित वर्गों में अधिक विस्तार से समझाया गया है -
सीएसएस रंग - हेक्स कोड
एक हेक्साडेसिमल एक रंग का 6 अंकों का प्रतिनिधित्व है। पहले दो अंक (आरआर) एक लाल मूल्य का प्रतिनिधित्व करते हैं, अगले दो एक हरे रंग के मूल्य (जीजी) हैं, और अंतिम नीले मूल्य (बीबी) हैं।
एक हेक्साडेसिमल एक रंग का 6 अंकों का प्रतिनिधित्व है। पहले दो अंक (आरआर) एक लाल मूल्य का प्रतिनिधित्व करते हैं, अगले दो एक हरे रंग के मूल्य (जीजी) हैं, और अंतिम नीले मूल्य (बीबी) हैं।
एक हेक्साडेसिमल मान किसी भी ग्राफिक्स सॉफ्टवेयर जैसे एडोब फोटोशॉप, जेस्क पेंट्सशॉप प्रो, या यहां तक कि उन्नत पेंट ब्रश का उपयोग करके भी लिया जा सकता है।
प्रत्येक हेक्साडेसिमल कोड एक पाउंड या हैश संकेत '#' से पहले होगा। हेक्साडेसिमल नोटेशन का उपयोग करने के लिए निम्नलिखित उदाहरण हैं।
| रंग | रंग हेक्स |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
सीएसएस रंग - लघु हेक्स कोड
यह छह अंकों के अंकन का एक छोटा रूप है। इस प्रारूप में, प्रत्येक अंक को एक समान छह अंकों के मूल्य पर पहुंचने के लिए दोहराया जाता है। उदाहरण के लिए: # 6A7 # 66AA77 बन जाता है।
एक हेक्साडेसिमल मान किसी भी ग्राफिक्स सॉफ्टवेयर जैसे एडोब फोटोशॉप, जेस्क पेंट्सशॉप प्रो, या यहां तक कि उन्नत पेंट ब्रश का उपयोग करके भी लिया जा सकता है।
प्रत्येक हेक्साडेसिमल कोड एक पाउंड या हैश संकेत '#' से पहले होगा। हेक्साडेसिमल नोटेशन का उपयोग करने के लिए निम्नलिखित उदाहरण हैं।
| रंग | रंग हेक्स |
|---|---|
| # 000 | |
| # F00 | |
| # 0F0 | |
| # 0FF | |
| # FF0 | |
| # 0FF | |
| # F0F | |
| #fff |
सीएसएस रंग - आरजीबी मान
यह रंग मान का उपयोग करके निर्दिष्ट किया गया है rgb( )संपत्ति। यह गुण तीन मान लेता है, एक-एक लाल, हरा और नीला। मान 0 और 255 या प्रतिशत के बीच पूर्णांक हो सकता है।
NOTE - सभी ब्राउज़र्स आरजीबी () रंग की संपत्ति का समर्थन नहीं करते हैं, इसलिए इसका उपयोग नहीं करने की सिफारिश की जाती है।
आरजीबी मूल्यों का उपयोग करके कुछ रंग दिखाने के लिए निम्नलिखित उदाहरण है।
| रंग | रंग आरजीबी |
|---|---|
| rgb (0,0,0) | |
| rgb (255,0,0) | |
| rgb (0,255,0) | |
| rgb (0,0,255) | |
| rgb (255,255,0) | |
| rgb (0,255,255) | |
| rgb (255,0,255) | |
| rgb (192,192,192) | |
| rgb (255,255,255) |
बिल्डिंग कलर कोड
आप हमारे कलर कोड बिल्डर का उपयोग करके लाखों कलर कोड बना सकते हैं। हमारी जाँच करेंHTML Color Code Builder। इस उपकरण का उपयोग करने के लिए, आपको एक जावा सक्षम ब्राउज़र की आवश्यकता होगी।
ब्राउज़र सुरक्षित रंग
यहां 216 रंगों की सूची दी गई है, जिन्हें सबसे सुरक्षित और कंप्यूटर स्वतंत्र रंग माना जाता है। ये रंग हेक्सा कोड 000000 से FFFFFF तक भिन्न होते हैं। ये रंग उपयोग करने के लिए सुरक्षित हैं क्योंकि वे सुनिश्चित करते हैं कि सभी कंप्यूटर 256 रंग पैलेट चलाते समय रंगों को सही ढंग से प्रदर्शित करेंगे -
| 000000 | 000,033 | 000,066 | 000,099 | 0000CC | 0000FF |
| 003,300 | 003,333 | 003,366 | 003,399 | 0033CC | 0033FF |
| 006,600 | 006,633 | 006,666 | 006,699 | 0066CC | 0066FF |
| 009,900 | 009,933 | 009,966 | 009,999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330,033 | 330,066 | 330,099 | 3300CC | 3300FF |
| 333,300 | 333333 | 333,366 | 333,399 | 3333CC | 3333FF |
| 336,600 | 336,633 | 336,666 | 336699 | 3366CC | 3366FF |
| 339,900 | 339,933 | 339,966 | 339,999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660,000 | 660,033 | 660,066 | 660,099 | 6600CC | 6600FF |
| 663,300 | 663,333 | 663,366 | 663399 | 6633CC | 6633FF |
| 666,600 | 666,633 | 666666 | 666,699 | 6666CC | 6666FF |
| 669,900 | 669,933 | 669,966 | 669,999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990,000 | 990,033 | 990,066 | 990,099 | 9900CC | 9900FF |
| 993,300 | 993,333 | 993,366 | 993,399 | 9933CC | 9933FF |
| 996,600 | 996,633 | 996,666 | 996,699 | 9966CC | 9966FF |
| 999,900 | 999,933 | 999,966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| ff3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
बैकग्राउंड कलर सेट करें
निम्नलिखित उदाहरण है जो दर्शाता है कि किसी तत्व के लिए पृष्ठभूमि का रंग कैसे सेट किया जाए।
<html>
<head>
</head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>यह निम्नलिखित परिणाम देगा -
बैकग्राउंड इमेज सेट करें
हम नीचे दिखाए गए अनुसार स्थानीय संग्रहीत चित्रों को कॉल करके पृष्ठभूमि की छवि सेट कर सकते हैं -
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
पृष्ठभूमि छवि को दोहराएं
The following example demonstrates how to repeat the background image if an image is small. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once.
By default background-repeat property will have repeat value.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>It will produce the following result −
The following example which demonstrates how to repeat the background image vertically.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>It will produce the following result −
The following example demonstrates how to repeat the background image horizontally.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>It will produce the following result −
Set the Background Image Position
The following example demonstrates how to set the background image position 100 pixels away from the left side.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>It will produce the following result −
The following example demonstrates how to set the background image position 100 pixels away from the left side and 200 pixels down from the top.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>It will produce the following result −
Set the Background Attachment
Background attachment determines whether a background image is fixed or scrolls with the rest of the page.
The following example demonstrates how to set the fixed background image.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>It will produce the following result −
The following example demonstrates how to set the scrolling background image.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>It will produce the following result −
Shorthand Property
You can use the background property to set all the background properties at once. For example −
<p style = "background:url(/images/pattern1.gif) repeat fixed;">
This parapgraph has fixed repeated background image.
</p>Set the Font Family
Following is the example, which demonstrates how to set the font family of an element. Possible value could be any font family name.
<html>
<head>
</head>
<body>
<p style = "font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at your system.
</p>
</body>
</html>This will produce following result −
Set the Font Style
Following is the example, which demonstrates how to set the font style of an element. Possible values are normal, italic and oblique.
<html>
<head>
</head>
<body>
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>This will produce following result −
Set the Font Variant
The following example demonstrates how to set the font variant of an element. Possible values are normal and small-caps.
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>This will produce following result −
Set the Font Weight
The following example demonstrates how to set the font weight of an element. The font-weight property provides the functionality to specify how bold a font is. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
<html>
<head>
</head>
<body>
<p style = "font-weight:bold;">
This font is bold.
</p>
<p style = "font-weight:bolder;">
This font is bolder.
</p>
<p style = "font-weight:500;">
This font is 500 weight.
</p>
</body>
</html>This will produce following result −
Set the Font Size
The following example demonstrates how to set the font size of an element. The font-size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.
<html>
<head>
</head>
<body>
<p style = "font-size:20px;">
This font size is 20 pixels
</p>
<p style = "font-size:small;">
This font size is small
</p>
<p style = "font-size:large;">
This font size is large
</p>
</body>
</html>This will produce following result −
Set the Font Size Adjust
The following example demonstrates how to set the font size adjust of an element. This property enables you to adjust the x-height to make fonts more legible. Possible value could be any number.
<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
</body>
</html>This will produce following result −
Set the Font Stretch
The following example demonstrates how to set the font stretch of an element. This property relies on the user's computer to have an expanded or condensed version of the font being used.
Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
<html>
<head>
</head>
<body>
<p style = "font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer
doesn't have a <br>condensed or expanded version of the font being used.
</p>
</body>
</html>This will produce following result −
Shorthand Property
You can use the font property to set all the font properties at once. For example −
<html>
<head>
</head>
<body>
<p style = "font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>
</body>
</html>This will produce following result −
The text-decoration property is used to underline, overline, and strikethrough text.
The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
The white-space property is used to control the flow and formatting of text.
The text-shadow property is used to set the text shadow around a text.
Set the Text Color
The following example demonstrates how to set the text color. Possible value could be any color name in any valid format.
<html>
<head>
</head>
<body>
<p style = "color:red;">
This text will be written in red.
</p>
</body>
</html>It will produce the following result −
Set the Text Direction
The following example demonstrates how to set the direction of a text. Possible values are ltr or rtl.
<html>
<head>
</head>
<body>
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>
</body>
</html>It will produce the following result −
Set the Space between Characters
The following example demonstrates how to set the space between characters. Possible values are normal or a number specifying space..
<html>
<head>
</head>
<body>
<p style = "letter-spacing:5px;">
This text is having space between letters.
</p>
</body>
</html>It will produce the following result −
Set the Space between Words
The following example demonstrates how to set the space between words. Possible values are normal or a number specifying space.
<html>
<head>
</head>
<body>
<p style = "word-spacing:5px;">
This text is having space between words.
</p>
</body>
</html>This will produce following result −
Set the Text Indent
The following example demonstrates how to indent the first line of a paragraph. Possible values are % or a number specifying indent space.
<html>
<head>
</head>
<body>
<p style = "text-indent:1cm;">
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
</body>
</html>It will produce the following result −
Set the Text Alignment
The following example demonstrates how to align a text. Possible values are left, right, center, justify.
<html>
<head>
</head>
<body>
<p style = "text-align:right;">
This will be right aligned.
</p>
<p style = "text-align:center;">
This will be center aligned.
</p>
<p style = "text-align:left;">
This will be left aligned.
</p>
</body>
</html>This will produce following result −
Decorating the Text
The following example demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink.
<html>
<head>
</head>
<body>
<p style = "text-decoration:underline;">
This will be underlined
</p>
<p style = "text-decoration:line-through;">
This will be striked through.
</p>
<p style = "text-decoration:overline;">
This will have a over line.
</p>
<p style = "text-decoration:blink;">
This text will have blinking effect
</p>
</body>
</html>This will produce following result −
Set the Text Cases
The following example demonstrates how to set the cases for a text. Possible values are none, capitalize, uppercase, lowercase.
<html>
<head>
</head>
<body>
<p style = "text-transform:capitalize;">
This will be capitalized
</p>
<p style = "text-transform:uppercase;">
This will be in uppercase
</p>
<p style = "text-transform:lowercase;">
This will be in lowercase
</p>
</body>
</html>This will produce following result −
Set the White Space between Text
The following example demonstrates how white space inside an element is handled. Possible values are normal, pre, nowrap.
<html>
<head>
</head>
<body>
<p style = "white-space:pre;">
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>
</body>
</html>This will produce following result −
Set the Text Shadow
The following example demonstrates how to set the shadow around a text. This may not be supported by all the browsers.
<html>
<head>
</head>
<body>
<p style = "text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
</p>
</body>
</html>It will produce the following result −
The Image Border Property
The border property of an image is used to set the width of an image border. This property can have a value in length or in %.
A width of zero pixels means no border.
Here is the example −
<html>
<head>
</head>
<body>
<img style = "border:0px;" src = "/css/images/logo.png" />
<br />
<img style = "border:3px dashed red;" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
The Image Height Property
The height property of an image is used to set the height of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
Here is an example −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
The Image Width Property
The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
Here is an example −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
The -moz-opacity Property
The -moz-opacity property of an image is used to set the opacity of an image. This property is used to create a transparent image in Mozilla. IE uses filter:alpha(opacity=x) to create transparent images.
In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent (The same things goes for the CSS3-valid syntax opacity:x).
In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.
Here is an example −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
Usually, all these properties are kept in the header part of the HTML document.
Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active MUST come after a:hover in the CSS definition as follows −
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>Now, we will see how to use these properties to give different effects to hyperlinks.
Set the Color of Links
The following example demonstrates how to set the link color. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>It will produce the following black link −
Set the Color of Visited Links
The following example demonstrates how to set the color of visited links. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = ""> link</a>
</body>
</html>It will produce the following link. Once you will click this link, it will change its color to green.
Change the Color of Links when Mouse is Over
The following example demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>It will produce the following link. Now, you bring your mouse over this link and you will see that it changes its color to yellow.
Change the Color of Active Links
The following example demonstrates how to change the color of active links. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>It will produce the following link. It will change its color to pink when the user clicks it.
Now, we will see how to use these properties with examples.
The border-collapse Property
This property can have two values collapse and separate. The following example uses both the values −
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two">
<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>It will produce the following result −
The border-spacing Property
The border-spacing property specifies the distance that separates adjacent cells'. borders. It can take either one or two values; these should be units of length.
If you provide one value, it will applies to both vertical and horizontal borders. Or you can specify two values, in which case, the first refers to the horizontal spacing and the second to the vertical spacing −
NOTE − Unfortunately, this property does not work in Netscape 7 or IE 6.
<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>अब चलो पिछले उदाहरण को संशोधित करते हैं और प्रभाव देखते हैं -
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class = "one" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
कैप्शन साइड संपत्ति
कैप्शन-साइड संपत्ति आपको यह निर्दिष्ट करने की अनुमति देती है कि तालिका के संबंध में <कैप्शन> तत्व की सामग्री को कहां रखा जाना चाहिए। तालिका जो निम्न मानों को सूचीबद्ध करती है।
इस संपत्ति में चार मान ऊपर, नीचे, बाएं या दाएं हो सकते हैं । निम्न उदाहरण प्रत्येक मान का उपयोग करता है।
NOTE - ये गुण आपके IE ब्राउज़र के साथ काम नहीं कर सकते हैं।
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
खाली कोशिकाओं संपत्ति
रिक्त-कक्ष गुण इंगित करता है कि किसी भी सामग्री के बिना एक सेल में एक सीमा प्रदर्शित होनी चाहिए या नहीं।
इस संपत्ति के तीन मान हो सकते हैं - दिखाना, छिपाना या विरासत ।
यहां <table> तत्व में रिक्त कक्षों की सीमाओं को छिपाने के लिए उपयोग की जाने वाली रिक्त-कक्ष संपत्ति है।
<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
<table class = "empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty"></td>
</tr>
</table>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
टेबल-लेआउट संपत्ति
टेबल-लेआउट की संपत्ति आपको यह नियंत्रित करने में मदद करने वाली है कि ब्राउज़र को एक टेबल कैसे प्रस्तुत करना चाहिए या बाहर रखना चाहिए।
यह गुण तीन मानों में से एक हो सकता है: फिक्स्ड, ऑटो या इनहेरिट ।
निम्न उदाहरण इन गुणों के बीच अंतर को दर्शाता है।
NOTE - यह संपत्ति कई ब्राउज़रों द्वारा समर्थित नहीं है, इसलिए इस संपत्ति पर भरोसा न करें।
<html>
<head>
<style type = "text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
<body>
<table class = "auto" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
<br />
<table class = "fixed" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
सीमा-रंग की संपत्ति आपको एक तत्व के आसपास की सीमा के रंग को बदलने की अनुमति देती है। आप व्यक्तिगत रूप से गुणों का उपयोग करके किसी तत्व की सीमा के नीचे, बाएं, ऊपर और दाएं किनारों का रंग बदल सकते हैं -
border-bottom-color नीचे की सीमा का रंग बदलता है।
border-top-color शीर्ष सीमा का रंग बदलता है।
border-left-color बाईं सीमा का रंग बदलता है।
border-right-color सही सीमा का रंग बदलता है।
निम्न उदाहरण इन सभी गुणों के प्रभाव को दर्शाता है -
<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
सीमा-शैली की संपत्ति
सीमा-शैली की संपत्ति आपको सीमा की निम्नलिखित शैलियों में से एक का चयन करने की अनुमति देती है -
none- कोई असम नहीं। (सीमा-चौड़ाई के बराबर: 0;)
solid - सीमा एक एकल ठोस रेखा है।
dotted - बॉर्डर डॉट्स की एक श्रृंखला है।
dashed - बॉर्डर छोटी लाइनों की एक श्रृंखला है।
double - सीमा दो ठोस रेखाएँ हैं।
groove - बॉर्डर ऐसा लगता है जैसे इसे पृष्ठ में उकेरा गया है।
ridge - सीमा खांचे के विपरीत दिखती है।
inset - बॉर्डर बॉक्स को वैसा ही बना देता है जैसा कि वह पेज में इंबेडेड है।
outset - बॉर्डर बॉक्स को ऐसा दिखता है जैसे वह कैनवास से बाहर आ रहा है।
hidden - टेबल तत्वों के लिए सीमा-संघर्ष समाधान के संदर्भ में छोड़कर कोई भी नहीं।
आप निम्न गुणों का उपयोग करके व्यक्तिगत रूप से नीचे, बाएँ, ऊपर और दाएँ सीमाओं की शैली बदल सकते हैं -
border-bottom-style नीचे की सीमा की शैली को बदलता है।
border-top-style शीर्ष सीमा की शैली को बदलता है।
border-left-style बाईं सीमा की शैली को बदलता है।
border-right-style सही सीमा की शैली को बदलता है।
निम्नलिखित उदाहरण इन सभी सीमा शैलियों को दर्शाता है -
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
सीमा-चौड़ाई संपत्ति
सीमा-चौड़ाई की संपत्ति आपको एक तत्व सीमाओं की चौड़ाई निर्धारित करने की अनुमति देती है। इस संपत्ति का मूल्य या तो px, pt या cm में एक लंबाई हो सकता है या इसे पतले, मध्यम या मोटे पर सेट किया जाना चाहिए ।
आप निम्न गुणों का उपयोग करके व्यक्तिगत रूप से नीचे, ऊपर, बाएँ और दाएँ तत्व की चौड़ाई बदल सकते हैं -
border-bottom-width नीचे की सीमा की चौड़ाई को बदलता है।
border-top-width शीर्ष सीमा की चौड़ाई को बदलता है।
border-left-width बाईं सीमा की चौड़ाई को बदलता है।
border-right-width सही सीमा की चौड़ाई को बदलता है।
निम्नलिखित उदाहरण इन सभी सीमा चौड़ाई को दर्शाता है -
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style = "border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style = "border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a a border with four different width.
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
आशुलिपि का उपयोग करते हुए सीमा गुण
सीमा संपत्ति आपको एक संपत्ति में रंग, शैली और लाइनों की चौड़ाई निर्दिष्ट करने की अनुमति देती है -
निम्नलिखित उदाहरण से पता चलता है कि एक ही संपत्ति में सभी तीन गुणों का उपयोग कैसे करें। यह किसी भी तत्व के चारों ओर सीमा निर्धारित करने के लिए सबसे अधिक बार उपयोग की जाने वाली संपत्ति है।
<html>
<head>
</head>
<body>
<p style = "border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
margin-right एक तत्व के सही मार्जिन को निर्दिष्ट करता है।
अब, हम देखेंगे कि इन गुणों का उपयोग उदाहरणों के साथ कैसे किया जाता है।
द मार्जिन प्रॉपर्टी
मार्जिन संपत्ति आपको एक घोषणा में चार मार्जिन के लिए सभी संपत्तियों को सेट करने की अनुमति देती है। यहाँ एक पैराग्राफ के चारों ओर मार्जिन सेट करने के लिए वाक्यविन्यास है -
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style = "margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>
<p style = "margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</p>
<p style = "margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total
width of the document, bottom margin will be -10px, left margin
will be set by the browser
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
मार्जिन-नीचे की संपत्ति
मार्जिन-बॉटम प्रॉपर्टी आपको किसी एलिमेंट के निचले मार्जिन को सेट करने की अनुमति देती है। इसका लंबाई,% या ऑटो में मान हो सकता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>
<p style = "margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
मार्जिन-शीर्ष संपत्ति
मार्जिन-टॉप प्रॉपर्टी आपको किसी तत्व का शीर्ष मार्जिन सेट करने की अनुमति देती है। इसका लंबाई,% या ऑटो में मान हो सकता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>
<p style = "margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
मार्जिन-लेफ्ट प्रॉपर्टी
मार्जिन-लेफ्ट प्रॉपर्टी आपको किसी एलिमेंट के लेफ्ट मार्जिन को सेट करने की अनुमति देती है। इसका लंबाई,% या ऑटो में मान हो सकता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>
<p style = "margin-left: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
मार्जिन-सही संपत्ति
मार्जिन-राइट प्रॉपर्टी आपको किसी तत्व का सही मार्जिन सेट करने की अनुमति देती है। इसका लंबाई,% या ऑटो में मान हो सकता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
अब, हम देखेंगे कि इन गुणों का उपयोग उदाहरणों के साथ कैसे किया जाता है।
सूची-शैली-प्रकार संपत्ति
सूची-शैली-प्रकार संपत्ति आप आकार या अव्यवस्थित सूचियों के मामले में बुलेट बिंदु (यह भी एक मार्कर के रूप में जाना जाता है) की शैली और क्रमित सूचियों में पात्रों नंबर की शैली को नियंत्रित करने के लिए अनुमति देता है।
यहां वे मान दिए गए हैं जिनका उपयोग अनियंत्रित सूची के लिए किया जा सकता है -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | none ना |
| 2 | disc (default) एक भरा हुआ वृत्त |
| 3 | circle एक खाली घेरा |
| 4 | square एक भरा हुआ वर्ग |
यहां वे मान दिए गए हैं, जिनका उपयोग ऑर्डर की गई सूची के लिए किया जा सकता है -
| मूल्य | विवरण | उदाहरण |
|---|---|---|
| दशमलव | संख्या | 1,2,3,4,5 |
| दशमलव की अग्रणी शून्य | संख्या से पहले 0 | 01, 02, 03, 04, 05 |
| कम-अल्फा | लोअरकेस अल्फ़ान्यूमेरिक वर्ण | ए, बी, सी, डी, ई |
| ऊपरी-अल्फा | अपरकेस अल्फ़ान्यूमेरिक वर्ण | ए, बी, सी, डी, ई |
| कम रोमन | लोअरकेस रोमन अंक | i, ii, iii, iv, v |
| ऊपरी-रोमन | अपरकेस रोमन अंक | I, II, III, IV, V |
| कम-यूनानी | मार्कर कम-ग्रीक है | अल्फा, बीटा, गामा |
| कम-लैटिन | मार्कर निचला-लैटिन है | ए, बी, सी, डी, ई |
| ऊपरी लैटिन | मार्कर ऊपरी-लैटिन है | ए, बी, सी, डी, ई |
| यहूदी | मार्कर पारंपरिक हिब्रू नंबरिंग है | |
| अर्मेनियाई | मार्कर पारंपरिक अर्मेनियाई नंबरिंग है | |
| जॉर्जीयन् | मार्कर पारंपरिक जॉर्जियन नंबरिंग है | |
| CJK-आइडियोग्राफ़िक | मार्कर सादा वैचारिक संख्या है | |
| हीरागाना | मार्कर हीरागाना है | ए, आई, यू, ई, ओ, का, की |
| काटाकना | मार्कर कटकाना है | ए, आई, यू, ई, ओ, के, के |
| हीरागाना-Iroha | मार्कर हीरागाना-इरोहा है | मैं, आरओ, हा, नी, हो, वह, को |
| काटाकना-Iroha | मार्कर कटकाना-इरोहा है | I, RO, HA, NI, HO, HE, TO |
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
सूची-शैली-स्थिति संपत्ति
सूची-शैली-स्थिति संपत्ति इंगित करता है कि मार्कर बुलेट बिंदुओं युक्त बॉक्स के अंदर या बाहर दिखाई देनी चाहिए। इसके दो मूल्य हो सकते हैं -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | none ना |
| 2 | inside यदि पाठ दूसरी पंक्ति में जाता है, तो पाठ मार्कर के नीचे लपेट जाएगा। यह भी दिखाई देगा कि सूची के बाहर मूल्य होने पर पाठ कहाँ से शुरू होगा। |
| 3 | outside यदि पाठ दूसरी पंक्ति में जाता है, तो पाठ पहली पंक्ति (बुलेट के दाईं ओर) की शुरुआत के साथ संरेखित किया जाएगा। |
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
सूची-शैली-छवि संपत्ति
सूची-शैली-छवि ताकि आप अपने खुद के गोली शैली का उपयोग कर सकते तो आप एक छवि निर्दिष्ट करने के लिए अनुमति देता है। वाक्य-विन्यास पृष्ठभूमि-छवि संपत्ति के समान है जिसमें अक्षरों को यूआरएल में बाद में संपत्ति के मूल्य को शुरू करना यूआरएल के साथ है। यदि इसे दी गई छवि नहीं मिलती है तो डिफ़ॉल्ट बुलेट का उपयोग किया जाता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
सूची-शैली संपत्ति
सूची शैली आप एक ही अभिव्यक्ति में सभी सूची गुण निर्दिष्ट करने के लिए अनुमति देता है। ये गुण किसी भी क्रम में दिखाई दे सकते हैं।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
मार्कर-ऑफसेट संपत्ति
मार्कर ऑफसेट संपत्ति आप मार्कर और कहा कि मार्कर से संबंधित पाठ के बीच की दूरी को निर्दिष्ट करने की अनुमति देता है। इसका मान एक लंबाई होना चाहिए जैसा कि निम्नलिखित उदाहरण में दिखाया गया है -
दुर्भाग्य से, यह संपत्ति IE 6 या नेटस्केप 7 में समर्थित नहीं है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
padding पूर्ववर्ती गुणों के लिए आशुलिपि के रूप में कार्य करता है।
अब, हम देखेंगे कि इन गुणों का उपयोग उदाहरणों के साथ कैसे किया जाता है।
पैडिंग-बॉटम प्रॉपर्टी
Padding-bottom संपत्ति एक तत्व के नीचे गद्दी (स्थान) तय करता है। यह% की लंबाई के संदर्भ में एक मूल्य ले सकता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
गद्दी-शीर्ष संपत्ति
गद्दी-टॉप संपत्ति एक तत्व के शीर्ष गद्दी (स्थान) तय करता है। यह% की लंबाई के संदर्भ में एक मूल्य ले सकता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
पैडिंग-लेफ्ट प्रॉपर्टी
Padding-left संपत्ति एक तत्व के बाईं गद्दी (स्थान) तय करता है। यह% की लंबाई के संदर्भ में एक मूल्य ले सकता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
पैडिंग-राइट प्रॉपर्टी
गद्दी-सही संपत्ति एक तत्व की सही गद्दी (स्थान) तय करता है। यह% की लंबाई के संदर्भ में एक मूल्य ले सकता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
पैडिंग प्रॉपर्टी
गद्दी एक तत्व की संपत्ति सेट बाएँ, दाएँ, ऊपर और नीचे गद्दी (स्थान)। यह% की लंबाई के संदर्भ में एक मूल्य ले सकता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
| 1 | auto कर्सर का आकार उस संदर्भ क्षेत्र पर निर्भर करता है जो यह खत्म हो गया है। उदाहरण के लिए मैं एक पाठ, एक लिंक पर एक हाथ, और इतने पर ... |
| 2 | crosshair एक क्रॉसहेयर या प्लस साइन |
| 3 | default एक तीर |
| 4 | pointer एक इंगित हाथ (IE 4 में यह मूल्य हाथ है) |
| 5 | move मैं बार |
| 6 | e-resize कर्सर इंगित करता है कि बॉक्स के एक किनारे को दाएं (पूर्व) स्थानांतरित किया जाना है |
| 7 | ne-resize कर्सर इंगित करता है कि बॉक्स के एक किनारे को ऊपर और दाईं ओर (उत्तर / पूर्व) ले जाना है |
| 8 | nw-resize कर्सर इंगित करता है कि एक बॉक्स के एक छोर को ऊपर और बाएं (उत्तर / पश्चिम) ले जाना है |
| 9 | n-resize कर्सर इंगित करता है कि एक बॉक्स का एक किनारा ऊपर (उत्तर) ले जाना है |
| 10 | se-resize कर्सर इंगित करता है कि बॉक्स के एक किनारे को नीचे और दाएं (दक्षिण / पूर्व) स्थानांतरित किया जाना है |
| 1 1 | sw-resize कर्सर इंगित करता है कि एक बॉक्स के एक किनारे को नीचे और बाएं (दक्षिण / पश्चिम) स्थानांतरित किया जाना है |
| 12 | s-resize कर्सर इंगित करता है कि एक बॉक्स के एक छोर को नीचे ले जाना है (दक्षिण) |
| 13 | w-resize कर्सर इंगित करता है कि बॉक्स के एक किनारे को बाएं (पश्चिम) स्थानांतरित किया जाना है |
| 14 | text मैं बार |
| 15 | wait एक घंटे का गिलास |
| 16 | help एक प्रश्न चिह्न या गुब्बारा, मदद बटन पर उपयोग के लिए आदर्श |
| 17 | <url> कर्सर छवि फ़ाइल का स्रोत |
NOTE- आपको उपयोगकर्ताओं के लिए उपयोगी जानकारी जोड़ने के लिए केवल इन मूल्यों का उपयोग करने की कोशिश करनी चाहिए, और स्थानों में, वे उस कर्सर को देखने की उम्मीद करेंगे। उदाहरण के लिए, क्रॉसहेयर का उपयोग करके जब कोई लिंक पर घूमता है तो आगंतुकों को भ्रमित कर सकता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
outline-width संपत्ति का उपयोग रूपरेखा की चौड़ाई निर्धारित करने के लिए किया जाता है।
outline-style प्रॉपर्टी का इस्तेमाल आउटलाइन के लिए लाइन स्टाइल सेट करने के लिए किया जाता है।
outline-color संपत्ति का उपयोग रूपरेखा के रंग को निर्धारित करने के लिए किया जाता है।
outline संपत्ति का उपयोग एक ही बयान में उपरोक्त सभी तीन गुणों को सेट करने के लिए किया जाता है।
रूपरेखा-चौड़ाई संपत्ति
रूपरेखा-चौड़ाई संपत्ति निर्दिष्ट आउटलाइन की चौड़ाई बॉक्स में जोड़ने के लिए। इसका मान सीमा-चौड़ाई विशेषता की तरह ही एक लंबाई या एक पतली, मध्यम या मोटा होना चाहिए ।
शून्य पिक्सल की चौड़ाई का मतलब कोई रूपरेखा नहीं है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:solid;">
This text is having thick outline.
</p>
<br />
<p style = "outline-width:5px; outline-style:solid;">
This text is having 5x outline.
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
रूपरेखा-शैली संपत्ति
रूपरेखा शैली संपत्ति निर्दिष्ट लाइन के लिए शैली (ठोस, बिंदीदार, या धराशायी) है कि एक तत्व के आसपास चला जाता है। यह निम्न में से एक मान ले सकता है -
none- कोई असम नहीं। (रूपरेखा-चौड़ाई के बराबर: 0;)
solid - रूपरेखा एक एकल ठोस रेखा है।
dotted - रूपरेखा डॉट्स की एक श्रृंखला है।
dashed - रूपरेखा छोटी लाइनों की एक श्रृंखला है।
double - रूपरेखा दो ठोस रेखाएँ हैं।
groove - रूपरेखा ऐसी दिखती है जैसे पृष्ठ में उकेरी गई है।
ridge - रूपरेखा खांचे के विपरीत दिखती है।
inset - आउटलाइन बॉक्स को ऐसा दिखता है जैसे यह पृष्ठ में एम्बेडेड है।
outset - आउटलाइन बॉक्स को ऐसा दिखाती है जैसे वह कैनवास से बाहर आ रहा है।
hidden - समान कोई नहीं।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin solid outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
रूपरेखा-रंग संपत्ति
रूपरेखा रंग संपत्ति आप रूपरेखा का रंग निर्दिष्ट करने के लिए अनुमति देता है। इसका मूल्य या तो रंग का नाम होना चाहिए, रंग और सीमा-रंग गुणों के साथ एक हेक्स रंग, या एक आरजीबी मूल्य होना चाहिए।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;outline-color:red">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
रूपरेखा संपत्ति
रूपरेखा संपत्ति एक आशुलिपि संपत्ति है कि आप किसी भी क्रम में लेकिन एक भी बयान में पहले चर्चा तीन गुण से किसी के लिए मान निर्दिष्ट करने की अनुमति देता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "outline:thin solid red;">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline:thick dashed #009900;">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline:5px dotted rgb(13,33,232);">
This text is having 5x dotted blue outline.
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
max-width संपत्ति का उपयोग अधिकतम चौड़ाई सेट करने के लिए किया जाता है जो एक बॉक्स हो सकता है।
min-width संपत्ति का उपयोग न्यूनतम चौड़ाई निर्धारित करने के लिए किया जाता है जो एक बॉक्स हो सकता है।
ऊँचाई और चौड़ाई के गुण
ऊंचाई और चौड़ाई गुण आप बक्से के लिए ऊंचाई और चौड़ाई निर्धारित करने की अनुमति। वे लंबाई, प्रतिशत या कीवर्ड ऑटो का मान ले सकते हैं।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
लाइन ऊंचाई संपत्ति
Line-height संपत्ति आप पाठ की पंक्तियों के बीच की जगह को बढ़ाने के लिए अनुमति देता है। लाइन-ऊंचाई की संपत्ति का मूल्य एक संख्या, एक लंबाई या एक प्रतिशत हो सकता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
अधिकतम ऊंचाई वाली संपत्ति
अधिकतम ऊँचाई संपत्ति आप एक बॉक्स की अधिकतम ऊंचाई निर्दिष्ट करने के लिए अनुमति देता है। अधिकतम ऊंचाई वाली संपत्ति का मूल्य एक संख्या, एक लंबाई या एक प्रतिशत हो सकता है।
NOTE - यह संपत्ति Netscape 7 या IE 6 में काम नहीं करती है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<br>
<img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
न्यूनतम ऊंचाई संपत्ति
मिनट-ऊंचाई संपत्ति आप एक बॉक्स की न्यूनतम ऊंचाई निर्दिष्ट करने के लिए अनुमति देता है। न्यूनतम ऊंचाई वाली संपत्ति का मूल्य एक संख्या, एक लंबाई या एक प्रतिशत हो सकता है।
NOTE - यह संपत्ति Netscape 7 या IE 6 में काम नहीं करती है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
अधिकतम-चौड़ाई संपत्ति
अधिकतम-चौड़ाई संपत्ति आप एक बॉक्स की अधिकतम चौड़ाई निर्दिष्ट करने के लिए अनुमति देता है। अधिकतम-चौड़ाई की संपत्ति का मूल्य संख्या, लंबाई या प्रतिशत हो सकता है।
NOTE - यह संपत्ति Netscape 7 या IE 6 में काम नहीं करती है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
</body>
</html>यह निम्नलिखित परिणाम देगा -
न्यूनतम चौड़ाई की संपत्ति
न्यूनतम-चौड़ाई संपत्ति आप एक बॉक्स की न्यूनतम चौड़ाई निर्दिष्ट करने के लिए अनुमति देता है। न्यूनतम-चौड़ाई की संपत्ति का मूल्य संख्या, लंबाई या प्रतिशत हो सकता है।
NOTE - यह संपत्ति Netscape 7 या IE 6 में काम नहीं करती है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
| 1 | visible सामग्री को उसके युक्त तत्व की सीमाओं को ओवरफ्लो करने की अनुमति देता है। |
| 2 | hidden नेस्टेड तत्व की सामग्री केवल युक्त तत्व की सीमा पर काट दी जाती है और कोई स्क्रॉलबार दिखाई नहीं देता है। |
| 3 | scroll युक्त तत्व का आकार नहीं बदलता है, लेकिन उपयोगकर्ता को सामग्री देखने के लिए स्क्रॉल करने की अनुमति देने के लिए स्क्रॉलबार जोड़े जाते हैं। |
| 4 | auto उद्देश्य स्क्रॉल के समान है, लेकिन स्क्रॉलबार केवल तभी दिखाया जाएगा जब सामग्री अतिप्रवाह करती है। |
यहाँ एक उदाहरण है -
<html>
<head>
<style type = "text/css">
.scroll {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
</head>
<body>
<p>Example of scroll value:</p>
<div class = "scroll">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class = "auto">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
| 1 | visible बॉक्स और इसकी सामग्री उपयोगकर्ता को दिखाई जाती है। |
| 2 | hidden बॉक्स और इसकी सामग्री को अदृश्य बना दिया जाता है, हालांकि वे अभी भी पृष्ठ के लेआउट को प्रभावित करते हैं। |
| 3 | collapse यह केवल डायनेमिक टेबल कॉलम और रो इफेक्ट के साथ उपयोग के लिए है। |
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p>
This paragraph should be visible in normal way.
</p>
<p style = "visibility:hidden;">
This paragraph should not be visible.
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
- ऊपर ले जाएँ - शीर्ष के लिए एक नकारात्मक मान का उपयोग करें ।
- नीचे जाएँ - शीर्ष के लिए एक सकारात्मक मान का उपयोग करें ।
NOTE- आप नीचे या दाएं मानों के साथ-साथ ऊपर और बाएं भी उसी तरह उपयोग कर सकते हैं ।
यहाँ उदाहरण है -
<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:2px; background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
पूर्ण स्थिति
के साथ एक तत्व position: absolute आपकी स्क्रीन के ऊपरी-बाएँ कोने के सापेक्ष निर्दिष्ट निर्देशांक पर स्थित है।
HTML डॉक्यूमेंट में कहीं भी HTML एलिमेंट को स्थानांतरित करने के लिए आप पोजीशन प्रॉपर्टी के साथ दो मानों को ऊपर और बाईं ओर इस्तेमाल कर सकते हैं ।
- के लिए उपयोग एक नकारात्मक मूल्य - बाईं ओर ले जाएं छोड़ दिया ।
- दाएँ ले जाएँ - बाएँ के लिए एक सकारात्मक मान का उपयोग करें ।
- ऊपर ले जाएँ - शीर्ष के लिए एक नकारात्मक मान का उपयोग करें ।
- नीचे जाएँ - शीर्ष के लिए एक सकारात्मक मान का उपयोग करें ।
NOTE- आप नीचे या दाएं मानों के साथ-साथ ऊपर और बाएं भी उसी तरह उपयोग कर सकते हैं ।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>निश्चित स्थिति
फिक्स्ड पोजिशनिंग आपको पृष्ठ पर किसी विशेष स्थान पर किसी तत्व की स्थिति को ठीक करने की अनुमति देती है, चाहे स्क्रॉलिंग की कोई भी हो। निर्दिष्ट निर्देश ब्राउज़र विंडो के सापेक्ष होंगे।
HTML डॉक्यूमेंट में कहीं भी HTML एलिमेंट को स्थानांतरित करने के लिए आप पोजीशन प्रॉपर्टी के साथ दो मानों को ऊपर और बाईं ओर इस्तेमाल कर सकते हैं ।
- के लिए उपयोग एक नकारात्मक मूल्य - बाईं ओर ले जाएं छोड़ दिया ।
- दाएँ ले जाएँ - बाएँ के लिए एक सकारात्मक मान का उपयोग करें ।
- ऊपर ले जाएँ - शीर्ष के लिए एक नकारात्मक मान का उपयोग करें ।
- नीचे जाएँ - शीर्ष के लिए एक सकारात्मक मान का उपयोग करें ।
NOTE- आप नीचे या दाएं मानों के साथ-साथ ऊपर और बाएं भी उसी तरह उपयोग कर सकते हैं ।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html><body>
<div style = "background-color:red;
width:300px;
height:100px;
position:relative;
top:10px;
left:80px;
z-index:2">
</div>
<div style = "background-color:yellow;
width:300px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1;">
</div>
<div style = "background-color:green;
width:300px;
height:100px;
position:relative;
top:-220px;
left:120px;
z-index:3;">
</div>
</body>यह निम्नलिखित परिणाम का उत्पादन करेगा -
सबसे अधिक इस्तेमाल किया जाने वाला छद्म वर्ग इस प्रकार हैं -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | :link इस क्लास का उपयोग एक विशेष लिंक में विशेष शैली जोड़ने के लिए करें। |
| 2 | :visited किसी विज़िट की गई कड़ी में विशेष शैली जोड़ने के लिए इस वर्ग का उपयोग करें। |
| 3 | :hover जब आप उस पर माउस रखते हैं तो किसी तत्व में विशेष शैली जोड़ने के लिए इस वर्ग का उपयोग करें। |
| 4 | :active एक सक्रिय तत्व में विशेष शैली जोड़ने के लिए इस वर्ग का उपयोग करें। |
| 5 | :focus एक तत्व में विशेष शैली जोड़ने के लिए इस वर्ग का उपयोग करें, जबकि तत्व पर ध्यान केंद्रित किया गया है। |
| 6 | :first-child एक विशेष शैली को एक तत्व में जोड़ने के लिए इस वर्ग का उपयोग करें जो किसी अन्य तत्व का पहला बच्चा है। |
| 7 | :lang किसी निर्दिष्ट तत्व में भाषा का उपयोग करने के लिए इस वर्ग का उपयोग करें। |
छद्म वर्गों को एक <style> ... </ style> खंड में परिभाषित करते समय, निम्नलिखित बातों पर ध्यान दिया जाना चाहिए -
a: hover के बाद आना जरूरी है: लिंक और a: प्रभावी होने के लिए CSS परिभाषा में देखा गया है।
a: सक्रिय होना जरूरी है: प्रभावी होने के लिए CSS परिभाषा में होवर करें।
छद्म श्रेणी के नाम केस-संवेदी नहीं हैं।
छद्म वर्ग सीएसएस वर्गों से अलग हैं, लेकिन उन्हें जोड़ा जा सकता है।
लिंक: छद्म वर्ग
निम्न उदाहरण प्रदर्शित करता है कि लिंक का रंग सेट करने के लिए : लिंक वर्ग का उपयोग कैसे करें । संभावित मान किसी भी मान्य प्रारूप में किसी भी रंग का नाम हो सकते हैं।
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Black Link</a>
</body>
</html>यह निम्नलिखित ब्लैक लिंक का उत्पादन करेगा -
The: छद्म वर्ग का दौरा किया
निम्नलिखित उदाहरण है जो दर्शाता है कि कैसे उपयोग किया जाता है : विज़िट किए गए लिंक का रंग सेट करने के लिए दौरा किया गया वर्ग। संभावित मान किसी भी मान्य प्रारूप में किसी भी रंग का नाम हो सकते हैं।
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = "">Click this link</a>
</body>
</html>यह निम्नलिखित लिंक का उत्पादन करेगा। एक बार जब आप इस लिंक पर क्लिक करेंगे, तो इसका रंग बदलकर हरा हो जाएगा।
द: मंडराना छद्म वर्ग
निम्न उदाहरण प्रदर्शित करता है : लिंक का रंग बदलने के लिए hover वर्ग का उपयोग कैसे करें जब हम उस लिंक पर माउस पॉइंटर लाते हैं। संभावित मान किसी भी मान्य प्रारूप में किसी भी रंग का नाम हो सकते हैं।
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Bring Mouse Here</a>
</body>
</html>यह निम्नलिखित लिंक का उत्पादन करेगा। अब आप अपने माउस को इस लिंक पर लाएँ और आप देखेंगे कि यह अपना रंग बदलकर पीला कर रहा है।
द: सक्रिय छद्म वर्ग
निम्न उदाहरण दर्शाता है : सक्रिय लिंक का रंग बदलने के लिए सक्रिय वर्ग का उपयोग कैसे करें । संभावित मान किसी भी मान्य प्रारूप में किसी भी रंग का नाम हो सकते हैं।
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Click This Link</a>
</body>
</html>यह निम्नलिखित लिंक का उत्पादन करेगा। जब कोई उपयोगकर्ता इसे क्लिक करता है, तो रंग गुलाबी में बदल जाता है।
फोकस: छद्म वर्ग
निम्न उदाहरण प्रदर्शित करता है कि कैसे उपयोग किया जाए : फ़ोकस लिंक का रंग बदलने के लिए फ़ोकस क्लास। संभावित मान किसी भी मान्य प्रारूप में किसी भी रंग का नाम हो सकते हैं।
<html>
<head>
<style type = "text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href = "">Click this Link</a>
</body>
</html>यह निम्नलिखित लिंक का उत्पादन करेगा। जब यह लिंक केंद्रित हो जाता है, तो इसका रंग नारंगी में बदल जाता है। जब यह फोकस खो देता है तो रंग वापस बदल जाता है।
द: पहला-बच्चा छद्म वर्ग
: पहली बच्चे छद्म वर्ग एक निर्दिष्ट तत्व है कि एक और तत्व का पहला बच्चा है और वह तत्व है कि कुछ अन्य तत्व की पहली संतान है करने के लिए विशेष शैली कहते हैं मेल खाता है।
बनाने के लिए: IE में पहला बच्चा काम <! DOCTYPE> दस्तावेज़ के शीर्ष पर घोषित किया जाना चाहिए।
उदाहरण के लिए, सभी <div> तत्वों के पहले पैराग्राफ को इंडेंट करने के लिए, आप इस परिभाषा का उपयोग कर सकते हैं -
<html>
<head>
<style type = "text/css">
div > p:first-child {
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>
<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
द: लंग छद्म वर्ग
भाषा छद्म श्रेणी : लैंग , विशिष्ट टैग के लिए भाषा सेटिंग के आधार पर चयनकर्ताओं के निर्माण की अनुमति देती है।
यह वर्ग उन दस्तावेज़ों में उपयोगी है, जिन्हें कई भाषाओं में अपील करनी चाहिए, जिनके पास कुछ भाषा निर्माणों के लिए अलग-अलग सम्मेलन हैं। उदाहरण के लिए, फ्रांसीसी भाषा आम तौर पर उद्धृत करने के लिए कोण कोष्ठक (<और>) का उपयोग करती है, जबकि अंग्रेजी भाषा उद्धरण चिह्नों ('और') का उपयोग करती है।
एक दस्तावेज़ में जिसे इस अंतर को संबोधित करने की आवश्यकता है, आप उद्धरण चिह्नों को उचित रूप से बदलने के लिए: lang छद्म वर्ग का उपयोग कर सकते हैं। निम्नलिखित कोड भाषा के उपयोग के लिए उचित रूप से <blockquote> टैग को बदलता है -
<html>
<head>
<style type = "text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang = "fr">A quote in a paragraph</q>...</p>
</body>
</html>दस्तावेज़ में सभी तत्वों पर लंग चयनकर्ता लागू होंगे। हालांकि, सभी तत्व उद्धरण संपत्ति का उपयोग नहीं करते हैं, इसलिए प्रभाव अधिकांश तत्वों के लिए पारदर्शी होगा।
यह निम्नलिखित परिणाम का उत्पादन करेगा -
सबसे अधिक इस्तेमाल किया जाने वाला छद्म तत्व इस प्रकार हैं -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | :first-line चयनकर्ता में पाठ की पहली पंक्ति में विशेष शैलियों को जोड़ने के लिए इस तत्व का उपयोग करें। |
| 2 | :first-letter चयनकर्ता में पाठ के पहले अक्षर में विशेष शैली जोड़ने के लिए इस तत्व का उपयोग करें। |
| 3 | :before एक तत्व से पहले कुछ सामग्री डालने के लिए इस तत्व का उपयोग करें। |
| 4 | :after एक तत्व के बाद कुछ सामग्री डालने के लिए इस तत्व का उपयोग करें। |
द: प्रथम-पंक्ति छद्म तत्व
निम्न उदाहरण दर्शाता है कि कैसे उपयोग करने के लिए : पहली पंक्ति दस्तावेज़ में तत्वों की पहली पंक्ति के लिए विशेष प्रभाव जोड़ने के लिए तत्व।
<html>
<head>
<style type = "text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
</head>
<body>
<p class = "noline">
This line would not have any underline because this belongs to nline class.
</p>
<p>
The first line of this paragraph will be underlined as defined in the
CSS rule above. Rest of the lines in this paragraph will remain normal.
This example shows how to use :first-line pseduo element to give effect
to the first line of any HTML element.
</p>
</body>
</html>यह निम्नलिखित लिंक का उत्पादन करेगा -
द: पहला-अक्षर छद्म तत्व
निम्न उदाहरण दर्शाता है कि दस्तावेज़ में तत्वों के पहले अक्षर पर विशेष प्रभाव जोड़ने के लिए पहला अक्षर तत्व का उपयोग कैसे करें ।
<html>
<head>
<style type = "text/css">
p:first-letter { font-size: 5em; }
p.normal:first-letter { font-size: 10px; }
</style>
</head>
<body>
<p class = "normal">
First character of this paragraph will be normal and will have font size 10 px;
</p>
<p>
The first character of this paragraph will be 5em big as defined in the
CSS rule above. Rest of the characters in this paragraph will remain
normal. This example shows how to use :first-letter pseduo element
to give effect to the first characters of any HTML element.
</p>
</body>
</html>यह निम्नलिखित ब्लैक लिंक का उत्पादन करेगा -
The: छद्म तत्व से पहले
निम्न उदाहरण दर्शाता है कि कैसे उपयोग करना है : किसी भी तत्व से पहले कुछ सामग्री जोड़ने के लिए तत्व से पहले।
<html>
<head>
<style type = "text/css">
p:before {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
</body>
</html>यह निम्नलिखित ब्लैक लिंक का उत्पादन करेगा -
द: छद्म तत्व के बाद
निम्न उदाहरण दर्शाता है कि कैसे उपयोग करना है : किसी भी तत्व के बाद कुछ सामग्री जोड़ने के लिए तत्व के बाद।
<html>
<head>
<style type = "text/css">
p:after {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
</body>
</html>यह निम्नलिखित ब्लैक लिंक का उत्पादन करेगा -
@ शासन नियम
@पोर्ट नियम आपको दूसरी शैली की शीट से शैलियों को आयात करने की अनुमति देता है। यह किसी भी नियम से पहले स्टाइल शीट की शुरुआत में दिखाई देना चाहिए, और इसका मान URL है।
इसे निम्नलिखित दो तरीकों में से एक में लिखा जा सकता है -
<style type = "text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>@पोर्ट नियम का महत्व यह है कि यह आपको अपनी शैली की चादरें एक मॉड्यूलर दृष्टिकोण के साथ विकसित करने की अनुमति देता है। आप विभिन्न शैली की चादरें बना सकते हैं और फिर उन्हें शामिल कर सकते हैं जहाँ भी आपको उनकी आवश्यकता हो।
The @charset नियम
यदि आप ASCII या ISO-8859-1 के अलावा किसी और के चरित्र सेट का उपयोग करके अपना दस्तावेज़ लिख रहे हैं, तो आप अपनी शैली शीट के शीर्ष पर @charset नियम सेट करना चाह सकते हैं ताकि यह इंगित किया जा सके कि शैली पत्रक में किस वर्ण को लिखा गया है।
@ शीटसेट नियम को शैली पत्रक की शुरुआत में सही लिखा जाना चाहिए, भले ही इसके पहले कोई स्थान न हो। मान उद्धरणों में आयोजित किया जाता है और मानक चरित्र-सेटों में से एक होना चाहिए। उदाहरण के लिए -
<style type = "text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>@ फंट-फेस रूल
@ फ़ॉन्ट-फेस नियम का उपयोग किसी दस्तावेज़ में उपयोग के लिए फ़ॉन्ट चेहरे का विस्तृत वर्णन करने के लिए किया जाता है। @ फ़ॉन्ट-फेस का उपयोग फ़ॉन्ट के स्थान को डाउनलोड करने के लिए परिभाषित करने के लिए भी किया जा सकता है, हालांकि यह कार्यान्वयन-विशिष्ट सीमाओं में चल सकता है।
सामान्य तौर पर, @ फॉन्ट-फेस बेहद जटिल होता है, और इसका उपयोग उन लोगों के अलावा किसी के लिए भी अनुशंसित नहीं है, जो फॉन्ट मेट्रिक्स के विशेषज्ञ हैं।
यहाँ एक उदाहरण है -
<style type = "text/css">
<!--
@font-face {
font-family: "Scarborough Light";
src: url("http://www.font.site/s/scarbo-lt");
}
@font-face {
font-family: Santiago;
src: local ("Santiago"),
url("http://www.font.site/s/santiago.tt")
format("truetype");
unicode-range: U+??,U+100-220;
font-size: all;
font-family: sans-serif;
}
-->
</style>महत्वपूर्ण नियम
कैस्केडिंग स्टाइल शीट्स कैस्केड। इसका मतलब है कि शैलियों को उसी क्रम में लागू किया जाता है जैसे वे ब्राउज़र द्वारा पढ़े जाते हैं। पहली शैली को लागू किया जाता है और फिर दूसरा और इसी तरह।
महत्वपूर्ण नियम आपके सीएसएस कैस्केड बनाने का एक तरीका प्रदान करता है। इसमें हमेशा लागू होने वाले नियम भी शामिल होते हैं। एक महत्वपूर्ण संपत्ति वाले नियम को हमेशा लागू किया जाएगा, कोई फर्क नहीं पड़ता कि वह नियम सीएसएस दस्तावेज़ में कहां दिखाई देता है।
उदाहरण के लिए, निम्नलिखित शैली पत्रक में, पैरा टेक्स्ट काला होगा, भले ही पहले शैली की संपत्ति लाल हो:
<style type = "text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>इसलिए, यदि आप यह सुनिश्चित करना चाहते हैं कि एक संपत्ति हमेशा लागू हो, तो आप टैग में महत्वपूर्ण संपत्ति जोड़ देंगे। तो, पैरा टेक्स्ट को हमेशा लाल बनाने के लिए, आपको इसे इस प्रकार लिखना चाहिए -
<html>
<head>
<style type = "text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>Tutorialspoint.com</p>
</body>
</html>यहाँ आपने p {color: # ff0000! } अनिवार्य, अब यह नियम हमेशा लागू होगा यहां तक कि आपने एक और नियम p को परिभाषित किया है {color: # 000000; }
यह निम्नलिखित परिणाम का उत्पादन करेगा -
| 1 | opacity अपारदर्शिता का स्तर। 0 पूरी तरह से पारदर्शी है, 100 पूरी तरह से अपारदर्शी है। |
| 2 | finishopacity ऑब्जेक्ट के दूसरे छोर पर अपारदर्शिता का स्तर। |
| 3 | style अपारदर्शिता ढाल का आकार। 0 = वर्दी 1 = रेखीय 2 = रेडियल 3 = आयताकार |
| 4 | startX एक्स अपारदर्शिता ढाल के लिए शुरू करने के लिए समन्वय। |
| 5 | startY वाई अस्पष्टता ढाल के लिए शुरू करने के लिए समन्वय। |
| 6 | finishX एक्स अस्पष्टता खत्म करने के लिए ढाल के लिए समन्वय। |
| 7 | finishY Y अपारदर्शिता ढाल को समाप्त करने के लिए समन्वय करें। |
उदाहरण
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Alpha(Opacity=100,
FinishOpacity = 0,
Style = 2,
StartX = 20,
StartY = 40,
FinishX = 0,
FinishY = 0)" />
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
धीमी गति
मोशन ब्लर का उपयोग दिशा और शक्ति के साथ धुंधला चित्र या पाठ बनाने के लिए किया जाता है। इस फिल्टर में निम्नलिखित मापदंडों का उपयोग किया जा सकता है -
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | add सही या गलत। अगर सच है, छवि को धुंधली छवि में जोड़ा जाता है; और यदि गलत है, तो छवि धुंधली छवि में नहीं जोड़ी जाती है। |
| 2 | direction धब्बा की दिशा, दक्षिणावर्त जा रही है, 45-डिग्री वेतन वृद्धि के लिए गोल है। डिफ़ॉल्ट मान 270 (बाएं) है। 0 = शीर्ष 45 = शीर्ष दाईं ओर 90 = अधिकार 135 = सही नीचे 180 = नीचे 225 = नीचे छोड़ दिया 270 = वाम 315 = शीर्ष बाएँ |
| 3 | strength धब्बा पिक्सेल की संख्या का विस्तार होगा। डिफ़ॉल्ट 5 पिक्सेल है। |
उदाहरण
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
क्रोमा फ़िल्टर
Chroma Filter का उपयोग किसी विशेष रंग को पारदर्शी बनाने के लिए किया जाता है और आमतौर पर इसका उपयोग छवियों के साथ किया जाता है। आप इसे स्क्रॉलबार के साथ भी उपयोग कर सकते हैं। इस फिल्टर में निम्नलिखित पैरामीटर का उपयोग किया जा सकता है -
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | color वह रंग जिसे आप पारदर्शी बनाना चाहते हैं। |
उदाहरण
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/images/css.gif"
alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
<p>Text Example:</p>
<div style = "width: 580;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: #3300FF;
Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
छाया प्रभाव छोड़ें
ड्रॉप शेड का उपयोग निर्दिष्ट एक्स (क्षैतिज) और वाई (ऊर्ध्वाधर) ऑफसेट और रंग पर अपनी वस्तु की छाया बनाने के लिए किया जाता है।
इस फिल्टर में निम्नलिखित मापदंडों का उपयोग किया जा सकता है -
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | color रंग, #RRGGBB प्रारूप में, ड्रॉपशेडो का। |
| 2 | offX पिक्स की संख्या ड्रॉप शैडो को एक्स-एक्सिस के साथ विजुअल ऑब्जेक्ट से ऑफसेट किया जाता है। सकारात्मक पूर्णांक ड्रॉप छाया को दाईं ओर ले जाते हैं, नकारात्मक पूर्णांक ड्रॉप छाया को बाईं ओर ले जाते हैं। |
| 3 | offY पिक्सेल की संख्या ड्रॉप छाया y- अक्ष के साथ दृश्य वस्तु से ऑफसेट है। सकारात्मक पूर्णांक ड्रॉप छाया को नीचे ले जाते हैं, नकारात्मक पूर्णांक ड्रॉप शैडो को ऊपर ले जाते हैं। |
| 4 | positive यदि सही है, तो ऑब्जेक्ट के सभी अपारदर्शी पिक्सेल में एक ड्रॉपशेडो है। यदि गलत है, तो सभी पारदर्शी पिक्सेल में एक ड्रॉपशेडो है। डिफ़ॉल्ट सत्य है। |
उदाहरण
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter:drop-shadow(2px 2px 1px #FF0000);">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
फ्लिप प्रभाव
फ्लिप इफेक्ट का उपयोग ऑब्जेक्ट की मिरर इमेज बनाने के लिए किया जाता है। इस फिल्टर में निम्नलिखित मापदंडों का उपयोग किया जा सकता है -
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | FlipH एक क्षैतिज दर्पण छवि बनाता है |
| 2 | FlipV एक ऊर्ध्वाधर दर्पण छवि बनाता है |
उदाहरण
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: FlipH">
<img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
<p>Text Example:</p>
<div style = "width: 300;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: FlipV">CSS Tutorials</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
चमक प्रभाव
चमक प्रभाव का उपयोग वस्तु के चारों ओर चमक बनाने के लिए किया जाता है। यदि यह एक पारदर्शी छवि है, तो इसके अपारदर्शी पिक्सेल के चारों ओर चमक पैदा होती है। इस फिल्टर में निम्नलिखित मापदंडों का उपयोग किया जा सकता है -
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | color आप जिस रंग की चमक चाहते हैं। |
| 2 | strength चमक की तीव्रता (1 से 255 तक)। |
उदाहरण
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
ग्रेस्केल प्रभाव
ग्रेस्केल प्रभाव का उपयोग वस्तु के रंगों को 256 रंगों के ग्रे में बदलने के लिए किया जाता है। इस फिल्टर में निम्नलिखित पैरामीटर का उपयोग किया जाता है -
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | grayscale 256 रंगों की वस्तु के रंगों को धूसर रंग में परिवर्तित करता है। |
उदाहरण
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: grayscale(50%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: grayscale(50%)">CSS Tutorials</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
प्रभाव उलटा
नकारात्मक प्रभाव बनाने के लिए, इनवर्ट इफेक्ट का उपयोग ऑब्जेक्ट के रंगों को रंगीन स्पेक्ट्रम में उनके विपरीत मूल्यों को मैप करने के लिए किया जाता है। इस फिल्टर में निम्नलिखित पैरामीटर का उपयोग किया जाता है -
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | Invert ऑब्जेक्ट के रंगों को रंगीन स्पेक्ट्रम में उनके विपरीत मूल्य पर मैप करता है। |
उदाहरण
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: invert(100%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: invert(100%)">CSS Tutorials</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
मास्क प्रभाव
मास्क प्रभाव का उपयोग पारदर्शी पिक्सेल को एक निर्दिष्ट रंग में बदलने के लिए किया जाता है और अपारदर्शी पिक्सेल को पारदर्शी बनाता है। इस फिल्टर में निम्नलिखित पैरामीटर का उपयोग किया जाता है -
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | color पारदर्शी क्षेत्रों बन जाएगा कि रंग। |
उदाहरण
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Mask(Color=#00FF00)">CSS Tutorials
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
छाया फ़िल्टर
छाया फिल्टर का उपयोग निर्दिष्ट दिशा और रंग में एक छायांकित छाया बनाने के लिए किया जाता है। यह एक फिल्टर है जो ड्रॉपशॉ और ग्लो के बीच स्थित है। इस फिल्टर में निम्नलिखित मापदंडों का उपयोग किया जा सकता है -
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | color वह रंग जिसे आप चाहते हैं कि छाया हो। |
| 2 | direction धब्बा की दिशा, दक्षिणावर्त जा रही है, 45-डिग्री वेतन वृद्धि के लिए गोल है। डिफ़ॉल्ट मान 270 (बाएं) है। 0 = शीर्ष 45 = शीर्ष दाईं ओर 90 = अधिकार 135 = सही नीचे 180 = नीचे 225 = नीचे छोड़ दिया 270 = वाम 315 = शीर्ष बाएँ |
उदाहरण
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family:
Arial Black;
color: red;
filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
तरंग प्रभाव
तरंग प्रभाव का उपयोग वस्तु को लहरदार विकृति देने के लिए किया जाता है ताकि वह लहरदार दिखे। इस फिल्टर में निम्नलिखित मापदंडों का उपयोग किया जा सकता है -
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | add 1 का मान मूल छवि को लहराती छवि से जोड़ता है, 0 नहीं। |
| 2 | freq लहरों की संख्या। |
| 3 | light लहर पर प्रकाश की ताकत (0 से 100 तक)। |
| 4 | phase किस डिग्री पर साइन की लहर शुरू होनी चाहिए (0 से 100 तक)। |
| 5 | strength तरंग प्रभाव की तीव्रता। |
उदाहरण
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000)
Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
एक्स-रे प्रभाव
एक्स-रे प्रभाव ग्रेस्केल्स और रंग की गहराई को समतल करता है। इस फ़िल्टर में निम्न पैरामीटर का उपयोग किया जाता है:
| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | xray ग्रेस्केल्स और रंग की गहराई को समतल करता है। |
उदाहरण
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Xray">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Xray">CSS Tutorials
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
नीचे एक उदाहरण दिया गया है -
<style tyle = "text/css">
<!--
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
-->
</style>द डॉक्यूमेंट लैंग्वेज
HTML 4.0 में, लिंक तत्व पर मीडिया विशेषता बाहरी शैली शीट के लक्ष्य मीडिया को निर्दिष्ट करती है -
निम्नलिखित एक उदाहरण है -
<style tyle = "text/css">
<!--
<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<head>
<title>link to a target medium</title>
<link rel = "stylesheet" type = "text/css" media = "print,
handheld" href = "foo.css">
</head>
<body>
<p>the body...
</body>
</html>
-->
</style>मान्यता प्राप्त मीडिया प्रकार
CSS मीडिया प्रकारों के लिए चुने गए नाम लक्ष्य उपकरणों को दर्शाते हैं जिनके लिए प्रासंगिक गुण समझ में आते हैं। वे इस बात का बोध कराते हैं कि मीडिया के किस उपकरण का क्या मतलब है। नीचे विभिन्न मीडिया प्रकारों की एक सूची दी गई है -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | all सभी उपकरणों के लिए उपयुक्त है। |
| 2 | aural भाषण सिंथेसाइज़र के लिए इरादा। |
| 3 | braille ब्रेल स्पर्श प्रतिक्रिया उपकरणों के लिए इरादा है। |
| 4 | embossed पृष्ठांकित ब्रेल प्रिंटर के लिए इरादा। |
| 5 | handheld हाथ में उपकरणों के लिए इरादा (आमतौर पर छोटे परदे, मोनोक्रोम, सीमित बैंडविड्थ)। |
| 6 | प्रिंट पूर्वावलोकन मोड में स्क्रीन पर देखे गए दस्तावेजों के लिए पृष्ठांकित, अपारदर्शी सामग्री के लिए इरादा है। कृपया पृष्ठांकित मीडिया पर अनुभाग से परामर्श करें। |
| 7 | projection अनुमानित प्रस्तुतियों के लिए इरादा, उदाहरण के लिए प्रोजेक्टर या पारदर्शिता के लिए प्रिंट करें। कृपया पृष्ठांकित मीडिया पर अनुभाग से परामर्श करें। |
| 8 | screen मुख्य रूप से रंगीन कंप्यूटर स्क्रीन के लिए इरादा है। |
| 9 | tty एक निश्चित पिच वर्ण ग्रिड का उपयोग करके मीडिया के लिए इरादा किया गया है, जैसे कि सीमित प्रदर्शन क्षमताओं वाले टेलेटिप, टर्मिनल या पोर्टेबल डिवाइस। |
| 10 | tv टेलीविजन-प्रकार के उपकरणों के लिए इरादा। |
NOTE - मीडिया प्रकार के नाम केस-असंवेदनशील हैं।
CSS2 एक "पेज बॉक्स" को परिभाषित करता है, परिमित आयामों का एक बॉक्स जिसमें सामग्री प्रदान की जाती है। पृष्ठ बॉक्स एक आयताकार क्षेत्र है जिसमें दो क्षेत्र होते हैं -
The page area- पृष्ठ क्षेत्र में उस पृष्ठ पर रखी गई बक्से शामिल हैं। पृष्ठ क्षेत्र के किनारे पृष्ठ विराम के बीच होने वाले लेआउट के लिए प्रारंभिक युक्त ब्लॉक के रूप में कार्य करते हैं।
The margin area - यह पृष्ठ क्षेत्र को घेरता है।
आप किसी @ पृष्ठ नियम के भीतर पृष्ठ बॉक्स के आयाम, अभिविन्यास, मार्जिन आदि निर्दिष्ट कर सकते हैं। पृष्ठ बॉक्स के आयाम 'आकार' संपत्ति के साथ सेट किए गए हैं। पृष्ठ क्षेत्र के आयाम पृष्ठ बॉक्स के आयाम हैं जो मार्जिन क्षेत्र को घटाते हैं।
उदाहरण के लिए, निम्न @पृष्ठ नियम पृष्ठ बॉक्स का आकार 8.5 × 11 इंच निर्धारित करता है और पेज बॉक्स किनारे और पृष्ठ क्षेत्र के बीच सभी तरफ '2cm' मार्जिन बनाता है -
<style type = "text/css">
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>आप अपने पेज के लिए मार्जिन सेट करने के लिए मार्जिन, मार्जिन-टॉप, मार्जिन-बॉटम, मार्जिन-लेफ्ट, और मार्जिन-राइट प्रॉपर्टीज का इस्तेमाल कर सकते हैं।
अंत में, टार्गेट शीट पर पेज बॉक्स के बाहर फसल और पंजीकरण के निशान बनाने के लिए @पेज नियम के भीतर अंक संपत्ति का उपयोग किया जाता है। डिफ़ॉल्ट रूप से, कोई निशान मुद्रित नहीं होते हैं। आप लक्ष्य प्रिंट पृष्ठ पर क्रमशः, फसल अंक और पंजीकरण अंक बनाने के लिए एक या दोनों फसल और क्रॉस कीवर्ड का उपयोग कर सकते हैं ।
पेज साइज़ सेट करना
आकार संपत्ति आकार और एक पेज बॉक्स के उन्मुखीकरण निर्दिष्ट करता है। चार मान हैं जो पृष्ठ आकार के लिए उपयोग किए जा सकते हैं -
auto - पेज बॉक्स को लक्ष्य शीट के आकार और अभिविन्यास पर सेट किया जाएगा।
landscape- लक्ष्य के उन्मुखीकरण को ओवरराइड करता है। पृष्ठ बॉक्स लक्ष्य के समान आकार है, और लंबे पक्ष क्षैतिज हैं।
portrait- लक्ष्य के उन्मुखीकरण को ओवरराइड करता है। पृष्ठ बॉक्स लक्ष्य के समान आकार है, और छोटे पक्ष क्षैतिज हैं।
length- 'आकार' संपत्ति के लिए लंबाई मान एक पूर्ण पृष्ठ बॉक्स बनाते हैं। यदि केवल एक लंबाई मान निर्दिष्ट किया जाता है, तो यह पेज बॉक्स की चौड़ाई और ऊंचाई दोनों निर्धारित करता है। प्रतिशत मानों को 'आकार' संपत्ति के लिए अनुमति नहीं है।
निम्नलिखित उदाहरण में, पृष्ठ बॉक्स के बाहरी किनारों को लक्ष्य के साथ संरेखित किया जाएगा। 'मार्जिन' संपत्ति पर प्रतिशत मूल्य लक्ष्य आकार के सापेक्ष है इसलिए यदि लक्ष्य शीट आयाम 21.0 सेमी × 29.7 सेमी (अर्थात, ए 4) हैं, तो मार्जिन 2.10 सेमी और 2.97 सेमी हैं।
<style type = "text/css">
<!--
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
-->
</style>निम्न उदाहरण पृष्ठ बॉक्स की चौड़ाई 8.5 इंच और ऊंचाई 11 इंच होना निर्धारित करता है। इस उदाहरण में पेज बॉक्स को 8.5 "× 11" या उससे बड़े लक्ष्य आकार की आवश्यकता होती है।
<style type = "text/css">
<!--
@page {
size: 8.5in 11in; /* width height */
}
-->
</style>एक बार जब आप एक नामित पृष्ठ लेआउट बनाते हैं, तो आप अपने दस्तावेज़ में उस पृष्ठ संपत्ति को एक शैली में जोड़कर उसका उपयोग कर सकते हैं जिसे बाद में आपके दस्तावेज़ में एक तत्व पर लागू किया जाता है। उदाहरण के लिए, यह शैली लैंडस्केप पृष्ठों पर आपके दस्तावेज़ की सभी तालिकाओं को प्रस्तुत करती है -
<style type = "text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>उपर्युक्त नियम के कारण, मुद्रण करते समय, यदि ब्राउज़र आपके दस्तावेज़ में एक <तालिका> तत्व का सामना करता है और वर्तमान पृष्ठ लेआउट डिफ़ॉल्ट पोर्ट्रेट लेआउट है, तो यह एक नया पृष्ठ शुरू करता है और तालिका को परिदृश्य पृष्ठ पर प्रिंट करता है।
बाएँ, दाएँ, और पहले पृष्ठ
डबल-पक्षीय दस्तावेजों को प्रिंट करते समय, बाएं और दाएं पृष्ठों पर पृष्ठ बक्से अलग-अलग होने चाहिए। इसे दो सीएसएस छद्म वर्गों के माध्यम से व्यक्त किया जा सकता है -
<style type = "text/css">
<!--
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
-->
</style>आप किसी दस्तावेज़ के पहले पृष्ठ के लिए शैली निर्दिष्ट कर सकते हैं: पहला छद्म वर्ग -
<style type = "text/css">
<!--
@page { margin: 2cm } /* All margins set to 2cm */
@page :first {
margin-top: 10cm /* Top margin on first page 10cm */
}
-->
</style>पेजिनेशन को नियंत्रित करना
जब तक आप अन्यथा निर्दिष्ट नहीं करते हैं, तब पृष्ठ विराम केवल तब होता है जब पृष्ठ प्रारूप बदलता है या जब सामग्री वर्तमान पृष्ठ बॉक्स को ओवरफ्लो करती है। अन्यथा पृष्ठ को तोड़ने या दबाने के लिए, पृष्ठ-विराम से पहले, पृष्ठ-विराम के बाद, और पृष्ठ-विराम के अंदर गुणों का उपयोग करें।
दोनों पेज ब्रेक-से पहले और पेज-अलग होने के बाद स्वीकार ऑटो, हमेशा की तरह, से बचने, बाएँ, और सही खोजशब्दों।
कीवर्ड ऑटो डिफ़ॉल्ट है, यह ब्राउज़र को आवश्यकतानुसार पेज ब्रेक उत्पन्न करने देता है। तत्व के पहले या बाद में कीवर्ड हमेशा एक पेज को तोड़ने के लिए मजबूर करता है, जबकि तत्व से पहले या बाद में एक पेज ब्रेक को दबाने से बचें । छोड़ दिया और सही कीवर्ड्स, एक या दो पृष्ठ विराम मजबूर ताकि तत्व एक बाएं हाथ या दाएँ हाथ के पृष्ठ पर प्रदान की गई है।
पेजिनेशन प्रॉपर्टी का इस्तेमाल करना काफी सीधा है। मान लीजिए कि आपके दस्तावेज़ में लेवल -1 हेडर हैं, खंडों को दर्शाने के लिए लेवल -2 हेडर के साथ नए अध्याय शुरू करते हैं। आप प्रत्येक अध्याय को एक नए, दाएं हाथ के पृष्ठ पर शुरू करना चाहते हैं, लेकिन आप नहीं चाहते हैं कि अनुभाग हेडर बाद की सामग्री से पृष्ठ विराम में विभाजित हों। आप निम्नलिखित नियम का उपयोग करके इसे प्राप्त कर सकते हैं -
<style type = "text/css">
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>केवल ऑटो का उपयोग करें और पेज-ब्रेक-इन संपत्ति के साथ मूल्यों से बचें । यदि आप पसंद करते हैं कि यदि संभव हो तो आपकी टेबल को पृष्ठों पर नहीं तोड़ा जाए, तो आप नियम लिखेंगे -
<style type = "text/css">
<!--
table { page-break-inside : avoid }
-->
</style>विधवाओं और अनाथों को नियंत्रित करना
टाइपोग्राफिक लिंगो में, अनाथ एक पृष्ठ विराम के कारण पृष्ठ के निचले भाग में फंसे हुए पैराग्राफ की वे पंक्तियाँ होती हैं, जबकि विधवाएँ पृष्ठ विच्छेद के बाद पृष्ठ के शीर्ष पर स्थित वे पंक्तियाँ होती हैं। आम तौर पर, मुद्रित पृष्ठ शीर्ष या तल पर फंसे पाठ की एकल पंक्तियों के साथ आकर्षक नहीं लगते हैं। अधिकांश प्रिंटर प्रत्येक पृष्ठ के ऊपर या नीचे पाठ की कम से कम दो या अधिक पंक्तियों को छोड़ने का प्रयास करते हैं।
orphans प्रॉपर्टी एक पैराग्राफ की लाइनों की न्यूनतम संख्या को निर्दिष्ट करती है जिसे एक पृष्ठ के नीचे छोड़ दिया जाना चाहिए।
widows प्रॉपर्टी एक पैराग्राफ की न्यूनतम संख्या को निर्दिष्ट करती है जिसे एक पृष्ठ के शीर्ष पर छोड़ दिया जाना चाहिए।
यहां नीचे की तरफ 4 लाइनें और प्रत्येक पृष्ठ के शीर्ष पर 3 लाइनें बनाने का उदाहरण दिया गया है -
<style type = "text/css">
<!--
@page{orphans:4; widows:2;}
-->
</style>- चिकित्सा प्रलेखन
कर्ण गुणों का उपयोग करते समय, कैनवास में एक त्रि-आयामी भौतिक स्थान (ध्वनि चारों ओर) और एक अस्थायी स्थान होता है (एक अन्य ध्वनियों से पहले, दौरान और बाद में ध्वनियों को निर्दिष्ट कर सकता है)।
CSS गुण आपको संश्लेषित भाषण (आवाज प्रकार, आवृत्ति, विभक्ति, आदि) की गुणवत्ता को अलग करने की भी अनुमति देते हैं।
यहाँ एक उदाहरण है -
<html>
<head>
<style type = "text/css">
h1, h2, h3, h4, h5, h6 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("../audio/pop.au");
}
p {
azimuth:center-right;
}
</style>
</head>
<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
यह भाषण सिंथेसाइज़र को एक आवाज़ (एक प्रकार का ऑडियो फ़ॉन्ट) में हेडर बोलने के लिए निर्देशित करेगा, जिसे "पौल" कहा जाता है, एक सपाट स्वर पर, लेकिन एक बहुत समृद्ध आवाज़ में। हेडर बोलने से पहले, दिए गए URL से एक ध्वनि नमूना खेला जाएगा।
कक्षा 'हेइडी' के साथ पैरा सामने बाईं ओर से आते हैं (यदि ध्वनि प्रणाली स्थानिक ऑडियो के लिए सक्षम है), और दाईं ओर से कक्षा 'पीटर' के पैराग्राफ।
अब हम कर्ण मीडिया से संबंधित विभिन्न गुणों को देखेंगे।
azimuth संपत्ति सेट, जहां ध्वनि क्षैतिज से आनी चाहिए।
elevation प्रॉपर्टी सेट, जहां ध्वनि लंबवत से आनी चाहिए।
cue-after एक तत्व की सामग्री को दूसरे से परिसीमित करने के लिए बोलने के बाद बजने वाली ध्वनि को निर्दिष्ट करता है।
cue-before किसी तत्व की सामग्री को दूसरे से परिसीमित करने से पहले बोलने के लिए एक ध्वनि निर्दिष्ट की जाती है।
cue क्यू-पहले और क्यू-आफ्टर सेट करने के लिए एक शॉर्टहैंड है।
pause-after किसी तत्व की सामग्री को बोलने के बाद मनाया जाने वाला ठहराव निर्दिष्ट करता है।
pause-before किसी तत्व की सामग्री को बोलने से पहले मनाया जाने वाला ठहराव निर्दिष्ट करता है।
pause ठहराव से पहले और ठहराव के बाद के लिए एक आशुलिपि है।
pitch बोलने की आवाज़ की औसत पिच (एक आवृत्ति) को निर्दिष्ट करता है।
pitch-range औसत पिच में भिन्नता को निर्दिष्ट करता है।
play-during एक ध्वनि को एक पृष्ठभूमि के रूप में खेलने के लिए निर्दिष्ट करता है जबकि एक तत्व की सामग्री बोली जाती है।
richness बोलने की आवाज़ की समृद्धि, या चमक को निर्दिष्ट करता है।
speak निर्दिष्ट करता है कि क्या पाठ का औचित्य प्रदान किया जाएगा और यदि हां, तो किस तरीके से।
speak-numeral नियंत्रित करता है कि अंक कैसे बोले जाते हैं।
speak-punctuation निर्दिष्ट करता है कि विराम चिह्न कैसे बोला जाता है।
speech-rate बोलने की दर को निर्दिष्ट करता है।
stress एक आवाज के समोच्च समोच्च में "स्थानीय चोटियों" की ऊंचाई को निर्दिष्ट करता है।
voice-family आवाज परिवार के नामों की प्राथमिकता सूची निर्दिष्ट करता है।
volume आवाज की औसत मात्रा को संदर्भित करता है।
द एज़िमथ प्रॉपर्टी
द एज़िमथ प्रॉपर्टी सेट होती है जहाँ ध्वनि क्षैतिज रूप से आनी चाहिए। संभावित मूल्य नीचे सूचीबद्ध हैं -
angle- स्थिति -360deg से 360deg के भीतर एक कोण के संदर्भ में वर्णित है । मान 0deg का अर्थ ध्वनि चरण के केंद्र में सीधे आगे है। 90deg दाईं ओर, 180deg पीछे, और 270deg (या, समकक्ष और अधिक आसानी से, -90deg ) बाईं ओर है।
left-side- '270deg' के रूप में भी। 'पीछे', '270 डीजी' के साथ।
far-left- '300deg' के समान। 'पीछे', '240 डीजी' के साथ।
left- '320 डीजी' के समान। 'पीछे', '220 डीजी' के साथ।
center-left- '340deg' के रूप में भी। 'पीछे', '200 डीजी' के साथ।
center- '0deg' के समान। 'पीछे', '180 डीजी' के साथ।
center-right- '20deg' के रूप में भी। 'पीछे', '160 डीजी' के साथ।
right- '40deg ’के समान। 'पीछे', '140 डिग्री' के साथ।
far-right- '60deg ’के समान। 'पीछे', '120 डीजी' के साथ।
right-side- '90 डीजी' के रूप में भी। 'पीछे', '90 डीजी' के साथ।
leftwards- ध्वनि को बाईं ओर ले जाता है और वर्तमान कोण के सापेक्ष। अधिक सटीक रूप से, 20 डिग्री घटाना।
rightwards- ध्वनि को दाईं ओर ले जाता है, वर्तमान कोण के सापेक्ष। अधिक सटीक रूप से, 20 डिग्री जोड़ता है।
यहाँ एक उदाहरण है -
<style type = "text/css">
<!--
h1 { azimuth: 30deg }
td.a { azimuth: far-right } /* 60deg */
#12 { azimuth: behind far-right } /* 120deg */
p.comment { azimuth: behind } /* 180deg */
-->
</style>उत्थान संपत्ति
ऊँचाई गुण सेट करता है जहाँ ध्वनि लंबवत से आनी चाहिए। संभावित मान इस प्रकार हैं -
angle- ऊंचाई को कोण के रूप में निर्दिष्ट करता है, -90 डिग्री और 90 डिग्री के बीच । 0dg का मतलब आगे के क्षितिज पर है, जिसका मतलब है श्रोता के साथ स्तर। 90 डीजी का सीधा मतलब ओवरहेड होता है और -90 डीजी का मतलब सीधे नीचे होता है।
below - '-90deg' के समान।
level - '0deg' के समान।
above - '90 डीजी' के रूप में भी।
higher - वर्तमान ऊंचाई पर 10 डिग्री जोड़ता है।
lower - वर्तमान ऊंचाई से 10 डिग्री घटाना।
यहाँ एक उदाहरण है -
<style type = "text/css">
<!--
h1 { elevation: above }
tr.a { elevation: 60deg }
tr.b { elevation: 30deg }
tr.c { elevation: level }
-->
</style>क्यू के बाद संपत्ति
क्यू-आफ्टर प्रॉपर्टी एक ध्वनि को दूसरे से परिसीमित करने के लिए एक तत्व की सामग्री को बोलने के बाद बजाने के लिए निर्दिष्ट करती है। संभावित मूल्यों में शामिल हैं -
url - बजाई जाने वाली ध्वनि फ़ाइल का URL।
none - कुछ भी नहीं खेलना है।
यहाँ एक उदाहरण है -
<style type = "text/css">
<!--
a {cue-after: url("dong.wav");}
h1 {cue-after: url("pop.au"); }
-->
</style>क्यू से पहले संपत्ति
यह गुण एक ध्वनि को निर्दिष्ट करने के लिए एक तत्व की सामग्री को बोलने से पहले उसे चलाने के लिए कहा जाता है। संभावित मूल्य हैं -
url - बजाई जाने वाली ध्वनि फ़ाइल का URL।
none - कुछ भी नहीं खेलना है।
यहाँ एक उदाहरण है -
<style type = "text/css">
<!--
a {cue-before: url("bell.aiff");}
h1 {cue-before: url("pop.au"); }
-->
</style>क्यू संपत्ति
क्यू संपत्ति पहले और क्यू के बाद क्यू की स्थापना के लिए एक आशुलिपि है । यदि दो मान दिए गए हैं, तो पहला मान क्यू-पहले और दूसरा क्यू-आफ्टर है । यदि केवल एक मान दिया जाता है, तो यह दोनों गुणों पर लागू होता है।
उदाहरण के लिए, निम्नलिखित दो नियम समकक्ष हैं -
<style type = "text/css">
<!--
h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
h1 {cue: url("pop.au") }
-->
</style>संपत्ति के बाद विराम
यह गुण किसी तत्व की सामग्री को बोलने के बाद देखे जाने वाले ठहराव को निर्दिष्ट करता है। संभावित मूल्य हैं -
time - निरपेक्ष समय इकाइयों (सेकंड और मिलीसेकंड) में ठहराव व्यक्त करता है।
percentage- भाषण-दर संपत्ति के मूल्य के व्युत्क्रम का संदर्भ देता है। उदाहरण के लिए, यदि वाक्-दर 120 शब्द प्रति मिनट है (यानी एक शब्द को आधा सेकंड या 500ms लगता है), तो 100% के बाद विराम का मतलब है 500 ms का ठहराव और 20% का ठहराव-बाद का अर्थ है 100ms ।
संपत्ति से पहले विराम
यह गुण किसी तत्व की सामग्री को बोलने से पहले देखे जाने वाले ठहराव को निर्दिष्ट करता है। संभावित मूल्य हैं -
time - निरपेक्ष समय इकाइयों (सेकंड और मिलीसेकंड) में ठहराव व्यक्त करता है।
percentage- भाषण-दर संपत्ति के मूल्य के व्युत्क्रम का संदर्भ देता है। उदाहरण के लिए, यदि वाक्-दर 120 शब्द प्रति मिनट है (यानी एक शब्द आधा सेकंड या 500ms लेता है), तो 100% से पहले एक ठहराव का मतलब है 500 ms का एक ठहराव और 20% का एक ठहराव-पहले मतलब 100ms ।
ठहराव संपत्ति
यह संपत्ति ठहराव से पहले और ठहराव के बाद के लिए एक आशुलिपि है । यदि दो मान दिए जाते हैं, तो पहला मान विराम-पहले और दूसरा ठहराव-बाद है।
यहाँ एक उदाहरण है -
<style type = "text/css">
<!--
/* pause-before: 20ms; pause-after: 20ms */
h1 { pause : 20ms }
/* pause-before: 30ms; pause-after: 40ms */
h2{ pause : 30ms 40ms }
/* pause-before: ?; pause-after: 10ms */
h3 { pause-after : 10ms }
-->
</style>पिच संपत्ति
यह गुण बोलने की आवाज़ की औसत पिच (एक आवृत्ति) को निर्दिष्ट करता है। एक आवाज की औसत पिच आवाज परिवार पर निर्भर करती है। उदाहरण के लिए, एक मानक पुरुष आवाज के लिए औसत पिच 120Hz के आसपास है, लेकिन एक महिला आवाज के लिए, यह लगभग 210Hz है। संभावित मूल्य हैं -
frequency - हर्ट्ज़ (हर्ट्ज) में बोलने वाली आवाज़ की औसत पिच को निर्दिष्ट करता है।
x-low, low, medium, high, x-high - ये मान पूर्ण आवृत्ति के लिए मैप नहीं करते हैं क्योंकि ये मान ध्वनि परिवार पर निर्भर करते हैं।
पिच रेंज संपत्ति
यह संपत्ति औसत पिच में भिन्नता को निर्दिष्ट करती है। संभावित मूल्य हैं -
number- '0' और '100' के बीच का मान। '0' की एक पिच रेंज एक सपाट, एकरस आवाज पैदा करती है। 50 की एक पिच रेंज सामान्य विभक्ति पैदा करती है। पिच 50 से अधिक एनिमेटेड आवाजें पैदा करता है।
खेल-संपत्ति के दौरान
यह गुण एक ध्वनि को एक पृष्ठभूमि के रूप में खेला जाता है, जबकि एक तत्व की सामग्री बोली जाती है। संभावित मूल्य निम्नलिखित में से कोई भी हो सकते हैं -
URI - इस <uri> द्वारा निर्दिष्ट ध्वनि को एक पृष्ठभूमि के रूप में खेला जाता है, जबकि तत्व की सामग्री बोली जाती है।
mix- वर्तमान में, इस कीवर्ड का अर्थ है कि मूल तत्व के खेलने के दौरान विरासत में मिली ध्वनि बजती रहती है और यूरी द्वारा निर्दिष्ट ध्वनि इसके साथ मिश्रित होती है। यदि मिश्रण निर्दिष्ट नहीं है, तो तत्व की पृष्ठभूमि ध्वनि माता-पिता की जगह लेती है।
repeat- वर्तमान में, इस कीवर्ड का अर्थ है कि ध्वनि दोहराएगा यदि तत्व की पूरी अवधि को भरना बहुत कम है। अन्यथा, ध्वनि एक बार बजती है और फिर बंद हो जाती है।
auto - मूल तत्व की ध्वनि बजती रहती है।
none - इस कीवर्ड का मतलब है कि वहां सन्नाटा है।
यहाँ एक उदाहरण है -
<style type = "text/css">
<!--
blockquote.sad { play-during: url("violins.aiff") }
blockquote q { play-during: url("harp.wav") mix }
span.quiet { play-during: none }
-->
</style>समृद्धि संपत्ति
यह गुण बोलने वाली आवाज़ की समृद्धि या चमक को निर्दिष्ट करता है। संभावित मूल्य हैं -
number- '0' और '100' के बीच का मान। मूल्य जितना अधिक होगा, आवाज उतनी ही अधिक होगी। एक कम मूल्य एक नरम, मधुर आवाज पैदा करेगा।
बोल संपत्ति
यह गुण निर्दिष्ट करता है कि क्या पाठ का औचित्य प्रदान किया जाएगा और यदि हां, तो किस तरीके से। संभावित मूल्य हैं -
none - एरल रेंडरिंग को दबाता है ताकि तत्व को रेंडर करने के लिए समय की आवश्यकता न हो।
normal - एक तत्व और उसके बच्चों को प्रस्तुत करने के लिए भाषा-निर्भर उच्चारण नियमों का उपयोग करता है।
spell-out - एक बार में टेक्स्ट को एक अक्षर में बदल देता है।
किसी ऐसे तत्व के बीच अंतर पर ध्यान दें, जिसकी 'वॉल्यूम' संपत्ति में 'साइलेंट' का मान होता है और एक तत्व जिसकी 'बोलो' संपत्ति का मूल्य 'कोई नहीं' होता है। पूर्व में उसी समय लगता है जैसे कि यह बोला गया था, जिसमें तत्व से पहले और बाद में कोई भी ठहराव शामिल है, लेकिन कोई ध्वनि उत्पन्न नहीं होती है। उत्तरार्द्ध के लिए समय की आवश्यकता नहीं है और इसका प्रतिपादन नहीं किया गया है।
बोल-अंक संपत्ति
यह गुण नियंत्रित करता है कि अंक कैसे बोले जाते हैं। संभावित मूल्य हैं -
digits- अंक को व्यक्तिगत अंक के रूप में बोलें। इस प्रकार, "237" को "दो तीन सात" कहा जाता है।
continuous- अंक को पूर्ण संख्या के रूप में बोलें। इस प्रकार, "237" को "दो सौ सैंतीस" कहा जाता है। शब्द प्रतिनिधित्व भाषा-निर्भर हैं।
बोल-विराम चिह्न संपत्ति
यह गुण निर्दिष्ट करता है कि विराम चिह्न कैसे बोला जाता है। संभावित मूल्य हैं -
code - विचलन जैसे अर्धविराम, ब्रेसिज़ और इतने पर शाब्दिक रूप से बोले जाने वाले।
none - विराम चिह्नों को बोलना नहीं है, बल्कि स्वाभाविक रूप से विभिन्न ठहरावों के रूप में प्रस्तुत किया गया है।
भाषण दर संपत्ति
यह संपत्ति बोलने की दर को निर्दिष्ट करती है। ध्यान दें कि पूर्ण और सापेक्ष कीवर्ड मान दोनों की अनुमति है। संभावित मूल्य हैं -
number - प्रति मिनट शब्दों में बोलने की दर निर्दिष्ट करता है।
x-slow - प्रति मिनट 80 शब्दों के समान।
slow - प्रति मिनट 120 शब्दों के समान।
medium - समान 180 - 200 शब्द प्रति मिनट।
fast - प्रति मिनट 300 शब्दों के समान।
x-fast - प्रति मिनट 500 शब्दों के समान।
faster - वर्तमान भाषण दर में 40 शब्द प्रति मिनट जोड़ता है।
slower - वर्तमान भाषण दर से 40 शब्द प्रति मिनट घटाएं।
तनाव संपत्ति
यह गुण आवाज के समोच्च समोच्च में "स्थानीय चोटियों" की ऊंचाई को निर्दिष्ट करता है। अंग्रेजी एक तनावपूर्ण भाषा है, और एक वाक्य के विभिन्न भागों को प्राथमिक, माध्यमिक या तृतीयक तनाव सौंपा जाता है। संभावित मूल्य हैं -
number- '0' और '100' के बीच का मान। मूल्यों का अर्थ बोली जाने वाली भाषा पर निर्भर करता है। उदाहरण के लिए, एक मानक, अंग्रेजी बोलने वाले पुरुष स्वर (औसत पिच = 122 हर्ट्ज) के लिए '50' का स्तर, सामान्य स्वर और जोर के साथ बोलना एक इतालवी आवाज के लिए '50' से अलग अर्थ होगा।
आवाज-परिवार की संपत्ति
मान एक अल्पविराम से अलग, आवाज परिवार के नामों की प्राथमिकता वाली सूची है। इसके निम्नलिखित मूल्य हो सकते हैं -
generic-voice- मूल्य आवाज परिवार हैं। संभावित मूल्य 'पुरुष', 'महिला' और 'बच्चा' हैं।
specific-voice - मूल्य विशिष्ट उदाहरण हैं (उदाहरण के लिए, कॉमेडियन, ट्रिनोइड्स, कार्लो, लानी)।
यहाँ एक उदाहरण है -
<style type = "text/css">
<!--
h1 { voice-family: announcer, male }
p.part.romeo { voice-family: romeo, male }
p.part.juliet { voice-family: juliet, female }
-->
</style>वॉल्यूम गुण
वॉल्यूम से तात्पर्य आवाज के औसत आयतन से है। इसके निम्नलिखित मूल्य हो सकते हैं -
numbers- '0' और '100' के बीच कोई भी संख्या। '0' न्यूनतम श्रव्य मात्रा स्तर का प्रतिनिधित्व करता है और 100 अधिकतम आरामदायक स्तर से मेल खाता है।
percentage - इन मूल्यों को विरासत में दिए गए मूल्य के सापेक्ष गणना की जाती है, और फिर '0' से '100' तक की श्रेणी में रखा जाता है।
silent- कोई आवाज नहीं। मान silent 0 ’का अर्थ 0 मौन’ से नहीं है।
x-soft - '0' के समान।
soft - '25' के समान।
medium - '50' के समान।
loud - '75' के समान।
x-loud - '100' के समान।
यहाँ एक उदाहरण है -
<style type = "text/css">
<!--
P.goat { volume: x-soft }
-->
</style>कक्षा के साथ अनुच्छेद goat बहुत नरम हो जाएगा।
@media print {
p.bodyText {font-family:georgia, times, serif;}
}
@media screen, print {
p.bodyText {font-size:10pt}
}यदि आप अपनी शैली शीट को एक अलग फ़ाइल में परिभाषित कर रहे हैं, तो आप बाहरी शैली शीट से लिंक करते समय मीडिया विशेषता का भी उपयोग कर सकते हैं -
<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">CSS वेब दस्तावेज़ों के भविष्य के लिए महत्वपूर्ण है और अधिकांश ब्राउज़रों द्वारा समर्थित होगा।
सीएसएस तालिकाओं की तुलना में अधिक सटीक है, जिससे आपके दस्तावेज़ को आपकी इच्छानुसार देखा जा सकता है, भले ही ब्राउज़र विंडो की परवाह किए बिना।
नेस्टेड टेबल का ध्यान रखना एक वास्तविक दर्द हो सकता है। सीएसएस नियम अच्छी तरह से व्यवस्थित होते हैं, आसानी से पढ़े जाते हैं, और आसानी से बदल जाते हैं।
अंत में, हम आपको सुझाव देंगे कि आप जो भी तकनीक का उपयोग करें वह आपके लिए समझ में आए और जो आप जानते हैं या जो आपके दस्तावेज़ों को सर्वोत्तम तरीके से प्रस्तुत करता है, उसका उपयोग करें।
सीएसएस आपके टेबल को अधिक तेजी से लोड करने के लिए टेबल-लेआउट संपत्ति भी प्रदान करता है । निम्नलिखित एक उदाहरण है -
<table style = "table-layout:fixed;width:600px;">
<tr height = "30">
<td width = "150">CSS table layout cell 1</td>
<td width = "200">CSS table layout cell 2</td>
<td width = "250">CSS table layout cell 3</td>
</tr>
</table>आप बड़े तालिकाओं पर अधिक लाभ देखेंगे। पारंपरिक HTML के साथ, ब्राउज़र को अंत में तालिका प्रस्तुत करने से पहले हर सेल की गणना करनी थी। जब आप टेबल-लेआउट एल्गोरिथ्म को निर्धारित करते हैं , हालांकि, इसे पूरी तालिका को प्रस्तुत करने से पहले केवल पहली पंक्ति को देखना होगा। इसका मतलब है कि आपकी तालिका में निश्चित कॉलम चौड़ाई और पंक्ति ऊँचाई होनी चाहिए।
नमूना स्तंभ लेआउट
यहाँ CSS का उपयोग करके एक सरल कॉलम लेआउट बनाने के चरण दिए गए हैं -
पूर्ण दस्तावेज़ के मार्जिन और पैडिंग को निम्नानुसार सेट करें -
<style style = "text/css">
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>अब, हम पीले रंग के साथ एक कॉलम को परिभाषित करेंगे और बाद में, हम इस नियम को एक <div> - से जोड़ देंगे।
<style style = "text/css">
<!--
#level0 {
background:#FC0;
}
-->
</style>इस बिंदु तक, हमारे पास पीले शरीर के साथ एक दस्तावेज़ होगा, तो चलिए अब हम लेवल 0 के अंदर एक और विभाजन को परिभाषित करते हैं।
<style style = "text/css">
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style>अब, हम Level1 के अंदर एक और विभाजन का घोंसला बनाएंगे, और हम पृष्ठभूमि का रंग बदल देंगे -
<style style = "text/css">
<!--
#level2 {
background:#FFF3AC;
}
-->
</style>अंत में, हम एक ही तकनीक का उपयोग करेंगे, सही स्तंभ के लिए दृश्य लेआउट प्राप्त करने के लिए level2 के अंदर एक लेवल 3 डिवीजन को घोंसला दें।
<style style = "text/css">
<!--
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {
background:#CCC;
}
-->
</style>स्रोत कोड को इस प्रकार पूरा करें -
<style style = "text/css">
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
#level0 {background:#FC0;}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {background:#FFF3AC;}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {background:#CCC;}
</style>
<body>
<div id = "level0">
<div id = "level1">
<div id = "level2">
<div id = "level3">
<div id = "main">
Final Content goes here...
</div>
</div>
</div>
</div>
</div>
</body>इसी तरह, आप पृष्ठ के शीर्ष पर एक शीर्ष नेविगेशन बार या एक विज्ञापन पट्टी जोड़ सकते हैं।
यह निम्नलिखित परिणाम का उत्पादन करेगा -
W3C CSS Validator (वर्ल्ड वाइड वेब कंसोर्टियम), यह सत्यापनकर्ता फ़ाइल को अपलोड, डायरेक्ट इनपुट, या URI - एक समय में एक पृष्ठ का उपयोग करके आपके सीएसएस की जाँच करता है। यह सत्यापनकर्ता आपको अपने सीएसएस में सभी त्रुटियों का पता लगाने में मदद करता है। डब्ल्यूडीजी सीएसएस जाँच सत्यापनकर्ता, आपको अपने सीएसएस को प्रत्यक्ष इनपुट, फ़ाइल अपलोड, और यूआरआई का उपयोग करके मान्य करता है। यदि आपके पास कोई है तो त्रुटियों को लाइन और कॉलम नंबरों द्वारा सूचीबद्ध किया जाएगा। त्रुटियां आमतौर पर त्रुटि का कारण बताने के लिए लिंक के साथ आती हैं।एक सीएसएस सत्यापनकर्ता आपके कैस्केडिंग स्टाइल शीट्स की जांच करता है ताकि यह सुनिश्चित हो सके कि वे डब्ल्यू 3 कंसोर्टियम द्वारा निर्धारित सीएसएस मानकों का अनुपालन करते हैं। कुछ सत्यापनकर्ता हैं जो आपको यह भी बताएंगे कि कौन सी CSS विशेषताएं किस ब्राउज़र द्वारा समर्थित हैं (चूंकि सभी ब्राउज़र उनके CSS कार्यान्वयन में समान नहीं हैं)।
आपका HTML कोड क्यों मान्य है?
आपके कोड को मान्य करने के कई कारण हैं। लेकिन प्रमुख हैं -
यह क्रॉस-ब्राउज़र, क्रॉस-प्लेटफ़ॉर्म और भविष्य की संगतता में मदद करता है।
एक अच्छी गुणवत्ता वाली वेबसाइट खोज इंजन दृश्यता को बढ़ाती है।
व्यावसायिकता: एक वेब डेवलपर के रूप में, आपके कोड को आगंतुकों द्वारा देखे जाने के दौरान त्रुटियों को नहीं उठाना चाहिए।
CSS3 CSS2 के विनिर्देशों और नई विशिष्टताओं का सहयोग है, हम कह सकते हैं कि यह सहयोग है module। कुछ मॉड्यूल नीचे दिखाए गए हैं -
- Selectors
- बॉक्स मॉडल
- Backgrounds
- छवि मान और प्रतिस्थापित सामग्री
- पाठ प्रभाव
- 2 डी रूपांतरण
- 3 डी रूपांतरण
- Animations
- एकाधिक कॉलम लेआउट
- प्रयोक्ता इंटरफ़ेस
निम्न तालिका गोल कोनों के लिए संभावित मान निम्नानुसार दर्शाती है -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | border-radius चार बोर्डर त्रिज्या संपत्ति की स्थापना के लिए इस तत्व का उपयोग करें |
| 2 | border-top-left-radius शीर्ष बाएं कोने के बोर्डर को सेट करने के लिए इस तत्व का उपयोग करें |
| 3 | border-top-right-radius शीर्ष दाएं कोने के बोर्डर को सेट करने के लिए इस तत्व का उपयोग करें |
| 4 | border-bottom-right-radius नीचे दाएं कोने के बोर्डर को सेट करने के लिए इस तत्व का उपयोग करें |
| 5 | border-bottom-left-radius नीचे बाएं कोने के बोर्डर को सेट करने के लिए इस तत्व का उपयोग करें |
उदाहरण
इस संपत्ति के तीन मूल्य हो सकते हैं। निम्न उदाहरण दोनों मानों का उपयोग करता है -
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(/css/images/logo.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners2">Rounded corners!</p>
<p id = "rcorners3">Rounded corners!</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
प्रत्येक कोने की संपत्ति
हम नीचे दिखाए गए अनुसार प्रत्येक कोने की संपत्ति को निर्दिष्ट कर सकते हैं -
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id = "rcorners1"></p>
<p id = "rcorners2"></p>
<p id = "rcorners3"></p>
</body>
<body>यह निम्नलिखित परिणाम का उत्पादन करेगा -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | border-image-source छवि पथ सेट करने के लिए उपयोग किया जाता है |
| 2 | border-image-slice बोर्डर छवि का टुकड़ा करने के लिए उपयोग किया जाता है |
| 3 | border-image-width बोर्डर छवि चौड़ाई सेट करने के लिए उपयोग किया जाता है |
| 4 | border-image-repeat बोर्डर की छवि को गोल, बार-बार फैलाकर सेट करने के लिए उपयोग किया जाता है |
उदाहरण
निम्नलिखित उदाहरण है जो तत्वों के लिए एक सीमा के रूप में छवि सेट करने के लिए प्रदर्शित करता है।
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
}
</style>
</head>
<body>
<p id = "borderimg1">This is image boarder example.</p>
<p id = "borderimg2">This is image boarder example.</p>
<p id = "borderimg3">This is image boarder example.</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
सबसे अधिक उपयोग किए जाने वाले मान नीचे दिखाए गए हैं -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | background एक अनुभाग में सभी पृष्ठभूमि छवि गुणों को सेट करने के लिए उपयोग किया जाता है |
| 2 | background-clip पृष्ठभूमि के पेंटिंग क्षेत्र को घोषित करने के लिए उपयोग किया जाता है |
| 3 | background-image पृष्ठभूमि छवि निर्दिष्ट करने के लिए उपयोग किया जाता है |
| 4 | background-origin पृष्ठभूमि छवियों की स्थिति निर्दिष्ट करने के लिए उपयोग किया जाता है |
| 5 | background-size पृष्ठभूमि छवियों का आकार निर्दिष्ट करने के लिए उपयोग किया जाता है |
उदाहरण
निम्नलिखित उदाहरण है जो बहु पृष्ठभूमि छवियों को प्रदर्शित करता है।
<html>
<head>
<style>
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>
</head>
<body>
<div id = "multibackground">
<h1>www.tutorialspoint.com</h1>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web designing
to academics and much more..
</p>
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
बहु पृष्ठभूमि का आकार
मल्टी बैकग्राउंड प्रॉपर्टी को अलग-अलग छवियों के लिए अलग-अलग आकार जोड़ने के लिए स्वीकार किया जाता है। नमूना सिंटैक्स नीचे दिखाया गया है
#multibackground {
background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
background-size: 50px, 130px, auto;
}जैसा कि एक उदाहरण के ऊपर दिखाया गया है, प्रत्येक छवि में विशिष्ट आकार 50px, 130px और ऑटो आकार के होते हैं।
#d1 {background-color: rgba(255, 0, 0, 0.5);}
#d2 {background-color: rgba(0, 255, 0, 0.5);}
#d3 {background-color: rgba(0, 0, 255, 0.5);}HSL के लिए खड़ा है hue, saturation, lightness.हेरे विशाल रंग पहिया पर एक डिग्री है, संतृप्ति और लपट 0 से 100% के बीच प्रतिशत मूल्य हैं। एचएसएल का एक नमूना वाक्य-विन्यास जैसा कि नीचे दिखाया गया है -
#g1 {background-color: hsl(120, 100%, 50%);}
#g2 {background-color: hsl(120, 100%, 75%);}
#g3 {background-color: hsl(120, 100%, 25%);}HSLA के लिए खड़ा है hue, saturation, lightness and alpha। अल्फा मान अस्पष्टता निर्दिष्ट करता है जैसा कि आरजीबीए दिखाया गया है। जैसा कि नीचे दिखाया गया है HSLA का एक नमूना वाक्यविन्यास -
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}opacityअस्पष्टता को बढ़ाने के लिए एक पतली पेंट की जरूरत होती है जिसे काला जोड़ा जाता है। अपारदर्शिता का एक नमूना वाक्य विन्यास नीचे दिया गया है -
#g1 {background-color:rgb(255,0,0);opacity:0.6;}
#g2 {background-color:rgb(0,255,0);opacity:0.6;}
#g3 {background-color:rgb(0,0,255);opacity:0.6;}निम्नलिखित उदाहरण rgba रंग संपत्ति को दर्शाता है।
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
</style>
</head>
<body>
<p>RGBA colors:</p>
<p id = "p1">Red</p>
<p id = "p2">Green</p>
<p id = "p3">Blue</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
निम्न उदाहरण एचएसएल रंग संपत्ति को दर्शाता है।
<html>
<head>
<style>
#g1 {background-color:hsl(120, 100%, 50%);}
#g2 {background-color:hsl(120,100%,75%);}
#g3 {background-color:hsl(120,100%,25%);}
</style>
</head>
<body>
<p>HSL colors:</p>
<p id = "g1">Green</p>
<p id = "g2">Normal Green</p>
<p id = "g3">Dark Green</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
निम्न उदाहरण HSLA रंग गुण दिखाता है।
<html>
<head>
<style>
#d1 {background-color:hsla(120,100%,50%,0.3);}
#d2 {background-color:hsla(120,100%,75%,0.3);}
#d3 {background-color:hsla(120,100%,25%,0.3);}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id = "d1">Less opacity green</p>
<p id = "d2">Green</p>
<p id = "d3">Green</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
निम्न उदाहरण अस्पष्टता संपत्ति को दर्शाता है।
<html>
<head>
<style>
#m1 {background-color:rgb(255,0,0);opacity:0.6;}
#m2 {background-color:rgb(0,255,0);opacity:0.6;}
#m3 {background-color:rgb(0,0,255);opacity:0.6;}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id = "m1">Red</p>
<p id = "m2">Green</p>
<p id = "m3">Blue</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
रैखिक ढाल
रैखिक ढाल का उपयोग दो से अधिक रंगों को रेखीय स्वरूपों में व्यवस्थित करने के लिए किया जाता है जैसे ऊपर से नीचे।
ऊपर से नीचे
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(pink,green);
background: -o-linear-gradient(pink,green);
background: -moz-linear-gradient(pink,green);
background: linear-gradient(pink,green);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
बाएं से दाएं
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
विकर्ण
विकर्ण शीर्ष बाएँ और दाएँ बटन पर शुरू होता है।
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
बहु रंग
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: linear-gradient(red, orange, yellow, red, blue, green,pink);
}
</style>
</head>
<body>
<div id = "grad2"></div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
CSS3 रेडियल स्नातक
केंद्र में रेडियल ग्रेडिएंट दिखाई देते हैं।
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
CSS3 दोहराएँ रेडियल स्नातक
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
डब्बे की छाया
तत्वों में छाया प्रभाव जोड़ने के लिए उपयोग किया जाता है, तत्व में छाया प्रभाव जोड़ने के लिए उदाहरण है।
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: red;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | text-align-last पाठ की अंतिम पंक्ति को संरेखित करने के लिए उपयोग किया जाता है |
| 2 | text-emphasis पाठ और रंग पर जोर देने के लिए उपयोग किया जाता है |
| 3 | text-overflow यह निर्धारित करने के लिए उपयोग किया जाता है कि प्रदर्शित नहीं की गई अतिप्रवाहित सामग्री उपयोगकर्ताओं को कैसे संकेतित करती है |
| 4 | word-break शब्द के आधार पर लाइन को तोड़ने के लिए उपयोग किया जाता है |
| 5 | word-wrap लाइन को तोड़ने और अगली पंक्ति में लपेटने के लिए उपयोग किया जाता है |
पाठ-अतिप्रवाह
पाठ-अतिप्रवाह गुण यह निर्धारित करता है कि प्रदर्शित नहीं की गई अतिप्रवाहित सामग्री उपयोगकर्ताओं को कैसे संकेतित करती है। टेक्स्ट ओवरफ्लो का नमूना उदाहरण निम्नानुसार दिखाया गया है -
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<b>Original Text:</b>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
</p>
<b>Text overflow:clip:</b>
<p class = "text1">
Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of their
drawing rooms.
</p>
<b>Text overflow:ellipsis</b>
<p class = "text2">
Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
CSS3 वर्ड ब्रेकिंग
लाइन को तोड़ने के लिए उपयोग किया जाता है, निम्न कोड वर्ड ब्रेकिंग का नमूना कोड दिखाता है।
<html>
<head>
<style>
p.text1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.text2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<b>line break at hyphens:</b>
<p class = "text1">
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of
their drawing rooms.
</p>
<b>line break at any character</b>
<p class = "text2">
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
सीएसएस शब्द रैपिंग
वर्ड रैपिंग का उपयोग लाइन को तोड़ने और अगली लाइन पर रैप करने के लिए किया जाता है। निम्नलिखित कोड में सैंपल सिंटैक्स होगा -
p {
word-wrap: break-word;
}| 1 | TrueType Fonts (TTF) ट्रू टाइप 1980 के दशक के अंत में Apple और Microsoft द्वारा विकसित एक आउटलाइन फ़ॉन्ट मानक है, यह विंडोज़ और मैक ऑपरेटिंग सिस्टम दोनों के लिए सबसे आम फ़ॉन्ट बन गया। |
| 2 | OpenType Fonts (OTF) OpenType स्केलेबल कंप्यूटर फोंट के लिए एक प्रारूप है और Microsoft द्वारा विकसित किया गया है |
| 3 | The Web Open Font Format (WOFF) WOFF का उपयोग वेब पेज विकसित करने और 2009 के वर्ष में विकसित करने के लिए किया जाता है। अब यह W3C अनुशंसा द्वारा उपयोग किया जा रहा है। |
| 4 | SVG Fonts/Shapes एसवीजी एसवीजी दस्तावेजों के भीतर एसवीजी फोंट की अनुमति देते हैं। हम फ़ॉन्ट फेस प्रॉपर्टी के साथ CSS से SVG में भी आवेदन कर सकते हैं। |
| 5 | Embedded OpenType Fonts (EOT) ईओटी का उपयोग वेब पेजों को विकसित करने के लिए किया जाता है और इसे वेबपेजों में एम्बेड किया गया है ताकि 3 पार्टी फोंट की अनुमति देने की आवश्यकता न हो |
निम्नलिखित कोड फ़ॉन्ट चेहरे का नमूना कोड दिखाता है -
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(/css/font/SansationLight.woff);
}
div {
font-family: myFirstFont;
}
</Style>
</head>
<body>
<div>This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS3.</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
फ़ॉन्ट विवरण
निम्नलिखित सूची में सभी फ़ॉन्ट विवरण शामिल हैं जो @ फ़ॉन्ट-फेस नियम में रखे गए हैं -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | font-family फ़ॉन्ट के नाम को परिभाषित करता था |
| 2 | src URL को परिभाषित करने के लिए उपयोग किया जाता है |
| 3 | font-stretch खोजने के लिए उपयोग किया जाता है, कैसे फ़ॉन्ट को बढ़ाया जाना चाहिए |
| 4 | font-style फोंट शैली को परिभाषित करता था |
| 5 | font-weight फ़ॉन्ट वजन (बोल्डनेस) को परिभाषित करता है |
| 1 | matrix(n,n,n,n,n,n) मैट्रिक्स को छह मूल्यों के साथ रूपांतरित करने के लिए प्रयुक्त किया जाता है |
| 2 | translate(x,y) तत्व को x- अक्ष और y- अक्ष के साथ परिवर्तित करने के लिए उपयोग किया जाता है |
| 3 | translateX(n) एक्स-अक्ष के साथ तत्व को रूपांतरित करने के लिए उपयोग किया जाता है |
| 4 | translateY(n) Y- अक्ष के साथ तत्व को रूपांतरित करने के लिए उपयोग किया जाता है |
| 5 | scale(x,y) तत्व की चौड़ाई और ऊंचाई को बदलने के लिए उपयोग किया जाता है |
| 6 | scaleX(n) तत्व की चौड़ाई को बदलने के लिए उपयोग किया जाता है |
| 7 | scaleY(n) तत्व की ऊंचाई को बदलने के लिए उपयोग किया जाता है |
| 8 | rotate(angle) कोण पर आधारित तत्व को घुमाने के लिए उपयोग किया जाता है |
| 9 | skewX(angle) एक्स अक्ष के साथ तिरछा परिवर्तनों को परिभाषित करता था |
| 10 | skewY(angle) Y अक्ष के साथ तिरछा परिवर्तन को परिभाषित करता है |
निम्नलिखित उदाहरणों को उपरोक्त सभी गुणों का नमूना दिखाया गया है।
20 डिग्री घुमाएँ
20 डिग्री के कोण के साथ बॉक्स रोटेशन जैसा कि नीचे दिखाया गया है -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
-20 डिग्री घुमाएँ
नीचे दिखाए अनुसार -20 डिग्री के कोण के साथ बॉक्स रोटेशन -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
तिरछी एक्स अक्ष
नीचे दिखाए गए अनुसार तिरछा x- अक्ष के साथ बॉक्स रोटेशन -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
तिरछा Y अक्ष
नीचे दिखाए गए अनुसार तिरछा y- अक्ष के साथ बॉक्स रोटेशन -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
मैट्रिक्स परिवर्तन
मैट्रिक्स के साथ बॉक्स रोटेशन जैसा कि नीचे दिखाया गया है -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv1 {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv1">
Tutorials point.com
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
मैट्रिक्स दूसरी दिशा में बदल जाती है।
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Standard syntax */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv2">
Tutorials point.com
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
| 1 | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) मैट्रिक्स के 16 मूल्यों का उपयोग करके तत्व को रूपांतरित करने के लिए उपयोग किया जाता है |
| 2 | translate3d(x,y,z) X- अक्ष, y- अक्ष और z- अक्ष का उपयोग करके तत्व को रूपांतरित करता है |
| 3 | translateX(x) एक्स-एक्सिस का उपयोग करके तत्व को रूपांतरित करता है |
| 4 | translateY(y) Y- अक्ष का उपयोग करके तत्व को रूपांतरित करता है |
| 5 | translateZ(z) Y- अक्ष का उपयोग करके तत्व को रूपांतरित करता है |
| 6 | scaleX(x) पैमाने का उपयोग एक्स-एक्सिस का उपयोग करके तत्व को बदल देता है |
| 7 | scaleY(y) पैमाने का उपयोग y- अक्ष का उपयोग करके तत्व को बदल देता है |
| 8 | scaleY(y) Z- अक्ष का उपयोग करके तत्व को रूपांतरित करता है |
| 9 | rotateX(angle) बारी बारी से एक्स-एक्सिस का उपयोग करके तत्व को बदल देता है |
| 10 | rotateY(angle) रोटेट करने के लिए प्रयुक्त तत्व को y- अक्ष का उपयोग करके बदल देता है |
| 1 1 | rotateZ(angle) Z- अक्ष का उपयोग करके तत्व को बदल देता है |
एक्स-अक्ष 3 डी रूपांतरित करता है
निम्नलिखित एक उदाहरण एक्स-अक्ष 3 डी परिवर्तनों को दर्शाता है।
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg);
/* Safari */
transform: rotateX(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate X-axis</p>
<div id = "myDiv">
tutorials point.com.
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
Y- अक्ष 3D रूपांतरित करता है
निम्नलिखित उदाहरण से पता चलता है कि y- अक्ष 3D रूपांतरित होता है -
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#yDiv {
-webkit-transform: rotateY(150deg);
/* Safari */
transform: rotateY(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate Y axis</p>
<div id = "yDiv">
tutorials point.com.
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
Z- अक्ष 3D रूपांतरित करता है
निम्नलिखित उदाहरण Z- अक्ष 3 डी परिवर्तन दिखाता है -
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
/* Safari */
transform: rotateZ(90deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>rotate Z axis</p>
<div id = "zDiv">
tutorials point.com.
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
उपरोक्त उदाहरण keyframes सिंटैक्स के साथ एनीमेशन की ऊंचाई, चौड़ाई, रंग, नाम और अवधि दिखाता है।
बाएं एनीमेशन चल रहा है
<html>
<head>
<style type = "text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>this is an example of moving left animation .</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
कीफ़्रेम के साथ बाएँ एनीमेशन को ले जाना
<html>
<head>
<style type = "text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>This is an example of animation left with an extra keyframe
to make text changes.</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
| 1 | column-count उस कॉलम की संख्या की गणना करने के लिए उपयोग किया जाता है जिसे तत्व विभाजित किया जाना चाहिए। |
| 2 | column-fill तय करते थे, कॉलम कैसे भरना है। |
| 3 | column-gap स्तंभों के बीच के अंतर को तय करने के लिए उपयोग किया जाता है। |
| 4 | column-rule नियमों की संख्या निर्दिष्ट करने के लिए उपयोग किया जाता है। |
| 5 | rule-color कॉलम नियम रंग निर्दिष्ट करने के लिए उपयोग किया जाता है। |
| 6 | rule-style कॉलम के लिए शैली नियम निर्दिष्ट करने के लिए उपयोग किया जाता है। |
| 7 | rule-width चौड़ाई निर्दिष्ट करने के लिए उपयोग किया जाता है। |
| 8 | column-span कॉलम के बीच की अवधि को निर्दिष्ट करने के लिए उपयोग किया जाता है। |
उदाहरण
नीचे दिए गए उदाहरण से नए पेपर संरचना के रूप में पाठ की व्यवस्था का पता चलता है।
<html>
<head>
<style>
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<div class = "multi">
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web
designing to academics and much more.
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
मान लीजिए, यदि उपयोगकर्ता बिना लाइन के नए पेपर के रूप में टेक्स्ट बनाना चाहता है, तो हम नीचे दिखाए गए अनुसार शैली वाक्य रचना को हटाकर ऐसा कर सकते हैं -
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}यह निम्नलिखित परिणाम का उत्पादन करेगा -
| 1 | appearance उपयोगकर्ता को उपयोगकर्ता इंटरफ़ेस तत्वों के रूप में तत्व बनाने की अनुमति देने के लिए उपयोग किया जाता है। |
| 2 | box-sizing उपयोगकर्ताओं को स्पष्ट तरीके से क्षेत्र पर तत्वों को ठीक करने की अनुमति देता है। |
| 3 | icon क्षेत्र पर आइकन प्रदान करने के लिए उपयोग किया जाता है। |
| 4 | resize उन तत्वों का आकार बदलने के लिए उपयोग किया जाता है जो क्षेत्र में हैं। |
| 5 | outline-offset रूपरेखा के पीछे आकर्षित करने के लिए उपयोग किया जाता है। |
| 6 | nav-down जब आप कीपैड में डाउन एरो बटन दबाते हैं, तो नीचे जाने के लिए उपयोग किया जाता है। |
| 7 | nav-left जब आप कीपैड में बाएँ तीर बटन पर दबाया है, तो बाईं ओर ले जाने के लिए उपयोग किया जाता है। |
| 8 | nav-right जब आप कीपैड में राईट एरो बटन को दबाते हैं तो दाएं घूमने के लिए उपयोग किया जाता है। |
| 9 | nav-up जब आप कीपैड में एरो बटन दबाते हैं, तो ऊपर जाने के लिए उपयोग किया जाता है। |
संपत्ति का आकार बदलें
संपत्ति को तीन सामान्य मानों के रूप में नीचे दिखाया गया है -
- horizontal
- vertical
- both
का उपयोग करना both सीएसएस 3 उपयोगकर्ता इंटरफ़ेस में संपत्ति का आकार बदलें -
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>TutorialsPoint.com</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
CSS3 रूपरेखा ऑफसेट
आउट लाइन का अर्थ है सीमा के बाहर तत्व के चारों ओर एक रेखा खींचना।
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 5px solid pink;
outline: 5px solid green;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>TutorialsPoint</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
}
.div2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
ऊपर की छवि में एक ही चौड़ाई और दो तत्व की ऊंचाई है, लेकिन परिणाम अलग है, क्योंकि दूसरा एक गद्दी संपत्ति शामिल है।
CSS3 बॉक्स आकार की संपत्ति
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>ऊपर के नमूने के साथ समान ऊंचाई और चौड़ाई है box-sizing:border-box। यहाँ परिणाम नीचे दिखाया गया है।
यह निम्नलिखित परिणाम का उत्पादन करेगा -
उपरोक्त तत्वों में बॉक्स-आकार के साथ समान ऊँचाई और चौड़ाई होती है: बॉर्डर-बॉक्स इसलिए दोनों तत्वों के लिए हमेशा समान होता है जैसा कि ऊपर दिखाया गया है।
<html>
<head>
<style>
body {
font: 600 14px/24px "Open Sans",
"HelveticaNeue-Light",
"Helvetica Neue Light",
"Helvetica Neue",
Helvetica, Arial,
"Lucida Grande",
Sans-Serif;
}
h1 {
color: #9799a7;
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
}
.container:before, .container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
background: #eaeaed;
margin-bottom: 24px;
*zoom: 1;
}
.container-75 {
width: 75%;
}
.container-50 {
margin-bottom: 0;
width: 50%;
}
.container, section, aside {
border-radius: 6px;
}
section, aside {
background: #2db34a;
color: #fff;
margin: 1.858736059%;
padding: 20px 0;
text-align: center;
}
section {
float: left;
width: 63.197026%;
}
aside {
float: right;
width: 29.3680297%;
}
</style>
</head>
<body>
<h1>100% Wide Container</h1>
<div class = "container">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>75% Wide Container</h1>
<div class = "container container-75">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>50% Wide Container</h1>
<div class = "container container-50">
<section>Section</section>
<aside>Aside</aside>
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
मीडिया के प्रश्नों
मीडिया प्रश्न विभिन्न आकार के उपकरणों जैसे मोबाइल, डेस्कटॉप, आदि के लिए अलग-अलग शैली के नियमों के लिए है।
<html>
<head>
<style>
body {
background-color: lightpink;
}
@media screen and (max-width: 420px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>
If screen size is less than 420px, then it will show lightblue
color, or else it will show light pink color
</p>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
बूटस्ट्रैप उत्तरदायी वेब डिज़ाइन
बूटस्ट्रैप एचटीएमएल, सीएसएस और जावा स्क्रिप्ट के आधार पर सबसे लोकप्रिय वेब डिज़ाइन फ्रेमवर्क है और यह आपको सभी डिवाइसों के लिए उत्तरदायी तरीके से वेब पेज डिजाइन करने में मदद करता है।
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body {
color:green;
}
</style>
</head>
<body>
<div class = "container">
<div class = "jumbotron">
<h1>Tutorials point</h1>
<p>
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
</p>
</div>
<div class = "row">
<div class = "col-md-4">
<h2>Android</h2>
<p>
Android is an open source and Linux-based operating system for mobile
devices such as smartphones and tablet computers. Android was developed
by the Open Handset Alliance, led by Google, and other companies.
</p>
</div>
<div class = "col-md-4">
<h2>CSS</h2>
<p>
Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages presentable.
</p>
</div>
<div class = "col-md-4">
<h2>Java</h2>
<p>
Java is a high-level programming language originally developed by Sun
Microsystems and released in 1995. Java runs on a variety of platforms,
such as Windows, Mac OS, and the various versions of UNIX. This tutorial
gives a complete understanding of Java.
</p>
</div>
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -