CSS జాబితాలను ఉత్తమంగా ఎలా ఉపయోగించాలి?



ఈ వ్యాసం మిమ్మల్ని CSS జాబితాలకు పరిచయం చేస్తుంది మరియు ప్రక్రియలో CSS జాబితా స్టైలింగ్ ప్రదర్శనతో ఎలా పనిచేస్తుందో అర్థం చేసుకోవడానికి మీకు సహాయపడుతుంది.

సంఖ్యా లేదా బుల్లెట్ పాయింట్ల సమితిని చేరుకోవడానికి CSS జాబితాలు చాలా సహాయపడతాయి. రకం, స్థానం, శైలిని ఎలా నియంత్రించాలో ఈ వ్యాసం మీకు చూపుతుంది CSS ఉపయోగించి. క్రింది పాయింటర్లు ఇక్కడ కవర్ చేయబడతాయి,

కాబట్టి అప్పుడు ప్రారంభిద్దాం,





CSS జాబితాలు

CSS గుణాలు

ఐదు వేర్వేరు CSS లక్షణాలు ఉన్నాయి, దీనిలో మీరు జాబితాలను నియంత్రించడానికి దీన్ని ఉపయోగించవచ్చు:

  • జాబితా-శైలి-రకం: ఇది ఆకారం లేదా మార్కర్ యొక్క రూపాన్ని నియంత్రించడానికి అనుమతిస్తుంది.
  • జాబితా-శైలి-స్థానం: ఇది రెండవ పంక్తికి చుట్టడానికి పొడవైన బిందువు అవసరమని పేర్కొంటుంది లేదా మొదటి పంక్తితో సమలేఖనం చేయాలి లేదా మార్కర్‌తో ప్రారంభించాలి.
  • జాబితా-శైలి-చిత్రం: ఇది బుల్లెట్లు లేదా సంఖ్యా బిందువులకు బదులుగా మార్కర్ కోసం ఒక చిత్రాన్ని జోడించాలి లేదా మరింత ఆకర్షణీయంగా మార్చాలని నిర్దేశిస్తుంది.
  • జాబితా-శైలి: ఇది మునుపటి లక్షణాలకు సంక్షిప్తలిపిని చూపుతుంది.
  • మార్కర్-ఆఫ్‌సెట్: ఇది మార్కర్ మరియు జాబితాలో నమోదు చేసిన వచనం మధ్య దూరాన్ని నిర్దేశిస్తుంది.

ఇక్కడ సాధారణంగా ఉపయోగించే జాబితా: జాబితా-శైలి-రకం మరియు జాబితా-శైలి-స్థానం. ఇది క్రింద వివరించబడింది



CSS జాబితాలపై ఈ కథనంతో ముందుకు సాగుతోంది

జాబితా-శైలి-రకం ఆస్తి

జాబితా-శైలి-రకం ఆస్తిలో, క్రమం లేని జాబితా కేసులో బుల్లెట్ పాయింట్ల ఆకారం మరియు శైలిని లేదా మార్కర్‌ను నియంత్రించడానికి ఇది మిమ్మల్ని అనుమతిస్తుంది. ఆర్డర్ చేసిన జాబితా కేసులో ఇది అక్షరాల సంఖ్య.

క్రమం లేని జాబితాల కోసం సూచించే పట్టిక క్రింద:



విలువ వివరణ
ఏదీ లేదు NA
డిస్క్ ఇది సర్కిల్‌లో నిండి ఉంది. (డిఫాల్ట్ ఒకటి)
వృత్తం ఇది ఖాళీ వృత్తం.
స్క్వేర్ ఇది చదరపులో నిండి ఉంటుంది.

ఆదేశించిన జాబితాల కోసం ప్రాతినిధ్యం వహిస్తున్న పట్టిక క్రింద:

విలువ వివరణ ఉదాహరణ
దశాంశం ఇది ఒక సంఖ్య1,4,3
దశాంశ ప్రముఖ సున్నా అసలు సంఖ్యకు ముందు 001, 04, 03
దిగువ-ఆల్ఫా ఇది చిన్న అక్షర అక్షరాలు.ఎ బి సి డి
ఎగువ-ఆల్ఫా ఇది పెద్ద అక్షర అక్షరాలు.ఎ బి సి డి
దిగువ-రోమన్ ఇది చిన్న రోమన్ సంఖ్యలు.i, ii, iii, iv, v
ఎగువ-రోమన్ ఇది పెద్ద రోమన్ సంఖ్యలు.I, II, III, IV, V.
దిగువ-గ్రీకు మార్కర్ తక్కువ గ్రీకులో ఉన్నాడుఆల్ఫా, గామా
దిగువ-లాటిన్ మార్కర్ తక్కువ-లాటిన్లో ఉందిఎ బి సి డి
ఎగువ-లాటిన్ మార్కర్ ఎగువ-లాటిన్లో ఉందిఎ బి సి డి

CSS జాబితాలపై ఈ కథనంతో ముందుకు సాగుతోంది

CSS జాబితాలు: నమూనా ప్రోగ్రామ్

 
  • జావా
  • పైథాన్
  • కోణీయ
  • జావా
  • పైథాన్
  • కోణీయ
  1. జావా
  2. పైథాన్
  3. కోణీయ
  1. జావా
  2. పైథాన్
  3. కోణీయ
  1. జావా
  2. పైథాన్
  3. కోణీయ

అవుట్పుట్

అవుట్పుట్ - CSS జాబితాలు - ఎడురేకా

CSS జాబితాలపై ఈ కథనంతో ముందుకు సాగుతోంది

జాబితా-శైలి-స్థానం ఆస్తి

జాబితా-శైలి-స్థానం ఆస్తిలో మార్కర్ విలువలు

జాబితా-శైలి-స్థాన ఆస్తిలో, బుల్లెట్ పాయింట్లను కలిగి ఉన్న పెట్టె లోపల లేదా వెలుపల మార్కర్ కనిపించాలని చూపిస్తుంది. ఇది రెండు విలువలలో ఒకదాన్ని కలిగి ఉంటుంది:

విలువ వివరణ
ఏదీ లేదు NA
లోపల ఈ సందర్భంలో టెక్స్ట్ రెండవ పంక్తిలో వెళితే, టెక్స్ట్ మార్కర్ క్రింద చుట్టబడుతుంది. జాబితాలు వెలుపల ఒక వేల్ ఉంటే టెక్స్ట్ ఎక్కడ ప్రారంభమైందో కూడా ఇది చూపిస్తుంది.
బయట ఈ సందర్భంలో టెక్స్ట్ రెండవ పంక్తిలోకి వెళితే, టెక్స్ట్ మొదటి పంక్తి ప్రారంభంతో సమలేఖనం చేయబడుతుంది.

ఉదాహరణ:

 
  • గణితం
  • సాంఘిక శాస్త్రం
  • ఫిజిక్స్
  • గణితం
  • సాంఘిక శాస్త్రం
  • ఫిజిక్స్
  1. గణితం
  2. సాంఘిక శాస్త్రం
  3. ఫిజిక్స్
  1. గణితం
  2. సాంఘిక శాస్త్రం
  3. ఫిజిక్స్

అవుట్పుట్

ఇది CSS జాబితాలపై ఈ వ్యాసం చివరకి తీసుకువస్తుంది.

లూప్ కోసం ఉపయోగించి జావాలోని సంఖ్య యొక్క అంకెలు

మా చూడండి ఇది బోధకుడు నేతృత్వంలోని ప్రత్యక్ష శిక్షణ మరియు నిజ జీవిత ప్రాజెక్ట్ అనుభవంతో వస్తుంది. ఈ శిక్షణ బ్యాక్ ఎండ్ మరియు ఫ్రంట్ ఎండ్ వెబ్ టెక్నాలజీలతో పనిచేయడానికి మీకు నైపుణ్యాలలో నైపుణ్యం కలిగిస్తుంది. ఇందులో వెబ్ డెవలప్‌మెంట్, j క్వెరీ, కోణీయ, నోడ్జెఎస్, ఎక్స్‌ప్రెస్‌జెఎస్ మరియు మొంగోడిబిపై శిక్షణ ఉంటుంది.

మాకు ప్రశ్న ఉందా? దయచేసి వ్యాసం యొక్క వ్యాఖ్యల విభాగంలో దీనిని ప్రస్తావించండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.