html पृष्ठ घटकांचे आकार सेट करण्यासाठी CSS रुंदी आणि उंची पॅरामीटर्स. सुंदर सीएसएस इनपुट (इनपुट फील्ड). नंबर फील्डचा आकार बदलत आहे

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

पर्याय

टॅग पॅरामीटर्सचे वर्णन

पॅरामीटर संरेखित करा

मजकूर किंवा इतर फॉर्म घटकांच्या सापेक्ष प्रतिमा फील्ड कसे संरेखित करायचे ते निर्धारित करते.

मांडणी

युक्तिवाद

• तळाशी- सभोवतालच्या मजकुरासह प्रतिमेची तळाशी सीमा संरेखित करा
• बाकी- विंडोच्या डाव्या काठावर प्रतिमा संरेखित करते
• मधला- प्रतिमेच्या मध्यभागी वर्तमान रेषेच्या बेसलाइनशी संरेखित करते.
• बरोबर- विंडोच्या उजव्या काठावर प्रतिमा संरेखित करते.
• शीर्ष- प्रतिमेची शीर्ष सीमा वर्तमान रेषेच्या सर्वोच्च घटकाशी संरेखित केली आहे.

डीफॉल्ट मूल्य तळाशी आहे. ब्राउझर वितर्कांना देखील समर्थन देतात तळाशी, absmiddle, बेसलाइनआणि टेक्स्टटॉप, जे HTML 4.01 तपशीलामध्ये समाविष्ट केलेले नाहीत.

ALT पॅरामीटर

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

मांडणी

मूल्य कोणतेही योग्य असू शकते मजकूर स्ट्रिंग. ते दुहेरी किंवा सिंगल कोट्समध्ये संलग्न केले जाणे आवश्यक आहे.

बॉर्डर पॅरामीटर

ब्राउझर टॅगद्वारे जोडलेल्या प्रतिमांवर प्रक्रिया करतात , टॅग वापरून तयार केलेल्या चित्रांसारखेच . तुम्ही प्रतिमेभोवती एक फ्रेम देखील जोडू शकता, ज्याचा रंग मजकूराच्या रंगाशी जुळतो.

मांडणी

वैध मूल्य हे पिक्सेलमधील कोणतीही सकारात्मक पूर्णांक संख्या आहे. डीफॉल्ट मूल्य 0 आहे.

तपासलेले पॅरामीटर

हे पॅरामीटर चेकबॉक्स किंवा रेडिओ बटण सारखे फॉर्म घटक पूर्व-तपासलेले आहे की नाही हे निर्धारित करते. रेडिओ बटण वापरण्याच्या बाबतीत, चेकबॉक्सेससाठी फक्त एक घटक तपासला जाऊ शकतो, कमीतकमी सर्व घटक चिन्हांकित करणे परवानगी आहे.

मांडणी

अक्षम केलेले पॅरामीटर

फॉर्म फील्डमध्ये प्रवेश आणि सुधारणा अवरोधित करते. या प्रकरणात, ते राखाडी प्रदर्शित केले जाते आणि वापरकर्त्याद्वारे सक्रिय केले जाऊ शकत नाही. याव्यतिरिक्त, अशा फील्डवर क्लिक करून फोकस प्राप्त करू शकत नाही टॅब की, माउस किंवा इतर पद्धत. तथापि, ही फील्ड स्थिती स्क्रिप्ट वापरून बदलली जाऊ शकते.

मांडणी

MAXLENGTH पॅरामीटर

स्थापित करतो कमाल संख्यामजकूर फील्डमध्ये वापरकर्त्याद्वारे प्रविष्ट केले जाऊ शकणारे वर्ण. जेव्हा टायपिंग दरम्यान हा नंबर गाठला जातो, तेव्हा पुढील इनपुट अशक्य होते.

मांडणी

पॅरामीटर NAME

व्याख्या करतो अद्वितीय नावफॉर्म घटक. सामान्यतः, हे नाव सर्व्हरला डेटा पाठवताना किंवा स्क्रिप्टद्वारे प्रविष्ट केलेल्या फील्ड डेटामध्ये प्रवेश करण्यासाठी वापरले जाते.

मांडणी

नाव हा अक्षरांचा संच आहे, ज्यामध्ये संख्या आणि अक्षरे आहेत. JavaScript केस सेन्सिटिव्ह आहे, म्हणून नावानुसार घटकाचा संदर्भ देताना, नाव पॅरामीटर सारखाच फॉर्म वापरा.

READONLY पॅरामीटर

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

मांडणी

SIZE पॅरामीटर

मजकूर फील्डची रुंदी, जी मोनोस्पेस फॉन्टमधील वर्णांच्या संख्येद्वारे निर्धारित केली जाते. दुसऱ्या शब्दांत, रुंदी समीप अक्षरांच्या संख्येद्वारे निर्धारित केली जाते समान रुंदीक्षैतिज शैली वापरून फॉन्ट आकार बदलल्यास, रुंदी देखील त्यानुसार बदलते.

मांडणी

वैध मूल्य हे कोणतेही सकारात्मक पूर्णांक आहे.

SRC पॅरामीटर

पत्ता ग्राफिक फाइल, जे प्रतिमा फील्डमध्ये वेब पृष्ठावर प्रदर्शित केले जाईल.

मांडणी

मूल्य पूर्ण किंवा म्हणून घेतले जाते सापेक्ष मार्गफाइलकडे.

TYPE पॅरामीटर

आवश्यक प्रकार पॅरामीटर ब्राउझरला सांगते की फॉर्म घटक कोणत्या प्रकारचा आहे.

मांडणी

युक्तिवाद

• बटण- बटण.
• चेकबॉक्स- ध्वज. तुम्हाला प्रस्तावित पर्यायांमधून एकापेक्षा जास्त पर्याय निवडण्याची अनुमती देते.
• फाइल- सर्व्हरला पाठवलेल्या फाइलचे नाव प्रविष्ट करण्यासाठी फील्ड.
• लपलेले- लपलेले फील्ड. हे वेब पृष्ठावर कोणत्याही प्रकारे प्रदर्शित केले जात नाही.
• प्रतिमा- प्रतिमेसह फील्ड. जेव्हा तुम्ही चित्रावर क्लिक करता, तेव्हा फॉर्म डेटा सर्व्हरला पाठविला जातो.
• पासवर्ड- एक नियमित मजकूर फील्ड, परंतु त्यापेक्षा वेगळे आहे की सर्व वर्ण तारका म्हणून दर्शविले जातात. एंटर केलेल्या पासवर्डवर कोणासही स्नूप करण्यापासून रोखण्यासाठी डिझाइन केलेले.
• रेडिओ- स्विचेस. जेव्हा तुम्हाला अनेक ऑफर केलेल्यांपैकी एक पर्याय निवडण्याची आवश्यकता असते तेव्हा ते वापरले जातात.
• रीसेट- फॉर्म डेटा त्याच्या मूळ मूल्यावर परत करण्यासाठी एक बटण.
• प्रस्तुत करणे- सर्व्हरला फॉर्म डेटा पाठवण्यासाठी एक बटण.
• मजकूर- मजकूर फील्ड. कीबोर्ड वापरून वर्ण प्रविष्ट करण्यासाठी डिझाइन केलेले.

डीफॉल्ट मूल्य मजकूर आहे.

VALUE पॅरामीटर

फॉर्म घटक मूल्य परिभाषित करते जे सर्व्हरला पाठवले जाईल किंवा क्लायंट स्क्रिप्ट वापरून प्राप्त केले जाईल. सर्व्हरला "नाव=मूल्य" जोडी पाठविली जाते, जिथे नाव टॅगच्या नाव पॅरामीटरद्वारे निर्दिष्ट केले जाते , आणि मूल्य हे मूल्य पॅरामीटर आहे.

घटक प्रकारावर अवलंबून, मूल्य पॅरामीटर खालील भूमिका बजावते:

• बटणांसाठी (इनपुट प्रकार="button | रीसेट | सबमिट करा") संच मजकूर शिलालेखत्यांच्यावर;
• मजकूर फील्डसाठी (इनपुट प्रकार="पासवर्ड | मजकूर") पूर्वी प्रविष्ट केलेली स्ट्रिंग निर्दिष्ट करते. वापरकर्ता मजकूर मिटवू शकतो आणि त्यांचे स्वतःचे वर्ण प्रविष्ट करू शकतो, परंतु जेव्हा ते फॉर्ममध्ये वापरले जाते बटणे रीसेट करासानुकूल मजकूर साफ केला जातो आणि मूल्य पॅरामीटरमध्ये प्रविष्ट केलेले मूल्य पुनर्संचयित केले जाते;
• चेकबॉक्सेस आणि रेडिओ बटणांसाठी (इनपुट प्रकार="चेकबॉक्स | रेडिओ") प्रत्येक घटकाला अनन्यपणे परिभाषित करते जेणेकरून क्लायंट किंवा सर्व्हर प्रोग्रामवापरकर्त्याने कोणता आयटम निवडला हे स्पष्टपणे निर्धारित करू शकते.

शेवटचे अपडेट: 04/08/2016

एकल-लाइन मजकूर फील्ड इनपुट घटक वापरून तयार केले जाते जेव्हा त्याचे प्रकार गुणधर्म मजकूरावर सेट केले जातात:

तुम्ही अनेक अतिरिक्त विशेषता वापरून मजकूर फील्ड सानुकूलित करू शकता:

dirname: मजकूराची दिशा सेट करते

कमाल लांबी : मजकूर फील्डमध्ये अनुमत वर्णांची कमाल संख्या

पॅटर्न : इनपुट मजकूर जुळला पाहिजे असा नमुना परिभाषित करते

प्लेसहोल्डर : मजकूर बॉक्समध्ये डीफॉल्टनुसार प्रदर्शित केलेला मजकूर सेट करतो

केवळ वाचनीय : मजकूर फील्ड केवळ वाचनीय बनवते

आवश्यक : मजकूर फील्डमध्ये मूल्य असणे आवश्यक आहे असे सूचित करते

आकार : मजकूर फील्डची रुंदी दृश्यमान वर्णांमध्ये सेट करते

मूल्य : मजकूर फील्डमध्ये डीफॉल्ट मूल्य सेट करते

चला काही विशेषता लागू करूया:

या उदाहरणात, दुसरा मजकूर बॉक्स ताबडतोब कमाल लांबी आणि आकार गुणधर्म सेट करतो. या प्रकरणात, आकार - म्हणजे, फील्डच्या दृश्यमान जागेत बसणार्या वर्णांची संख्या अनुमत वर्णांच्या संख्येपेक्षा जास्त आहे. तथापि, आम्ही अद्याप कमाल लांबीपेक्षा अधिक वर्ण प्रविष्ट करू शकणार नाही.

IN या प्रकरणातमूल्य आणि प्लेसहोल्डर विशेषतांमध्ये फरक करणे देखील महत्त्वाचे आहे, जरी दोन्ही फील्डमध्ये दृश्यमान मजकूर सेट करतात. तथापि, प्लेसहोल्डर इनपुटसाठी काही प्रकारचा इशारा किंवा प्रॉम्प्ट सेट करतो, म्हणून ते सहसा चिन्हांकित केले जाते राखाडी. मूल्य फील्डमध्ये प्रविष्ट केलेला डीफॉल्ट मजकूर दर्शविते:

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

मजकूर फील्डच्या गुणधर्मांपैकी, सूची सारख्या विशेषता लक्षात घेण्यासारखे आहे. यात डेटालिस्ट घटकाचा संदर्भ आहे, जो मजकूर फील्डमध्ये प्रविष्ट केल्यावर टूलटिप म्हणून दिसणाऱ्या मूल्यांचा संच परिभाषित करतो. उदाहरणार्थ:

मजकूर फील्डची सूची विशेषता डेटालिस्ट घटकाच्या आयडीकडे निर्देश करते. डेटालिस्ट घटक स्वतः नेस्टेड पर्याय घटक वापरून सूचीतील घटक परिभाषित करतो. आणि जेव्हा तुम्ही मजकूर फील्डमध्ये टाइप करता तेव्हा ही यादी टूलटिप म्हणून दिसते.

शोध फील्ड

शोध फील्ड तयार करण्यासाठी वापरले जाते इनपुट घटक type="search" विशेषता सह. औपचारिकपणे, हे एक साधे मजकूर फील्ड आहे:

पासवर्ड फील्ड

पासवर्ड टाकण्यासाठी, type="password" विशेषता सह इनपुट घटक वापरा. त्याचा विशिष्ट वैशिष्ट्यअसे आहे की प्रविष्ट केलेले वर्ण बिंदूंनी मुखवटा घातलेले आहेत:

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

टीप:या लेखात वर्णन केलेली वैशिष्ट्ये ऍक्सेस वेब ॲप्स किंवा वेब डेटाबेसेसवर लागू होत नाहीत.

या लेखात

फील्ड आकार बदलण्याचा परिणाम

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

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

फील्डमध्ये डेटा असल्यासजेव्हा तुम्ही फील्डचा आकार बदलता तेव्हा, ऍक्सेस फील्डमधील निर्दिष्ट आकारापेक्षा जास्त असलेली कोणतीही मूल्ये ट्रिम करते आणि वर वर्णन केल्याप्रमाणे फील्डमधील नवीन डेटा मूल्यांचा आकार देखील मर्यादित करते.

नंबर फील्डचा आकार बदलत आहे

सल्ला:

कन्स्ट्रक्टर.

परिसरात फील्ड गुणधर्मटॅबवर सामान्य आहेत फील्ड आकार. तुम्ही खाली सूचीबद्ध केलेल्या मूल्यांपैकी एक निवडू शकता.

• बाइट- 0 ते 255 पर्यंत पूर्णांकांसाठी. स्टोरेजसाठी 1 बाइट आवश्यक आहे.

  पूर्णांक- -32,768 ते +32,767 पर्यंतच्या पूर्णांकांसाठी 2 बाइट्स आवश्यक आहेत.

  लांब पूर्णांक- -2 147 483 648 ते +2 147 483 647 पर्यंत पूर्णांकांसाठी. स्टोरेजसाठी 4 बाइट्स आवश्यक आहेत.

  सल्ला:तयार करताना दीर्घ पूर्णांक डेटा प्रकार वापरावा परदेशी कीफील्डला फील्डशी जोडणे प्राथमिक कळडेटा प्रकार "काउंटर" असलेली दुसरी सारणी.

  सिंगल फ्लोटिंग पॉइंट- फ्लोटिंग पॉइंट क्रमांकांसाठी -3.4 x 1038 ते +3.4 x 1038, ज्यात 7 पर्यंत आहेत लक्षणीय अंक. स्टोरेजसाठी 4 बाइट्स आवश्यक आहेत.

  दुहेरी फ्लोटिंग पॉइंट- फ्लोटिंग पॉइंट क्रमांकांसाठी -1.797 x 10308 ते +1.797 x 10308, ज्यामध्ये 15 पर्यंत लक्षणीय अंक आहेत. स्टोरेजसाठी 8 बाइट्स आवश्यक आहेत.

  प्रतिकृती कोड- प्रतिकृतीसाठी आवश्यक असलेल्या GUID साठी.

  टीप: ACCDB फॉरमॅट फायलींसाठी प्रतिकृती समर्थित नाही.

  वास्तविक संख्या - च्या साठी संख्यात्मक मूल्ये-9.999... x 1027 ते +9.999... x 1027. स्टोरेजसाठी 12 बाइट्स आवश्यक आहेत.

मजकूर फील्डचा आकार बदलणे

सल्ला:तुम्ही ज्या फील्डचा आकार बदलू इच्छिता त्यात आधीपासून डेटा असल्यास, तुम्ही तयार करण्याची शिफारस केली जाते बॅकअप प्रततळ

नेव्हिगेशन उपखंडात, क्लिक करा राईट क्लिकतुम्हाला बदलायचे असलेले फील्ड असलेल्या टेबलवर माऊस करा आणि कमांड निवडा कन्स्ट्रक्टर.

टेबल डिझाइन ग्रिडमध्ये, तुम्हाला आकार बदलायचा आहे ते फील्ड निवडा.

परिसरात फील्ड गुणधर्मटॅबवर सामान्य आहेतकृपया सूचित करा नवीन आकारमालमत्ता मूल्य म्हणून फील्ड फील्ड आकार. 1 आणि 255 मधील मूल्य प्रविष्ट करा. ही संख्या निर्धारित करते कमाल रक्कमप्रत्येक मूल्यामध्ये असलेले वर्ण. मोठ्या फील्डसाठी, मेमो डेटा प्रकार वापरा (लाँग टेक्स्ट इन ऍक्सेस 2016).

टीप:मध्ये डेटासाठी मजकूर फील्ड(एक्सेस 2016 मध्ये - "लहान मजकूर") प्रवेश वास्तविक मूल्ये संचयित करण्यासाठी आवश्यकतेपेक्षा जास्त जागा राखून ठेवत नाही. मालमत्ता फील्ड आकारआकार निश्चित करते कमाल मूल्यफील्ड

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

तथापि CSS वैशिष्ट्येआपल्याला आवश्यक असलेली रुंदी आणि उंची निर्दिष्ट करून, आपल्याला HTML मध्ये टेबलचा आकार बदलण्याची परवानगी देते. निष्पक्षपणे सांगायचे तर, हे लक्षात घ्यावे की टेबल विशेषता देखील आपल्याला सेट करण्याची परवानगी देतात आवश्यक आकार. तथापि, मध्ये सध्याआम्ही फक्त CSS बद्दल बोलू.

प्रत्येक टेबलचे स्वतःचे आहे यावर जोर देणे आवश्यक आहे किमान रुंदीआणि किमान उंची, जे त्यातील सामग्रीवर परिणाम करतात. आणि जरी आपण रुंदी आणि उंचीची मूल्ये अगदी लहान सेट केली तरीही काहीही होणार नाही. टेबलच्या बाजू त्यांच्या किमान पेक्षा जास्त नसतील.

टेबलची रुंदी निर्दिष्ट करण्यासाठी तुम्हाला CSS गुणधर्म वापरण्याची आवश्यकता आहे रुंदी, आणि उंची सेट करण्यासाठी तुम्हाला गुणधर्म वापरण्याची आवश्यकता आहे उंची.

एका उदाहरणात असे दिसते खालील प्रकारे.

टेबल (रुंदी: 500px; उंची: 100px;)

ब्राउझरमध्ये परिणाम:

पूर्ण कोड:

टेबल रुंदी आणि उंची मूल्ये म्हणून निर्दिष्ट केले जाऊ शकते परिपूर्ण मूल्य(पिक्सेलमध्ये) आणि सापेक्ष - टक्केवारीत. उदाहरणार्थ, अनुक्रमे 20px आणि 20%.

आपण सारणी परिमाणे सेट करण्यासाठी टक्केवारी वापरल्यास, ते परिमाणांवर आधारित मोजले जातील मूळ घटक. जर आपण आपल्या उदाहरणाबद्दल बोललो तर आम्ही बोलत आहोतब्राउझर विंडोबद्दल.

दुसरा अर्थ आहे - ऑटो. आणि हे विशेष आहे कारण त्याच्या मदतीने, टेबलची रुंदी आणि उंची डीफॉल्टनुसार स्वयंचलितपणे मोजली जाते. सराव मध्ये, हे मूल्य निर्दिष्ट करणे असे दिसते.

रुंदी: स्वयं;

उंची: स्वयं;

आम्ही आणखी एका गोष्टीकडे तुमचे लक्ष वेधू इच्छितो: महत्वाचा मुद्दा. टक्केवारी म्हणून उंची सूचित न करणे चांगले आहे, कारण, नियम म्हणून, या प्रकरणात ते कार्य करणार नाहीत.

वैयक्तिक सेल आणि स्तंभांचे आकार निर्दिष्ट करणे

जर तुम्हाला असे वाटत असेल की ब्राउझरने सेलच्या सामग्रीवर आधारित स्तंभांची रुंदी योग्यरित्या सेट केली नाही, तर तुम्हाला स्वतः सेल आणि स्तंभांचे आकार निर्दिष्ट करण्याचा अधिकार आहे. आणि आता आपण HTML टेबलमध्ये सेलचा आकार कसा बदलायचा याबद्दल बोलू.

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

सेलमध्ये शैली जोडण्यासाठी, तुम्ही दोन पर्यायांपैकी एक वापरू शकता:

1. पेशींना स्वतंत्र वर्गाची नावे द्या. हे असे दिसेल: class="cell-50px"

   आणि त्यानंतर तुम्ही या वर्गांसाठी शैली लागू करा.

2. विशेषता सक्षम करा शैली, ज्यामध्ये आवश्यक CSS कोड लिहा.

सराव मध्ये, दुसरा पर्याय यासारखा दिसेल:

...

तथापि, आम्ही हे लक्षात घेऊ इच्छितो की सेल आकार वैयक्तिकरित्या खूप वेळा बदलणे आवश्यक नाही. नियमानुसार, हे अशा परिस्थितीत केले जाते जेथे टेबल स्तंभांसाठी विशिष्ट रुंदी सेट करणे आवश्यक असते. या प्रकरणात, समस्येचे निराकरण सोपे आहे. तुम्हाला फक्त पहिल्या पंक्तीतील सेल्सची रुंदी निर्दिष्ट करण्याची आवश्यकता आहे.

ब्राउझरमध्ये परिणाम:

टेबलमधील फॉन्ट आकार कसा बदलायचा

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

गु (फॉन्ट-आकार: 30px; )

ह्या वर हा धडासंपतो मी तुम्हाला तुमच्या गृहपाठाचा काळजीपूर्वक विचार करण्यास सुचवतो. फक्त त्याचा काळजीपूर्वक अभ्यास करा आणि त्यावर विचार करा. सर्वांना शुभेच्छा!

नमस्कार, प्रिय वाचकांनो! आज आपण परिमाण कसे सेट करायचे ते पाहू ब्लॉक घटकसह वेब पृष्ठे css वापरूनगुणधर्म आणि सामग्रीचे प्रदर्शन कॉन्फिगर करा जर ते घटकामध्ये बसत नसेल.

रुंदी आणि उंची - सीएसएस मधील घटकांची रुंदी आणि उंची

रुंदी आणि उंची शैली गुणधर्म वापरून, तुम्ही अनुक्रमे ब्लॉक घटकांची रुंदी आणि उंची सेट करू शकता:

रुंदी: स्वयं |<ширина>|वारसा
उंची: स्वयं |<ширина>|वारसा

मध्ये उपलब्ध असलेली कोणतीही मूल्ये तुम्ही वापरू शकता css युनिट्समोजमाप - उदाहरणार्थ, पिक्सेल (px), इंच (इन), बिंदू (pt), इ.

p (रुंदी:200px; उंची:150px)

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

div (रुंदी: 40%;)

स्वयं वेब ब्राउझरवर घटकांच्या आकाराचे नियंत्रण सोडते आणि ते डीफॉल्ट मूल्य आहे. या प्रकरणात, घटकाची परिमाणे अशी असतील की ती त्याच्या सर्व सामग्रीस पूर्णपणे फिट होईल.

चला काही उदाहरणे पाहू.

परिणाम:

या उदाहरणात आम्ही तयार केले div ब्लॉकआणि त्यात मजकूर सह परिच्छेद p घातला. div साठी, आम्ही काटेकोरपणे 300 बाय 300 पिक्सेलचे परिमाण सेट केले. p घटकाची रुंदी आणि उंचीची गुणधर्म मूल्ये ऑटोच्या बरोबरीची आहेत, म्हणून तुम्ही स्क्रीनशॉटमध्ये पाहू शकता की, त्याची रुंदी मूळ घटकाच्या रुंदीइतकी सेट केली आहे आणि त्याची उंची अशी आहे की ती समाविष्ट असलेल्या सर्व मजकुरात बसते. परिच्छेद

आता बदलूया css सेटिंग्जपरिच्छेद p साठी आणि निश्चित परिमाणे सेट करा:

स्तर2 (
पार्श्वभूमी: #eee;
रुंदी: 250px;
}

परिणाम:

तुम्ही बघू शकता, परिच्छेदाची रुंदी अरुंद झाली आहे आणि 250 पिक्सेलच्या बरोबरीची झाली आहे, आणि त्याची उंची वाढली आहे जेणेकरून मजकूर बसेल, कारण उंची पॅरामीटर स्वयं बरोबर राहील.

आता परिच्छेदाची उंची आणि रुंदी टक्केवारीत सेट करूया:

स्तर2 (
पार्श्वभूमी: #eee;
रुंदी: 50%;
उंची: 50%;
}

परिणाम:

तुम्ही चित्रात बघू शकता, p घटकाची रुंदी अर्ध्या रुंदीएवढी झाली आहे div घटक. आणि उंची वाढली आणि div च्या उंचीच्या 75 टक्के इतकी झाली.

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

तुम्ही किमान-रुंदी आणि किमान-उंची विशेषता वापरून किमान रुंदी आणि उंची परिभाषित करू शकता:

किमान-रुंदी:<ширина>
किमान उंची:<высота>

तत्सम शैली विशेषता कमाल-रुंदी आणि कमाल-उंची तुम्हाला कमाल आकार सेट करण्याची परवानगी देतात:

कमाल-रुंदी:<ширина>
कमाल-उंची:<высота>

हे स्पष्ट आहे की उंची आणि रुंदीसाठी कमाल आणि किमान मूल्ये सेट करताना, घटकाची परिमाणे कमाल आणि किमान मूल्यांपेक्षा कमी असू शकत नाहीत.

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

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

उदाहरणार्थ, वर चर्चा केलेल्या उदाहरणांमधून परिच्छेद p चा आकार 100 पिक्सेल पर्यंत कमी करूया:

स्तर2 (
पार्श्वभूमी: #eee;
रुंदी:100px;
उंची: 100px;
}

परिणाम:

तुम्ही बघू शकता, मजकूर परिच्छेदाच्या सीमांच्या पलीकडे गेला आहे आणि तो फारसा छान दिसत नाही. टाळण्यासाठी समान परिस्थितीअस्तित्वात css नियम- ओव्हरफ्लो.

लपलेले (लपलेले, दृश्यमान) किंवा स्क्रोलिंग (स्क्रोल, स्वयं) सामग्रीसाठी ओव्हरफ्लो पॅरामीटर

जेव्हा घटकाची रुंदी आणि उंची दोन्ही मर्यादित असतात तेव्हा सामग्री ओव्हरफ्लो होऊ शकते. चला दोन परिच्छेद पाहू:

पहिला परिच्छेद मजकूर

दुसरा परिच्छेद मजकूर

परिणाम:

परिच्छेदांची रुंदी किंवा उंची निर्दिष्ट केलेली नसल्यामुळे, ब्राउझर स्वयंच्या मूल्याच्या स्वतःच्या आकलनावर आधारित त्यांची स्वतंत्रपणे गणना करतो. परिणामी, परिच्छेदांनी सर्व उपलब्ध जागा रुंदी आणि उंचीमध्ये समाविष्ट केलेल्या सामग्रीनुसार घेतली.

आता पहिल्या परिच्छेदाची रुंदी मर्यादित करूया:

पहिला परिच्छेद मजकूर

दुसरा परिच्छेद मजकूर

परिणाम:

परिच्छेदाची रुंदी अपेक्षितपणे कमी केली गेली आणि संपूर्ण मजकूर सामावून घेण्यासाठी उंची सेट केली गेली.

बरं, आता पहिल्या परिच्छेदाची उंची मर्यादित करूया:

पहिला परिच्छेद मजकूर

दुसरा परिच्छेद मजकूर

परिणामी, असे दिसून आले की मजकूर इतक्या मर्यादित परिच्छेदामध्ये बसत नाही आणि म्हणूनच तो खालच्या शेजाऱ्याच्या क्षेत्रात गेला. त्यानुसार, पहिल्या किंवा दुसऱ्या परिच्छेदातील मजकूर वाचणे व्यावहारिकदृष्ट्या अशक्य आहे. अशा परिस्थितीत सामग्रीचे वर्तन नियंत्रित करणे हे आहे ओव्हरफ्लो नियम:

ओव्हरफ्लो: दृश्यमान|लपलेले|स्क्रोल|ऑटो|इनहेरिट

डीफॉल्टनुसार, ओव्हरफ्लो दृश्यमान वर सेट केले जाते, जे ब्राउझरला कंटेनरमध्ये न बसणारी सामग्री प्रदर्शित करण्यास सांगते. परिणाम वरील उदाहरणात पाहिले जाऊ शकते.

नियम कंटेनरमध्ये बसत नसलेली प्रत्येक गोष्ट लपवतो:

स्क्रोल मूल्य घटकावर अनुलंब आणि क्षैतिज स्क्रोल बार प्रदर्शित करेल जरी सर्व सामग्री फिट असेल:

पहिला परिच्छेद मजकूर

दुसरा परिच्छेद मजकूर

जर तुम्हाला कंटेनरसाठी स्क्रोल बार बनवायचा असेल तर सर्वात लोकप्रिय आणि तार्किक उपाय म्हणजे मूल्य ऑटो. या प्रकरणात, ब्राउझर स्वतःच ठरवेल की त्याने स्क्रोल बार कधी आणि कोणत्या अक्षांवर प्रदर्शित करावा:

पहिला परिच्छेद मजकूर

दुसरा परिच्छेद मजकूर

परिणाम:

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

म्हणून, जर, उदाहरणार्थ, आपल्याला परिच्छेदामध्ये आवश्यक असेल क्षैतिज स्क्रोलिंगकधीही दिसले नाही, आणि उभ्या फक्त आवश्यक तेव्हाच दिसले, नंतर खालील सीएसएस नियम लिहिणे पुरेसे आहे:

p(ओव्हरफ्लो-x:लपलेले;ओव्हरफ्लो-y:ऑटो;)

आणि समस्या दूर होईल.

इतकंच. पुढच्या वेळे पर्यंत. ब्लॉग अद्यतनांची सदस्यता घेण्यास विसरू नका आणि आपण सोशल नेटवर्क बटणे वापरल्यास मी आभारी राहीन.