అంతర్జాలం

ట్యాబ్‌లు మరియు అంతరాన్ని సృష్టించడానికి HTML మరియు CSS ను ఎలా ఉపయోగించాలి

రచయిత: Monica Porter
సృష్టి తేదీ: 13 మార్చి 2021
నవీకరణ తేదీ: 16 మే 2024
Anonim
కేవలం HTML & CSSతో ట్యాబ్‌లను ఎలా సృష్టించాలి
వీడియో: కేవలం HTML & CSSతో ట్యాబ్‌లను ఎలా సృష్టించాలి

విషయము

బ్రౌజర్‌లు HTML లైన్ బ్రేక్‌లను కూల్చివేస్తాయి, కాబట్టి వాటిని సరిగ్గా ఖాళీ చేయడానికి CSS ని ఉపయోగించండి

వైట్ స్పేస్‌ను బ్రౌజర్‌లు నిర్వహించే విధానం మొదట చాలా స్పష్టంగా లేదు, ప్రత్యేకించి వర్డ్ ప్రాసెసింగ్ ప్రోగ్రామ్‌లకు సంబంధించి హైపర్‌టెక్స్ట్ మార్కప్ లాంగ్వేజ్ వైట్ స్పేస్‌ను ఎలా నిర్వహిస్తుందో మీరు పోల్చినట్లయితే. వర్డ్ ప్రాసెసింగ్ సాఫ్ట్‌వేర్‌లో, మీరు పత్రంలో చాలా ఖాళీలు లేదా ట్యాబ్‌లను జోడించవచ్చు మరియు ఆ అంతరం పత్రం యొక్క కంటెంట్ ప్రదర్శనలో ప్రతిబింబిస్తుంది. ఈ WYSIWYG డిజైన్ HTML లేదా వెబ్ పేజీలతో కాదు.

ముద్రణలో అంతరం

వర్డ్ ప్రాసెసింగ్ సాఫ్ట్‌వేర్‌లో, మూడు ప్రాధమిక వైట్‌స్పేస్ అక్షరాలు స్థలం, టాబ్, మరియు క్యారేజ్ రిటర్న్. ఈ అక్షరాలు ప్రతి ఒక్కటి ప్రత్యేకమైన రీతిలో పనిచేస్తాయి, కానీ HTML లో, బ్రౌజర్‌లు అవన్నీ ఒకే విధంగా ఉంటాయి. మీరు మీ HTML మార్కప్‌లో ఒక స్థలం లేదా 100 ఖాళీలను ఉంచినా లేదా ట్యాబ్‌లు మరియు క్యారేజ్ రిటర్న్‌లతో మీ అంతరాన్ని కలిపినా, బ్రౌజర్ ద్వారా పేజీ ఇవ్వబడినప్పుడు ఇవన్నీ ఒకే స్థలానికి సంగ్రహించబడతాయి. వెబ్ డిజైన్ పరిభాషలో, దీనిని అంటారు వైట్ స్పేస్ కూలిపోతుంది. వెబ్ పేజీలో వైట్‌స్పేస్‌ను జోడించడానికి మీరు ఈ విలక్షణమైన స్పేసింగ్ కీలను ఉపయోగించలేరు ఎందుకంటే బ్రౌజర్‌లో రెండర్ చేసినప్పుడు బ్రౌజర్ పదేపదే ఖాళీలను ఒకే స్థలంలో కూల్చివేస్తుంది,


HTML టాబ్‌లు మరియు అంతరాన్ని సృష్టించడానికి CSS ని ఉపయోగించడం

ఈ రోజు వెబ్‌సైట్‌లు నిర్మాణం మరియు శైలి యొక్క విభజనతో నిర్మించబడ్డాయి. పేజీ యొక్క నిర్మాణం HTML చేత నిర్వహించబడుతుంది, అయితే శైలి క్యాస్కేడింగ్ స్టైల్ షీట్లచే నిర్దేశించబడుతుంది. అంతరాన్ని సృష్టించడానికి లేదా ఒక నిర్దిష్ట లేఅవుట్ను సాధించడానికి, HTML కోడ్‌కు అంతరం అక్షరాలను జోడించడానికి బదులుగా CSS వైపు తిరగండి.

వచన నిలువు వరుసలను సృష్టించడానికి మీరు ట్యాబ్‌లను ఉపయోగించడానికి ప్రయత్నిస్తుంటే, బదులుగా ఉపయోగించండి

ఆ కాలమ్ లేఅవుట్ పొందడానికి CSS తో ఉంచబడిన అంశాలు. ఈ స్థానాలు CSS ఫ్లోట్లు, సంపూర్ణ మరియు సాపేక్ష స్థానాలు లేదా ఫ్లెక్స్‌బాక్స్ లేదా CSS గ్రిడ్ వంటి కొత్త CSS లేఅవుట్ పద్ధతుల ద్వారా చేయవచ్చు.

మీరు వేస్తున్న డేటా పట్టిక డేటా అయితే, ఆ డేటాను మీకు కావలసిన విధంగా సమలేఖనం చేయడానికి పట్టికలను ఉపయోగించండి. వెబ్ రూపకల్పనలో పట్టికలు తరచూ చెడ్డ ర్యాప్‌ను పొందుతాయి ఎందుకంటే అవి చాలా సంవత్సరాలు స్వచ్ఛమైన లేఅవుట్ సాధనంగా దుర్వినియోగం చేయబడ్డాయి, అయితే మీ కంటెంట్‌లో వాస్తవంగా పట్టిక డేటా ఉంటే పట్టికలు ఇప్పటికీ ఖచ్చితంగా చెల్లుతాయి.


మార్జిన్స్, పాడింగ్ మరియు టెక్స్ట్-ఇండెంట్

CSS తో అంతరాన్ని సృష్టించడానికి అత్యంత సాధారణ మార్గాలు క్రింది CSS శైలులలో ఒకదాన్ని ఉపయోగించడం:

  • మార్జిన్
  • పాడింగ్
  • టెక్స్ట్-ఇండెంట్

ఉదాహరణకు, కింది CSS తో టాబ్ వంటి పేరా యొక్క మొదటి పంక్తిని ఇండెంట్ చేయండి (ఇది మీ పేరాకు "మొదటి" తరగతి లక్షణాన్ని కలిగి ఉందని ass హిస్తుందని గమనించండి):

p.first {
టెక్స్ట్-ఇండెంట్: 5 ఎమ్;
}

ఈ పేరా ఐదు అక్షరాల గురించి ఇండెంట్ చేస్తుంది.

ఒక మూలకం యొక్క ఎగువ, దిగువ, ఎడమ, లేదా కుడి (లేదా ఆ వైపుల కలయికలు) కు అంతరాన్ని జోడించడానికి CSS లోని మార్జిన్ లేదా పాడింగ్ లక్షణాలను ఉపయోగించండి. CSS వైపు తిరగడం ద్వారా అవసరమైన ఏ విధమైన అంతరాన్ని సాధించండి.

CSS లేకుండా వచనాన్ని ఒకటి కంటే ఎక్కువ ఖాళీగా తరలించడం

మీ వచనం మునుపటి అంశం నుండి ఒకటి కంటే ఎక్కువ స్థలాలకు తరలించబడాలని మీరు కోరుకుంటే, విచ్ఛిన్నం కాని స్థలాన్ని ఉపయోగించండి.


విచ్ఛిన్నం కాని స్థలాన్ని ఉపయోగించడానికి, మీరు జోడించండి మీ HTML మార్కప్‌లో మీకు అవసరమైనన్ని సార్లు.

HTML ఈ విచ్ఛిన్నం కాని ఖాళీలను గౌరవిస్తుంది మరియు వాటిని ఒకే స్థలానికి కుదించదు. ఏదేమైనా, లేఅవుట్ అవసరాలను సాధించడానికి మాత్రమే పత్రానికి అదనపు HTML మార్కప్‌ను జోడిస్తున్నందున ఈ విధానం పేలవమైన అభ్యాసంగా పరిగణించబడుతుంది. ఆచరణీయమైనప్పుడు, కావలసిన లేఅవుట్ ప్రభావాన్ని సాధించడానికి బ్రేకింగ్ కాని ఖాళీలను జోడించడాన్ని నివారించండి మరియు బదులుగా CSS మార్జిన్లు మరియు పాడింగ్ ఉపయోగించండి.

క్రొత్త పోస్ట్లు

క్రొత్త పోస్ట్లు

హోమ్ ఆటోమేషన్‌తో నేను ఎలా ప్రారంభించగలను?
జీవితం

హోమ్ ఆటోమేషన్‌తో నేను ఎలా ప్రారంభించగలను?

చాలా ఎంపికలు అందుబాటులో ఉన్నందున, మీ ఇంటి ఆటోమేషన్ వ్యవస్థను నిర్మించడం ప్రారంభించడానికి ఒక స్థలాన్ని ఎంచుకోవడం చాలా ఎక్కువ అనిపించవచ్చు. చాలా మంది ప్రజలు అంతులేని ప్రశ్నలు మరియు కొన్ని సమాధానాలను ఎద...
విండోస్ 10 ఈథర్నెట్ డ్రైవర్ సమస్యలను ఎలా పరిష్కరించాలి
సాఫ్ట్వేర్

విండోస్ 10 ఈథర్నెట్ డ్రైవర్ సమస్యలను ఎలా పరిష్కరించాలి

వైర్‌లెస్ ఇంటర్నెట్ దాని ప్రయోజనాలను కలిగి ఉంది, కానీ దృ, మైన, వైర్డు ఈథర్నెట్ కనెక్షన్ యొక్క వేగం మరియు విశ్వసనీయతకు ఏదీ సరిపోలలేదు. ఈథర్నెట్ సమస్యల నుండి నిరోధించబడదు. కాబట్టి మీరు విండోస్ 10 లోని ...