CSS नियम

CSS, इतर कोणत्याही प्रमाणे संगणक भाषा, मध्ये काटेकोरपणे परिभाषित वाक्यरचना आहे, उदा. नियम ज्याद्वारे शैली पत्रके तयार केली जातात. मागील प्रकरणात तुम्ही अनेक उदाहरणे पाहिली आहेत भिन्न टेबलशैली आणि" तुमच्या लक्षात आले असेल की CSS वाक्यरचना यापेक्षा वेगळी आहे HTML वाक्यरचना. CSS मध्ये कोणतेही घटक, विशेषता किंवा टॅग नाहीत. त्याचे नियम आहेत, ज्यापैकी प्रत्येक एक किंवा समूहाच्या स्वरूपाचे वर्णन करतो HTML घटक. ते कसे दिसेल हे नियम ठरवतो विशिष्ट घटक. चला एक व्याख्या देऊ.

CSS नियम हे स्टाईल शीटचे स्ट्रक्चरल युनिट आहे ज्यामध्ये विशिष्ट घटकासाठी शैलींचे वर्णन असते. नियमामध्ये एक निवडकर्ता असतो, जो नेहमी डावीकडे असतो आणि एक शैली घोषणा ब्लॉक असतो, जो कुरळे ब्रेसेसमध्ये बंद असतो आणि लगेच निवडक (आकृती) चे अनुसरण करतो. प्रत्येक घोषणेमध्ये मालमत्ता आणि त्याचे मूल्य असते. ही मालमत्ता आहे जी घटकावर लागू होणारी शैलीचा प्रकार निर्धारित करते.

नियमामध्ये अर्धविरामांनी विभक्त केलेल्या अनेक घोषणा असू शकतात. शेवटच्या घोषणेनंतर अर्धविराम लावण्याची गरज नाही.

शैली पत्रके वाचणे आणि संपादित करणे सोपे करण्यासाठी, नियम सहसा लिहिले जातात जेणेकरून प्रत्येक घोषणा वर स्थित असेल स्वतंत्र ओळ. उदाहरणार्थ:

हे अगदी त्याच प्रकारे समजले जाईल, ते देईल अतिरिक्त बचतअतिरिक्त जागा आणि नवीन ओळी काढून कोड आकारात. पण अशा प्रकारे लिहिल्याने संहिता समजण्यास अवघड जाते. आपण एक तडजोड करू शकता: प्रथम नियम लिहा, त्यांना ओळींमध्ये खंडित करा आणि शैली पत्रक शेवटी तयार झाल्यानंतर, अतिरिक्त क्षुल्लक वर्ण काढा. परंतु यानंतर तुम्हाला आणखी काही दुरुस्त करायचे नाही, याची शाश्वती नाही, मग तुम्हाला योग्य मालमत्ता शोधून संपादित करण्यापूर्वी थोडा त्रास सहन करावा लागेल.

प्रत्येक मालमत्तेसाठी CSSस्पेसिफिकेशन ही मालमत्ता घेऊ शकत असलेल्या मूल्यांचा संच तसेच त्याचे डीफॉल्ट मूल्य आणि व्याप्ती निर्दिष्ट करते! गुणधर्म, म्हणजे ज्या घटकांवर ते लागू केले जाऊ शकते. हे देखील सूचित करते की ही मालमत्ता वारशाने मिळाली आहे, म्हणजे. ते वंशज घटकांना लागू केले जाईल की नाही. आउटपुट डिव्हाइसेस निर्दिष्ट करते ज्यांना हे गुणधर्म लागू होतात. आम्ही विचार करणार असल्याने संगणक डिझाइन, नंतर आम्ही फक्त त्या गुणधर्मांचा उल्लेख करू जे आमच्या बाबतीत लागू आहेत, म्हणजे. मॉनिटर स्क्रीनवरील डिस्प्ले नियंत्रित करण्यासाठी डिझाइन केलेले आहेत आणि आधुनिक ब्राउझरद्वारे देखील समर्थित आहेत.

मांडणी CSS

या प्रकरणात:

CSS नियम

व्हाइटस्पेस वर्ण

CSS टिप्पण्या

CSS मध्ये शैली परिभाषित करणे जे वेब पृष्ठावरील घटकाचे स्वरूप सेट करते हे फक्त एक नियम आहे जे ब्राउझरला काय स्वरूपित केले जाईल आणि ते कसे स्वरूपित केले जाईल हे सांगते, जसे की शीर्षक मजकूराचा रंग बदलणे, प्रतिमा हायलाइट करणे लाल सीमा, निश्चित रुंदी 200 पिक्सेलच्या मेनूसाठी, इ.

CSS नियम

CSS हा नियम किंवा नियमांचा संच आहे जो फॉरमॅटिंगचे वर्णन करतो (बदलणे देखावा) वैयक्तिक घटकवेब पृष्ठावर. नियमात दोन भाग असतात: एक निवडकर्ता आणि पुढील घोषणांचा ब्लॉक. खालील प्रतिमा नियमाची रचना (वाक्यरचना) दर्शवते:

नेहमी प्रथम सूचीबद्ध निवडकर्ता, ते ब्राउझरला सांगते की वेब पृष्ठाचे कोणते घटक किंवा घटक शैली लागू केली जाईल.

टीप: इमेजमध्ये, सिलेक्टर हा ट्युटोरियलच्या अनेक उदाहरणांमध्ये हा सिलेक्टर वापरणार आहोत.

त्यानंतर जाहिरात ब्लॉक, ज्याची सुरुवात कुरळे ब्रेसने होते { आणि एक बंद सह समाप्त } , कुरळे ब्रेसेसमध्ये फॉरमॅटिंग कमांड्स (घोषणा) आहेत जे ब्राउझरद्वारे निवडकर्त्याद्वारे निवडलेल्या घटकाची शैली करण्यासाठी वापरतात. ब्लॉकमध्ये कितीही जाहिराती असू शकतात. जाहिरात ब्लॉक स्वतः देखील म्हणतात शैली.

प्रत्येक घोषणादोन भाग असतात: एक मालमत्ता आणि त्याचे मूल्य. घोषणा नेहमी अर्धविराम (;) ने समाप्त होणे आवश्यक आहे. ";" वगळा शेवटच्या घोषणेच्या शेवटी फक्त बंद कर्ली ब्रेसच्या आधी शक्य आहे.

मालमत्ताएक स्वरूपन कमांड आहे जी घटकासाठी विशिष्ट शैली प्रभाव परिभाषित करते. गुणधर्म स्वतः एक शब्द किंवा अनेक हायफनेटेड शब्द आहेत. प्रत्येक मालमत्तेची स्वतःची पूर्वनिर्धारित मूल्ये असतात. मालमत्तेचे नाव नंतर कोलन येते, जे मालमत्तेचे नाव वैध मूल्यापासून वेगळे करते.

व्हाइटस्पेस वर्ण

ब्राउझर CSS मधील बहुतेक व्हाईटस्पेसकडे दुर्लक्ष करतो, त्यामुळे तुमचा कोड अधिक वाचनीय बनवण्यासाठी तुम्ही ते तुमच्या फायद्यासाठी वापरू शकता. व्हाईटस्पेस वर्णांमध्ये टॅब, लाइन ब्रेक आणि नियमित जागा, ते कोणत्याही प्रमाणात वापरले जाऊ शकतात. व्हाईटस्पेस वर्ण निवडक आणि घोषणा ब्लॉकमध्ये ठेवता येतात, घोषणा ब्लॉकमध्येच - कर्ली ब्रेस आणि गुणधर्म, गुणधर्म, गुणधर्म आणि मूल्य यांच्यामध्ये.

उदाहरण CSS कोड दाखवते जे व्हाइटस्पेस वापरते:

अशाप्रकारे नियम सामान्यतः जेव्हा फक्त एक किंवा दोन गुणधर्म वापरले जातात तेव्हा लिहिले जातात, जेणेकरून कोडचे अनेक ओळींमध्ये विभाजन होऊ नये आणि त्यामुळे कोडचा आकार वाढू नये.

CSS टिप्पण्या

CSS टिप्पणी अक्षरांनी सुरू होते /* आणि चिन्हांसह समाप्त होते */ आणि अनेक ओळींचा विस्तार करू शकतो, त्यातील सामग्री कोडच्या ऑपरेशनवर परिणाम करत नाही आणि ब्राउझरद्वारे दुर्लक्ष केले जाते.

कोडच्या काही विभागांना स्पष्ट करण्यासाठी टिप्पण्या वापरल्या जाऊ शकतात जेव्हा तुम्हाला काही वेळानंतर कोडवर परत यावे लागते तेव्हा हे विशेषतः उपयोगी असू शकते.

आणखी एक महत्वाची भूमिकाटिप्पण्या, ज्याचा वापर अनेकदा व्यवहारात केला जातो, म्हणजे कोडचा काही भाग तात्पुरता अक्षम करणे. अशा प्रकारे, त्रुटी शोधणे कठीण असताना टिप्पण्या वापरल्या जातात.

निवडकर्ता (मालमत्ता: मूल्य)

निवडकर्ता हा HTML घटक/टॅग आहे ज्याची व्याख्या करणे आवश्यक आहे. मालमत्ता ही एक विशेषता आहे जी तुम्हाला बदलायची आहे. प्रत्येक मालमत्ता मूल्य घेऊ शकते. आपल्याला लक्षात ठेवण्याची आवश्यकता असलेल्या अनेक नियम आणि शिफारसी आहेत.

1. मालमत्ता आणि मूल्य कोलनद्वारे वेगळे केले जाते आणि कुरळे ब्रेसेसमध्ये ठेवले जाते:

   p (फॉन्ट-आकार: 75%)

2. जर मूल्यामध्ये अनेक शब्द असतील, तर तुम्हाला मूल्य कोट्समध्ये ठेवणे आवश्यक आहे:

   h1 (फॉन्ट-फॅमिली: "लुसिडा कॅलिग्राफी")

3. तुम्हाला एकापेक्षा जास्त गुणधर्म परिभाषित करायचे असल्यास, तुम्ही गुणधर्म अर्धविरामाने वेगळे करणे आवश्यक आहे:

   टेबल (फॉन्ट-फॅमिली: एरियल, "सॅन्स सेरिफ"; सीमा-शैली: ठिपके)

4. शैली व्याख्या वाचणे सोपे करण्यासाठी, तुम्ही प्रत्येक गुणधर्म वेगळ्या ओळीवर लिहू शकता:

   h2 ( फॉन्ट-फॅमिली: एरियल; समास-उजवे: 20pt; रंग:#ffffff )

5. नियम परिभाषित करताना, निवडकर्त्यांच्या गटास अनुमती आहे आणि निवडक विभाजक म्हणून स्वल्पविराम वापरला जातो. IN खालील उदाहरणपरिच्छेद, सारणी आणि सूचीचे सर्व घटक एका गटात एकत्र केले गेले. हे सर्व घटक sans serif फॉन्टमध्ये प्रदर्शित केले जातील:

   p,table,li ( फॉन्ट-फॅमिली: "sans serif";)

वर्ग निवडक (वर्ग)

वेब डेव्हलपमेंटमध्ये, अनेकदा निर्दिष्ट करण्याची आवश्यकता असते विविध शैलीसमान HTML घटक प्रकारासाठी. या समस्येचे निराकरण करण्यासाठी, वर्ग निवडक वापरा.

असे गृहीत धरू की दस्तऐवजासाठी दोन प्रकारचे हेडिंग आवश्यक आहे: मोठे हेडिंग असावे समास 10 गुण, आणि दुसरा - 20 गुण. शैली वापरून ते कसे करायचे ते येथे आहे:

h1.stepleft (समस्या-डावीकडे: 10pt) h2.stepright (समस्या-डावीकडे: 20pt)

मध्ये या शैली लागू करण्यासाठी HTML दस्तऐवजतुम्हाला क्लास विशेषता वापरण्याची आवश्यकता असेल:

10 पॉइंटच्या बाह्य इंडेंटसह हेडिंग.

20 पॉइंटच्या बाह्य इंडेंटसह हेडिंग.

त्याच वेळी, खालील व्याख्या परवानगी नाही वर्ग विशेषता :

< h1 class="stepleft" h2 class="stepright">,

त्या फक्त एक वर्ग विशेषता परिभाषित केली जाऊ शकते

विशिष्ट वर्ग असलेल्या सर्व HTML घटकांद्वारे वापरल्या जाणाऱ्या शैलीची व्याख्या करण्यासाठी तुम्ही सिलेक्टरमधील टॅगचे नाव देखील वगळू शकता.

डावीकडे (मार्जिन-डावीकडे: 40pt)

खालील उदाहरणामध्ये, class="left" असलेल्या सर्व HTML घटकांना 40 पॉइंट्सचा बाह्य मार्जिन असेल.

IN खालील कोडटेबल आणि p घटकांमध्ये class="left" आहे. याचा अर्थ दोन्ही घटक ".left" सिलेक्टरमधील नियमांचे पालन करतील:

या परिच्छेदामध्ये 40 बिंदूंचा बाह्य इंडेंट असेल.

ब्राउझरद्वारे योग्य कोड प्रक्रियेसाठी, वर्गाचे नाव क्रमांकासह सुरू करण्याची शिफारस केलेली नाही, कारण हे Mozilla/Firefox मध्ये काम करणार नाही.

शैलीचे नियम HTML व्यतिरिक्त मालकीच्या स्वरूपात लिहिलेले आहेत. मूलभूत संकल्पना एक निवडक आहे - एक नमुना जो एक किंवा अधिक HTML घटक निवडण्यासाठी आणि त्यांना स्वरूपन पर्याय लागू करण्यासाठी वापरला जातो. सामान्य पद्धतनोंदी आहेत पुढील दृश्य.

निवडक नाव प्रथम निर्दिष्ट केले आहे, उदाहरणार्थ div, याचा अर्थ सर्व स्टाइलिंग पर्याय सर्व घटकांना लागू होतील