కంటెంట్‌ను గుర్తించడానికి మరియు హైలైట్ చేయడానికి HTML పేజీలలో సరిహద్దులు ఉపయోగించబడతాయి. ఒక పేజీలో పుష్కలంగా సమాచారం ఉన్నప్పుడు మరియు మీరు వినియోగదారు దృష్టిని నిర్దిష్ట భాగాలకు ఆకర్షించాలనుకుంటే, ఆ కంటెంట్ చుట్టూ సరిహద్దులను ఉపయోగించండి. CSS లోని సరిహద్దులపై ఈ వ్యాసంలో నేను ఈ క్రింది విషయాలను చర్చిస్తాను:
- సరిహద్దులను ఎప్పుడు ఉపయోగించాలి
- CSS లో సరిహద్దులు
- CSS బోర్డర్ యొక్క లక్షణాలు
- సరిహద్దు లక్షణాల కోసం డిఫాల్ట్ విలువలు
- షార్ట్‌హ్యాండ్‌లో సరిహద్దులను నిర్వచించండి
- CSS లో సరిహద్దులను రూపకల్పన చేసేటప్పుడు గుర్తుంచుకోవలసిన అంశాలు
సరిహద్దులను ఎప్పుడు ఉపయోగించాలి
HTML పేజీలలో సరిహద్దులను నిర్వచించడానికి CSS సరిహద్దు ట్యాగ్‌లను ఉపయోగించడం ప్రామాణిక పద్ధతి:
- ముఖ్యమైన శీర్షికల చుట్టూ
- పోస్ట్‌స్క్రిప్ట్ లేదా ముఖ్యమైన గమనికలను హైలైట్ చేయడానికి
- చిత్రాలు, దృష్టాంతాలు, వ్యక్తుల నుండి కోట్లు, వీడియోలను జతచేయడానికి
- ధర, సమయపాలన లేదా అటువంటి ముఖ్యమైన సమాచారం వైపు దృష్టిని ఆకర్షించడానికి
మీరు చదవాలనుకోవచ్చు CSS సరిహద్దుల గురించి తెలుసుకోవడానికి ముందు.
సమగ్ర CSS ట్యుటోరియల్ కోసం, సందర్శించండి బిగినర్స్ కోసం ఎడురేకా CSS ట్యుటోరియల్ . HTML వెబ్ డిజైన్‌ను పెంచడానికి CSS ఉపయోగించాల్సిన మార్గంలో మీరు అద్భుతమైన హెడ్-అప్ పొందుతారు.
CSS లో సరిహద్దులు
CSS సరిహద్దులను HTML పేజీ యొక్క వివిధ విభాగాలకు కేటాయించవచ్చు, ఇది శీర్షికలు లేదా పేరాగ్రాఫ్లను జతచేయాలి. ఒక ఉదాహరణతో ప్రారంభిద్దాం. ఇక్కడ మేము శీర్షిక చుట్టూ ఒక సరిహద్దును మరియు పేరా టెక్స్ట్ చుట్టూ మరొక సరిహద్దును నిర్వచించాము.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}పేరా చుట్టూ సరిహద్దు!
CSS బోర్డర్ యొక్క లక్షణాలు
CSS సరిహద్దులు వాటికి 3 ప్రధాన లక్షణాలను కలిగి ఉన్నాయి
- శైలి:దిశైలిలక్షణం సరిహద్దు యొక్క నమూనాను నిర్వచిస్తుంది.
- రంగు: CSS రంగులు నిర్వచించిన సెట్ నుండి రంగు ఏదైనా కావచ్చు.
- వెడల్పు: వెడల్పు సరిహద్దు యొక్క మందాన్ని మార్చడానికి, మరింత ప్రముఖంగా చేయడానికి ఉపయోగిస్తారు.
పై ఉదాహరణలో, ఒక సరిహద్దు లక్షణం మాత్రమే నిర్వచించబడిందని మేము చూశాము, అది దాని శైలి. నిర్వచించనప్పుడు ఇతర లక్షణాలు డిఫాల్ట్ విలువలను తీసుకుంటాయి. వ్యాసార్థం అని పిలువబడే మరొక లక్షణం ఉంది, ఇది తక్కువ తరచుగా ఉపయోగించబడుతుంది. సరిహద్దు యొక్క అంచులను గుండ్రంగా చేయడానికి ఇది ఉపయోగించబడుతుంది.
- సరిహద్దు-శైలి గుణం
| శైలి | వివరణ |
| సరిహద్దు-శైలి: ఘన | |
| సరిహద్దు-శైలి: డబుల్ | |
| సరిహద్దు-శైలి: గాడి | |
| సరిహద్దు-శైలి: శిఖరం | |
| సరిహద్దు-శైలి: చొప్పించు | |
| సరిహద్దు-శైలి: ప్రారంభం | |
| సరిహద్దు-శైలి: ఏదీ లేదు | |
| సరిహద్దు-శైలి: దాచబడింది | |
| సరిహద్దు-శైలి: చుక్కల | |
| సరిహద్దు-శైలి: డాష్ చేయబడింది |
‘సరిహద్దు లేదు’ మరియు ‘దాచిన సరిహద్దు’ ఎంపిక కూడా ఉందని మీరు గమనించవచ్చు. డెవలపర్ సరిహద్దును నిర్వచించడాన్ని నివారించవచ్చు, దీన్ని ఎందుకు ‘దాచిన సరిహద్దు’ అని స్పష్టంగా నిర్వచించాలి? పేజీలోని ఇతర అంశాలతో స్థల వినియోగం మరియు అమరిక ప్రయోజనాల కోసం ఇది జరుగుతుంది.
సరిహద్దు శైలులను ఒక మూలకంలో కూడా కలపవచ్చు. ఈ ప్రయోజనం కోసం, 4 వ్యక్తిగత సరిహద్దు వైపులను వేర్వేరు శైలులతో విడిగా నిర్వచించవచ్చు. ఇది 2 విధాలుగా చేయవచ్చు. ఒకే ట్యాగ్‌లో మొత్తం 4 వైపులా నిర్వచించండి. ఈ సందర్భంలో, కౌంట్ టాప్ లైన్ నుండి మొదలై సవ్యదిశలో కదులుతుంది. ప్రత్యామ్నాయంగా, ప్రతి 4 సరిహద్దురేఖలను వ్యక్తిగత ట్యాగ్‌లలో కూడా నిర్వచించవచ్చు. రెండు సందర్భాలు తదుపరి ఉదాహరణలో చూపించబడ్డాయి.
క్రమబద్ధీకరణ శ్రేణులు c ++
| శైలి | వివరణ |
| సరిహద్దు-శైలి: చుక్కల గీత ఘన డబుల్ సరిహద్దు-టాప్-శైలి: చుక్కల సరిహద్దు-కుడి-శైలి: డాష్ చేయబడింది సరిహద్దు-దిగువ-శైలి: ఘన జావాలో అంకెలు మొత్తం సరిహద్దు-ఎడమ-శైలి: డబుల్ |
- సరిహద్దు-రంగు గుణం
సరిహద్దు కోసం రంగు లక్షణాన్ని బహుళ మార్గాల్లో సెట్ చేయవచ్చు. ఇది ఇతర అంశాలకు రంగును సెట్ చేయడానికి సమానంగా ఉంటుంది. ఈ క్రింది పద్ధతుల్లో ఒకదాని ద్వారా రంగులను సెట్ చేయవచ్చు:
- పేరు - “నీలం” వంటి రంగు పేరును పేర్కొనండి. మీరు “బ్లాంచెడ్ ఆల్మండ్” వంటి కొన్ని ఫాన్సీ కలర్ ఎంపికలను కూడా ప్రయత్నించవచ్చు!
- హెక్స్ - “# ff0000” వంటి హెక్స్ విలువను పేర్కొనండి
- RGB - RGB కోడ్‌ను సెట్ చేయండి. ఉదాహరణకు, rgb (255,255,0) అంటే పసుపు.
- అమరిక - “పారదర్శక” లేదా “అపారదర్శక” వంటివి
- సరిహద్దు-వెడల్పు గుణం:
వెడల్పు ఆస్తి, పేరు సూచించినట్లుగా, 4 సరిహద్దు వైపుల మందాన్ని నిర్వచిస్తుంది. ఒక విలువ నిర్వచించబడితే, అది అన్ని వైపులా ఉంటుంది, లేకపోతే వ్యక్తిగత వెడల్పు విలువలను కూడా సెట్ చేయవచ్చు.
వెడల్పు పిక్సెల్స్ (‘పిఎక్స్’), పాయింట్లు (‘పిటి’) లేదా సెంటీమీటర్లలో (‘సెం.మీ’) ఏదైనా ప్రామాణిక యూనిట్‌లో పేర్కొనవచ్చు. ‘మందపాటి’, ‘సన్నని’ మరియు ‘మాధ్యమం’ యొక్క ముందే నిర్వచించిన విలువలను ఉపయోగించి మీరు వెడల్పును కూడా పేర్కొనవచ్చు.
| శైలి | వివరణ |
| సరిహద్దు-వెడల్పు: 10px | |
| సరిహద్దు-వెడల్పు: 0.1 సెం.మీ. | |
| సరిహద్దు-వెడల్పు: మధ్యస్థం |
- సరిహద్దు-వ్యాసార్థం గుణం
వ్యాసార్థాన్ని నిర్వచించే ఉద్దేశ్యం సరిహద్దు కోసం గుండ్రని మూలలను పొందడం. వ్యాసార్థ కారకం గుండ్రని పరిధిని నిర్వచిస్తుంది. పెద్ద విలువ, మూలలు మరింత వక్రంగా మారతాయి. ప్రామాణిక సాధనగా, వ్యాసార్థం విలువలు సరిహద్దు వెడల్పు 1-3 రెట్లు మధ్య ఉంచబడతాయి.
కింది కోడ్ ఉత్పత్తి చేస్తుంది:
సరిహద్దు-వెడల్పు: 10px
సరిహద్దు-వ్యాసార్థం: 30px
సరిహద్దు లక్షణాల కోసం డిఫాల్ట్ విలువలు
తప్పనిసరి లక్షణం మాత్రమే శైలి . శైలి తప్పిపోతే, సరిహద్దు కనిపించదు.
రంగు పేర్కొనకపోతే, అంతర్లీన మూలకం నుండి రంగు డిఫాల్ట్ విలువగా తీసుకోబడుతుంది. ఉదాహరణకు, పేరా యొక్క వచన రంగును ‘నీలం’ అని నిర్వచించినట్లయితే, డిఫాల్ట్ సరిహద్దు-రంగు కూడా నీలం రంగులో ఉంటుంది. ఒకవేళ మూలకానికి కూడా రంగు నిర్వచనం లేకపోతే, డిఫాల్ట్ రంగు ‘నలుపు’.
వెడల్పు కోసం డిఫాల్ట్ విలువ ‘మీడియం’.
షార్ట్‌హ్యాండ్‌లో సరిహద్దులను నిర్వచించండి
కొంతమంది డెవలపర్లు సంక్షిప్త వన్-లైన్ ట్యాగ్‌లో సరిహద్దు లక్షణాలను నిర్వచించడానికి ఇష్టపడతారు. ఈ సంక్షిప్తలిపి ఆకృతి కోడ్ యొక్క పంక్తులను తగ్గించడంలో సహాయపడుతుంది మరియు నిపుణుల డెవలపర్లు ఈ ఆకృతిని ఇష్టపడతారు. సరిహద్దు నిర్వచనం సరళంగా మరియు చాలా ప్రామాణికంగా ఉన్నప్పుడు సంక్షిప్తలిపి ఆకృతిని ఉపయోగించడం సిఫార్సు చేయబడింది. అయితే, మీరు సరిహద్దు యొక్క ప్రతి వైపు వేరే శైలిలో హైలైట్ చేయవలసి వస్తే, మీరు వ్యక్తిగత ట్యాగ్‌లను నిర్వచించే ఆకృతికి కట్టుబడి ఉండాలి.
జావాలో తేదీ మార్పిడికి స్ట్రింగ్
కింది కోడ్ ఉపయోగించబడుతుంది:
సరిహద్దు-శైలి: డాష్ చేయబడింది
అంచు-రంగు: ఆకుపచ్చ
సరిహద్దు-వెడల్పు: 5px
అంచు: గీసిన ఆకుపచ్చ 5 పిక్స్
CSS లో సరిహద్దులను రూపకల్పన చేసేటప్పుడు గుర్తుంచుకోవలసిన అంశాలు
ఒక పేజీలో ఎక్కువ సరిహద్దులను ఉపయోగించవద్దు, ఇది పరధ్యానంగా ఉంటుంది మరియు వినియోగదారు దృష్టి పెట్టడం కష్టమవుతుంది.
సరిహద్దు శైలి మరియు రంగులలో స్థిరత్వాన్ని కొనసాగించడం చాలా ముఖ్యం. ఒక పేజీలోని అదే స్థాయి సోపానక్రమంలోని మూలకాలు ఒకే విధమైన సరిహద్దు శైలి మరియు ఏకరూపత కోసం వెడల్పు కలిగి ఉండాలి. ఉదాహరణకు, ఉంటే పేరా దృ border మైన అంచు మరియు 5px వెడల్పుతో నిర్వచించబడింది, ఈ ఆకృతిని ఇతర అంతటా నిర్వహించండి పేరా వెబ్‌సైట్ రూపకల్పన సమయంలో అంశాలు.
ట్యాగ్ నిర్వచనాల యొక్క ఒక శైలికి కట్టుబడి ఉండండి. కొంతమంది డెవలపర్లు ఒకే విలువకు కేటాయించిన అన్ని విలువలతో సత్వరమార్గం నిర్వచనాలతో సౌకర్యంగా ఉంటారు సరిహద్దు ట్యాగ్. మరికొందరు వెడల్పు, రంగు మరియు శైలి కోసం అన్ని ట్యాగ్‌ల యొక్క స్పష్టమైన జాబితాను ఇష్టపడతారు. సమావేశం ఏమిటంటే, ఒక పేజీలో విస్తృతమైన సరిహద్దు అలంకరణలు అవసరమైనప్పుడు, వ్యక్తిగత ట్యాగ్‌లు విడిగా జాబితా చేయబడతాయి. ఇటువంటి అనుకూలీకరించిన సరిహద్దు నిర్వచనాలను డీబగ్గింగ్ చేసేటప్పుడు ఇది సహాయపడుతుంది. సాధారణ సందర్భాల్లో, సత్వరమార్గం నిర్వచనం మాత్రమే చేస్తుంది.
మీరు CSS సరిహద్దుల్లో వెతుకుతున్న సమాచారాన్ని కనుగొన్నారని ఆశిస్తున్నాము మరియు wఇది, మేము CSS వ్యాసంలో ఈ సరిహద్దుల ముగింపుకు వచ్చాము.
మా చూడండి ఇది బోధకుడు నేతృత్వంలోని ప్రత్యక్ష శిక్షణ మరియు నిజ జీవిత ప్రాజెక్ట్ అనుభవంతో వస్తుంది. ఈ శిక్షణ బ్యాక్ ఎండ్ మరియు ఫ్రంట్ ఎండ్ వెబ్ టెక్నాలజీలతో పనిచేయడానికి మీకు నైపుణ్యాలలో నైపుణ్యం కలిగిస్తుంది. ఇందులో వెబ్ డెవలప్‌మెంట్, j క్వెరీ, కోణీయ, నోడ్జెఎస్, ఎక్స్‌ప్రెస్‌జెఎస్ మరియు మొంగోడిబిపై శిక్షణ ఉంటుంది.
మాకు ప్రశ్న ఉందా? దయచేసి దీనిని 'బోర్డర్ ఇన్ CSS' బ్లాగ్ యొక్క వ్యాఖ్యల విభాగంలో పేర్కొనండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.