CSS ही एक औपचारिक भाषा आहे जी मार्कअप भाषा (HTML, XHTML, XML) वापरून तयार केलेल्या दस्तऐवजाच्या स्वरूपाचे वर्णन करण्यासाठी वापरली जाते. हे नाव इंग्रजी कॅस्केडिंग स्टाईल शीट्सवरून आले आहे, ज्याचा अर्थ " कॅस्केडिंग टेबलशैली"

CSS का वापरला जातो?

CSS चा उद्देश ते निर्दिष्ट करते ते वेगळे करणे हा आहे देखावापृष्ठ, त्याच्या सामग्रीवरून. दस्तऐवज फक्त सह तयार केले असल्यास HTML वापरून, नंतर ते केवळ प्रत्येक घटकच परिभाषित करत नाही तर ते कसे प्रदर्शित केले जाते (रंग, फॉन्ट, ब्लॉक स्थिती इ.) देखील परिभाषित करते. जर कॅस्केडिंग शैली पत्रके जोडलेली असतील, तर HTML केवळ ऑब्जेक्ट्सच्या क्रमाचे वर्णन करते. आणि त्यांच्या सर्व गुणधर्मांसाठी CSS जबाबदार आहे. HTML मध्ये, प्रत्येक वेळी सर्व शैली सूचीबद्ध केल्याशिवाय वर्ग निर्दिष्ट करणे पुरेसे आहे.

हे तंत्रज्ञान:

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

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

CSS विकास

CSS विकसित करण्याची गरज W3C ने 1990 च्या दशकात ओळखली होती. 1996 मध्ये, CSS1 मानक स्वीकारले गेले, जे तुम्हाला फॉन्ट सेटिंग्ज, रंग, मजकूर गुणधर्म, संरेखन आणि पॅडिंग बदलण्याची परवानगी देते. 1998 मध्ये, CSS2 रिलीझ करण्यात आले, ज्याने वापरण्याची शक्यता जोडली ब्लॉक लेआउट, ध्वनी सारण्या, व्युत्पन्न सामग्री, अनुक्रमणिका, पृष्ठ मीडिया. CSS3 आवृत्तीने शैलींच्या क्षमतांमध्ये लक्षणीय वाढ केली आहे: ती बनली आहे परवडणारी निर्मितीशिवाय ॲनिमेटेड घटक JavaScript वापरून, अँटी-अलायझिंगसाठी समर्थन, छाया, ग्रेडियंट्स इ. दिसले तपशील मॉड्यूल्समध्ये विभागले गेले, जे प्रत्येक स्वतंत्रपणे विकसित केले जाऊ लागले. 2011 पासून, CSS4 मॉड्यूल्सचा विकास चालू आहे. वैशिष्ट्यांचे सध्या मसुदा आवृत्त्यांमध्ये वर्णन केले आहे.

भाषेची रचना

CSS वैशिष्ट्यीकृत केले जाऊ शकते सोप्या शब्दातघटक कसा दिसावा याचे वर्णन करणाऱ्या नियमांचा संच म्हणून.

नियमामध्ये निवडकर्ता आणि घोषणा ब्लॉक असतो.

निवडकर्ते

निवडकर्ता कोणत्या घटकामध्ये वर्णन केले आहे ते सांगतो CSS गुणधर्मशैली कोणताही टॅग जो फॉरमॅट केला जाऊ शकतो (आकार, रंग इ.) निवडकर्ता म्हणून काम करू शकतो. तुम्हाला टॅगसाठी भिन्न शैली सेट करायची असल्यास किंवा भिन्न घटकांसाठी एक लागू करण्याची आवश्यकता असल्यास, वर्ग आणि “Tag.Class (संपत्ती: मूल्य;)” फॉर्मचा रेकॉर्ड वापरला जातो. वर्गाचे नाव लॅटिन वर्णांमध्ये निर्दिष्ट केले आहे आणि त्यात अंडरस्कोर किंवा हायफन असू शकतो. तुम्ही टॅग निर्दिष्ट न केल्यास, परंतु ".वर्ग" ने एंट्री सुरू केली, तर तुम्ही कोणत्याही टॅगसाठी नियम वापरू शकता. तुम्ही एका टॅगसाठी अनेक वर्गांची यादी केल्यास, सर्व वर्णन केलेल्या शैली त्यावर लागू केल्या जातील. आयडेंटिफायर निर्दिष्ट करतो अद्वितीय नावस्क्रिप्ट वापरून शैली किंवा उपचार बदलण्यासाठी घटक. एंट्री "#आयडेंटिफायर (मालमत्ता: मूल्य;)". ओळखकर्त्याच्या नावात अक्षरे असतात लॅटिन वर्णमाला, हायफन आणि अंडरस्कोर वापरणे स्वीकार्य आहे. विशिष्ट टॅगवर अभिज्ञापक लागू करण्यासाठी, त्याचे नाव दर्शवा, नंतर स्पेसशिवाय आणि पाउंड चिन्हाने वेगळे केलेले, अभिज्ञापकाचे नाव.

जाहिरात ब्लॉक

डिक्लेरेशन ब्लॉकमध्ये गुणधर्म असतात:मूल्याच्या जोड्या (प्रवेश नेहमी कोलनच्या मागे असतो), कुरळे ब्रेसेसमध्ये ठेवल्या जातात. नोंदी अर्धविरामाने संपतात. CSS टॅब, जागा आणि केस असंवेदनशील आहे. रेकॉर्डिंग पद्धतीची निवड (इंडेंटेड कॉलम किंवा फक्त एका ओळीत) विकसकाच्या विवेकबुद्धीनुसार आहे. एका निवडकर्त्यासाठी निर्दिष्ट केले असल्यास भिन्न अर्थएका मालमत्तेसाठी, तळाच्या नोंदीला प्राधान्य दिले जाते.

CSS कनेक्ट करत आहे

CSS अनेक प्रकारे एचटीएमएलशी जोडले जाऊ शकते:

• वापरून टॅग आत शैली गुणधर्म. निवडकर्ता निर्दिष्ट करण्याची आवश्यकता नाही;
• टॅग जोडा

  उदाहरण मजकूर

  
  
  

  दशांश असल्यास संपूर्ण भागशून्याच्या बरोबरीचे आहे, नंतर ते लिहिण्याची परवानगी नाही. नोटेशन .7 आणि 0.7 समतुल्य आहेत.

  व्याज

  टक्केवारी नोटेशन सहसा अशा प्रकरणांमध्ये वापरले जाते जेथे मूल्य सापेक्ष बदलणे आवश्यक असते मूळ घटककिंवा जेव्हा परिमाणे अवलंबून असतात बाह्य परिस्थिती. अशा प्रकारे, 100% रुंदीच्या टेबलचा अर्थ असा आहे की ते ब्राउझर विंडोच्या आकाराशी जुळवून घेते आणि विंडोच्या रुंदीसह बदलते (उदाहरण 6.3).

  उदाहरण 6.3. टक्केवारी नोंद

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  सारणी सामग्री

  
  
  

  टक्केवारी पूर्ण संख्या असणे आवश्यक नाही, जसे की 56.8%, वापरले जाऊ शकते.

  परिमाण

  विविध घटकांचे आकार सेट करण्यासाठी, CSS मापनाची निरपेक्ष आणि संबंधित एकके वापरते. निरपेक्ष एकके आउटपुट उपकरणापासून स्वतंत्र असतात, परंतु संबंधित एकके दुसऱ्या आकाराच्या मूल्याशी संबंधित घटकाचा आकार परिभाषित करतात.

  संबंधित युनिट्स

  सापेक्ष एकके सहसा मजकूरासह कार्य करण्यासाठी वापरली जातात किंवा जेव्हा आपल्याला घटकांमधील टक्केवारी संबंध मोजण्याची आवश्यकता असते. टेबलमध्ये 6.1 मुख्य सापेक्ष एककांची सूची देते.

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

  युनिट ex ची व्याख्या "x" मध्ये वर्णाची उंची म्हणून केली जाते लोअरकेस. ex हा em सारख्याच नियमांच्या अधीन आहे, म्हणजे तो ब्राउझरच्या डीफॉल्ट फॉन्ट आकाराशी किंवा त्याच्या मूळ घटकाच्या फॉन्ट आकाराशी बांधील आहे.

  पिक्सेल हा मॉनिटर किंवा स्मार्टफोन सारख्या इतर तत्सम उपकरणाद्वारे प्रदर्शित केलेला प्राथमिक बिंदू आहे. पिक्सेल आकार डिव्हाइस रिझोल्यूशन आणि त्याच्यावर अवलंबून असतो तांत्रिक वैशिष्ट्ये. उदाहरण 6.4 फॉन्ट आकार सेट करण्यासाठी पिक्सेल आणि ems चा वापर दर्शविते.

  उदाहरण 6.4. संबंधित युनिट्स वापरणे

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  30px शीर्षलेख

  मजकूर आकार 1.5 em

  
  
  

  या उदाहरणाचा परिणाम खाली दर्शविला आहे (आकृती 6.1).

  तांदूळ. ६.१. वेगवेगळ्या युनिट्ससह मजकूर आकार

  निरपेक्ष एकके

  निरपेक्ष एकके सापेक्ष घटकांपेक्षा कमी वेळा वापरली जातात आणि सहसा मजकूरासह कार्य करताना. टेबलमध्ये 6.2 मूलभूत निरपेक्ष एककांची सूची देते.

  कदाचित सर्वात सामान्य एकक बिंदू आहे, जो फॉन्ट आकार दर्शविण्यासाठी वापरला जातो. जरी आपल्याला सर्वकाही मिलीमीटर आणि तत्सम युनिट्समध्ये मोजण्याची सवय आहे, परंतु मुद्दा कदाचित एकमेव मूल्य आहे मेट्रिक प्रणालीमापन, जे आपल्या देशात सर्वत्र वापरले जाते. आणि सर्व धन्यवाद मजकूर संपादकआणि प्रकाशन प्रणाली. उदाहरण 6.5 बिंदू आणि मिलिमीटरचा वापर दर्शविते.

  उदाहरण 6.5. निरपेक्ष युनिट्स वापरणे

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  24 पॉइंट मथळा

  मजकूर उजवीकडे 30 मिलीमीटरने शिफ्ट करा

  
  
  

  मापनाची निरपेक्ष एकके वापरण्याचा परिणाम खाली दर्शविला आहे (आकृती 6.2).

  

  तांदूळ. ६.२. वेगवेगळ्या युनिट्ससह मजकूर आकार

  परिमाणे सेट करताना, मापनाची एकके निर्दिष्ट करण्याचे सुनिश्चित करा, उदाहरणार्थ रुंदी: 30px. IN अन्यथाब्राउझर इच्छित परिणाम दर्शवू शकणार नाही कारण आपल्याला कोणत्या आकाराची आवश्यकता आहे हे समजत नाही. जेव्हा मूल्य शून्य (मार्जिन: 0) असेल तेव्हाच युनिट्स जोडल्या जात नाहीत.

  रंग

  शैलीतील रंग तीन प्रकारे सेट केले जाऊ शकतात: द्वारे हेक्साडेसिमल मूल्य, नावाने आणि RGB स्वरूपात.

  हेक्साडेसिमल मूल्यानुसार

  हेक्साडेसिमल संख्या रंग निर्दिष्ट करण्यासाठी वापरली जातात. हेक्साडेसिमल प्रणाली, दशांश प्रणालीच्या विपरीत, तिच्या नावाप्रमाणे, 16 क्रमांकावर आधारित आहे. संख्या खालीलप्रमाणे असेल: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C, D, E, F. 10 ते 15 मधील संख्या लॅटिन अक्षरांनी बदलली आहेत. 15 इंच पेक्षा जास्त संख्या हेक्साडेसिमल प्रणालीदोन संख्या एकात एकत्र करून तयार होतात. उदाहरणार्थ, संख्या 255 मध्ये दशांश प्रणालीहेक्साडेसिमलमधील FF क्रमांकाशी संबंधित आहे. संख्या प्रणाली निश्चित करताना गोंधळ टाळण्यासाठी, आधी हेक्साडेसिमल संख्याहॅश चिन्ह # ठेवा, उदाहरणार्थ #666999. तीन रंगांपैकी प्रत्येक - लाल, हिरवा आणि निळा - 00 ते FF पर्यंत मूल्ये घेऊ शकतात. अशा प्रकारे, रंग चिन्ह तीन घटकांमध्ये विभागले गेले आहे #rrggbb, जिथे पहिले दोन चिन्ह रंगाचा लाल घटक दर्शवतात, मधले दोन - हिरवे आणि शेवटचे दोन - निळे. त्याला #rgb सारखा छोटा केलेला फॉर्म वापरण्याची परवानगी आहे, जिथे प्रत्येक वर्ण दुप्पट केला पाहिजे (#rrggbb). उदाहरणार्थ, #fe0 एंट्री #ffee00 म्हणून ओळखली जाते.

  नावाने

  ब्राउझर त्यांच्या नावाने काही रंगांना समर्थन देतात. टेबलमध्ये 6.3 नावे दर्शविते हेक्साडेसिमल कोडआणि वर्णन.

  टेबल ६.३. रंगांची नावे

  नाव	रंग	कोड	वर्णन
  पांढरा		#ffffff किंवा #ffff	पांढरा
  चांदी		#c0c0c0	राखाडी
  राखाडी		#808080	गडद राखाडी
  काळा		#000000 किंवा #000	काळा
  लाल रंग		#800000	गडद लाल
  लाल		#ff0000 किंवा #f00	लाल
  संत्रा		#ffa500	संत्रा
  पिवळा		#ffff00 किंवा #ff0	पिवळा
  ऑलिव्ह		#808000	ऑलिव्ह
  चुना		#00ff00 किंवा #0f0	हलका हिरवा
  हिरवा		#008000	हिरवा
  एक्वा		#00ffff किंवा #0ff	निळा
  निळा		#0000ff किंवा #00f	निळा
  नौदल		#000080	गडद निळा
  टील		#008080	निळा हिरवा
  खाली लोंबणार्या सुंदर फुलांचे झाड		#ff00ff किंवा #f0f	गुलाबी
  जांभळा		#800080	जांभळा

  RGB वापरणे

  तुम्ही लाल, हिरवा आणि निळा मूल्ये वापरून दशांश शब्दांमध्ये रंग परिभाषित करू शकता. तीन रंगांपैकी प्रत्येक रंगाचे मूल्य 0 ते 255 पर्यंत असू शकते. तुम्ही टक्केवारी म्हणून रंग देखील सेट करू शकता. rgb कीवर्ड प्रथम निर्दिष्ट केला जातो, आणि नंतर रंग घटक कंसात निर्दिष्ट केले जातात, स्वल्पविरामाने विभक्त केले जातात, उदाहरणार्थ rgb(255, 0, 0) किंवा rgb(100%, 20%, 20%).

  उदाहरण 6.6 प्रस्तुत विविध मार्गांनीवेब पृष्ठ घटकांसाठी रंग सेट करणे.

  उदाहरण 6.6. रंग प्रतिनिधित्व

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  Lorem ipsum dolor sit amet

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

  
  
  

  या उदाहरणाचा परिणाम अंजीर मध्ये दर्शविला आहे. ६.३.

  

  पत्ते

  पत्ते (यूआरआय, युनिफॉर्म रिसोर्स आयडेंटिफायर, युनिफाइड रिसोर्स आयडेंटिफायर) फाईलचा मार्ग निर्दिष्ट करण्यासाठी वापरले जातात, उदाहरणार्थ, स्थापित करण्यासाठी पार्श्वभूमी चित्रपानावर. हे करण्यासाठी, url() कीवर्ड वापरा; या प्रकरणात, पत्ता वैकल्पिक एकल किंवा निर्दिष्ट केला जाऊ शकतो दुहेरी अवतरण(उदाहरण 6.7).

  उदाहरण 6.7. ग्राफिक फाइल पत्ता

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  लक्ष द्या, विनंती केलेले पृष्ठ सापडले नाही!
  
  
  

  या उदाहरणात, मुख्य भाग निवडकर्ता निरपेक्ष पत्ता वापरतो ग्राफिक फाइल, आणि div सिलेक्टरमध्ये - सापेक्ष.

  कीवर्ड

  कीवर्ड सक्रियपणे मूल्ये म्हणून वापरले जातात, जे शैली गुणधर्मांचे इच्छित परिणाम निर्धारित करतात. कीवर्डअवतरण चिन्हांशिवाय लिहिलेले.

  बरोबर: P ( मजकूर-संरेखित: उजवीकडे; )
  चुकीचे: P ( मजकूर-संरेखित: "उजवे"; )

  तपासण्यासाठी प्रश्न

  1. कोणत्या ओळीत त्रुटी आहे?

  1. फॉन्ट-आकार: 20px
  2. फॉन्ट-आकार: 0
  3. फॉन्ट-आकार: 1.5em
  4. फॉन्ट-आकार: 5 मिमी
  5. फॉन्ट-आकार: 300ex

  2. कोणती अभिव्यक्ती बरोबर लिहिली आहे?

  1. रंग: #fco
  2. रुंदी: "स्वयं"
  3. फॉन्ट-आकार: निळा
  4. पार्श्वभूमी: लाल
  5. सीमा: काहीही नाही

  3. बिंदूंमध्ये मजकूराचा आकार किती असेल?

  उदाहरण मजकूर

  , पृष्ठावर खालील शैली सेट केली असल्यास?

  मुख्य भाग (फॉन्ट-आकार: 24pt; )
  P (फॉन्ट-आकार: 50%;)
  SPAN (फॉन्ट-आकार: 1.5em; )

  4. अन्याला वेब पृष्ठाचा पार्श्वभूमी रंग लिलाकवर सेट करायचा आहे. पार्श्वभूमी मालमत्तेसाठी कोणते मूल्य सर्वोत्तम आहे?

  1. #cbd1e8
  2. rgb(१२१, २३२, ४७)
  3. #b6b7be
  4. rgb(205%, 85%, 53%)

  5. खालील शैलीमध्ये काय चूक आहे?

  img ( फ्लोट: डावीकडे; सीमा-रुंदी: 3; प्रदर्शन: ब्लॉक)

  1. एंट्रीच्या शेवटी अर्धविराम गहाळ आहे.
  2. सीमा-रुंदीच्या मालमत्तेसाठी एकके निर्दिष्ट केलेली नाहीत.
  3. डावे आणि ब्लॉक मूल्ये कोट्सशिवाय लिहिलेली आहेत.
  4. सीमा-रुंदी गुणधर्म अस्तित्वात नाही.
  5. डिस्प्ले गुणधर्माचे ब्लॉक मूल्य प्रतिमांवर लागू केले जाऊ शकत नाही.

  उत्तरे

  1.font-size: 1.5em

  5. सीमा-रुंदीच्या मालमत्तेसाठी मोजमापाची एकके निर्दिष्ट केलेली नाहीत.